diff options
author | Valerio Virgillito | 2012-07-19 18:21:45 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-07-19 18:21:45 -0700 |
commit | 6d38a574e4f6ed7dbb0a5d033fc2f3766dd5fc98 (patch) | |
tree | c0d1688ec3d8426295bd315cece84f2f611872a1 /js/panels/Timeline/TimelinePanel.reel | |
parent | 4b1a4b6b424400080271202800d2de78e5509708 (diff) | |
parent | 6403ec6d21048c93138ddcbcc59fc4677121ed5e (diff) | |
download | ninja-6d38a574e4f6ed7dbb0a5d033fc2f3766dd5fc98.tar.gz |
Merge branch 'timeline-play' of https://github.com/mencio/ninja into v0.7.1
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
4 files changed, 96 insertions, 64 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index c287e68e..0d769c23 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE. | |||
54 | "playheadmarker": {"#": "playhead_marker"}, | 54 | "playheadmarker": {"#": "playhead_marker"}, |
55 | "timetext" : {"#": "time_text"}, | 55 | "timetext" : {"#": "time_text"}, |
56 | "timebar" : {"#": "time_bar"}, | 56 | "timebar" : {"#": "time_bar"}, |
57 | "container_tracks" : {"#" : "container-tracks"}, | ||
58 | "end_hottext" : {"@" : "endHottext"}, | 57 | "end_hottext" : {"@" : "endHottext"}, |
59 | "container_layers" : {"#" : "container-layers"}, | 58 | "container_layers" : {"#" : "container-layers"}, |
60 | "container_tracks" : {"#" : "container-tracks"}, | 59 | "container_tracks" : {"#" : "container-tracks"}, |
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE. | |||
62 | "checkable_animated" : {"#" : "checkable_animated"}, | 61 | "checkable_animated" : {"#" : "checkable_animated"}, |
63 | "tl_configbutton" : {"#" : "tl-configbutton"}, | 62 | "tl_configbutton" : {"#" : "tl-configbutton"}, |
64 | "checkable_lock" : {"#" : "checkable_lock"}, | 63 | "checkable_lock" : {"#" : "checkable_lock"}, |
65 | "checkable_visible":{"#" : "checkable_visible"}, | 64 | "checkable_visible":{"#" : "checkable_visible"} |
66 | "play_button" : {"#" : "play_button"} | 65 | |
66 | } | ||
67 | }, | ||
68 | |||
69 | "playButton": { | ||
70 | "prototype": "montage/ui/toggle-button.reel", | ||
71 | "properties": { | ||
72 | "element": {"#": "play_button"}, | ||
73 | "identifier": "playButton", | ||
74 | "pressedClass": "pausebutton", | ||
75 | "pressedLabel": "", | ||
76 | "unpressedLabel": "", | ||
77 | "pressed": false | ||
78 | }, | ||
79 | "bindings": { | ||
80 | "pressed": {"<->": "@owner.stage.timelinePlay"} | ||
67 | } | 81 | } |
68 | }, | 82 | }, |
69 | 83 | ||
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
190 | <div data-montage-id="leftpane_inside" class="leftinside"> | 204 | <div data-montage-id="leftpane_inside" class="leftinside"> |
191 | <div data-montage-id="timeline_controller" class="timelinecontroller"> | 205 | <div data-montage-id="timeline_controller" class="timelinecontroller"> |
192 | <div data-montage-id="timeline_controls" class="timelinecontrols"> | 206 | <div data-montage-id="timeline_controls" class="timelinecontrols"> |
193 | <div data-montage-id="play_button" class="playbutton"></div> | 207 | <button data-montage-id="play_button" class="playbutton"></button> |
194 | <div data-montage-id="time_text" class="timetext">00:00:00</div> | 208 | <div data-montage-id="time_text" class="timetext">00:00:00</div> |
195 | </div> | 209 | </div> |
196 | </div> | 210 | </div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 4e9771d4..521c315d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage, | |||
36 | 36 | ||
37 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 37 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { |
38 | 38 | ||
39 | _stage: { | ||
40 | value: null | ||
41 | }, | ||
42 | |||
43 | stage: { | ||
44 | get: function() { | ||
45 | return this._stage; | ||
46 | }, | ||
47 | set: function(value) { | ||
48 | if(value) { | ||
49 | this._stage = value; | ||
50 | } | ||
51 | } | ||
52 | }, | ||
53 | |||
39 | /* === BEGIN: Models === */ | 54 | /* === BEGIN: Models === */ |
40 | _user_layers: { | 55 | _user_layers: { |
41 | value: null | 56 | value: null |
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1015 | this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); | 1030 | this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false); |
1016 | this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); | 1031 | this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false); |
1017 | this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); | 1032 | this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false); |
1018 | this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false); | ||
1019 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); | 1033 | this.addPropertyChangeListener("currentDocument.model.domContainer", this); |
1020 | 1034 | ||
1021 | // Start the panel out in disabled mode by default | 1035 | // Start the panel out in disabled mode by default |
@@ -1638,21 +1652,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1638 | } | 1652 | } |
1639 | }, | 1653 | }, |
1640 | 1654 | ||
1641 | handlePlayButtonClick:{ | ||
1642 | value:function(ev){ | ||
1643 | this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview; | ||
1644 | |||
1645 | if (this.application.ninja.appModel.livePreview) { | ||
1646 | this.play_button.classList.remove("playbutton"); | ||
1647 | this.play_button.classList.add("pausebutton"); | ||
1648 | |||
1649 | } else { | ||
1650 | this.play_button.classList.remove("pausebutton"); | ||
1651 | this.play_button.classList.add("playbutton"); | ||
1652 | } | ||
1653 | } | ||
1654 | }, | ||
1655 | |||
1656 | handleKeyframeShortcut:{ | 1655 | handleKeyframeShortcut:{ |
1657 | value:function(action){ | 1656 | value:function(action){ |
1658 | var tempEv = {}; | 1657 | var tempEv = {}; |
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f9f5e98c..f82feb71 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | |||
@@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE. | |||
68 | .rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } | 68 | .rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } |
69 | 69 | ||
70 | /* line 150, ../scss/TimelinePanel.scss */ | 70 | /* line 150, ../scss/TimelinePanel.scss */ |
71 | .playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } | 71 | .playbutton { background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; } |
72 | 72 | ||
73 | /* line 158, ../scss/TimelinePanel.scss */ | 73 | /* line 162, ../scss/TimelinePanel.scss */ |
74 | .pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } | 74 | .playbutton:hover { background-color: #474747; opacity: 1; } |
75 | 75 | ||
76 | /* line 166, ../scss/TimelinePanel.scss */ | 76 | /* line 166, ../scss/TimelinePanel.scss */ |
77 | .playbutton.active:hover { background-color: #474747; opacity: 1; } | ||
78 | |||
79 | /* line 170, ../scss/TimelinePanel.scss */ | ||
80 | .playbutton:focus { -webkit-box-shadow: none; } | ||
81 | |||
82 | /* line 173, ../scss/TimelinePanel.scss */ | ||
83 | .pausebutton { background-image: url("../images/pause.png"); } | ||
84 | |||
85 | /* line 176, ../scss/TimelinePanel.scss */ | ||
77 | .forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } | 86 | .forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } |
78 | 87 | ||
79 | /* line 174, ../scss/TimelinePanel.scss */ | 88 | /* line 184, ../scss/TimelinePanel.scss */ |
80 | .timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; } | 89 | .timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; } |
81 | 90 | ||
82 | /* line 186, ../scss/TimelinePanel.scss */ | 91 | /* line 196, ../scss/TimelinePanel.scss */ |
83 | .layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; } | 92 | .layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; } |
84 | 93 | ||
85 | /* line 196, ../scss/TimelinePanel.scss */ | 94 | /* line 206, ../scss/TimelinePanel.scss */ |
86 | .masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; } | 95 | .masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; } |
87 | 96 | ||
88 | /* line 209, ../scss/TimelinePanel.scss */ | 97 | /* line 219, ../scss/TimelinePanel.scss */ |
89 | .mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); } | 98 | .mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); } |
90 | 99 | ||
91 | /* line 223, ../scss/TimelinePanel.scss */ | 100 | /* line 233, ../scss/TimelinePanel.scss */ |
92 | .container-tracks, .timelinemarkers, .mastertrack { width: 2000px; } | 101 | .container-tracks, .timelinemarkers, .mastertrack { width: 2000px; } |
93 | 102 | ||
94 | /* line 226, ../scss/TimelinePanel.scss */ | 103 | /* line 236, ../scss/TimelinePanel.scss */ |
95 | .userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; } | 104 | .userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; } |
96 | 105 | ||
97 | /* line 235, ../scss/TimelinePanel.scss */ | 106 | /* line 245, ../scss/TimelinePanel.scss */ |
98 | .timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; } | 107 | .timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; } |
99 | 108 | ||
100 | /* line 245, ../scss/TimelinePanel.scss */ | 109 | /* line 255, ../scss/TimelinePanel.scss */ |
101 | .newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } | 110 | .newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } |
102 | 111 | ||
103 | /* line 253, ../scss/TimelinePanel.scss */ | 112 | /* line 263, ../scss/TimelinePanel.scss */ |
104 | .deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } | 113 | .deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } |