Skip to content

Commit d598b3b

Browse files
givanzgivanz
committed
Added styles properties for section component
1 parent e020be7 commit d598b3b

File tree

1 file changed

+103
-79
lines changed

1 file changed

+103
-79
lines changed

‎public/js/vvvebjs/section.js

+103-79
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,73 @@ let bgVideoTemplate = '<video playsinline loop muted autoplay src="../../media/d
22
let bgImageTemplate = '<img src="../../media/demo/sample.webp">';
33
let defaultSeparatorSvg = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" height="300" fill="var(--bs-body-bg)" preserveAspectRatio="none"><defs><style>.cls-1{fill:inherit}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>';
44

5+
let section_sort = 1;
6+
7+
let SectionContent = [{
8+
name: "Title",
9+
key: "title",
10+
sort: section_sort++,
11+
htmlAttr: "title",
12+
inputtype: TextInput
13+
},{
14+
name: "Container width",
15+
key: "container-width",
16+
sort: section_sort++,
17+
child:":scope > .container, :scope > .container-fluid",
18+
htmlAttr: "class",
19+
validValues: ["container", "container-fluid"],
20+
inputtype: RadioButtonInput,
21+
data: {
22+
extraclass:"btn-group-sm btn-group-fullwidth",
23+
options: [{
24+
value: "container",
25+
icon:"la la-box",
26+
text: "Boxed",
27+
title: "Boxed"
28+
},{
29+
value: "container-fluid",
30+
icon:"la la-arrows-alt-h",
31+
title: "Full",
32+
text: "Full"
33+
}]
34+
}
35+
},{
36+
name: "Container height",
37+
key: "container-height",
38+
sort: section_sort++,
39+
child:":scope > .container:first-child, :scope > .container-fluid:first-child",
40+
htmlAttr: "class",
41+
validValues: ["", "vh-100"],
42+
inputtype: RadioButtonInput,
43+
data: {
44+
extraclass:"btn-group-sm btn-group-fullwidth",
45+
options: [{
46+
value: "container",
47+
icon:"la la-expand",
48+
text: "Auto",
49+
title: "Auto",
50+
checked:true,
51+
},{
52+
value: "vh-100",
53+
icon:"la la-arrows-alt-v",
54+
title: "Full",
55+
text: "Full"
56+
}]
57+
}
58+
}
59+
];
60+
561
let SectionBackground = [{
662
key: "section_background_header",
763
inputtype: SectionInput,
864
name:false,
9-
sort: base_sort++,
10-
//section: style_section,
65+
sort: section_sort++,
66+
//section: style_section,
1167
data: {header:"Background"},
1268
},{
1369
name: false,
1470
key: "section-bg",
71+
sort: section_sort++,
1572
inputtype: RadioButtonInput,
1673
data: {
1774
inline: true,
@@ -108,6 +165,7 @@ let SectionBackground = [{
108165
},{
109166
name: "Image",
110167
key: "src",
168+
sort: section_sort++,
111169
htmlAttr: "src",
112170
child:":scope > .background-container > img",
113171
group:"bg-image",
@@ -117,6 +175,7 @@ let SectionBackground = [{
117175
name: "Video",
118176
child: "source",
119177
key: "src",
178+
sort: section_sort++,
120179
htmlAttr: "src",
121180
child:":scope > .background-container > video",
122181
group:"bg-video",
@@ -125,6 +184,7 @@ let SectionBackground = [{
125184
},{
126185
name: "Poster",
127186
key: "poster",
187+
sort: section_sort++,
128188
htmlAttr: "poster",
129189
child:":scope > .background-container > video",
130190
group:"bg-video",
@@ -138,13 +198,14 @@ let SectionOverlay = [{
138198
key: "section_overlay",
139199
inputtype: SectionInput,
140200
name:false,
141-
sort: base_sort++,
142-
//section: style_section,
201+
sort: section_sort++,
202+
//section: style_section,
143203
data: {header:"Overlay"},
144204
},{
145205
//name: "Enable",
146206
name: false,
147207
key: "overlay",
208+
sort: section_sort++,
148209
inline: true,
149210
//validValues: ["", "active"],
150211
inputtype: ToggleInput,
@@ -188,13 +249,15 @@ let SectionOverlay = [{
188249
},{
189250
name: "Color",
190251
key: "background-color",
252+
sort: section_sort++,
191253
htmlAttr: "style",
192254
child:":scope > .overlay",
193255
group:"overlay",
194256
inputtype: ColorInput
195257
},{
196258
name: "Opacity",
197259
key: "opacity",
260+
sort: section_sort++,
198261
htmlAttr: "style",
199262
inline:false,
200263
group:"overlay",
@@ -212,13 +275,14 @@ function sectionSeparatorProperties(name, title) {
212275
key: `section_${name}_separator`,
213276
inputtype: SectionInput,
214277
name:false,
215-
sort: base_sort++,
216-
//section: style_section,
278+
sort: section_sort++,
279+
//section: style_section,
217280
data: {header:`${title} Separator`},
218281
},{
219282
//name: "Enable",
220283
name: false,
221284
key: `${name}_separator`,
285+
sort: section_sort++,
222286
inline: true,
223287
inputtype: ToggleInput,
224288
data: {
@@ -261,6 +325,7 @@ function sectionSeparatorProperties(name, title) {
261325
},{
262326
name: "Icon",
263327
key: "icon",
328+
sort: section_sort++,
264329
inline:true,
265330
group:`${name}_separator`,
266331
child:`.separator.${name} > svg`,
@@ -293,6 +358,7 @@ function sectionSeparatorProperties(name, title) {
293358
},{
294359
name: "Width",
295360
key: "width",
361+
sort: section_sort++,
296362
htmlAttr: "width",
297363
group:`${name}_separator`,
298364
child:`.separator.${name} > svg`,
@@ -305,6 +371,7 @@ function sectionSeparatorProperties(name, title) {
305371
},{
306372
name: "Height",
307373
key: "height",
374+
sort: section_sort++,
308375
htmlAttr: "height",
309376
group:`${name}_separator`,
310377
child:`.separator.${name} > svg`,
@@ -317,6 +384,7 @@ function sectionSeparatorProperties(name, title) {
317384
},{
318385
name: "Stroke width",
319386
key: "stroke-width",
387+
sort: section_sort++,
320388
htmlAttr: "stroke-width",
321389
group:`${name}_separator`,
322390
child:`.separator.${name} > svg`,
@@ -331,38 +399,38 @@ function sectionSeparatorProperties(name, title) {
331399
inputtype: SectionInput,
332400
name:false,
333401
group:`${name}_separator`,
334-
//sort: base_sort++,
335-
//section: style_section,
402+
sort: section_sort++,
403+
//section: style_section,
336404
data: {header:"Svg colors"},
337405
},*/ {
338406
name: "Fill Color",
339407
key: "fill",
340-
//sort: base_sort++,
408+
sort: section_sort++,
341409
col:4,
342410
inline:true,
343-
//section: style_section,
411+
//section: style_section,
344412
group:`${name}_separator`,
345413
child:`.separator.${name} > svg`,
346414
htmlAttr: "fill",
347415
inputtype: ColorInput,
348416
},{
349417
name: "Color",
350418
key: "color",
351-
//sort: base_sort++,
419+
sort: section_sort++,
352420
col:4,
353421
inline:true,
354-
//section: style_section,
355-
group:`${name}_separator`,
356-
child:`.separator.${name} > svg`,
357-
htmlAttr: "color",
422+
//section: style_section,
423+
group:`${name}_separator`,
424+
child:`.separator.${name} > svg`,
425+
htmlAttr: "color",
358426
inputtype: ColorInput,
359427
},{
360428
name: "Stroke",
361429
key: "stroke",
362-
//sort: base_sort++,
430+
sort: section_sort++,
363431
col:4,
364432
inline:true,
365-
//section: style_section,
433+
//section: style_section,
366434
group:`${name}_separator`,
367435
child:`.separator.${name} > svg`,
368436
htmlAttr: "color",
@@ -375,13 +443,14 @@ let SectionBottomSeparator = [{
375443
key: "section_bottom_separator",
376444
inputtype: SectionInput,
377445
name:false,
378-
sort: base_sort++,
379-
//section: style_section,
446+
sort: section_sort++,
447+
//section: style_section,
380448
data: {header:"Bottom Separator"},
381449
},{
382450
//name: "Enable",
383451
name: false,
384452
key: "top_bottom",
453+
sort: section_sort++,
385454
inline: true,
386455
validValues: ["", "active"],
387456
inputtype: ToggleInput,
@@ -392,57 +461,10 @@ let SectionBottomSeparator = [{
392461
}
393462
},
394463
];
395-
464+
396465
/* Section */
397-
let ComponentSectionContent = [{
398-
name: "Title",
399-
key: "title",
400-
htmlAttr: "title",
401-
inputtype: TextInput
402-
},{
403-
name: "Container width",
404-
key: "container-width",
405-
child:":scope > .container, :scope > .container-fluid",
406-
htmlAttr: "class",
407-
validValues: ["container", "container-fluid"],
408-
inputtype: RadioButtonInput,
409-
data: {
410-
extraclass:"btn-group-sm btn-group-fullwidth",
411-
options: [{
412-
value: "container",
413-
icon:"la la-box",
414-
text: "Boxed",
415-
title: "Boxed"
416-
},{
417-
value: "container-fluid",
418-
icon:"la la-arrows-alt-h",
419-
title: "Full",
420-
text: "Full"
421-
}]
422-
}
423-
},{
424-
name: "Container height",
425-
key: "container-height",
426-
child:":scope > .container:first-child, :scope > .container-fluid:first-child",
427-
htmlAttr: "class",
428-
validValues: ["", "vh-100"],
429-
inputtype: RadioButtonInput,
430-
data: {
431-
extraclass:"btn-group-sm btn-group-fullwidth",
432-
options: [{
433-
value: "container",
434-
icon:"la la-expand",
435-
text: "Auto",
436-
title: "Auto",
437-
checked:true,
438-
},{
439-
value: "vh-100",
440-
icon:"la la-arrows-alt-v",
441-
title: "Full",
442-
text: "Full"
443-
}]
444-
}
445-
},
466+
let ComponentSectionContent = [
467+
...SectionContent,
446468
...SectionBackground,
447469
...SectionOverlay,
448470
...sectionSeparatorProperties("top", "Top"),
@@ -454,26 +476,26 @@ let ComponentSectionStyle = [];/*[{
454476
key: "Section Style",
455477
inputtype: SectionInput,
456478
name:false,
457-
section: style_section,
479+
//section: style_section,
458480
data: {header:"Style"},
459481
},{
460482
name: "Text1 Style",
461483
key: "text1",
462484
htmlAttr: "innerHTML",
463485
inputtype: TextInput,
464-
section: style_section,
486+
//section: style_section,
465487
},{
466488
name: "Name1 Style",
467489
key: "name1",
468490
htmlAttr: "name",
469491
inputtype: TextInput,
470-
section: style_section,
492+
//section: style_section,
471493
},{
472494
name: "Type1 Style",
473495
key: "type1",
474496
htmlAttr: "type",
475497
inputtype: SelectInput,
476-
section: style_section,
498+
//section: style_section,
477499
data: {
478500
options: [{
479501
value: "button",
@@ -493,15 +515,15 @@ let ComponentSectionStyle = [];/*[{
493515
inputtype: CheckboxInput,
494516
inline:true,
495517
col:6,
496-
section: style_section
518+
//section: style_section
497519
},{
498520
name: "Disabled1 Style",
499521
key: "disabled1",
500522
htmlAttr: "disabled",
501523
inputtype: CheckboxInput,
502524
inline:true,
503525
col:6,
504-
section: style_section,
526+
//section: style_section,
505527
}];*/
506528

507529
let ComponentSectionAdvanced = [];/* [{
@@ -598,7 +620,8 @@ function componentsInit(node) {
598620
}
599621
}
600622

601-
Vvveb.Components.add("elements/section", {
623+
//Vvveb.Components.add("elements/section", {
624+
Vvveb.Components.extend("_base", "elements/section", {
602625
nodes: ["section"],
603626
name: "Section",
604627
image: "icons/stream-solid.svg",
@@ -615,7 +638,8 @@ Vvveb.Components.add("elements/section", {
615638
init: componentsInit
616639
});
617640

618-
Vvveb.Components.add("elements/header", {
641+
//Vvveb.Components.add("elements/header", {
642+
Vvveb.Components.extend("_base", "elements/header", {
619643
nodes: ["header"],
620644
name: "Header",
621645
image: "icons/stream-solid.svg",
@@ -632,8 +656,8 @@ Vvveb.Components.add("elements/header", {
632656
init: componentsInit
633657
});
634658

635-
636-
Vvveb.Components.add("elements/footer", {
659+
//Vvveb.Components.add("elements/footer", {
660+
Vvveb.Components.extend("_base", "elements/footer", {
637661
nodes: ["footer"],
638662
name: "Footer",
639663
image: "icons/stream-solid.svg",

0 commit comments

Comments
 (0)