Timeline: updated livePreview to timeline play. Hide canvas and draw red outline

- Changed the play button to a toggle button
- livePreview code in stage activated via bindings
- Draw a red outline of the canvas when in play

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

2 files changed, 13 insertions, 37 deletions

diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 4f40a3f8..fbbfd066 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -268,7 +268,8 @@ POSSIBILITY OF SUCH DAMAGE.
                 "timeline": {
                     "prototype": "js/panels/Timeline/TimelinePanel.reel",
                     "properties": {
-                        "element": {"#": "timelinePanelComponent"}
+                        "element": {"#": "timelinePanelComponent"},
+                        "stage": {"@": "stage"}
                     },
                     "bindings": {
                         "currentDocument": {"<-": "@documentList.selectedObjects.0"}
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 42d15d8b..24e47612 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -379,7 +379,6 @@ exports.Ninja = Montage.create(Component, {
             this.eventManager.addEventListener("selectSubTool", this, false);
             this.eventManager.addEventListener("executePreview", this, false);
 
-            this.addPropertyChangeListener("appModel.livePreview", this.executeLivePreview, false);
             this.addPropertyChangeListener("appModel.debug", this.toggleDebug, false);
         }
     },
@@ -535,42 +534,18 @@ exports.Ninja = Montage.create(Component, {
         }
     },
 
-    executeLivePreview: {
-        value: function() {
-            var transitionStopRule;
-//            this.stage.hideCanvas(this.appModel.livePreview);
-
-            if(this.appModel.livePreview) {
-                transitionStopRule = "nj-css-garbage-selector";
-                this.stage.bindingView.hide = true;
-            } else {
-                transitionStopRule = "*"
-                this.stage.bindingView.hide = false;
-            }
-
-            this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = transitionStopRule;
-
-            this._toggleWebGlAnimation(this.appModel.livePreview);
-        }
-    },
-
-    // Turn on WebGL animation during preview
-    _toggleWebGlAnimation: {
-        value: function(inLivePreview) {
-            var glCanvases = this.currentDocument.model.views.design.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
-                glShapeModel;
-            if(glCanvases) {
-                for(var i = 0, len = glCanvases.length; i<len; i++) {
-                    glShapeModel = glCanvases[i].elementModel.shapeModel;
-                    if(inLivePreview) {
-                        glShapeModel.GLWorld._previewAnimation = true;
-                        glShapeModel.GLWorld.restartRenderLoop();
-                    } else if (!glShapeModel.animate ) {
-                        glShapeModel.GLWorld._previewAnimation = false;
-                        glShapeModel.GLWorld._canvas.task.stop();
-                    }
+    // Turn on WebGL animation on/off
+    toggleWebGlAnimation: {
+        value: function(animate) {
+            Array.prototype.slice.call(elt.querySelectorAll('[data-RDGE-id]'),0).forEach(function(glCanvas) {
+                if(animate) {
+                    glCanvas.elementModel.shapeModel.GLWorld._previewAnimation = true;
+                    glCanvas.elementModel.shapeModel.GLWorld.restartRenderLoop();
+                } else if (!glCanvas.elementModel.shapeModel.animate ) {
+                    glCanvas.elementModel.shapeModel.GLWorld._previewAnimation = false;
+                    glCanvas.elementModel.shapeModel.GLWorld._canvas.task.stop();
                 }
-            }
+            });
         }
     },