Timeline: new enablePanel() method on TimelinePanel class.

3 files changed, 31 insertions, 3 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index cf9bace6..14c5f1c8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -33,7 +33,8 @@
                         "timebar" : {"#": "time_bar"},
                         "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
-                        "container_layers" : {"#" : "container-layers"}
+                        "container_layers" : {"#" : "container-layers"},
+                        "timeline_disabler" : {"#" : "timeline-disabler"}
                     }
                 },
 
@@ -189,6 +190,8 @@
                         </div>
                     </div>
                 </div>
+
+                                <div class="timeline-disabled" id="timeline-disabler"></div>
                 
             </div>
         </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 8ae801fc..e1f0a21c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -335,6 +335,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false);
             this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
             this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
+            this.enablePanel(false);
         }
     },
     
@@ -437,7 +438,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.deselectTweens();
 
             // Reset visual appearance
-            // Todo: Maybe this should be stored per document?
+            // Todo: Maybe this should be stored per document, so we can persist between document switch?
             this.application.ninja.timeline.playhead.style.left = "-2px";
             this.application.ninja.timeline.playheadmarker.style.left = "0px";
             this.application.ninja.timeline.updateTimeText(0.00);
@@ -475,7 +476,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             
             // Reinitialize the timeline...but only if there are open documents.
                         if (this.application.ninja.documentController._documents.length > 0) {
+                                this.enablePanel(true);
                                 this.initTimelineForDocument();
+                        } else {
+                                this.enablePanel(false);
                         }
         }
     },
@@ -1159,6 +1163,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             return command;
         }
     },
+    enablePanel : {
+        value: function(boolEnable) {
+                if (boolEnable) {
+                        this.timeline_disabler.style.display = "none";
+                } else {
+                        this.timeline_disabler.style.display = "block";
+                }
+        }
+    },
     /* === END: Controllers === */
    
        /* === BEGIN: Logging routines === */
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index c122b18f..129b9771 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -15,6 +15,7 @@
     display: -webkit-box;
     -webkit-box-orient: horizontal
     height : 100%;
+    position: relative;
 }
 .leftinside{
     height: 100%;
@@ -271,4 +272,15 @@
     font-size: 12px;
     text-shadow: 1px 1px 1px black;
     color: white;
-}
\ No newline at end of file
+}
+.timeline-disabled {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(30,30,30, 0.796);
+        z-index: 100;
+        display: none;
+        box-shadow: rgb(17, 17, 17) 0px 0px 14px inset;
+}