From f5ccc58a9ad9b2e5c65806bc2c52217e8e3fff68 Mon Sep 17 00:00:00 2001
From: Alex Xu <alex_y_xu@yahoo.ca>
Date: Fri, 14 Feb 2014 08:05:27 -0500
Subject: add spinner

---
 .jshintrc         |  1 +
 Makefile          |  3 ++-
 www/css/index.css |  6 ++++++
 www/js/api.js     |  7 +++++++
 www/js/html5ks.js | 20 +++++++++++++++++++-
 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;
-- 
cgit v1.2.3-70-g09d2