Merge pull request #102 from Gaya/percentage-id

Percentage container id

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "QueryLoader2",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "homepage": "http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/",
   "authors": [
     "Gaya <[email protected]>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "queryloader2",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "homepage": "http://gaya.ninja",
   "description": "QueryLoader2 serves the main purpose of preloading the images on your website by showing an overlay and a loading bar. It automatically fetches all your images and background images and preloads them before showing the webpage.",
   "dependencies": {},

src/Overlay/Percentage.js

@@ -1,6 +1,7 @@
 function Percentage() {
     'use strict';
     this.element = null;
+    this.idName = "qlPercentage";
     this.className = "queryloader__overlay__percentage";
     this.barHeight = 1;
     this.barColor = "#fff";
@@ -10,6 +11,7 @@ Percentage.prototype.create = function () {
     'use strict';
     this.element = document.createElement("div");
     this.element.setAttribute("class", this.className);
+    this.element.setAttribute("id", this.idName);
     this.applyStyling();
     this.updateProgress(0, 0);
 };

src/Overlay/index.js

@@ -5,6 +5,7 @@ function Overlay(parentElement) {
     'use strict';
     this.parentElement = parentElement;
     this.idName = "qLoverlay";
+    this.percentageId = "qlPercentage";
     this.className = "queryloader__overlay";
     this.element = null;
     this.loadingBar = null;
@@ -29,6 +30,7 @@ Overlay.prototype.init = function () {
     if (this.showPercentage) {
         this.percentage = new Percentage();
         this.percentage.barColor = this.barColor;
+        this.percentage.idName = this.percentageId;
         this.percentage.create();
         this.element.appendChild(this.percentage.element);
     }

src/QueryLoader.js

@@ -14,6 +14,7 @@ function QueryLoader(element, options) {
         backgroundColor: "#000",
         barColor: "#fff",
         overlayId: 'qLoverlay',
+        percentageId: 'qLpercentage',
         barHeight: 1,
         percentage: false,
         deepSearch: true,
@@ -66,6 +67,7 @@ QueryLoader.prototype.createOverlay = function () {
     'use strict';
     this.overlay = new Overlay(this.element);
     this.overlay.idName = this.options.overlayId;
+    this.overlay.percentageId = this.options.percentageId;
     this.overlay.backgroundColor = this.options.backgroundColor;
     this.overlay.barHeight = this.options.barHeight;
     this.overlay.barColor = this.options.barColor;