aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js18
-rwxr-xr-xjs/panels/color/colorpanelbase.reel/colorpanelbase.js2836
-rwxr-xr-xjs/panels/properties.reel/properties.css15
3 files changed, 1452 insertions, 1417 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index e4e90d51..2fe60d72 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -730,13 +730,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
730 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement; 730 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
731 if(this.animatedElement!==undefined){ 731 if(this.animatedElement!==undefined){
732 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); 732 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
733
734 // check for multiple animation names
733 var animationNameList = this.animationName.split(","); 735 var animationNameList = this.animationName.split(",");
734 if(animationNameList.length > 1){ 736 if(animationNameList.length > 1){
735 this.animationName = animationNameList[0]; 737 this.animationName = animationNameList[0];
738 this.extractKeyframesFromRules(animationNameList);
736 } 739 }
737 740
738 this.animationNamesString = this.animationName; 741 this.animationNamesString = this.animationName;
739 742
743 // build tweens for this tracks's keyframe rule
740 if(this.animationName){ 744 if(this.animationName){
741 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 745 trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
742 this.nextKeyframe = 0; 746 this.nextKeyframe = 0;
@@ -802,6 +806,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
802 } 806 }
803 }, 807 },
804 808
809 extractKeyframesFromRules:{
810 value:function(ruleNames){
811 //console.log(ruleNames);
812 for(var i in ruleNames){
813 console.log(ruleNames[i].replace(/^\s+|\s+$/g,""));
814 var currName = ruleNames[i].replace(/^\s+|\s+$/g,"");
815 var test = this.application.ninja.stylesController.getAnimationRuleWithName(currName, this.application.ninja.currentDocument._document);
816 console.log(test);
817 }
818 }
819 },
820
805 addAnimationRuleToElement:{ 821 addAnimationRuleToElement:{
806 value:function (tweenEvent) { 822 value:function (tweenEvent) {
807 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; 823 this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
index af62dd07..7a28c55d 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js
@@ -15,35 +15,35 @@ var Montage = require("montage/core/core").Montage,
15//////////////////////////////////////////////////////////////////////// 15////////////////////////////////////////////////////////////////////////
16//Exporting as ColorPanelBase 16//Exporting as ColorPanelBase
17exports.ColorPanelBase = Montage.create(Component, { 17exports.ColorPanelBase = Montage.create(Component, {
18 //////////////////////////////////////////////////////////////////// 18 ////////////////////////////////////////////////////////////////////
19 // 19 //
20 hasTemplate: { 20 hasTemplate: {
21 value: true 21 value: true
22 }, 22 },
23 //////////////////////////////////////////////////////////////////// 23 ////////////////////////////////////////////////////////////////////
24 //Storing ColorPanel sliders mode 24 //Storing ColorPanel sliders mode
25 _panelMode: { 25 _panelMode: {
26 enumerable: false, 26 enumerable: false,
27 value: 'rgb' 27 value: 'rgb'
28 }, 28 },
29 //////////////////////////////////////////////////////////////////// 29 ////////////////////////////////////////////////////////////////////
30 //Storing ColorPanel sliders mode 30 //Storing ColorPanel sliders mode
31 panelMode: { 31 panelMode: {
32 enumerable: true, 32 enumerable: true,
33 get: function() { 33 get: function () {
34 return this._panelMode; 34 return this._panelMode;
35 }, 35 },
36 set: function(value) { 36 set: function (value) {
37 if (value !== this._panelMode) { 37 if (value !== this._panelMode) {
38 this._panelMode = value; 38 this._panelMode = value;
39 } 39 }
40 } 40 }
41 }, 41 },
42 //////////////////////////////////////////////////////////////////// 42 ////////////////////////////////////////////////////////////////////
43 // 43 //
44 _colorBar: { 44 _colorBar: {
45 enumerable: false, 45 enumerable: false,
46 value: null 46 value: null
47 }, 47 },
48 //////////////////////////////////////////////////////////////////// 48 ////////////////////////////////////////////////////////////////////
49 //Storing color manager 49 //Storing color manager
@@ -54,19 +54,19 @@ exports.ColorPanelBase = Montage.create(Component, {
54 //////////////////////////////////////////////////////////////////// 54 ////////////////////////////////////////////////////////////////////
55 // 55 //
56 colorManager: { 56 colorManager: {
57 enumerable: true, 57 enumerable: true,
58 get: function() { 58 get: function () {
59 return this._colorManager; 59 return this._colorManager;
60 }, 60 },
61 set: function(value) { 61 set: function (value) {
62 if (value !== this._colorManager) { 62 if (value !== this._colorManager) {
63 this._colorManager = value; 63 this._colorManager = value;
64 //Updating input buttons 64 //Updating input buttons
65 this._colorManager.addEventListener('change', this._update.bind(this)); 65 this._colorManager.addEventListener('change', this._update.bind(this));
66 this._colorManager.addEventListener('changing', this._update.bind(this)); 66 this._colorManager.addEventListener('changing', this._update.bind(this));
67 //Updating history buttons once color is set 67 //Updating history buttons once color is set
68 this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this)); 68 this._colorManager.addEventListener('change', this._updateHistoryButtons.bind(this));
69 } 69 }
70 } 70 }
71 }, 71 },
72 //////////////////////////////////////////////////////////////////// 72 ////////////////////////////////////////////////////////////////////
@@ -78,1574 +78,1578 @@ exports.ColorPanelBase = Montage.create(Component, {
78 //////////////////////////////////////////////////////////////////// 78 ////////////////////////////////////////////////////////////////////
79 // 79 //
80 _combo: { 80 _combo: {
81 enumerable: false, 81 enumerable: false,
82 value: [{slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}, {slider: null, hottext: null}] 82 value: [{ slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null }, { slider: null, hottext: null}]
83 }, 83 },
84 //////////////////////////////////////////////////////////////////// 84 ////////////////////////////////////////////////////////////////////
85 // 85 //
86 _buttons: { 86 _buttons: {
87 enumerable: false, 87 enumerable: false,
88 value: {chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: []} 88 value: { chip: [], fill: [], stroke: [], current: [], previous: [], rgbmode: [], hslmode: [], hexinput: [], nocolor: [], reset: [], swap: [], mlabel1: [], mlabel2: [], mlabel3: [] }
89 }, 89 },
90 //////////////////////////////////////////////////////////////////// 90 ////////////////////////////////////////////////////////////////////
91 // 91 //
92 historyCache: { 92 historyCache: {
93 enumerable: false, 93 enumerable: false,
94 value: {current: null, previous: null} 94 value: { current: null, previous: null }
95 }, 95 },
96 //////////////////////////////////////////////////////////////////// 96 ////////////////////////////////////////////////////////////////////
97 // 97 //
98 colorChipProps: { 98 colorChipProps: {
99 enumerable: true, 99 enumerable: true,
100 value: {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false} 100 value: { side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false }
101 }, 101 },
102 //////////////////////////////////////////////////////////////////// 102 ////////////////////////////////////////////////////////////////////
103 // 103 //
104 currentChip: { 104 currentChip: {
105 enumerable: true, 105 enumerable: true,
106 value: null 106 value: null
107 }, 107 },
108 //////////////////////////////////////////////////////////////////// 108 ////////////////////////////////////////////////////////////////////
109 // 109 //
110 previousInput: { 110 previousInput: {
111 enumerable: true, 111 enumerable: true,
112 value: null 112 value: null
113 }, 113 },
114 //////////////////////////////////////////////////////////////////// 114 ////////////////////////////////////////////////////////////////////
115 //Setting up elements/components 115 //Setting up elements/components
116 prepareForDraw: { 116 prepareForDraw: {
117 enumerable: false, 117 enumerable: false,
118 value: function() { 118 value: function () {
119 //TODO: Remove temporary hack, color history should be initilized 119 //TODO: Remove temporary hack, color history should be initilized
120 this.addEventListener('firstDraw', this, false); 120 this.addEventListener('firstDraw', this, false);
121 this.application.ninja.colorController.colorView = this; 121