From 51751e27b2cec356884240adb0e0d4c3b7e695df Mon Sep 17 00:00:00 2001 From: Jamie Davidson Date: Mon, 15 Dec 2014 19:01:47 -0500 Subject: [PATCH] Added a class to the body when loading so we can hide overflow --- build/please-wait.css | 31 ++++++++++++++++++------------- build/please-wait.js | 3 ++- build/please-wait.min.js | 2 +- src/please-wait.coffee | 3 ++- src/please-wait.scss | 4 ++++ 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/build/please-wait.css b/build/please-wait.css index 54784f1..e616767 100644 --- a/build/please-wait.css +++ b/build/please-wait.css @@ -9,6 +9,11 @@ body.pg-loaded { } /* line 22, ../src/please-wait.scss */ +body.pg-loading { + overflow: hidden; +} + +/* line 26, ../src/please-wait.scss */ .pg-loading-screen { position: fixed; bottom: 0; @@ -24,7 +29,7 @@ body.pg-loaded { -o-transition: background-color 0.6s ease-in-out 0s; transition: background-color 0.6s ease-in-out 0s; } -/* line 33, ../src/please-wait.scss */ +/* line 37, ../src/please-wait.scss */ .pg-loading-screen.pg-loaded { opacity: 0; -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; @@ -33,11 +38,11 @@ body.pg-loaded { -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; } -/* line 39, ../src/please-wait.scss */ +/* line 43, ../src/please-wait.scss */ .pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html { opacity: 1; } -/* line 43, ../src/please-wait.scss */ +/* line 47, ../src/please-wait.scss */ .pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html { -webkit-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; -moz-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; @@ -45,7 +50,7 @@ body.pg-loaded { -o-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both; } -/* line 47, ../src/please-wait.scss */ +/* line 51, ../src/please-wait.scss */ .pg-loading-screen.pg-loading .pg-loading-html { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; @@ -53,7 +58,7 @@ body.pg-loaded { -o-animation-delay: 0.3s; animation-delay: 0.3s; } -/* line 52, ../src/please-wait.scss */ +/* line 56, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-inner { height: 100%; width: 100%; @@ -61,7 +66,7 @@ body.pg-loaded { padding: 0; position: static; } -/* line 60, ../src/please-wait.scss */ +/* line 64, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-center-outer { width: 100%; padding: 0; @@ -72,7 +77,7 @@ body.pg-loaded { left: 0; margin: 0; } -/* line 71, ../src/please-wait.scss */ +/* line 75, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-center-middle { padding: 0; vertical-align: middle; @@ -80,24 +85,24 @@ body.pg-loaded { margin: 0; text-align: center; } -/* line 79, ../src/please-wait.scss */ +/* line 83, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-logo-header, .pg-loading-screen .pg-loading-html { width: 100%; opacity: 0; } -/* line 84, ../src/please-wait.scss */ +/* line 88, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-logo-header { text-align: center; } -/* line 87, ../src/please-wait.scss */ +/* line 91, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-logo-header img { display: inline-block !important; } -/* line 92, ../src/please-wait.scss */ +/* line 96, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-html { margin-top: 90px; } -/* line 95, ../src/please-wait.scss */ +/* line 99, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-html.pg-removing { opacity: 0; -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; @@ -106,7 +111,7 @@ body.pg-loaded { -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; } -/* line 100, ../src/please-wait.scss */ +/* line 104, ../src/please-wait.scss */ .pg-loading-screen .pg-loading-html.pg-loading { opacity: 1; -webkit-animation: pgAnimLoading 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; diff --git a/build/please-wait.js b/build/please-wait.js index 1163444..16dce74 100644 --- a/build/please-wait.js +++ b/build/please-wait.js @@ -69,6 +69,7 @@ if (this._logoElem != null) { this._logoElem.src = this.options.logo; } + document.body.className += " pg-loading "; document.body.appendChild(this._loadingElem); this._loadingElem.className += " pg-loading"; listener = (function(_this) { @@ -123,7 +124,7 @@ listener = (function(_this) { return function() { document.body.removeChild(_this._loadingElem); - document.body.className += " pg-loaded"; + document.body.className = document.body.className.replace(" pg-loading ", " pg-loaded "); if (transitionEvent != null) { _this._loadingElem.removeEventListener(transitionEvent, listener); } diff --git a/build/please-wait.min.js b/build/please-wait.min.js index 9feec7a..17c42fb 100644 --- a/build/please-wait.min.js +++ b/build/please-wait.min.js @@ -9,4 +9,4 @@ * @module pleaseWait * @version 0.0.1 */ -!function(a,b){"object"==typeof exports?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):b(a)}(this,function(a){var b,c,d,e;return c=function(){var a,b,c,d;a=document.createElement("fakeelement"),c={WebkitAnimation:"webkitAnimationEnd",OAnimation:"oAnimationEnd",msAnimation:"MSAnimationEnd",MozAnimation:"mozAnimationEnd",animation:"animationend"};for(b in c)if(d=c[b],null!=a.style[b])return d},e=c(),b=function(){function a(a){var b,c,d,f;b=this.constructor._defaultOptions,this.options={};for(c in b)f=b[c],this.options[c]=null!=a[c]?a[c]:f;this._loadingElem=document.createElement("div"),this._loadingHtmlToDisplay=[],this._loadingElem.className="pg-loading-screen",null!=this.options.backgroundColor&&(this._loadingElem.style.backgroundColor=this.options.backgroundColor),this._loadingElem.innerHTML=this.options.template,this._loadingHtmlElem=this._loadingElem.getElementsByClassName("pg-loading-html")[0],null!=this._loadingHtmlElem&&(this._loadingHtmlElem.innerHTML=this.options.loadingHtml),this._readyToShowLoadingHtml=!1,this._logoElem=this._loadingElem.getElementsByClassName("pg-loading-logo")[0],null!=this._logoElem&&(this._logoElem.src=this.options.logo),document.body.appendChild(this._loadingElem),this._loadingElem.className+=" pg-loading",d=function(a){return function(){return a._readyToShowLoadingHtml=!0,null!=e&&a._loadingHtmlElem.removeEventListener(e,d),a._loadingHtmlToDisplay.length>0?a._changeLoadingHtml():void 0}}(this),null!=this._loadingHtmlElem&&(null!=e?this._loadingHtmlElem.addEventListener(e,d):d(),this._loadingHtmlListener=function(a){return function(){return a._readyToShowLoadingHtml=!0,a._loadingHtmlElem.className=a._loadingHtmlElem.className.replace(" pg-loading ",""),null!=e&&a._loadingHtmlElem.removeEventListener(e,a._loadingHtmlListener),a._loadingHtmlToDisplay.length>0?a._changeLoadingHtml():void 0}}(this),this._removingHtmlListener=function(a){return function(){return a._loadingHtmlElem.innerHTML=a._loadingHtmlToDisplay.shift(),a._loadingHtmlElem.className=a._loadingHtmlElem.className.replace(" pg-removing "," pg-loading "),null!=e?(a._loadingHtmlElem.removeEventListener(e,a._removingHtmlListener),a._loadingHtmlElem.addEventListener(e,a._loadingHtmlListener)):a._loadingHtmlListener()}}(this))}return a._defaultOptions={backgroundColor:null,logo:null,loadingHtml:null,template:"
\n
\n
\n

\n \n

\n
\n
\n
\n
\n
"},a.prototype.finish=function(){var a;if(null!=this._loadingElem)return a=function(b){return function(){return document.body.removeChild(b._loadingElem),document.body.className+=" pg-loaded",null!=e&&b._loadingElem.removeEventListener(e,a),b._loadingElem=null}}(this),null!=e?(this._loadingElem.className+=" pg-loaded",this._loadingElem.addEventListener(e,a)):a()},a.prototype.updateOption=function(a,b){switch(a){case"backgroundColor":return this._loadingElem.style.backgroundColor=b;case"logo":return this._logoElem.src=b;case"loadingHtml":return this.updateLoadingHtml(b);default:throw new Error("Unknown option '"+a+"'")}},a.prototype.updateOptions=function(a){var b,c,d;null==a&&(a={}),d=[];for(b in a)c=a[b],d.push(this.updateOption(b,c));return d},a.prototype.updateLoadingHtml=function(a,b){if(null==b&&(b=!1),null==this._loadingHtmlElem)throw new Error("The loading template does not have an element of class 'pg-loading-html'");return b?(this._loadingHtmlToDisplay=[a],this._readyToShowLoadingHtml=!0):this._loadingHtmlToDisplay.push(a),this._readyToShowLoadingHtml?this._changeLoadingHtml():void 0},a.prototype._changeLoadingHtml=function(){return this._readyToShowLoadingHtml=!1,this._loadingHtmlElem.removeEventListener(e,this._loadingHtmlListener),this._loadingHtmlElem.removeEventListener(e,this._removingHtmlListener),this._loadingHtmlElem.className=this._loadingHtmlElem.className.replace(" pg-loading ","").replace(" pg-removing ",""),null!=e?(this._loadingHtmlElem.className+=" pg-removing ",this._loadingHtmlElem.addEventListener(e,this._removingHtmlListener)):this._removingHtmlListener()},a}(),d=function(a){return null==a&&(a={}),new b(a)},a.pleaseWait=d,d}); \ No newline at end of file +!function(a,b){"object"==typeof exports?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):b(a)}(this,function(a){var b,c,d,e;return c=function(){var a,b,c,d;a=document.createElement("fakeelement"),c={WebkitAnimation:"webkitAnimationEnd",OAnimation:"oAnimationEnd",msAnimation:"MSAnimationEnd",MozAnimation:"mozAnimationEnd",animation:"animationend"};for(b in c)if(d=c[b],null!=a.style[b])return d},e=c(),b=function(){function a(a){var b,c,d,f;b=this.constructor._defaultOptions,this.options={};for(c in b)f=b[c],this.options[c]=null!=a[c]?a[c]:f;this._loadingElem=document.createElement("div"),this._loadingHtmlToDisplay=[],this._loadingElem.className="pg-loading-screen",null!=this.options.backgroundColor&&(this._loadingElem.style.backgroundColor=this.options.backgroundColor),this._loadingElem.innerHTML=this.options.template,this._loadingHtmlElem=this._loadingElem.getElementsByClassName("pg-loading-html")[0],null!=this._loadingHtmlElem&&(this._loadingHtmlElem.innerHTML=this.options.loadingHtml),this._readyToShowLoadingHtml=!1,this._logoElem=this._loadingElem.getElementsByClassName("pg-loading-logo")[0],null!=this._logoElem&&(this._logoElem.src=this.options.logo),document.body.className+=" pg-loading ",document.body.appendChild(this._loadingElem),this._loadingElem.className+=" pg-loading",d=function(a){return function(){return a._readyToShowLoadingHtml=!0,null!=e&&a._loadingHtmlElem.removeEventListener(e,d),a._loadingHtmlToDisplay.length>0?a._changeLoadingHtml():void 0}}(this),null!=this._loadingHtmlElem&&(null!=e?this._loadingHtmlElem.addEventListener(e,d):d(),this._loadingHtmlListener=function(a){return function(){return a._readyToShowLoadingHtml=!0,a._loadingHtmlElem.className=a._loadingHtmlElem.className.replace(" pg-loading ",""),null!=e&&a._loadingHtmlElem.removeEventListener(e,a._loadingHtmlListener),a._loadingHtmlToDisplay.length>0?a._changeLoadingHtml():void 0}}(this),this._removingHtmlListener=function(a){return function(){return a._loadingHtmlElem.innerHTML=a._loadingHtmlToDisplay.shift(),a._loadingHtmlElem.className=a._loadingHtmlElem.className.replace(" pg-removing "," pg-loading "),null!=e?(a._loadingHtmlElem.removeEventListener(e,a._removingHtmlListener),a._loadingHtmlElem.addEventListener(e,a._loadingHtmlListener)):a._loadingHtmlListener()}}(this))}return a._defaultOptions={backgroundColor:null,logo:null,loadingHtml:null,template:"
\n
\n
\n

\n \n

\n
\n
\n
\n
\n
"},a.prototype.finish=function(){var a;if(null!=this._loadingElem)return a=function(b){return function(){return document.body.removeChild(b._loadingElem),document.body.className=document.body.className.replace(" pg-loading "," pg-loaded "),null!=e&&b._loadingElem.removeEventListener(e,a),b._loadingElem=null}}(this),null!=e?(this._loadingElem.className+=" pg-loaded",this._loadingElem.addEventListener(e,a)):a()},a.prototype.updateOption=function(a,b){switch(a){case"backgroundColor":return this._loadingElem.style.backgroundColor=b;case"logo":return this._logoElem.src=b;case"loadingHtml":return this.updateLoadingHtml(b);default:throw new Error("Unknown option '"+a+"'")}},a.prototype.updateOptions=function(a){var b,c,d;null==a&&(a={}),d=[];for(b in a)c=a[b],d.push(this.updateOption(b,c));return d},a.prototype.updateLoadingHtml=function(a,b){if(null==b&&(b=!1),null==this._loadingHtmlElem)throw new Error("The loading template does not have an element of class 'pg-loading-html'");return b?(this._loadingHtmlToDisplay=[a],this._readyToShowLoadingHtml=!0):this._loadingHtmlToDisplay.push(a),this._readyToShowLoadingHtml?this._changeLoadingHtml():void 0},a.prototype._changeLoadingHtml=function(){return this._readyToShowLoadingHtml=!1,this._loadingHtmlElem.removeEventListener(e,this._loadingHtmlListener),this._loadingHtmlElem.removeEventListener(e,this._removingHtmlListener),this._loadingHtmlElem.className=this._loadingHtmlElem.className.replace(" pg-loading ","").replace(" pg-removing ",""),null!=e?(this._loadingHtmlElem.className+=" pg-removing ",this._loadingHtmlElem.addEventListener(e,this._removingHtmlListener)):this._removingHtmlListener()},a}(),d=function(a){return null==a&&(a={}),new b(a)},a.pleaseWait=d,d}); \ No newline at end of file diff --git a/src/please-wait.coffee b/src/please-wait.coffee index 6ab1783..1d8d8cd 100644 --- a/src/please-wait.coffee +++ b/src/please-wait.coffee @@ -74,6 +74,7 @@ @_logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0] @_logoElem.src = @options.logo if @_logoElem? # Add the loading screen to the body + document.body.className += " pg-loading " document.body.appendChild(@_loadingElem) # Add the CSS class that will trigger the initial transitions of the logo/loading HTML @_loadingElem.className += " pg-loading" @@ -119,7 +120,7 @@ # Remove the loading screen from the body document.body.removeChild(@_loadingElem) # Add a class to the body to signal that the loading screen has finished and the app is ready - document.body.className += " pg-loaded" + document.body.className = document.body.className.replace(" pg-loading ", " pg-loaded ") if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener) # Reset the loading screen element since it's no longer attached to the DOM @_loadingElem = null diff --git a/src/please-wait.scss b/src/please-wait.scss index 1a3adeb..0a98edf 100644 --- a/src/please-wait.scss +++ b/src/please-wait.scss @@ -19,6 +19,10 @@ body.pg-loaded { @include prefixed(animation, pgAnimLoading 0.5s cubic-bezier(0.7,0,0.3,1) both); } +body.pg-loading { + overflow: hidden; +} + .pg-loading-screen { position: fixed; bottom: 0;