22
33export default function actions ( message ) {
44
5- // console.log(message.data );
5+ // console.log(message);
66
77 // TODO
88 // col 1 : @media with current media indicator
99 // % / px
10- // more px by line
1110 // col 6 : bg color img linear gradient
1211 // col 8 : all value
1312
@@ -24,33 +23,43 @@ export default function actions(message) {
2423 this . focusSelector ( 1 ) ;
2524 }
2625
26+
2727 if ( message . data [ 0 ] === 144 && message . data [ 2 ] === 127 ) {
2828 // COLUMN 2 BUTTONS POSITION
2929
3030 var values = {
31- 9 : " absolute" ,
32- 17 : " relative" ,
33- 1 : "fixed"
31+ 9 : ' absolute' ,
32+ 17 : ' relative' ,
33+ 1 : 'absolute'
3434 } ;
3535 var position = values [ message . data [ 1 ] ] ;
36- if ( position ) {
36+ if ( message . data [ 1 ] === 1 ) {
37+ this . addLine ( 'position' , function ( node ) {
38+ return 'absolute 50% auto auto 50%' ;
39+ } , { focus : true , cb : function ( ) {
40+ this . addLine ( 'transform' , function ( node ) {
41+ return 'translateX(-50%) translateY(-50%)' ;
42+ } , { focus : true } ) ;
43+ } . bind ( this ) } ) ;
44+ }
45+ else if ( position ) {
3746 this . getFocusNode ( function ( node ) {
38- if ( node && node . type === " decl" && node . prop === " position" && node . value . split ( " " ) [ 0 ] === position ) {
39- this . addLine ( " position" , function ( ) { return position ; } ) ;
47+ if ( node && node . type === ' decl' && node . prop === ' position' && node . value . split ( ' ' ) [ 0 ] === position ) {
48+ this . addLine ( ' position' , function ( ) { return position ; } , { focus : true } ) ;
4049 }
4150 else {
42- this . addLine ( " position" , function ( node ) {
43- var value = "" ;
51+ this . addLine ( ' position' , function ( node ) {
52+ var value = '' ;
4453 if ( node ) {
45- value = node . value . split ( " " ) ;
54+ value = node . value . split ( ' ' ) ;
4655 value . shift ( ) ;
47- value = value . join ( " " ) ;
56+ value = value . join ( ' ' ) ;
4857 }
4958 if ( value ) {
50- value = " " + value ;
59+ value = ' ' + value ;
5160 }
5261 return position + value ;
53- } ) ;
62+ } , { focus : true } ) ;
5463 }
5564 } . bind ( this ) ) ;
5665 }
@@ -59,95 +68,175 @@ export default function actions(message) {
5968 if ( message . data [ 0 ] === 225 ) {
6069 // COLUMN 2 SLIDER POSITION
6170
62- var px = Math . round ( message . data [ 1 ] / 128 * 64 ) ;
71+ var px = Math . round ( message . data [ 1 ] / 127 * 64 ) ;
6372
64- this . addLine ( " position" , function ( node ) {
65- var position = ! node ? " relative" : node . value . split ( " " ) [ 0 ] ;
66- px = px !== 0 ? px + "px" : px ;
67- return position + " " + px ;
73+ this . addLine ( ' position' , function ( node ) {
74+ var position = ! node ? ' relative' : node . value . split ( ' ' ) [ 0 ] ;
75+ px = px !== 0 ? px + 'px' : px ;
76+ return position + ' ' + px ;
6877 } ) ;
6978
7079 }
80+ if ( message . data [ 0 ] === 176 && message . data [ 1 ] === 17 ) {
81+ // COLUMN 2 ORIENTATION POSITION
82+ // TODO
83+
84+ if ( message . data [ 2 ] === 127 ) {
85+ // LEFT
86+
87+ this . addLine ( 'position' , function ( node ) {
88+ var position = ! node ? 'relative' : node . value . split ( ' ' ) [ 0 ] ;
89+ var value = '' ;
90+ if ( node ) {
91+ value = node . value . split ( ' ' ) ;
92+ value . shift ( ) ;
93+ if ( value . length === 0 ) {
94+ value = '0 0' ;
95+ }
96+ else if ( value . length === 1 ) {
97+ value = value [ 0 ] + ' ' + value [ 0 ] ;
98+ }
99+ else {
100+ value = value [ 0 ] + ' ' + value [ 1 ] ;
101+ }
102+ }
103+ if ( value ) {
104+ value = ' ' + value ;
105+ }
106+ return position + value ;
107+ } ) ;
108+ }
109+ if ( message . data [ 2 ] === 1 || message . data [ 2 ] === 65 ) {
110+ // MIDDLE
111+
112+ this . addLine ( 'position' , function ( node ) {
113+ var position = ! node ? 'relative' : node . value . split ( ' ' ) [ 0 ] ;
114+ var value = '' ;
115+ if ( node ) {
116+ value = node . value . split ( ' ' ) ;
117+ value . shift ( ) ;
118+ if ( value . length === 0 ) {
119+ value = '0' ;
120+ }
121+ else {
122+ value = value [ 0 ] ;
123+ }
124+ }
125+ if ( value ) {
126+ value = ' ' + value ;
127+ }
128+ return position + value ;
129+ } ) ;
130+ }
131+ if ( message . data [ 2 ] === 63 ) {
132+ // RIGHT
133+
134+ this . addLine ( 'position' , function ( node ) {
135+ var position = ! node ? 'relative' : node . value . split ( ' ' ) [ 0 ] ;
136+ var value = '' ;
137+ if ( node ) {
138+ value = node . value . split ( ' ' ) ;
139+ value . shift ( ) ;
140+ if ( value . length === 0 ) {
141+ value = '0 0' ;
142+ }
143+ else if ( value . length === 1 ) {
144+ value = value [ 0 ] + ' ' + value [ 0 ] ;
145+ }
146+ else {
147+ value = value [ 0 ] + ' ' + value [ 1 ] ;
148+ }
149+ }
150+ if ( value ) {
151+ value = ' ' + value ;
152+ }
153+ return position + value ;
154+ } ) ;
155+ }
156+
157+ }
158+
71159
72160 if ( message . data [ 0 ] === 144 && message . data [ 2 ] === 127 ) {
73161 // COLUMN 3 BUTTONS DISPLAY
74162
75163 var values = {
76- 10 : " block" ,
77- 18 : " inline-block" ,
78- 2 : " flex"
164+ 10 : ' block' ,
165+ 18 : ' inline-block' ,
166+ 2 : ' flex'
79167 } ;
80168 var display = values [ message . data [ 1 ] ] ;
81169 if ( display ) {
82- this . addLine ( " display" , function ( ) { return display ; } ) ;
170+ this . addLine ( ' display' , function ( ) { return display ; } , { focus : true } ) ;
83171 }
84172
85173 }
86174 if ( message . data [ 0 ] === 226 ) {
87175 // COLUMN 3 SLIDER DISPLAY
88176
89- var px = Math . round ( message . data [ 1 ] / 128 * 64 ) ;
90- this . addLine ( "size" , function ( node ) {
91- px = px !== 0 ? px + "px" : px ;
92- return px ;
93- } ) ;
177+ var px = Math . round ( message . data [ 1 ] / 127 * 66 ) ;
178+ if ( px >= 65 ) { px = '100%' ; }
179+ else if ( px !== 0 ) { px = px + 'px' ; }
180+ this . addLine ( 'size' , function ( node ) { return px ; } ) ;
94181
95182 }
96183
184+
97185 if ( message . data [ 0 ] === 144 && message . data [ 2 ] === 127 ) {
98186 // COLUMN 4 BUTTONS MARGIN/PADDING
99187
100188 var props = {
101- 11 : " margin" ,
102- 19 : " padding"
189+ 11 : ' margin' ,
190+ 19 : ' padding'
103191 } ;
104192 var prop = props [ message . data [ 1 ] ] ;
105193 if ( prop ) {
106194 this . addLine ( prop , function ( node ) {
107- var value = ! node ? "0" : node . value ;
195+ var value = ! node ? '0' : node . value ;
108196 return value ;
109- } ) ;
197+ } , { focus : true } ) ;
110198 }
111199
112200 }
113201 if ( message . data [ 0 ] === 227 ) {
114202 // COLUMN 4 SLIDER MARGIN/PADDING
115203
116- var px = Math . round ( message . data [ 1 ] / 128 * 64 ) ;
117- px = px !== 0 ? px + "px" : px ;
204+ var px = Math . round ( message . data [ 1 ] / 127 * 64 ) ;
205+ px = px !== 0 ? px + 'px' : px ;
118206 this . getFocusNode ( function ( node ) {
119- if ( node && node . type === " decl" ) {
120- if ( node . prop === " margin" || node . prop === " padding" ) {
207+ if ( node && node . type === ' decl' ) {
208+ if ( node . prop === ' margin' || node . prop === ' padding' ) {
121209 this . addLine ( node . prop , function ( ) { return px ; } ) ;
122210 }
123211 }
124212 } . bind ( this ) ) ;
125213
126214 }
127215
216+
128217 if ( message . data [ 0 ] === 144 && message . data [ 2 ] === 127 ) {
129218 // COLUMN 5 BUTTONS FONTS WEIGHT
130219
131220 var values = {
132- 12 : "bold" ,
133- 20 : "regular" ,
134- 4 : "light"
221+ 12 : '500' ,
222+ 20 : '400' ,
223+ 4 : '300'
135224 } ;
136225 var weight = values [ message . data [ 1 ] ] ;
137226 if ( weight ) {
138227 this . getFocusNode ( function ( node ) {
139- if ( node && node . type === " decl" && node . prop === " position" && node . value . split ( " " ) [ 0 ] === position ) {
140- this . addLine ( " font" , function ( ) { return " title, " + weight + " 16px" ; } ) ;
228+ if ( node && node . type === ' decl' && node . prop === ' position' && node . value . split ( ' ' ) [ 0 ] === position ) {
229+ this . addLine ( ' font' , function ( ) { return ' title ' + weight + ' 16px' ; } , { focus : true } ) ;
141230 }
142231 else {
143- this . addLine ( " font" , function ( node ) {
144- var px = " 16px" ;
232+ this . addLine ( ' font' , function ( node ) {
233+ var px = ' 16px' ;
145234 if ( node ) {
146- var splitted = node . value . split ( " " ) ;
235+ var splitted = node . value . split ( ' ' ) ;
147236 px = splitted [ splitted . length - 1 ] ;
148237 }
149- return " title, " + weight + " " + px ;
150- } ) ;
238+ return ' title ' + weight + ' ' + px ;
239+ } , { focus : true } ) ;
151240 }
152241 } . bind ( this ) ) ;
153242 }
@@ -156,28 +245,41 @@ export default function actions(message) {
156245 if ( message . data [ 0 ] === 228 ) {
157246 // COLUMN 5 SLIDER FONT SIZE
158247
159- var px = Math . round ( message . data [ 1 ] / 128 * 20 ) + 8 ;
160- if ( px === 8 ) { px = 0 ; }
248+ var px = Math . round ( message . data [ 1 ] / 127 * 10 ) + 12 ;
161249
162- px = px !== 0 ? px + "px" : px ;
163- this . addLine ( " font" , function ( node ) {
164- var font = [ " title, regular" , 0 ] ;
250+ px = px !== 0 ? px + 'px' : px ;
251+ this . addLine ( ' font' , function ( node ) {
252+ var font = [ ' title' , ' regular' , 0 ] ;
165253 if ( node ) {
166- font = node . value . split ( " " ) ;
254+ font = node . value . split ( ' ' ) ;
167255 }
168256 font [ font . length - 1 ] = px ;
169257
170- return font . join ( " " ) ;
258+ return font . join ( ' ' ) ;
171259 } ) ;
172260
173261 }
174262
175- if ( message . data [ 0 ] === 230 ) {
176- // COLUMN 7 TRANSITION
263+ if ( message . data [ 0 ] === 144 && message . data [ 2 ] === 127 ) {
264+ // COLUMN 6 BUTTONS TRANSITION
265+
266+ var values = {
267+ 13 : '0.1s' ,
268+ 21 : '0.2s' ,
269+ 5 : '0.3s'
270+ } ;
271+ var transition = values [ message . data [ 1 ] ] ;
272+ if ( transition ) {
273+ this . addLine ( 'transition' , function ( ) { return transition ; } , { focus : true } ) ;
274+ }
275+
276+ }
277+ if ( message . data [ 0 ] === 229 ) {
278+ // COLUMN 6 TRANSITION
177279
178- var sec = Math . round ( message . data [ 1 ] / 128 * 1.5 / 10 * 100 ) * 10 / 100 ;
179- sec = sec !== 0 ? sec + "s" : sec ;
180- this . addLine ( " transition" , function ( node ) { return sec ; } ) ;
280+ var sec = Math . round ( Math . round ( message . data [ 1 ] / 127 * 3 / 10 * 100 ) * 0.02 * 100 ) / 100 ;
281+ sec = sec !== 0 ? sec + 's' : sec ;
282+ this . addLine ( ' transition' , function ( node ) { return sec ; } ) ;
181283
182284 }
183285
0 commit comments