New build: simplified loading indicator infrastructure (just a

background image now).
-Modified README to reflect changes in loading indicator.
-New json files for bower and npm.

Author: hqcasanova

README.md

@@ -118,15 +118,15 @@ There are two kinds of settings: those having to do with the slides and those mo
 
 - `altAttr` *''*: alt attribute for all img elements.
 - `lazyAttr` *'data-original'*: lazy Load plugin's name for src attribute.
-- `loadingImg` *base-64 gif*: animated image displayed while loading in progress.
+- `loadingImg` *base-64 gif*: animated image displayed while loading is in progress. It's the main container's background.
 - `cssButtonSize` *'45px'*: size of all controls.
-- `cssPadding` *'15px'*: default padding for secondary containers (loading indicator and slide counter).
+- `cssPadding` *'15px'*: default padding for secondary containers (slide counter).
 - `cssFontSize` *'.9em'*: default font size for all text elements.
 - `cssLineHeight` *'1.5em'*: default line height for all text elements.
 - `cssFontFamily` *'sans-serif'*: default font family for all text elements.
 - `cssBgColor` *'gray'*: background colour for controls and main container.
 - `cssFgColor` *'white'*: foreground colour for text and control symbols.
-- `cssSeparation` *'1.5%'*: default separation between edge of slides container and controls.
+- `cssSeparation` *'1.5%'*: default separation between the edge of the main container and the various controls.
 - `cssRadius` *'0px'*: border radius of all elements.
 - `cssOpacity` *0.65*: opacity of all interface elements.
 
@@ -177,15 +177,14 @@ Plugin Architecture
   	<span class="controlSlide hideFirstSlide skipBSlide"></span>  <!-- 'Skip backward' button -->
   	<span class="controlSlide hideLastSlide nextSlide"></span>    <!-- 'Next' button -->
   	<span class="countSlide"></span>                              <!-- Slide counter -->
-  	<span class="loadingSlide"></span>                            <!-- Loading indicator -->
   </div>
 ```
 - The plugin tries to make **minimal use of jQuery**. Future implementations will ultimately be library-agnostic.
 
 License
 -------
 
-All code is licensed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License). In essence, use and modify at your own peril and leave the copyright header intact.
+All code is licensed under the [MIT License](http://opensource.org/licenses/MIT). In essence, use and modify at your own peril and leave the copyright header intact.
 
 Feedback
 --------

bower.json

@@ -1,8 +1,12 @@
 {
   "name": "picoSlides",
   "main": "picoSlides.js",
-  "version": "1.0.0",
-  "homepage": "https://github.com/hqcasanova/picoSlides",
+  "version": "1.0.1",
+  "homepage": "http://hqcasanova.github.io/picoSlides/",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hqcasanova/picoSlides.git"
+  },
   "authors": [
     "hqcasanova <[email protected]>"
   ],
@@ -24,7 +28,7 @@
   ],
   "dependencies": {
     "jquery": ">=1.6.0"
-  }, 	
+  },
   "license": "MIT",
   "ignore": [
     "**/.*",

package.json

@@ -1,8 +1,7 @@
 {
   "name": "picoslides",
-  "version": "1.0.0",
-  "summary": "A responsive jQuery plugin for IFRAME-free embedding and simple navigation of SlideShare presentations",
-  "description": "Leverages SlideShare's oEmbed API to offer two key features for bandwidth-conscious embedding: adaptive slide images for responsive interfaces and lazy slide loading a la YouTube",
+  "version": "1.0.1",
+  "description": "A responsive jQuery plugin for IFRAME-free embedding and simple navigation of SlideShare presentations.",
   "main": "picoSlides.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -35,7 +34,10 @@
   "bugs": {
     "url": "https://github.com/hqcasanova/picoSlides/issues"
   },
-  "homepage": "https://github.com/hqcasanova/picoSlides",
+  "homepage": "http://hqcasanova.github.io/picoSlides/",
+  "dependencies": {
+    "jquery": ">=1.6.0"
+  },
   "devDependencies": {
     "grunt": "^0.4.4",
     "grunt-contrib-jshint": "^0.10.0",

picoSlides.js

@@ -1,4 +1,4 @@
-/* picoSlides v1.0.0
+/* picoSlides v1.0.1
  * Copyright (c) 2014 Hector Quintero Casanova
  * Released under the MIT license
  */
@@ -52,7 +52,6 @@
             vBarCommonStyle,    //CSS properties for vertical bar in FF and RW buttons
             countElem,          //Outermost native span element wrapping bottom slide counter
             countChild,         //First immediate descendant of countElem
-            loadElem,           //Native image element for loading indicator
             firstElem,          //Native image element for the first slide
             slideElem,          //Native image element for slides other than the first (added in bulk)
             noSelect = {        //CSS for non-selectable items
@@ -74,7 +73,7 @@
             container.style.textAlign = 'center';
             container.style.lineHeight = 0; //Solves issue in HTML5 about a gap between container and the bottom of slide images
             container.style.color = elementDefs.cssFgColor;
-            container.style.background = elementDefs.cssBgColor;
+            container.style.background = 'url("' + elementDefs.loadingImg + '") center center no-repeat ' + elementDefs.cssBgColor;
             container.style.borderRadius = elementDefs.cssRadius;
             $(container).css(noSelect);
             return;
@@ -123,16 +122,6 @@
             'vertical-align': 'middle'
         };
 
-        loadElem = document.createElement('img');
-        loadElem.className = 'loadingSlide';
-        loadElem.src = elementDefs.loadingImg;
-        loadElem.style.padding = elementDefs.cssPadding;
-        loadElem.style.backgroundColor = elementDefs.cssBgColor;
-        loadElem.style.opacity = elementDefs.cssOpacity;
-        loadElem.style.borderRadius = elementDefs.cssRadius;
-        loadElem.style.top = '50%';
-        loadElem.style.left = '50%';
-
         firstElem = document.createElement('img');
         firstElem.alt = elementDefs.altAttr;
         firstElem.style.width = '100%';
@@ -142,16 +131,16 @@
         firstElem.className = 'firstSlide';
 
         slideElem.style.position = 'absolute';
-        slideElem.style.top = '0';
-        slideElem.style.left = '0';
+        slideElem.style.top = 0;
+        slideElem.style.left = 0;
         slideElem.style.visibility = 'hidden';
-        slideElem.style.opacity = '0';
+        slideElem.style.opacity = 0;
 
         countElem = document.createElement('span');
         countElem.className = 'countSlide';
         countElem.style.display = 'none';   //in case the presentation is just 1 slide long
         countElem.style.position = 'absolute';
-        countElem.style.bottom = '0';
+        countElem.style.bottom = 0;
         countElem.style.left = '25%';
         countElem.style.right = '25%';
         countElem.style.backgroundColor = 'transparent';
@@ -251,9 +240,6 @@
             //Slide counter
             count: countElem,
 
-            //Loading indicator image
-            load: loadElem,
-
             //First slide
             first: firstElem,
 
@@ -276,7 +262,6 @@
         this.sourceUrl = this.$elem.data('src');    //URL of the presentation on Slideshare
         this.toLoad = -1;       //number of slides left to load
         this.counter = null;    //Native span element for the slide counter
-        this.loadingImg = null; //Native img element for the loading indicator
         this.currentSlide = null; //Native img element for slide currently being displayed
     };
 
@@ -315,7 +300,6 @@
         init: function () {
             this.settings = $.extend({}, this.defaults, this.options, this.metadata);
             elementLibrary(this.elem);
-            this.loadingImg = this.elem.appendChild(elementLib.load.cloneNode(false));
             this.getCover();
             this.elem.thisRef = this;
             //The thisRef is for later use within onload event handlers (see 'onLoadHandler' function)
@@ -329,11 +313,11 @@
          */
         loading: function (wait) {
             if (wait) {
-                this.elem.style.cursor = 'wait';
-                this.loadingImg.style.display = 'block';
+                //this.elem.style.cursor = 'wait';
+                this.elem.style.backgroundImage = 'url("' + elementDefs.loadingImg + '")';
             } else {
-                this.elem.style.cursor = 'default';
-                this.loadingImg.style.display = 'none';
+                //this.elem.style.cursor = 'default';
+                this.elem.style.backgroundImage = 'none';
             }
         },
 
@@ -446,9 +430,6 @@
             _this = this;
 
             //Feedback: show loading indicator (centered on image) and wait cursor
-            this.loadingImg.style.position = 'absolute';
-            this.loadingImg.style.marginLeft = '-' + ($(this.loadingImg).width() / 2 + parseInt(elementDefs.cssPadding, 10)) + 'px';
-            this.loadingImg.style.marginTop = '-' + ($(this.loadingImg).height() / 2 + parseInt(elementDefs.cssPadding, 10)) + 'px';
             this.loading(true);
 
             //Builds and prepares first slide, next button and counter for DOM insertion