diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/layout/bread-crumb.reel/bread-crumb.css | 10 | ||||
-rw-r--r-- | js/controllers/presets-controller.js | 108 | ||||
-rwxr-xr-x | js/document/templates/montage-html/default_html.css | 4 | ||||
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 4 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.html | 107 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.js | 120 | ||||
-rwxr-xr-x | js/panels/Splitter.js | 2 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 | ||||
-rw-r--r-- | js/panels/presets/animations-presets.reel/animations-presets.js | 47 | ||||
-rw-r--r-- | js/panels/presets/default-animation-presets.js | 2 | ||||
-rw-r--r-- | js/panels/presets/default-style-presets.js | 11 | ||||
-rw-r--r-- | js/panels/presets/default-transition-presets.js | 8 | ||||
-rw-r--r-- | js/panels/presets/style-presets.reel/style-presets.js | 49 | ||||
-rw-r--r-- | js/panels/presets/transitions-presets.reel/transitions-presets.js | 20 | ||||
-rw-r--r-- | js/panels/resize-composer.js | 34 | ||||
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.js | 12 | ||||
-rwxr-xr-x | js/tools/TextTool.js | 5 |
17 files changed, 372 insertions, 175 deletions
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index dcfd471c..26a56b45 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css | |||
@@ -4,14 +4,20 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | .breadcrumbTrail{ | 7 | .breadcrumbTrail { |
8 | |||
8 | background-color: #282828; | 9 | background-color: #282828; |
9 | border-style: double; | ||
10 | height: 26px; | 10 | height: 26px; |
11 | position:relative; | 11 | position:relative; |
12 | -webkit-box-flex: 0; | 12 | -webkit-box-flex: 0; |
13 | } | 13 | } |
14 | 14 | ||
15 | .mainContentContainer > section.breadcrumbTrail { | ||
16 | border:0; | ||
17 | margin:0; | ||
18 | border-bottom:1px solid #000; | ||
19 | margin-bottom:1px; | ||
20 | } | ||
15 | .breadcrumbTrail button.nj-skinned { | 21 | .breadcrumbTrail button.nj-skinned { |
16 | float: left; | 22 | float: left; |
17 | width: 60px; | 23 | width: 60px; |
diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js new file mode 100644 index 00000000..7152ba93 --- /dev/null +++ b/js/controllers/presets-controller.js | |||
@@ -0,0 +1,108 @@ | |||
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 | var Montage = require("montage/core/core").Montage, | ||
9 | Component = require("montage/ui/component").Component; | ||
10 | |||
11 | exports.PresetsController = Montage.create(Component, { | ||
12 | |||
13 | hasTemplate : { | ||
14 | value: false | ||
15 | }, | ||
16 | |||
17 | transitionClass : { | ||
18 | value : "nj-preset-transition" | ||
19 | }, | ||
20 | |||
21 | addTransition: { | ||
22 | value: function(element) { | ||
23 | element.classList.add(this.transitionClass); | ||
24 | element.addEventListener("webkitTransitionEnd", this, true); | ||
25 | } | ||
26 | }, | ||
27 | |||
28 | captureWebkitTransitionEnd : { | ||
29 | value : function(e) { | ||
30 | var el = e.target; | ||
31 | el.classList.remove(this.transitionClass); | ||
32 | el.removeEventListener("webkitTransitionEnd", this, true); | ||
33 | } | ||
34 | }, | ||
35 | |||
36 | applyPreset : { | ||
37 | value: function(presetData, useTransition) { | ||
38 | var selection = this.application.ninja.selectedElements; | ||
39 | |||
40 | if(!selection || !selection.length || selection.length === 0) { return false; } | ||
41 | |||
42 | var stylesController = this.application.ninja.stylesController, | ||
43 | selectorBase = presetData.selectorBase, | ||
44 | rules = []; | ||
45 | |||
46 | selectorBase = stylesController.generateClassName(selectorBase); | ||
47 | |||
48 | presetData.rules.forEach(function(rule, i) { | ||
49 | ///// Treat keyframed rules differently | ||
50 | if(rule.isKeyFrameRule) { | ||
51 | this.application.ninja.stylesController.addRule( | ||
52 | '@-webkit-keyframes ' + presetData.selectorBase, | ||
53 | this.stringifyKeys(rule.keys) | ||
54 | ); | ||
55 | } else { | ||
56 | var suffix = rule.selectorSuffix || ''; | ||
57 | rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); | ||
58 | } | ||
59 | }, this); | ||
60 | |||
61 | selection.forEach(function(element) { | ||
62 | var el = element._element; | ||
63 | |||
64 | if(useTransition) { | ||
65 | this.addTransition(el); | ||
66 | } | ||
67 | |||
68 | el.classList.add(selectorBase); | ||
69 | |||
70 | //// Keep track of elements with presets and don't add duplicates | ||
71 | this.setCachedPreset(el, presetData.id, rules); | ||
72 | |||
73 | }, this); | ||
74 | |||
75 | } | ||
76 | }, | ||
77 | |||
78 | setCachedPreset : { | ||
79 | value: function(el, presetId, rules) { | ||
80 | |||
81 | } | ||
82 | }, | ||
83 | |||
84 | getPresets : { | ||
85 | value: function(element) { | ||
86 | |||
87 | } | ||
88 | |||
89 | }, | ||
90 | |||
91 | stringifyKeys : { | ||
92 | value: function(keysArray) { | ||
93 | var keysString = ''; | ||
94 | |||
95 | keysArray.forEach(function(key) { | ||
96 | var styles = '', style; | ||
97 | |||
98 | for(style in key.styles) { | ||
99 | styles += style + ':' + key.styles[style] + '; '; | ||
100 | } | ||
101 | |||
102 | keysString += key.keyText + ' {' + styles + ' }'; | ||
103 | }); | ||
104 | |||
105 | return keysString; | ||
106 | } | ||
107 | } | ||
108 | }); \ No newline at end of file | ||
diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css index 68300edf..6c2b415f 100755 --- a/js/document/templates/montage-html/default_html.css +++ b/js/document/templates/montage-html/default_html.css | |||
@@ -72,4 +72,8 @@ body | |||
72 | 72 | ||
73 | .elem-red-outline { | 73 | .elem-red-outline { |
74 | outline: red solid thin; | 74 | outline: red solid thin; |
75 | } | ||
76 | |||
77 | .nj-preset-transition { | ||
78 | -webkit-transition: all 450ms linear !important; | ||
75 | } \ No newline at end of file | 79 | } \ No newline at end of file |
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index d849e3d7..22209815 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -545,8 +545,8 @@ var BrushStroke = function GLBrushStroke() { | |||
545 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); | 545 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); |
546 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); | 546 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); |
547 | //assign the new position, width, and height as the canvas dimensions through the canvas controller | 547 | //assign the new position, width, and height as the canvas dimensions through the canvas controller |
548 | CanvasController.setProperty(this._canvas, "left", newLeft+"px"); | 548 | //CanvasController.setProperty(this._canvas, "left", newLeft+"px"); |
549 | CanvasController.setProperty(this._canvas, "top", newTop+"px"); | 549 | //CanvasController.setProperty(this._canvas, "top", newTop+"px"); |
550 | 550 | ||
551 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); | 551 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); |
552 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); | 552 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); |
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index f9e1efdd..ead7f576 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html | |||
@@ -77,34 +77,83 @@ | |||
77 | "name": "Splitter", | 77 | "name": "Splitter", |
78 | "properties": { | 78 | "properties": { |
79 | "element": {"#": "bottomSplitter"}, | 79 | "element": {"#": "bottomSplitter"}, |
80 | "panel": {"#": "bottomPanelContainer"}, | 80 | "panel": {"@": "timeline"} |
81 | "resizeBar": {"#": "timelineResizer"} | ||
82 | } | 81 | } |
83 | }, | 82 | }, |
84 | 83 | ||
85 | "resizer1": { | 84 | "resizer1": { |
86 | "module": "js/panels/Resizer", | 85 | "module": "js/panels/resize-composer", |
87 | "name": "Resizer", | 86 | "name": "ResizeComposer", |
88 | "properties": { | 87 | "properties": { |
89 | "element": {"#": "rightPanelResizer"}, | 88 | "element": {"#": "rightPanelResizer"}, |
90 | "id": "rightPanelResizer", | 89 | "component": {"@": "owner"}, |
91 | "panel": {"#": "rightPanelContainer"}, | 90 | "yAxis": false |
92 | "isVertical": false, | 91 | }, |
93 | "redrawStage": true | 92 | "listeners": [ |
94 | } | 93 | { |
94 | "type": "resizeStart", | ||
95 | "listener": {"@": "owner"} | ||
96 | }, | ||
97 | { | ||
98 | "type": "resizeMove", | ||
99 | "listener": {"@": "owner"} | ||