Merge remote-tracking branch 'origin/master'

Conflicts:
	dist/htmlgl.min.js
	page/js/htmlgl.min.js

Author: PixelsCommander

bower.json

@@ -1,6 +1,6 @@
 {
-  "name": "HTMLGL",
-  "version": "0.1.1",
+  "name": "htmlgl",
+  "version": "0.2",
   "authors": [
     "PixelsCommander <denis.radin@gmail.com>"
   ],
@@ -13,7 +13,7 @@
     "tests"
   ],
   "dependencies": {
-    "pixi": "~2.2.5",
+    "pixi": "~2.2.9",
     "webcomponents.js": "~0.5.5",
     "promise-polyfill": "~2.0.0",
     "jquery": "~2.1.3"

dist/htmlgl.js

@@ -49,7 +49,7 @@
     p.initListeners = function () {
         //window listeners
         w.addEventListener('scroll', this.updateScrollPosition.bind(this));
-        w.addEventListener('resize', this.resizeViewer.bind(this));
+        w.addEventListener('resize', w.HTMLGL.util.debounce(this.resizeViewer, 500).bind(this));
 
         //document listeners - mouse and touch events
         document.addEventListener('click', this.onMouseEvent.bind(this), true);
@@ -97,7 +97,7 @@
 
     p.appendViewer = function () {
         document.body.appendChild(this.renderer.view);
-        requestAnimFrame(this.redrawStage.bind(this));
+        requestAnimationFrame(this.redrawStage.bind(this));
     }
 
     p.resizeViewer = function () {
@@ -143,7 +143,7 @@
     //We would like to rerender if something changed, otherwise stand by
     p.markStageAsChanged = function () {
         if (w.HTMLGL.stage && !w.HTMLGL.stage.changed) {
-            requestAnimFrame(this.redrawStage);
+            requestAnimationFrame(this.redrawStage);
             w.HTMLGL.stage.changed = true;
         }
     }

dist/htmlgl.min.js

@@ -19,7 +19,16 @@
 
     p.createdCallback = function () {
         //Checking is node created inside of html2canvas virtual window or not. We do not need WebGL there
-        var isInsideHtml2Canvas = this.baseURI !== undefined && this.baseURI.length === 0;
+        var currentNode = this,
+            isMounted = false;
+
+        while (currentNode = currentNode.parentNode) {
+            if (currentNode.tagName === 'BODY') {
+                isMounted = true;
+            }
+        }
+
+        var isInsideHtml2Canvas = isMounted && (this.baseURI !== undefined && this.baseURI.length === 0);
 
         if (!isInsideHtml2Canvas) {
             HTMLGL.elements.push(this);
@@ -110,6 +119,7 @@
         new HTMLGL.ImagesLoaded(self, function () {
             //Bounds could change during images loading
             self.updateBoundingRect();
+
             self.image = html2canvas(self, {
                 onrendered: self.applyNewTexture,
                 width: self.boundingRect.width,

page/js/htmlgl.min.js

@@ -28,6 +28,20 @@
             newEvent.dispatcher = 'html-gl';
             event.stopPropagation();
             element.dispatchEvent(newEvent);
+        },
+        debounce: function(func, wait, immediate) {
+            var timeout;
+            return function() {
+                var context = this, args = arguments;
+                var later = function() {
+                    timeout = null;
+                    if (!immediate) func.apply(context, args);
+                };
+                var callNow = immediate && !timeout;
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+                if (callNow) func.apply(context, args);
+            };
         }
     }
 })(window);