diff options
-rwxr-xr-x | css/ninja.css | 4 | ||||
-rw-r--r-- | js/controllers/presets-controller.js | 77 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.js | 69 | ||||
-rwxr-xr-x | js/panels/Splitter.js | 13 | ||||
-rw-r--r-- | js/panels/drag-drop-composer.js | 4 | ||||
-rw-r--r-- | js/panels/presets/default-animation-presets.js | 4 | ||||
-rwxr-xr-x | scss/imports/scss/_MainWindow.scss | 2 | ||||
-rwxr-xr-x | scss/imports/scss/_PanelUI.scss | 2 |
8 files changed, 114 insertions, 61 deletions
diff --git a/css/ninja.css b/css/ninja.css index 605951e4..650f3b08 100755 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
80 | 80 | ||
81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } | 81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } |
82 | 82 | ||
83 | .timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; } | 83 | .timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; -webkit-transition: all 0.15s linear; } |
84 | 84 | ||
85 | .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } | 85 | .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } |
86 | 86 | ||
@@ -604,7 +604,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba | |||
604 | 604 | ||
605 | .pp_strokelabel { border: none; margin: -1px 8px 0px 27px; } | 605 | .pp_strokelabel { border: none; margin: -1px 8px 0px 27px; } |
606 | 606 | ||
607 | .pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; } | 607 | .pp_filllabel { border: none; margin: -1px 8px 0px 34px; } |
608 | 608 | ||
609 | .panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; } | 609 | .panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; } |
610 | 610 | ||
diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 0467f73c..975f9f7a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js | |||
@@ -20,14 +20,39 @@ exports.PresetsController = Montage.create(Component, { | |||
20 | 20 | ||
21 | addTransition: { | 21 | addTransition: { |
22 | value: function(element) { | 22 | value: function(element) { |
23 | var transitionDuration; | ||
24 | |||
23 | element.classList.add(this.transitionClass); | 25 | element.classList.add(this.transitionClass); |
24 | element.addEventListener("webkitTransitionEnd", this, true); | 26 | element.addEventListener("webkitTransitionEnd", this, true); |
27 | |||
28 | |||
29 | //// TODO: replace this hack when webkit supports transitionStart event | ||
30 | transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); | ||
31 | element.njTimeout = window.setTimeout(function() { | ||
32 | this.captureWebkitTransitionEnd({ | ||
33 | 'target': element | ||
34 | }); | ||
35 | }.bind(this), this._getMilliseconds(transitionDuration) + 100); | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | _getMilliseconds : { | ||
40 | value: function(duration) { | ||
41 | if(duration.indexOf('ms') !== -1) { | ||
42 | return parseInt(duration); | ||
43 | } else { | ||
44 | return parseFloat(duration)*1000; | ||
45 | } | ||
25 | } | 46 | } |
26 | }, | 47 | }, |
27 | 48 | ||
28 | captureWebkitTransitionEnd : { | 49 | captureWebkitTransitionEnd : { |
29 | value : function(e) { | 50 | value : function(e) { |
30 | var el = e.target; | 51 | var el = e.target; |
52 | |||
53 | //// TODO: replace this hack when webkit supports transitionStart event (see above) | ||
54 | window.clearTimeout(el.njTimeout); | ||
55 | |||
31 | el.classList.remove(this.transitionClass); | 56 | el.classList.remove(this.transitionClass); |
32 | el.removeEventListener("webkitTransitionEnd", this, true); | 57 | el.removeEventListener("webkitTransitionEnd", this, true); |
33 | } | 58 | } |
@@ -41,10 +66,29 @@ exports.PresetsController = Montage.create(Component, { | |||
41 | 66 | ||
42 | var stylesController = this.application.ninja.stylesController, | 67 | var stylesController = this.application.ninja.stylesController, |
43 | selectorBase = presetData.selectorBase, | 68 | selectorBase = presetData.selectorBase, |
44 | rules = []; | 69 | rules = [], |
70 | animationNames = []; | ||
45 | 71 | ||
46 | selectorBase = stylesController.generateClassName(selectorBase); | 72 | selectorBase = stylesController.generateClassName(selectorBase); |
47 | 73 | ||
74 | selection.forEach(function(element) { | ||
75 | var el = element._element, | ||
76 | animationName; | ||
77 | |||
78 | if(useTransition) { | ||
79 | this.addTransition(el); | ||
80 | } | ||
81 | |||
82 | ///// TODO: remove when we find out what to do with competing animations | ||
83 | animationName = stylesController.getElementStyle(el, '-webkit-animation-name'); | ||
84 | if(animationName) { | ||
85 | animationNames.push(animationName); | ||
86 | } | ||
87 | |||
88 | el.classList.add(selectorBase); | ||
89 | |||
90 | }, this); | ||
91 | |||
48 | presetData.rules.forEach(function(rule, i) { | 92 | presetData.rules.forEach(function(rule, i) { |
49 | ///// Treat keyframed rules differently | 93 | ///// Treat keyframed rules differently |
50 | if(rule.isKeyFrameRule) { | 94 | if(rule.isKeyFrameRule) { |
@@ -54,38 +98,19 @@ exports.PresetsController = Montage.create(Component, { | |||
54 | ); | 98 | ); |
55 | } else { | 99 | } else { |
56 | var suffix = rule.selectorSuffix || ''; | 100 | var suffix = rule.selectorSuffix || ''; |
57 | rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); | ||
58 | } | ||
59 | }, this); | ||
60 | |||
61 | selection.forEach(function(element) { | ||
62 | if(useTransition) { | ||
63 | this.addTransition(element); | ||
64 | } | ||
65 | |||
66 | element.classList.add(selectorBase); | ||
67 | 101 | ||
68 | //// Keep track of elements with presets and don't add duplicates | 102 | ///// TODO: remove when we find out what to do with competing animations |
69 | this.setCachedPreset(element, presetData.id, rules); | 103 | if(rule.styles['-webkit-animation-name'] && animationNames.length) { |
104 | rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); | ||
105 | } | ||
70 | 106 | ||
107 | rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); | ||
108 | } | ||
71 | }, this); | 109 | }, this); |
72 | 110 | ||
73 | } | 111 | } |
74 | }, | 112 | }, |
75 | 113 | ||
76 | setCachedPreset : { | ||
77 | value: function(el, presetId, rules) { | ||
78 | |||
79 | } | ||
80 | }, | ||
81 | |||
82 | getPresets : { | ||
83 | value: function(element) { | ||
84 | |||
85 | } | ||
86 | |||
87 | }, | ||
88 | |||
89 | stringifyKeys : { | 114 | stringifyKeys : { |
90 | value: function(keysArray) { | 115 | value: function(keysArray) { |
91 | var keysString = ''; | 116 | var keysString = ''; |
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 9cbbc9b9..9b5081dd 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js | |||
@@ -25,7 +25,7 @@ exports.Ninja = Montage.create(Component, { | |||
25 | }, | 25 | }, |
26 | 26 | ||
27 | _isResizing: { | 27 | _isResizing: { |
28 | value: false | 28 | value: null |
29 | }, | 29 | }, |
30 | _resizedHeight : { | 30 | _resizedHeight : { |
31 | value: 0 | 31 | value: 0 |
@@ -36,11 +36,18 @@ exports.Ninja = Montage.create(Component, { | |||
36 | 36 | ||
37 | height: { | 37 | height: { |
38 | get: function() { | 38 | get: function() { |
39 | if(this._height === null) { | ||
40 | var storedData = this.application.localStorage.getItem("timelinePanel"); | ||
41 | if(storedData && storedData.value) { | ||
42 | this._height = storedData.value; | ||
43 | } | ||
44 | } | ||
39 | return this._height; | 45 | return this._height; |
40 | }, | 46 | }, |
41 | set: function(val) { | 47 | set: function(val) { |
42 | if(this._height != val) { | 48 | if(this._height != val) { |
43 | this._height = val; | 49 | this._height = val; |
50 | this.application.localStorage.setItem("timelinePanel", {"version": this.version, "value": val}); | ||
44 | this.needsDraw = true; | 51 | this.needsDraw = true; |
45 | } | 52 | } |
46 | 53 | ||
@@ -56,11 +63,18 @@ exports.Ninja = Montage.create(Component, { | |||
56 | 63 | ||
57 | width: { | 64 | width: { |
58 | get: function() { | 65 | get: function() { |
66 | if(this._width === null) { | ||
67 | var storedData = this.application.localStorage.getItem("rightPanelsContainer"); | ||
68 | if(storedData && storedData.value) { | ||
69 | this._width = storedData.value; | ||
70 | } | ||
71 | } | ||
59 | return this._width; | 72 | return this._width; |
60 | }, | 73 | }, |
61 | set: function(val) { | 74 | set: function(val) { |
62 | if(this._width != val) { | 75 | if(this._width != val) { |
63 | this._width = val; | 76 | this._width = val; |
77 | this.application.localStorage.setItem("rightPanelsContainer", {"version": this.version, "value": val}); | ||
64 | this.needsDraw = true; | 78 | this.needsDraw = true; |
65 | } | 79 | } |
66 | 80 | ||
@@ -72,6 +86,8 @@ exports.Ninja = Montage.create(Component, { | |||
72 | this.isResizing = true; | 86 | this.isResizing = true; |
73 | this.height = parseInt(this.timeline.element.offsetHeight); | 87 | this.height = parseInt(this.timeline.element.offsetHeight); |
74 | this.width = parseInt(this.rightPanelContainer.offsetWidth); | 88 | this.width = parseInt(this.rightPanelContainer.offsetWidth); |
89 | this.rightPanelContainer.classList.add("disableTransition"); | ||
90 | this.timeline.element.classList.add("disableTransition"); | ||
75 | this.needsDraw = true; | 91 | this.needsDraw = true; |
76 | } | 92 | } |
77 | }, | 93 | }, |