aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js326
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.html30
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js61
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css21
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html173
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js627
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css285
-rw-r--r--js/panels/Timeline/Layer.reel/images/eye.pngbin0 -> 1331 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-collapsed.pngbin0 -> 325 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-eye.pngbin0 -> 550 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-lock.pngbin0 -> 475 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-minus.pngbin0 -> 161 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-open.pngbin0 -> 323 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/icon-plus.pngbin0 -> 230 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/lock_closed.pngbin0 -> 1208 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/lock_open.pngbin0 -> 1186 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/images/panelDisclosureIcon.pngbin0 -> 3028 bytes
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss231
-rw-r--r--js/panels/Timeline/Layer.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html29
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js21
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css19
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss27
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/Span.reel/Span.html30
-rw-r--r--js/panels/Timeline/Span.reel/Span.js42
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css17
-rw-r--r--js/panels/Timeline/Style.reel/Style.html96
-rw-r--r--js/panels/Timeline/Style.reel/Style.js654
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css133
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss76
-rw-r--r--js/panels/Timeline/Style.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/TimelineController.js13
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html291
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1114
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css274
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/pause.pngbin0 -> 1076 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/play.pngbin0 -> 1190 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/play_next.pngbin0 -> 1185 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/play_prev.pngbin0 -> 1199 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/plus.pngbin0 -> 1133 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/timetick.jpgbin0 -> 737 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/trash.pngbin0 -> 1154 bytes
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html179
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js658
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css62
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/images/gridline.jpgbin0 -> 724 bytes
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss69
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/Track.reel/Track.html66
-rw-r--r--js/panels/Timeline/Track.reel/Track.js192
-rw-r--r--js/panels/Timeline/Track.reel/css/Track.css32
-rw-r--r--js/panels/Timeline/Track.reel/images/gridline.jpgbin0 -> 724 bytes
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html31
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js21
-rw-r--r--js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css11
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html49
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js199
-rw-r--r--js/panels/Timeline/Tween.reel/css/Tween.css (renamed from js/panels/Timeline/TimelinePanel.reel/TimelinePanel.css)4
59 files changed, 5960 insertions, 239 deletions
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
new file mode 100644
index 00000000..5de884a9
--- /dev/null
+++ b/js/panels/Timeline/Collapser.js
@@ -0,0 +1,326 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7/*
8 * Collapser: Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other.
9 * Required properties:
10 * clicker: The element that will be clicked on.
11 * content: The element that will expand or collapse as the clicker is clicked on.
12 * Optional properties:
13 * isCollapsed: Is the content collapsed. Set to true on serialization (or initialization) to start content in collapsed state.
14 * Can be manually set as well.
15 * collapsibleClass: The CSS class to apply to the content and the clicker when collapsed. Defaults to "collapsible-collapsed".
16 * isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
17 * transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the
18 * collapse process. You can then define transitionClass in your style sheet with the desired CSS transitions.
19 * Defaults to "collapsible-transition".
20 * contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content
21 * (in pixels, but without the "px") when not collapsed. If this value is not set, the first time the content is expanded
22 * the transition will not work. Subsequent collapses (and expansions) will transition as expected.
23 * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to
24 * false for collapsers that will only be operated remotely.
25 * toggle(): Manually toggle the expand/collapse of the content.
26 *
27 */
28var Montage = require("montage/core/core").Montage,
29 Component = require("montage/ui/component").Component,
30 Collapser = exports.Collapser = Montage.create(Component, {
31
32 // This component has no template.
33 hasTemplate:{
34 value: false
35 },
36
37 /* === BEGIN: Models === */
38
39 // contentHeight: Stores the height of the content just before collapse.
40 _contentHeight: {
41 value: 0
42 },
43 contentHeight: {
44 get: function() {
45 return this._contentHeight;
46 },
47 set: function(newVal) {
48 this._contentHeight = newVal;
49 }
50 },
51
52 // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle.
53 _isCollapsing: {
54 value: false
55 },
56
57 // isAnimated: boolean to apply transition to expand/collapse
58 _isAnimated : {
59 value: false
60 },
61 isAnimated: {
62 get: function() {
63 return this._isAnimated;
64 },
65 set: function(newVal) {
66 this._isAnimated = newVal;
67 }
68 },
69
70 _bypassAnimation : {
71 value: false
72 },
73 bypassAnimation: {
74 get: function() {
75 return this._bypassAnimation;
76 },
77 set: function(newVal) {
78 this._bypassAnimation= newVal;
79 }
80 },
81
82 // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
83 // Note that this CSS class must be defined in your style sheet with the desired transitions.
84 _transitionClass : {
85 value: "collapsible-transition"
86 },
87 transitionClass: {
88 get: function() {
89 return this._transitionClass;
90 },
91 set: function(newVal) {
92 this._transitionClass = newVal;
93 }
94 },
95
96 // isCollapsed: is the content actually collapsed at this moment
97 _isCollapsed: {
98 value: ""
99 },
100 isCollapsed : {
101 get: function() {
102 return this._isCollapsed;
103 },
104 set: function(newVal) {
105 if (newVal !== this._isCollapsed) {
106 this._isCollapsed = newVal;
107 this.needsDraw = true;
108 }
109
110 }
111 },
112
113 // collapsedClass: the class to apply to the clicker and content when the content is collapsed.
114 _collapsedClass : {
115 value: "collapsible-collapsed"
116 },
117 collapsedClass: {
118 get: function() {
119 return this._collapsedClass;
120 },
121 set: function(newVal) {
122 this._collapsedClass = newVal;
123 }
124 },
125