Skip to content

Commit d7ddbd0

Browse files
better performance, rework and publishing
1 parent 3c74cd7 commit d7ddbd0

11 files changed

Lines changed: 481 additions & 236 deletions

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
.DS_Store
22
npm-debug.log
33
node_modules
4+
logs
5+
*.log*
6+
tmp

changelog.md

Lines changed: 0 additions & 6 deletions
This file was deleted.

lib/actions.js

Lines changed: 160 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22

33
export 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

Comments
 (0)