diff options
-rwxr-xr-x | css/ninja.css | 2 | ||||
-rwxr-xr-x | js/document/html-document.js | 4 | ||||
-rwxr-xr-x | js/panels/Panel.reel/Panel.html | 20 | ||||
-rwxr-xr-x | js/panels/Panel.reel/Panel.js | 4 | ||||
-rwxr-xr-x | js/panels/PanelContainer.reel/PanelContainer.js | 77 | ||||
-rw-r--r-- | js/panels/Timeline/Collapser.js | 62 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.html | 129 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 172 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 13 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 478 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 136 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 116 | ||||
-rwxr-xr-x | scss/imports/scss/_PanelUI.scss | 14 |
13 files changed, 605 insertions, 622 deletions
diff --git a/css/ninja.css b/css/ninja.css index f139c3b9..8213ec26 100755 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -655,6 +655,8 @@ body section .dragging { opacity: 0.4; } | |||
655 | 655 | ||
656 | body .main .dragOver:not(.dragging) { background-color: #917B56; } | 656 | body .main .dragOver:not(.dragging) { background-color: #917B56; } |
657 | 657 | ||
658 | .panelDisabled { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000; color: white; text-align: center; line-height: 100px; box-shadow: inset 0 0 14px #111111; background: rgba(30, 30, 30, 0.8); } | ||
659 | |||
658 | .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } | 660 | .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } |
659 | 661 | ||
660 | .menuBar ul { list-style: none; margin: 0; padding: 0; float: left; cursor: default; } | 662 | .menuBar ul { list-style: none; margin: 0; padding: 0; float: left; cursor: default; } |
diff --git a/js/document/html-document.js b/js/document/html-document.js index bc27ea7b..0dc26884 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -977,7 +977,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
977 | }, | 977 | }, |
978 | //////////////////////////////////////////////////////////////////// | 978 | //////////////////////////////////////////////////////////////////// |
979 | /** | 979 | /** |
980 | *pause videos on switching or closing the document | 980 | *pause videos on switching or closing the document, so that the browser does not keep downloading the media data |
981 | */ | 981 | */ |
982 | pauseVideos:{ | 982 | pauseVideos:{ |
983 | value:function(){ | 983 | value:function(){ |
@@ -992,6 +992,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
992 | 992 | ||
993 | /** | 993 | /** |
994 | * remove the video src on closing the document, so that the browser does not keep downloading the media data, if the tag does not get garbage collected | 994 | * remove the video src on closing the document, so that the browser does not keep downloading the media data, if the tag does not get garbage collected |
995 | *removeSrc : boolean to remove the src if the video... set only in the close document flow | ||
995 | */ | 996 | */ |
996 | stopVideos:{ | 997 | stopVideos:{ |
997 | value:function(){ | 998 | value:function(){ |
@@ -1001,7 +1002,6 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
1001 | } | 1002 | } |
1002 | } | 1003 | } |
1003 | }, | 1004 | }, |
1004 | |||
1005 | pauseAndStopVideos:{ | 1005 | pauseAndStopVideos:{ |
1006 | value:function(){ | 1006 | value:function(){ |
1007 | var videosArr = this.documentRoot.getElementsByTagName("video"), i=0; | 1007 | var videosArr = this.documentRoot.getElementsByTagName("video"), i=0; |
diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 04e2930a..43b87940 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html | |||
@@ -113,6 +113,21 @@ | |||
113 | } | 113 | } |
114 | }, | 114 | }, |
115 | 115 | ||
116 | "disabledCondition": { | ||
117 | "module": "montage/ui/condition.reel", | ||
118 | "name": "Condition", | ||
119 | "properties": { | ||
120 | "element": {"#": "disabledCondition"} | ||
121 | }, | ||
122 | "bindings": { | ||
123 | "condition": { | ||
124 | "boundObject": {"@": "owner"}, | ||
125 | "boundObjectPropertyPath": "disabled", | ||
126 | "oneway": true | ||
127 | } | ||
128 | } | ||
129 | }, | ||
130 | |||
116 | "owner": { | 131 | "owner": { |
117 | "module": "js/panels/Panel.reel", | 132 | "module": "js/panels/Panel.reel", |
118 | "name": "Panel", | 133 | "name": "Panel", |
@@ -136,9 +151,8 @@ | |||
136 | </div> | 151 | </div> |
137 | <div class="panelBody"> | 152 | <div class="panelBody"> |
138 | <div class="panelBodyContent"> | 153 | <div class="panelBodyContent"> |
139 | <div id="panelObject" class="panelObjects"> | 154 | <div id="disabledCondition" class="panelDisabled"></div> |
140 | 155 | <div id="panelObject" class="panelObjects"></div> | |
141 | </div> | ||
142 | </div> | 156 | </div> |
143 | </div> | 157 | </div> |
144 | <div id="resizeBar" class="resizeBar"></div> | 158 | <div id="resizeBar" class="resizeBar"></div> |
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 2b308258..33f9b3a7 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js | |||
@@ -57,6 +57,10 @@ exports.Panel = Montage.create(Component, { | |||
57 | value: null | 57 | value: null |
58 | }, | 58 | }, |
59 | 59 | ||
60 | disabled: { | ||
61 | value:false | ||
62 | }, | ||
63 | |||
60 | collapsed: { | 64 | collapsed: { |
61 | get: function() { | 65 | get: function() { |
62 | return this._collapsed; | 66 | return this._collapsed; |
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index dd720bd3..c40bbc21 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js | |||
@@ -47,6 +47,7 @@ exports.PanelContainer = Montage.create(Component, { | |||
47 | this['panel_'+i].flexible = p.flexible; | 47 | this['panel_'+i].flexible = p.flexible; |
48 | this['panel_'+i].modulePath = p.modulePath; | 48 | this['panel_'+i].modulePath = p.modulePath; |
49 | this['panel_'+i].moduleName = p.moduleName; | 49 | this['panel_'+i].moduleName = p.moduleName; |
50 | this['panel_'+i].disabled = true; | ||
50 | 51 | ||
51 | this.currentPanelState[p.name] = {}; | 52 | this.currentPanelState[p.name] = {}; |
52 | this.currentPanelState.version = "1.0"; | 53 | this.currentPanelState.version = "1.0"; |
@@ -64,6 +65,8 @@ exports.PanelContainer = Montage.create(Component, { | |||
64 | this.application.localStorage.setItem("panels", this.currentPanelState); | 65 | this.application.localStorage.setItem("panels", this.currentPanelState); |
65 | 66 | ||
66 | 67 | ||
68 | this.eventManager.addEventListener( "onOpenDocument", this, false); | ||
69 | this.eventManager.addEventListener( "closeDocument", this, false); | ||
67 | } | 70 | } |
68 | }, | 71 | }, |
69 | 72 | ||
@@ -81,7 +84,25 @@ exports.PanelContainer = Montage.create(Component, { | |||
81 | 84 | ||
82 | handleResize: { | 85 | handleResize: { |
83 | value: function(e) { | 86 | value: function(e) { |
84 | this._setPanelsSizes(null); | 87 | this._redrawPanels(null, true); |
88 | } | ||
89 | }, | ||
90 | |||
91 | handleOnOpenDocument: { | ||
92 | value: function(){ | ||
93 | this.panels.forEach(function(obj) { | ||
94 | obj.disabled = false; | ||
95 | }); | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | handleCloseDocument: { | ||
100 | value: function(){ | ||
101 | if(!this.application.ninja.documentController.activeDocument) { | ||
102 | this.panels.forEach(function(obj) { | ||
103 | obj.disabled = true; | ||
104 | }); | ||
105 | } | ||
85 | } | 106 | } |
86 | }, | 107 | }, |
87 | 108 | ||
@@ -102,10 +123,21 @@ exports.PanelContainer = Montage.create(Component, { | |||
102 | 123 | ||
103 | if(draggedIndex !== droppedIndex) { | 124 | if(draggedIndex !== droppedIndex) { |
104 | // switch panels | 125 | // switch panels |
105 | this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); | 126 | if (droppedIndex === draggedIndex +1) { |
127 | if(this.panels[droppedIndex].element.nextSibling) { | ||
128 | this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element.nextSibling); | ||
129 | } else { | ||
130 | return this.appendChild(this.panels[draggedIndex].element); | ||
131 | } | ||
132 | } else { | ||
133 | |||
134 | this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); | ||
135 | } | ||
136 | var panelRemoved = this.panels.splice(draggedIndex, 1); | ||
137 | this.panels.splice(droppedIndex, 0, panelRemoved[0]); | ||
138 | |||
106 | } | 139 | } |
107 | 140 | ||
108 | this._setPanelsSizes(null); | ||
109 | } | 141 | } |
110 | }, | 142 | }, |
111 | 143 | ||
@@ -114,12 +146,12 @@ exports.PanelContainer = Montage.create(Component, { | |||
114 | var len = this.panels.length, setLocked = true; | 146 | var len = this.panels.length, setLocked = true; |
115 | 147 | ||
116 | for(var i = 0; i < len; i++) { | 148 | for(var i = 0; i < len; i++) { |
117 | if(this['panel_'+i] === panelActivated || panelActivated === null) { | 149 | if(this.panels[i] === panelActivated || panelActivated === null) { |
118 | setLocked = false; | 150 | setLocked = false; |
119 | } | 151 | } |
120 | 152 | ||
121 | this['panel_'+i].locked = setLocked; | 153 | this.panels[i].locked = setLocked; |
122 | this['panel_'+i].needsDraw = true; | 154 | this.panels[i].needsDraw = true; |
123 | } | 155 | } |
124 | } | 156 | } |
125 | }, | 157 | }, |
@@ -133,7 +165,12 @@ exports.PanelContainer = Montage.create(Component, { | |||
133 | setLocked = false; | 165 | setLocked = false; |
134 | } | 166 | } |
135 | 167 | ||