From 588a624546ee932e2ccf634e1e3bd20087e61b2c Mon Sep 17 00:00:00 2001 From: Alex Xu Date: Sat, 27 Jul 2013 20:49:35 -0400 Subject: fix various persistent-related bugs --- www/css/index.css | 8 ++-- www/js/api.js | 27 ++++++----- www/js/html5ks.js | 136 +++++++++++++++++++++++++++++++----------------------- www/js/menu.js | 31 ++++++++++--- 4 files changed, 122 insertions(+), 80 deletions(-) diff --git a/www/css/index.css b/www/css/index.css index 7b671c2..5b12d77 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -28,7 +28,7 @@ body { font: 22px/27px Playtime, sans-serif; } h2 { - font: 20px/28px Playtime; /* yes, h2 has *smaller* font */ + font: 20px/24px Playtime; /* yes, h2 has *smaller* font */ font-weight: bold; } @@ -106,15 +106,15 @@ html.no-js #gotit { -webkit-backface-visibility: hidden; backface-visibility: hidden; } -#container, #vid.scale { +#container, #vid { top: 50%; left: 50%; -} -#container { width: 800px; height: 600px; margin-top: -300px; margin-left: -400px; +} +#container { overflow: hidden; } #show img { diff --git a/www/js/api.js b/www/js/api.js index 43692cf..295b472 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -15,13 +15,17 @@ window.html5ks.api = { var deferred = when.defer(), audio = html5ks.elements.audio[channel], step = (target - audio.volume) / (delay * 20); - var f = setInterval(function () { - // clamp new volume 0-1 - audio.volume = Math.min(Math.max(audio.volume + step, 0), 1); - if (audio.volume === 0 || audio.volume === 1) { - clearInterval(f); - } - }, 50); + if (!delay) { + audio.volume = target; + } else { + var f = setInterval(function () { + // clamp new volume 0-1 + audio.volume = Math.min(Math.max(audio.volume + step, 0), 1); + if (audio.volume === 0 || audio.volume === 1) { + clearInterval(f); + } + }, 50); + } deferred.resolve(); return deferred.promise; }, @@ -36,7 +40,7 @@ window.html5ks.api = { html5ks.elements.audio[channel] = audio; audio.src = "dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]); audio.load(); - var volume = html5ks.persistent.settings[channel + "Volume"]; + var volume = html5ks.persistent[channel + "Volume"]; audio.volume = fade ? 0 : volume; audio.play(); audio.onplaying = function () { @@ -86,6 +90,7 @@ window.html5ks.api = { video.load(); video.style.display = "block"; + video.volume = html5ks.persistent.musicVolume; video.play(); var done = function () { video.style.display = "none"; @@ -119,7 +124,7 @@ window.html5ks.api = { iscene: function (target, is_h, is_end) { var deferred = when.defer(), - label = html5ks.data.script[html5ks.persistent.settings.language + "_" + target], + label = html5ks.data.script[html5ks.persistent.language + "_" + target], i = 0; (function run(ret) { if (label[i]) { @@ -252,7 +257,7 @@ window.html5ks.api = { image = {image: image}; } var src = ""; - if (html5ks.persistent.settings.useWebP) { + if (html5ks.persistent.useWebP) { src = image.image.replace(/\.[a-z]+$/, ".webp"); } else { src = image.image; @@ -383,7 +388,7 @@ window.html5ks.api = { if (html5ks.state.skip || str.indexOf("{nw}") > -1) { html5ks.next(); } else if (html5ks.state.auto) { - setTimeout(html5ks.next, 1000 + html5ks.persistent.settings.autospeed * text.length); + setTimeout(html5ks.next, 1000 + html5ks.persistent.autospeed * text.length); } } return deferred.promise; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 0c2c1f7..42542fd 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -3,9 +3,9 @@ window.html5ks = { data: { script: {} }, - persistent: { - seen_scenes: {}, - settings: { + persistent: {}, + init: function () { + var defaultPersistent = { fade: 100, gotit: false, hdisable: false, @@ -20,6 +20,22 @@ window.html5ks = { musicVolume: 1, sfxVolume: 1, language: "en" + }; + var loaded = localStorage.persistent ? JSON.parse(localStorage.persistent) : {}; + for (var k in defaultPersistent) { + (function () { + var v = typeof loaded[k] === "undefined" ? defaultPersistent[k] : loaded[k]; + Object.defineProperty(html5ks.persistent, k, { + get: function () { + return v; + }, + set: function (value) { + v = value; + localStorage.persistent = JSON.stringify(html5ks.persistent); + }, + enumerable: true + }); + }()); } }, store: { @@ -53,18 +69,9 @@ window.html5ks = { show: document.getElementById("show") }; }, - load: function () { - if (localStorage.persistent) { - this.persistent = JSON.parse(localStorage.persistent); - this.loaded = true; - } - }, - save: function () { - localStorage.persistent = JSON.stringify(this.persistent); - }, scale: function () { - if (html5ks.persistent.settings.scaleAll) { - var newScale = 1; + var newScale = 1; + if (html5ks.persistent.scaleAll) { var height = document.documentElement.clientHeight, width = document.documentElement.clientWidth; if (height / width <= 0.75) { // widescreen @@ -72,39 +79,54 @@ window.html5ks = { } else { newScale = width / 800; } + } - var container = html5ks.elements.container; - container.style.webkitTransform = "scale(" + newScale + ")"; - container.style.mozTransform = "scale(" + newScale + ")"; - container.style.transform = "scale(" + newScale + ")"; - if (container.className.indexOf("scale") === -1) { - container.className += " scale"; - } - - var applyScale = function (el, scale) { - el.style.height = scale * 600 + "px"; - el.style.marginTop = "-" + scale * 300 + "px"; - el.style.width = scale * 800 + "px"; - el.style.marginLeft = "-" + scale * 400 + "px"; - if (el.className.indexOf("scale") === -1) { - el.className += " scale"; - } - }; + var container = html5ks.elements.container; + container.style.webkitTransform = "scale(" + newScale + ")"; + container.style.mozTransform = "scale(" + newScale + ")"; + container.style.transform = "scale(" + newScale + ")"; + if (container.className.indexOf("scale") === -1) { + container.className += " scale"; + } - if (html5ks.persistent.settings.scaleVideo) { - applyScale(html5ks.elements.video, newScale); + var applyScale = function (el, scale) { + el.style.height = scale * 600 + "px"; + el.style.marginTop = "-" + scale * 300 + "px"; + el.style.width = scale * 800 + "px"; + el.style.marginLeft = "-" + scale * 400 + "px"; + if (el.className.indexOf("scale") === -1) { + el.className += " scale"; } + }; + + if (html5ks.persistent.scaleVideo) { + applyScale(html5ks.elements.video, newScale); } }, - fullscreen: function () { - var all = html5ks.elements.all; - if (all.requestFullscreen) { - all.requestFullscreen(); - } else if (all.mozRequestFullScreen) { - all.mozRequestFullScreen(); - } else if (all.webkitRequestFullscreen) { - all.webkitRequestFullscreen(); + fullscreen: function (onoff) { + if (onoff !== false) { + var all = html5ks.elements.all; + if (all.requestFullscreen) { + all.requestFullscreen(); + } else if (all.mozRequestFullScreen) { + all.mozRequestFullScreen(); + } else if (all.webkitRequestFullscreen) { + all.webkitRequestFullscreen(); + } else { + return false; + } + } else { + if (document.requestFullscreen) { + document.requestFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullscreen) { + document.webkitCancelFullscreen(); + } else { + return false; + } } + return true; }, initEvents: function () { window.onresize = html5ks.scale; @@ -114,22 +136,31 @@ window.html5ks = { window.addEventListener("dragstart", function (e) { e.preventDefault(); }, false); - if (html5ks.persistent.settings.fullscreen) { + if (html5ks.persistent.fullscreen) { window.addEventListener("click", function click() { window.removeEventListener("click", click, false); html5ks.fullscreen(); }, false); } + var fullscreenchange = function () { + if (!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement)) { + html5ks.persistent.fullscreen = false; + document.getElementById("fullscreen").checked = false; + } + }; + document.addEventListener("mozfullscreenchange", fullscreenchange, false); + document.addEventListener("webkitfullscreenchange", fullscreenchange, false); + document.addEventListener("fullscreenchange", fullscreenchange, false); }, warnUnsupported: function () { - if (!html5ks.persistent.settings.gotit) { + if (!html5ks.persistent.gotit) { var warn = document.getElementById("warn-container"); document.getElementById("gotit").addEventListener("mouseup", function () { warn.style.mozAnimation = "0.5s dissolveout"; warn.style.webkitAnimation = "0.5s dissolveout"; warn.style.animation = "0.5s dissolveout"; warn.style.opacity = 0; - html5ks.persistent.settings.gotit = true; + html5ks.persistent.gotit = true; html5ks.start(); }, false); var warns = document.getElementById("warns").children; @@ -146,7 +177,6 @@ window.html5ks = { }, onload: function () { this.initElements(); - this.load(); this.scale(); this.initEvents(); if (!this.warnUnsupported()) { @@ -154,23 +184,13 @@ window.html5ks = { } this.api.init(); this.menu.init(); - if (this.persistent.settings.fullscreen) { + if (this.persistent.fullscreen) { document.body.addEventListener("click", function onclick() { this.removeEventListener("click", onclick, false); html5ks.fullscreen(); }, false); } }, - winload: function () { - if (!this.loaded) { - this.persistent.settings.useWebP = Modernizr.webp; - } - if (!Modernizr.webp && this.persistent.settings.useWebP) { - var webpjs = document.createElement("script"); - webpjs.src = "js/webpjs-0.0.2.min.js"; - document.head.appendChild(webpjs); - } - }, start: function () { this.fetch("script").then(function () { html5ks.api.movie_cutscene("4ls", true).then(function () { @@ -214,9 +234,7 @@ window.html5ks = { return deferred.promise; } }; +html5ks.init(); document.addEventListener("DOMContentLoaded", function () { html5ks.onload(); }, false); -window.addEventListener("onload", function () { - html5ks.winload(); -}, false); diff --git a/www/js/menu.js b/www/js/menu.js index cb29675..1a3e712 100644 --- a/www/js/menu.js +++ b/www/js/menu.js @@ -37,25 +37,44 @@ initOptions: function () { var options = document.getElementsByClassName("option"), - values = html5ks.persistent.settings; + values = html5ks.persistent; - options[0].parentNode.parentNode.addEventListener("change", function (e) { + if (!html5ks.persistent.scaleAll) { + document.getElementById("scaleVideo").parentNode.className += " button-disabled"; + } + + var change = function (e) { var target = e.target; - values[target.id] = typeof target.checked !== "undefined" ? target.checked : target.value; + values[target.id] = target.type === "checkbox" ? target.checked : target.value; switch (target.id) { case "fullscreen": - html5ks.fullscreen(); + if (target.checked) { + html5ks.fullscreen(); + } else { + html5ks.fullscreen(false); + } break; case "scaleAll": + var scaleVideo = document.getElementById("scaleVideo"); + if (!target.checked) { + scaleVideo.checked = false; + scaleVideo.parentNode.className += " button-disabled"; + } else { + scaleVideo.checked = true; + scaleVideo.parentNode.className = scaleVideo.parentNode.className.replace("button-disabled", ""); + } case "scaleVideo": html5ks.scale(); break; case "musicVolume": case "sfxVolume": - html5ks.elements.audio[target.id.replace("Volume", "")].volume = target.value; + html5ks.api.set_volume(target.value, 0, target.id.replace("Volume", "")) break; } - }, false); + }; + + options[0].parentNode.parentNode.addEventListener("change", change, false); + options[0].parentNode.parentNode.addEventListener("input", change, false); for (var i = options.length - 1; i >= 0; i--) { var option = options[i]; switch (option.type) { -- cgit v1.2.3-54-g00ecf