Merge branch 'master' of https://github.com/Pathgather/please-wait

build/please-wait.js

@@ -1,5 +1,5 @@
 /**
-* Please Wait
+* PleaseWait
 * Display a nice loading screen while your app loads
 
 * @author Pathgather <[email protected]>
@@ -70,14 +70,16 @@
       backgroundColor: null,
       logo: null,
       loadingHtml: null,
-      template: "<div class='pg-loading-inner'>\n  <div class='pg-loading-center-outer'>\n    <div class='pg-loading-center-middle'>\n      <h1 class='pg-loading-logo-header'>\n        <img class='pg-loading-logo'></img>\n      </h1>\n      <div class='pg-loading-html'>\n      </div>\n    </div>\n  </div>\n</div>"
+      template: "<div class='pg-loading-inner'>\n  <div class='pg-loading-center-outer'>\n    <div class='pg-loading-center-middle'>\n      <h1 class='pg-loading-logo-header'>\n        <img class='pg-loading-logo'></img>\n      </h1>\n      <div class='pg-loading-html'>\n      </div>\n    </div>\n  </div>\n</div>",
+      onLoadedCallback: null
     };
 
     function PleaseWait(options) {
       var defaultOptions, k, listener, v;
       defaultOptions = this.constructor._defaultOptions;
       this.options = {};
       this.loaded = false;
+      this.finishing = false;
       for (k in defaultOptions) {
         v = defaultOptions[k];
         this.options[k] = options[k] != null ? options[k] : v;
@@ -101,16 +103,23 @@
       document.body.className += " pg-loading";
       document.body.appendChild(this._loadingElem);
       this._loadingElem.className += " pg-loading";
+      this._onLoadedCallback = this.options.onLoadedCallback;
       listener = (function(_this) {
-        return function() {
+        return function(evt) {
           _this.loaded = true;
           _this._readyToShowLoadingHtml = true;
           _this._loadingHtmlElem.className += " pg-loaded";
           if (animationSupport) {
             _this._loadingHtmlElem.removeEventListener(animationEvent, listener);
           }
           if (_this._loadingHtmlToDisplay.length > 0) {
-            return _this._changeLoadingHtml();
+            _this._changeLoadingHtml();
+          }
+          if (_this.finishing) {
+            if (evt != null) {
+              evt.stopPropagation();
+            }
+            return _this._finish();
           }
         };
       })(this);
@@ -147,26 +156,19 @@
       }
     }
 
-    PleaseWait.prototype.finish = function(immediately) {
-      var listener;
+    PleaseWait.prototype.finish = function(immediately, onLoadedCallback) {
       if (immediately == null) {
         immediately = false;
       }
-      if (this._loadingElem == null) {
-        return;
+      if (window.document.hidden) {
+        immediately = true;
+      }
+      this.finishing = true;
+      if (onLoadedCallback != null) {
+        this.updateOption('onLoadedCallback', onLoadedCallback);
       }
       if (this.loaded || immediately) {
-        return this._finish();
-      } else {
-        listener = (function(_this) {
-          return function() {
-            _this._loadingElem.removeEventListener(animationEvent, listener);
-            return window.setTimeout(function() {
-              return _this._finish();
-            }, 1);
-          };
-        })(this);
-        return this._loadingHtmlElem.addEventListener(animationEvent, listener);
+        return this._finish(immediately);
       }
     };
 
@@ -178,6 +180,8 @@
           return this._logoElem.src = value;
         case 'loadingHtml':
           return this.updateLoadingHtml(value);
+        case 'onLoadedCallback':
+          return this._onLoadedCallback = value;
         default:
           throw new Error("Unknown option '" + option + "'");
       }
@@ -227,9 +231,18 @@
       }
     };
 
-    PleaseWait.prototype._finish = function() {
+    PleaseWait.prototype._finish = function(immediately) {
       var listener;
+      if (immediately == null) {
+        immediately = false;
+      }
+      if (this._loadingElem == null) {
+        return;
+      }
       document.body.className += " pg-loaded";
+      if (typeof this._onLoadedCallback === "function") {
+        this._onLoadedCallback.apply(this);
+      }
       listener = (function(_this) {
         return function() {
           document.body.removeChild(_this._loadingElem);
@@ -240,7 +253,7 @@
           return _this._loadingElem = null;
         };
       })(this);
-      if (animationSupport) {
+      if (!immediately && animationSupport) {
         this._loadingElem.className += " pg-loaded";
         return this._loadingElem.addEventListener(animationEvent, listener);
       } else {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Please Wait",
+  "name": "PleaseWait",
   "module": "pleaseWait",
   "author": "Pathgather",
   "description": "Display a nice loading screen while your app loads",

spec/please-wait.spec.coffee

@@ -66,14 +66,71 @@ describe 'PleaseWait', ->
         addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
         expect(addedScreen.style.backgroundColor).toEqual("rgb(204, 204, 204)")
 
+    it "removes any existing pg-loaded classes from the body", ->
+      document.body.className = "pg-loaded"
+      window.pleaseWait()
+      expect(document.body.className).toEqual("pg-loading")
+
   describe 'finish', ->
-    it "removes the loading screen from the body after it transitions out", ->
-      pleaseWait = window.pleaseWait({logo: 'logo.png', loadingHtml: "<div></div>"})
+    loadingScreen = addedScreen = loadingHtml = onLoaded = null
+    beforeEach ->
+      onLoaded = jasmine.createSpy('onLoaded')
+      loadingScreen = window.pleaseWait({logo: 'logo.png', loadingHtml: "<div></div>", onLoadedCallback: onLoaded})
       addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
+      loadingHtml = document.body.getElementsByClassName("pg-loading-html")[0]
       expect(addedScreen).toBeDefined()
-      pleaseWait.finish()
-      event = document.createEvent('Event')
-      event.initEvent(getTransitionEvent(), true, true)
-      addedScreen.dispatchEvent event
-      addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
-      expect(addedScreen).not.toBeDefined()
+
+    describe "when the loading screen has finished animating in", ->
+      beforeEach ->
+        event = document.createEvent('Event')
+        event.initEvent(getTransitionEvent(), true, true)
+        loadingHtml.dispatchEvent event
+        expect(onLoaded).not.toHaveBeenCalled()
+
+      it "removes the loading screen from the body after it transitions out", ->
+        loadingScreen.finish()
+        expect(onLoaded).toHaveBeenCalled()
+        event = document.createEvent('Event')
+        event.initEvent(getTransitionEvent(), true, true)
+        addedScreen.dispatchEvent event
+        addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
+        expect(addedScreen).not.toBeDefined()
+
+    describe "when the loading screen has not yet finished animating in", ->
+      it "waits for the current animation to finish, then removes the loading screen from the body after it transitions out", ->
+        loadingScreen.finish()
+
+        # Make sure that animation events on the loading screen do not dismiss yet
+        event = document.createEvent('Event')
+        event.initEvent(getTransitionEvent(), true, true)
+        addedScreen.dispatchEvent event
+        addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
+        expect(addedScreen).toBeDefined()
+
+        # Finish loading in animation
+        expect(onLoaded).not.toHaveBeenCalled()
+        event = document.createEvent('Event')
+        event.initEvent(getTransitionEvent(), true, true)
+        loadingHtml.dispatchEvent event
+        addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
+        expect(addedScreen).toBeDefined()
+        expect(onLoaded).toHaveBeenCalled()
+
+        # Now, finish loading out animation and ensure the loading screen is dismissed
+        event = document.createEvent('Event')
+        event.initEvent(getTransitionEvent(), true, true)
+        addedScreen.dispatchEvent event
+        addedScreen = document.body.getElementsByClassName("pg-loading-screen")[0]
+        expect(addedScreen).not.toBeDefined()
+
+  describe 'when reloading multiple times', ->
+    it "adds and removes pg-loaded & pg-loading from the body accordingly", ->
+      document.body.className = "my-class"
+      first = window.pleaseWait()
+      expect(document.body.className).toEqual("my-class pg-loading")
+      first.finish(true)
+      expect(document.body.className).toEqual("my-class pg-loaded")
+      second = window.pleaseWait()
+      expect(document.body.className).toEqual("my-class pg-loading")
+      second.finish(true)
+      expect(document.body.className).toEqual("my-class pg-loaded")