diff options
| -rw-r--r-- | .jshintrc | 1 | ||||
| -rw-r--r-- | Makefile | 3 | ||||
| -rw-r--r-- | www/css/index.css | 6 | ||||
| -rw-r--r-- | www/js/api.js | 7 | ||||
| -rw-r--r-- | www/js/html5ks.js | 20 |
5 files changed, 35 insertions, 2 deletions
@@ -5,6 +5,7 @@ "globals": { "FastClick": false, "Modernizr": false, + "Spinner": false, "html5ks": false, "when": false } @@ -123,7 +123,7 @@ $(DUMP)/ui/ctc_anim.webp: $(CTC_ANIM_TMP_WEBP) # === JS === MYJS := www/js/html5ks.js www/js/menu.js www/js/api.js www/js/characters.js www/js/imachine.js www/js/i18n.js -JSLIBS := www/js/lib/when/when.js www/js/lib/fastclick/lib/fastclick.js www/js/lib/modernizr-build.min.js +JSLIBS := www/js/lib/when/when.js www/js/lib/fastclick/lib/fastclick.js www/js/lib/modernizr-build.min.js www/js/lib/spin.js/spin.js JSDATA := www/js/play.js www/js/images.js JS := $(JSLIBS) $(MYJS) $(JSDATA) @@ -147,6 +147,7 @@ space: $(RM) www/js/all.min.js www/js/all.min.js.map watch: + $(MAKE) while inotifywait -r -e modify,delete,move --exclude="^\./\.git" --exclude="\.swp.?$$" .; do \ $(MAKE); \ done diff --git a/www/css/index.css b/www/css/index.css index 66f0b32..fde07dc 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -336,3 +336,9 @@ input[type="checkbox"]:checked + span:before { 75% { opacity: 1; } 100% { opacity: 0; } } + +.spinner { + opacity: 0; + -webkit-transition: opacity 2s; + transition: opacity 2s; +} diff --git a/www/js/api.js b/www/js/api.js index 225cf38..0dd7951 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -1,3 +1,4 @@ +"use strict"; window.html5ks.api = { init: function () { var chrs = html5ks.data.characters; @@ -48,10 +49,13 @@ window.html5ks.api = { return false; }; + html5ks.spin(1); + _nextType(); el.oncanplaythrough = function () { el.play(); + html5ks.spin(-1); }; el.onerror = function (e) { @@ -260,6 +264,7 @@ window.html5ks.api = { var lookup = document.getElementById(name), el = lookup || document.createElement("img"); if (!location && !lookup) location = "center"; + html5ks.spin(1); el.onload = function () { if (location) { // calculate position @@ -273,10 +278,12 @@ window.html5ks.api = { } el.style.display = "block"; } + html5ks.spin(-1); deferred.resolve(); }; el.onerror = function () { el.parentNode.removeChild(el); + html5ks.spin(-1); deferred.resolve(); }; var nom = name; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 1f52c52..40765e1 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -77,8 +77,26 @@ window.html5ks = { nvlsay: document.getElementById("nvlsay"), nvlctc: document.getElementById("nvlctc"), choices: document.getElementById("choices"), - show: document.getElementById("show") + show: document.getElementById("show"), }; + this.elements.spinner = new Spinner({ + color: '#CC7C2A', + hwaccel: true, + length: 30, + lines: 15, + radius: 60, + width: 15 + }).spin(this.elements.container).el; + }, + _spinners: 0, + _spintm: null, + spin: function (mod) { + clearTimeout(this._spintm); + this._spintm = setTimeout(function () { + html5ks.elements.spinner.style.opacity = html5ks._spinners === 0 ? 0 : 1; + }, 1000); + this._spinners += mod; + console.assert(this._spinners >= 0); }, scale: function () { var newScale = 1; |