Skip to content

Commit

Permalink
Added styles properties for section component
Browse files Browse the repository at this point in the history
  • Loading branch information
@givanz
givanz committed Jan 13, 2025
1 parent e020be7 commit d598b3b
Showing 1 changed file with 103 additions and 79 deletions.
182 changes: 103 additions & 79 deletions public/js/vvvebjs/section.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,73 @@ let bgVideoTemplate = '<video playsinline loop muted autoplay src="../../media/d
let bgImageTemplate = '<img src="../../media/demo/sample.webp">';
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>';

let section_sort = 1;

let SectionContent = [{
name: "Title",
key: "title",
sort: section_sort++,
htmlAttr: "title",
inputtype: TextInput
},{
name: "Container width",
key: "container-width",
sort: section_sort++,
child:":scope > .container, :scope > .container-fluid",
htmlAttr: "class",
validValues: ["container", "container-fluid"],
inputtype: RadioButtonInput,
data: {
extraclass:"btn-group-sm btn-group-fullwidth",
options: [{
value: "container",
icon:"la la-box",
text: "Boxed",
title: "Boxed"
},{
value: "container-fluid",
icon:"la la-arrows-alt-h",
title: "Full",
text: "Full"
}]
}
},{
name: "Container height",
key: "container-height",
sort: section_sort++,
child:":scope > .container:first-child, :scope > .container-fluid:first-child",
htmlAttr: "class",
validValues: ["", "vh-100"],
inputtype: RadioButtonInput,
data: {
extraclass:"btn-group-sm btn-group-fullwidth",
options: [{
value: "container",
icon:"la la-expand",
text: "Auto",
title: "Auto",
checked:true,
},{
value: "vh-100",
icon:"la la-arrows-alt-v",
title: "Full",
text: "Full"
}]
}
}
];

let SectionBackground = [{
key: "section_background_header",
inputtype: SectionInput,
name:false,
sort: base_sort++,
//section: style_section,
sort: section_sort++,
//section: style_section,
data: {header:"Background"},
},{
name: false,
key: "section-bg",
sort: section_sort++,
inputtype: RadioButtonInput,
data: {
inline: true,
Expand Down Expand Up @@ -108,6 +165,7 @@ let SectionBackground = [{
},{
name: "Image",
key: "src",
sort: section_sort++,
htmlAttr: "src",
child:":scope > .background-container > img",
group:"bg-image",
Expand All @@ -117,6 +175,7 @@ let SectionBackground = [{
name: "Video",
child: "source",
key: "src",
sort: section_sort++,
htmlAttr: "src",
child:":scope > .background-container > video",
group:"bg-video",
Expand All @@ -125,6 +184,7 @@ let SectionBackground = [{
},{
name: "Poster",
key: "poster",
sort: section_sort++,
htmlAttr: "poster",
child:":scope > .background-container > video",
group:"bg-video",
Expand All @@ -138,13 +198,14 @@ let SectionOverlay = [{
key: "section_overlay",
inputtype: SectionInput,
name:false,
sort: base_sort++,
//section: style_section,
sort: section_sort++,
//section: style_section,
data: {header:"Overlay"},
},{
//name: "Enable",
name: false,
key: "overlay",
sort: section_sort++,
inline: true,
//validValues: ["", "active"],
inputtype: ToggleInput,
Expand Down Expand Up @@ -188,13 +249,15 @@ let SectionOverlay = [{
},{
name: "Color",
key: "background-color",
sort: section_sort++,
htmlAttr: "style",
child:":scope > .overlay",
group:"overlay",
inputtype: ColorInput
},{
name: "Opacity",
key: "opacity",
sort: section_sort++,
htmlAttr: "style",
inline:false,
group:"overlay",
Expand All @@ -212,13 +275,14 @@ function sectionSeparatorProperties(name, title) {
key: `section_${name}_separator`,
inputtype: SectionInput,
name:false,
sort: base_sort++,
//section: style_section,
sort: section_sort++,
//section: style_section,
data: {header:`${title} Separator`},
},{
//name: "Enable",
name: false,
key: `${name}_separator`,
sort: section_sort++,
inline: true,
inputtype: ToggleInput,
data: {
Expand Down Expand Up @@ -261,6 +325,7 @@ function sectionSeparatorProperties(name, title) {
},{
name: "Icon",
key: "icon",
sort: section_sort++,
inline:true,
group:`${name}_separator`,
child:`.separator.${name} > svg`,
Expand Down Expand Up @@ -293,6 +358,7 @@ function sectionSeparatorProperties(name, title) {
},{
name: "Width",
key: "width",
sort: section_sort++,
htmlAttr: "width",
group:`${name}_separator`,
child:`.separator.${name} > svg`,
Expand All @@ -305,6 +371,7 @@ function sectionSeparatorProperties(name, title) {
},{
name: "Height",
key: "height",
sort: section_sort++,
htmlAttr: "height",
group:`${name}_separator`,
child:`.separator.${name} > svg`,
Expand All @@ -317,6 +384,7 @@ function sectionSeparatorProperties(name, title) {
},{
name: "Stroke width",
key: "stroke-width",
sort: section_sort++,
htmlAttr: "stroke-width",
group:`${name}_separator`,
child:`.separator.${name} > svg`,
Expand All @@ -331,38 +399,38 @@ function sectionSeparatorProperties(name, title) {
inputtype: SectionInput,
name:false,
group:`${name}_separator`,
//sort: base_sort++,
//section: style_section,
sort: section_sort++,
//section: style_section,
data: {header:"Svg colors"},
},*/ {
name: "Fill Color",
key: "fill",
//sort: base_sort++,
sort: section_sort++,
col:4,
inline:true,
//section: style_section,
//section: style_section,
group:`${name}_separator`,
child:`.separator.${name} > svg`,
htmlAttr: "fill",
inputtype: ColorInput,
},{
name: "Color",
key: "color",
//sort: base_sort++,
sort: section_sort++,
col:4,
inline:true,
//section: style_section,
group:`${name}_separator`,
child:`.separator.${name} > svg`,
htmlAttr: "color",
//section: style_section,
group:`${name}_separator`,
child:`.separator.${name} > svg`,
htmlAttr: "color",
inputtype: ColorInput,
},{
name: "Stroke",
key: "stroke",
//sort: base_sort++,
sort: section_sort++,
col:4,
inline:true,
//section: style_section,
//section: style_section,
group:`${name}_separator`,
child:`.separator.${name} > svg`,
htmlAttr: "color",
Expand All @@ -375,13 +443,14 @@ let SectionBottomSeparator = [{
key: "section_bottom_separator",
inputtype: SectionInput,
name:false,
sort: base_sort++,
//section: style_section,
sort: section_sort++,
//section: style_section,
data: {header:"Bottom Separator"},
},{
//name: "Enable",
name: false,
key: "top_bottom",
sort: section_sort++,
inline: true,
validValues: ["", "active"],
inputtype: ToggleInput,
Expand All @@ -392,57 +461,10 @@ let SectionBottomSeparator = [{
}
},
];

/* Section */
let ComponentSectionContent = [{
name: "Title",
key: "title",
htmlAttr: "title",
inputtype: TextInput
},{
name: "Container width",
key: "container-width",
child:":scope > .container, :scope > .container-fluid",
htmlAttr: "class",
validValues: ["container", "container-fluid"],
inputtype: RadioButtonInput,
data: {
extraclass:"btn-group-sm btn-group-fullwidth",
options: [{
value: "container",
icon:"la la-box",
text: "Boxed",
title: "Boxed"
},{
value: "container-fluid",
icon:"la la-arrows-alt-h",
title: "Full",
text: "Full"
}]
}
},{
name: "Container height",
key: "container-height",
child:":scope > .container:first-child, :scope > .container-fluid:first-child",
htmlAttr: "class",
validValues: ["", "vh-100"],
inputtype: RadioButtonInput,
data: {
extraclass:"btn-group-sm btn-group-fullwidth",
options: [{
value: "container",
icon:"la la-expand",
text: "Auto",
title: "Auto",
checked:true,
},{
value: "vh-100",
icon:"la la-arrows-alt-v",
title: "Full",
text: "Full"
}]
}
},
let ComponentSectionContent = [
...SectionContent,
...SectionBackground,
...SectionOverlay,
...sectionSeparatorProperties("top", "Top"),
Expand All @@ -454,26 +476,26 @@ let ComponentSectionStyle = [];/*[{
key: "Section Style",
inputtype: SectionInput,
name:false,
section: style_section,
//section: style_section,
data: {header:"Style"},
},{
name: "Text1 Style",
key: "text1",
htmlAttr: "innerHTML",
inputtype: TextInput,
section: style_section,
//section: style_section,
},{
name: "Name1 Style",
key: "name1",
htmlAttr: "name",
inputtype: TextInput,
section: style_section,
//section: style_section,
},{
name: "Type1 Style",
key: "type1",
htmlAttr: "type",
inputtype: SelectInput,
section: style_section,
//section: style_section,
data: {
options: [{
value: "button",
Expand All @@ -493,15 +515,15 @@ let ComponentSectionStyle = [];/*[{
inputtype: CheckboxInput,
inline:true,
col:6,
section: style_section
//section: style_section
},{
name: "Disabled1 Style",
key: "disabled1",
htmlAttr: "disabled",
inputtype: CheckboxInput,
inline:true,
col:6,
section: style_section,
//section: style_section,
}];*/

let ComponentSectionAdvanced = [];/* [{
Expand Down Expand Up @@ -598,7 +620,8 @@ function componentsInit(node) {
}
}

Vvveb.Components.add("elements/section", {
//Vvveb.Components.add("elements/section", {
Vvveb.Components.extend("_base", "elements/section", {
nodes: ["section"],
name: "Section",
image: "icons/stream-solid.svg",
Expand All @@ -615,7 +638,8 @@ Vvveb.Components.add("elements/section", {
init: componentsInit
});

Vvveb.Components.add("elements/header", {
//Vvveb.Components.add("elements/header", {
Vvveb.Components.extend("_base", "elements/header", {
nodes: ["header"],
name: "Header",
image: "icons/stream-solid.svg",
Expand All @@ -632,8 +656,8 @@ Vvveb.Components.add("elements/header", {
init: componentsInit
});


Vvveb.Components.add("elements/footer", {
//Vvveb.Components.add("elements/footer", {
Vvveb.Components.extend("_base", "elements/footer", {
nodes: ["footer"],
name: "Footer",
image: "icons/stream-solid.svg",
Expand Down

0 comments on commit d598b3b

Please sign in to comment.