summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.jshintrc1
-rw-r--r--Makefile3
-rw-r--r--www/css/index.css6
-rw-r--r--www/js/api.js7
-rw-r--r--www/js/html5ks.js20
5 files changed, 35 insertions, 2 deletions
diff --git a/.jshintrc b/.jshintrc
index 35daae7..36e1267 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -5,6 +5,7 @@
"globals": {
"FastClick": false,
"Modernizr": false,
+ "Spinner": false,
"html5ks": false,
"when": false
}
diff --git a/Makefile b/Makefile
index 66871e5..fe52e4d 100644
--- a/Makefile
+++ b/Makefile
@@ -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;