Skip to content

Commit 9a8ff05

Browse files
PhoneDroidPhoneDroid
committed
Extended schema editor
1 parent 6ebf65f commit 9a8ff05

29 files changed

Lines changed: 284 additions & 29 deletions

‎Source/Extension/Schema/Open.ts‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@ const { log } = console;
1010
const schemePattern = /(?<=\{% *schema *%\})[\S\s]*(?=\{% *endschema *%\})/;
1111

1212

13+
const capitalize = ( word ) =>
14+
word.charAt(0).toUpperCase() + word.slice(1);
15+
16+
const nonEmpty = ( string ) =>
17+
string.length > 0;
18+
19+
const prettify = ( text ) => text
20+
.split(/[_-]+/g)
21+
.filter(nonEmpty)
22+
.map(capitalize)
23+
.join(' ');
24+
1325

1426
let view : WebviewPanel | null;
1527
let viewPath : string;
@@ -119,6 +131,25 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
119131
}
120132

121133

134+
const setting_items = [
135+
'checkbox' , 'number' , 'radio' , 'range' , 'select' ,
136+
'text' , 'textarea' , 'article' , 'blog' , 'collection' ,
137+
'collection_list' , 'color' , 'color_background' , 'font_picker' , 'html' ,
138+
'image_picker' , 'inline_richtext' , 'link_list' , 'liquid' , 'page' ,
139+
'product' , 'product_list' , 'richtext' , 'url' , 'video' ,
140+
'video_url'
141+
].map((type) => {
142+
143+
const title = prettify(type);
144+
145+
return `<img
146+
data-type = '${ type }'
147+
src = '${ asset(`${ title }.png`) }'
148+
title = '${ title }'
149+
>`
150+
}).join('');
151+
152+
122153
view.webview.html = `
123154
<html lang = en>
124155
<head>
@@ -221,32 +252,7 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
221252
222253
content : `
223254
<div id = settings_addition>
224-
<div data-type = checkbox></div>
225-
<div data-type = number></div>
226-
<div data-type = radio></div>
227-
<div data-type = range></div>
228-
<div data-type = select></div>
229-
<div data-type = text></div>
230-
<div data-type = textarea></div>
231-
<div data-type = article></div>
232-
<div data-type = blog></div>
233-
<div data-type = collection></div>
234-
<div data-type = collection_list></div>
235-
<div data-type = color></div>
236-
<div data-type = color_background></div>
237-
<div data-type = font_picker></div>
238-
<div data-type = html></div>
239-
<div data-type = image_picker></div>
240-
<div data-type = inline_richtext></div>
241-
<div data-type = link_list></div>
242-
<div data-type = liquid></div>
243-
<div data-type = page></div>
244-
<div data-type = product></div>
245-
<div data-type = product_list></div>
246-
<div data-type = richtext></div>
247-
<div data-type = url></div>
248-
<div data-type = video></div>
249-
<div data-type = video_url></div>
255+
${ setting_items }
250256
</div>
251257
<div id = settings></div>
252258
`

‎Source/Schema/App.js‎

Lines changed: 250 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,9 @@ window.addEventListener('message',( event ) => {
111111

112112

113113
const Settings = {
114-
'checkbox' : checkbox
114+
'checkbox' : checkbox ,
115+
'number' : number ,
116+
'radio' : radio
115117
}
116118

117119
function checkbox ( setting ){
@@ -227,6 +229,253 @@ function checkbox ( setting ){
227229
html_settings.appendChild(item);
228230
}
229231

232+
function number ( setting ){
233+
234+
const item = create();
235+
236+
{
237+
const remove = create('div');
238+
remove.innerText = 'x';
239+
item.appendChild(remove);
240+
241+
remove.addEventListener('click',() => {
242+
settings.splice(settings.indexOf(settings));
243+
item.remove();
244+
update();
245+
})
246+
}
247+
248+
{
249+
const header = create('h2');
250+
header.innerText = 'Number';
251+
item.appendChild(header);
252+
}
253+
254+
{
255+
const label = create('label');
256+
label.innerHTML = `<a> Id </a> <br> to identify the setting.`;
257+
258+
const input = create('input');
259+
input.type = 'text';
260+
input.value = setting.id ?? '';
261+
262+
input.addEventListener('input',() => {
263+
settings.id = input.value;
264+
update();
265+
})
266+
267+
item.appendChild(label);
268+
item.appendChild(create('br'));
269+
item.appendChild(input);
270+
}
271+
272+
item.appendChild(create('br'));
273+
item.appendChild(create('br'));
274+
275+
{
276+
const label = create('label');
277+
label.innerHTML = `<a> Label </a> <br> to display in the customizer.`;
278+
279+
const input = create('input');
280+
input.type = 'text';
281+
input.value = setting.label ?? '';
282+
283+
input.addEventListener('input',() => {
284+
settings.label = input.value;
285+
update();
286+
})
287+
288+
item.appendChild(label);
289+
item.appendChild(create('br'));
290+
item.appendChild(input);
291+
}
292+
293+
item.appendChild(create('br'));
294+
item.appendChild(create('br'));
295+
296+
{
297+
const label = create('label');
298+
label.innerHTML = `<a> Default </a> <br> state to be set to.`;
299+
300+
const input = create('input');
301+
input.type = 'checkbox';
302+
input.value = setting.default ?? 0;
303+
304+
input.addEventListener('input',() => {
305+
settings.default = input.value;
306+
update();
307+
})
308+
309+
item.appendChild(label);
310+
item.appendChild(create('br'));
311+
item.appendChild(input);
312+
}
313+
314+
item.appendChild(create('br'));
315+
item.appendChild(create('br'));
316+
317+
{
318+
const label = create('info');
319+
label.innerHTML = `<a> Info </a> <br> that describes the settings.`;
320+
321+
const input = create('input');
322+
input.type = 'text';
323+
input.value = setting.info ?? '';
324+
325+
input.addEventListener('input',() => {
326+
327+
let { value } = input;
328+
329+
if( value.length < 1 )
330+
value = null;
331+
332+
settings.info = value;
333+
update();
334+
})
335+
336+
item.appendChild(label);
337+
item.appendChild(create('br'));
338+
item.appendChild(input);
339+
}
340+
341+
342+
html_settings.appendChild(item);
343+
}
344+
345+
346+
function radio ( setting ){
347+
348+
const item = create();
349+
350+
{
351+
const remove = create('div');
352+
remove.innerText = 'x';
353+
item.appendChild(remove);
354+
355+
remove.addEventListener('click',() => {
356+
settings.splice(settings.indexOf(settings));
357+
item.remove();
358+
update();
359+
})
360+
}
361+
362+
{
363+
const header = create('h2');
364+
header.innerText = 'Radio';
365+
item.appendChild(header);
366+
}
367+
368+
{
369+
const label = create('label');
370+
label.innerHTML = `<a> Id </a> <br> to identify the setting.`;
371+
372+
const input = create('input');
373+
input.type = 'text';
374+
input.value = setting.id ?? '';
375+
376+
input.addEventListener('input',() => {
377+
settings.id = input.value;
378+
update();
379+
})
380+
381+
item.appendChild(label);
382+
item.appendChild(create('br'));
383+
item.appendChild(input);
384+
}
385+
386+
item.appendChild(create('br'));
387+
item.appendChild(create('br'));
388+
389+
{
390+
const label = create('label');
391+
label.innerHTML = `<a> Label </a> <br> to display in the customizer.`;
392+
393+
const input = create('input');
394+
input.type = 'text';
395+
input.value = setting.label ?? '';
396+
397+
input.addEventListener('input',() => {
398+
settings.label = input.value;
399+
update();
400+
})
401+
402+
item.appendChild(label);
403+
item.appendChild(create('br'));
404+
item.appendChild(input);
405+
}
406+
407+
item.appendChild(create('br'));
408+
item.appendChild(create('br'));
409+
410+
{
411+
const label = create('label');
412+
label.innerHTML = `<a> Options </a> <br> the merchant can choose from.`;
413+
414+
const input = create('select');
415+
input.value = setting.label ?? '';
416+
417+
input.addEventListener('input',() => {
418+
settings.label = input.value;
419+
update();
420+
})
421+
422+
item.appendChild(label);
423+
item.appendChild(create('br'));
424+
item.appendChild(input);
425+
}
426+
427+
item.appendChild(create('br'));
428+
item.appendChild(create('br'));
429+
430+
{
431+
const label = create('label');
432+
label.innerHTML = `<a> Default </a> <br> state to be set to.`;
433+
434+
const input = create('input');
435+
input.type = 'checkbox';
436+
input.value = setting.default ?? 0;
437+
438+
input.addEventListener('input',() => {
439+
settings.default = input.value;
440+
update();
441+
})
442+
443+
item.appendChild(label);
444+
item.appendChild(create('br'));
445+
item.appendChild(input);
446+
}
447+
448+
item.appendChild(create('br'));
449+
item.appendChild(create('br'));
450+
451+
{
452+
const label = create('info');
453+
label.innerHTML = `<a> Info </a> <br> that describes the settings.`;
454+
455+
const input = create('input');
456+
input.type = 'text';
457+
input.value = setting.info ?? '';
458+
459+
input.addEventListener('input',() => {
460+
461+
let { value } = input;
462+
463+
if( value.length < 1 )
464+
value = null;
465+
466+
settings.info = value;
467+
update();
468+
})
469+
470+
item.appendChild(label);
471+
item.appendChild(create('br'));
472+
item.appendChild(input);
473+
}
474+
475+
476+
html_settings.appendChild(item);
477+
}
478+
230479
function unknown ( setting ){
231480

232481
const item = create();

‎Source/Schema/Article.png‎

853 Bytes
Loading

‎Source/Schema/Blog.png‎

1.79 KB
Loading

‎Source/Schema/Checkbox.png‎

1.07 KB
Loading

‎Source/Schema/Collection List.png‎

1.21 KB
Loading

‎Source/Schema/Collection.png‎

783 Bytes
Loading

‎Source/Schema/Color Background.png‎

1.15 KB
Loading

‎Source/Schema/Color.png‎

1.89 KB
Loading

‎Source/Schema/Font Picker.png‎

567 Bytes
Loading

0 commit comments

Comments
 (0)