From 5407f77a593360aa1d48ad5935c393a8f137efaf Mon Sep 17 00:00:00 2001 From: Alex Xu Date: Fri, 2 Aug 2013 21:46:32 -0400 Subject: add context menu binding code, fix misc. bugs --- www/js/api.js | 1 + www/js/html5ks.js | 21 +++++----- www/js/menu.js | 116 +++++++++++++++++++++++++++++++++++++++++------------- 3 files changed, 98 insertions(+), 40 deletions(-) (limited to 'www/js') diff --git a/www/js/api.js b/www/js/api.js index 316c9a6..4c5a48f 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -124,6 +124,7 @@ window.html5ks.api = { iscene: function (target, is_h, is_end) { + html5ks.state.status = "scene"; var deferred = when.defer(), label = html5ks.data.script[html5ks.persistent.language + "_" + target], i = 0; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 4f38a42..4f54844 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -133,19 +133,16 @@ window.html5ks = { initEvents: function () { window.onresize = html5ks.scale; this.elements.container.addEventListener("mouseup", function (e) { - switch (e.button) { - case 0: - html5ks.next(); - break; - case 1: - html5ks.menu.showImage(); - break; + if (html5ks.state.status === "scene") { + switch (e.button) { + case 0: + html5ks.next(); + break; + case 1: + html5ks.menu.showImage(); + break; + } } - e.preventDefault(); - }, false); - this.elements.container.addEventListener("contextmenu", function (e) { - html5ks.menu.context(); - e.preventDefault(); }, false); window.addEventListener("dragstart", function (e) { e.preventDefault(); diff --git a/www/js/menu.js b/www/js/menu.js index c39f037..c8e9bd4 100644 --- a/www/js/menu.js +++ b/www/js/menu.js @@ -9,6 +9,7 @@ html5ks.api.play("music", "music_menus"); html5ks.api.show("url", "ui/main/bg-main.png"); this.elements.mainMenu.style.display = "block"; + html5ks.state.status = "menu"; }, activeDialog: null, @@ -17,6 +18,8 @@ this.activeDialog = this.elements.dialog[name]; this.activeDialog.style.display = "block"; this.elements.dialogs.style.display = "block"; + this.elements.context.style.display = "none"; + html5ks.elements.gray.style.display = "block"; }, initElements: function () { @@ -28,12 +31,11 @@ }, mainMenu: document.getElementById("main-menu"), main: { - start: document.getElementById("start"), - optionsButton: document.getElementById("options-button"), + start: document.getElementById("start") }, context: document.getElementById("context"), contextMenu: document.getElementById("context-menu"), - contextInfo: document.getElementById("context-info"), + contextInfo: document.getElementById("context-info") }; }, @@ -72,8 +74,82 @@ options[0].parentNode.parentNode.addEventListener("change", change, false); options[0].parentNode.parentNode.addEventListener("input", change, false); - this.elements.main.optionsButton.addEventListener("click", function () { - html5ks.menu.dialog("options"); + var optionsButton = document.getElementsByClassName("options-button"); + + for (var i = optionsButton.length - 1; i >= 0; i--) { + optionsButton[i].addEventListener("click", function (e) { + html5ks.menu.dialog("options"); + e.stopPropagation(); + }, false); + } + + html5ks.elements.container.addEventListener("contextmenu", function (e) { + switch (html5ks.state.status) { + case "scene": + case "context": + html5ks.state.skip = false; + html5ks.state.auto = false; + this.context(); + } + e.preventDefault(); + }.bind(this), false); + + this.elements.dialog.return.addEventListener("click", function (e) { + html5ks.menu.activeDialog.style.display = "none"; + html5ks.menu.activeDialog = null; + html5ks.menu.elements.dialogs.style.display = "none"; + if (html5ks.state.status === "context") { + html5ks.menu.context(true); + } else { + html5ks.elements.gray.style.display = "none"; + } + e.stopPropagation(); + }, false); + + ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) { + if (navigator.userAgent.indexOf(ua) > -1) { + var quit = document.getElementsByClassName("quit"); + for (var i = quit.length - 1; i >= 0; i++) { + quit[i].className = quit.className.replace("disabled", ""); + quit[i].addEventListener("click", function () { + window.close(); + top.open('','_self',''); + top.close(); + }, false); + } + return false; + } + }, this); + + document.getElementById("context-return").addEventListener("click", function () { + html5ks.menu.context(false); + }, false); + + document.getElementById("show-image").addEventListener("click", function () { + html5ks.menu.context(false); + html5ks.elements.window.style.display = "none"; + html5ks.elements.container.addEventListener("click", function click() { + this.removeEventListener("click", click, true); + html5ks.menu.context(true); + }, true); + }, false); + + document.getElementById("skip-mode").addEventListener("click", function () { + html5ks.menu.context(false); + html5ks.state.skip = true; + html5ks.next(); + }, false); + + document.getElementById("auto-mode").addEventListener("click", function () { + html5ks.menu.context(false); + html5ks.state.auto = true; + html5ks.next(); + }, false); + + document.getElementById("goto-main-menu").addEventListener("click", function () { + html5ks.next = function () {}; + html5ks.menu.context(false); + html5ks.menu.mainMenu(); }, false); }, @@ -116,42 +192,26 @@ start.className = start.className.replace("disabled", ""); this._imachine_loaded = true; }.bind(this)); - - this.elements.dialog.return.addEventListener("click", function () { - html5ks.menu.activeDialog.style.display = "none"; - html5ks.menu.elements.dialogs.style.display = "none"; - }, false); - - ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) { - if (navigator.userAgent.indexOf(ua) > -1) { - var quit = document.getElementsByClassName("quit"); - for (var i = quit.length - 1; i >= 0; i++) { - quit[i].className = quit.className.replace("disabled", ""); - quit[i].addEventListener("click", function () { - window.close(); - top.open('','_self',''); - top.close(); - }, false); - } - return false; - } - }, this); }, - context: function (show) { + context: function (show, transitional) { switch (show) { case true: + html5ks.state.status = "context"; html5ks.elements.gray.style.display = "block"; html5ks.elements.window.style.display = "none"; this.elements.context.style.display = "block"; break; case false: + html5ks.state.status = "scene"; html5ks.elements.gray.style.display = "none"; - html5ks.elements.window.style.display = "block"; + if (html5ks.state.status === "scene") { + html5ks.elements.window.style.display = "block"; + } this.elements.context.style.display = "none"; break; default: - this.context(html5ks.elements.gray.style.display !== "block"); + this.context(this.elements.context.style.display !== "block"); } } }; -- cgit v1.2.3-54-g00ecf