508 lines
No EOL
16 KiB
JavaScript
508 lines
No EOL
16 KiB
JavaScript
'use strict';
|
|
|
|
//Properties
|
|
jQuery(document).ready(function ($) {
|
|
|
|
// ViWec.Components.add({type: "_baseProp"});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'padding',
|
|
name: 'Padding',
|
|
properties: [{
|
|
key: "padding_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Padding (px)"}
|
|
}, {
|
|
name: "Left",
|
|
key: "padding-left",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Top",
|
|
key: "padding-top",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Right",
|
|
key: "padding-right",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Bottom",
|
|
key: "padding-bottom",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'margin',
|
|
name: 'Margin',
|
|
properties: [{
|
|
key: "margin_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Margin (px)"}
|
|
}, {
|
|
name: "Left",
|
|
key: "padding-left",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Top",
|
|
key: "padding-top",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Right",
|
|
key: "padding-right",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Bottom",
|
|
key: "padding-bottom",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'col_padding',
|
|
name: 'Columns distance',
|
|
properties: [{
|
|
key: "distance_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Columns distance"},
|
|
}, {
|
|
name: "Left",
|
|
key: "padding-left",
|
|
htmlAttr: "style",
|
|
target: '.viwec-column',
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Top",
|
|
key: "padding-top",
|
|
htmlAttr: "style",
|
|
target: '.viwec-column',
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Right",
|
|
key: "padding-right",
|
|
htmlAttr: "style",
|
|
target: '.viwec-column',
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}, {
|
|
name: "Bottom",
|
|
key: "padding-bottom",
|
|
htmlAttr: "style",
|
|
target: '.viwec-column',
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
unit: 'px',
|
|
inputType: NumberInput,
|
|
data: {value: 20},
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'alignment',
|
|
name: 'Alignment',
|
|
|
|
properties: [{
|
|
key: "alignment_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Alignment"},
|
|
}, {
|
|
key: "text-align",
|
|
htmlAttr: "style",
|
|
validValues: ["", "text-left", "text-center", "text-right"],
|
|
section: styleSection,
|
|
inputType: RadioButtonInput,
|
|
data: {
|
|
extraClass: "",
|
|
options: [{
|
|
value: "left",
|
|
title: "text-left",
|
|
icon: "dashicons dashicons-editor-alignleft",
|
|
checked: true,
|
|
}, {
|
|
value: "center",
|
|
title: "Center",
|
|
icon: "dashicons dashicons-editor-aligncenter",
|
|
checked: false,
|
|
}, {
|
|
value: "right",
|
|
title: "Right",
|
|
icon: "dashicons dashicons-editor-alignright",
|
|
checked: false,
|
|
}],
|
|
},
|
|
onChange: function (element, value, input, component, property) {
|
|
$(input).parent().parent().find('i').removeClass('viwec-i-active');
|
|
$(input).parent().find('i').addClass('viwec-i-active');
|
|
return element;
|
|
},
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'background',
|
|
name: 'Background',
|
|
properties: [{
|
|
key: "background_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Background"},
|
|
}, {
|
|
name: "Image",
|
|
key: "background-image",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: BgImgInput,
|
|
data: {text: 'Select', classes: 'viwec-open-bg-img'}
|
|
}, {
|
|
name: "Color",
|
|
key: "background-color",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: ColorInput
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'border',
|
|
name: 'Border',
|
|
properties: [{
|
|
key: "border_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Border"},
|
|
}, {
|
|
groupName: "Width (px)",
|
|
name: "Left",
|
|
key: "border-left-width",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Top",
|
|
key: "border-top-width",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Right",
|
|
key: "border-right-width",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Bottom",
|
|
key: "border-bottom-width",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 4,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
groupName: "Radius (px)",
|
|
name: "Top left",
|
|
key: "border-top-left-radius",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Top right",
|
|
key: "border-top-right-radius",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Bottom left",
|
|
key: "border-bottom-left-radius",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Bottom right",
|
|
key: "border-bottom-right-radius",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: NumberInput,
|
|
unit: 'px',
|
|
data: {min: 0, max: 50, step: 1}
|
|
}, {
|
|
name: "Color",
|
|
key: "border-color",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 16,
|
|
inline: true,
|
|
inputType: ColorInput,
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'line_height',
|
|
name: 'Line height (px)',
|
|
properties: [{
|
|
key: "line_height_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Line height (px)"},
|
|
}, {
|
|
key: "line-height",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
unit: 'px',
|
|
col: 16,
|
|
inline: true,
|
|
inputType: NumberInput
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'text',
|
|
name: 'Text',
|
|
properties: [{
|
|
key: "text_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: styleSection,
|
|
data: {header: "Text"},
|
|
}, {
|
|
name: "Font size (px)",
|
|
key: "font-size",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
unit: 'px',
|
|
col: 8,
|
|
inline: true,
|
|
inputType: NumberInput
|
|
}, {
|
|
// name: "Font",
|
|
// key: "font-family",
|
|
// htmlAttr: "style",
|
|
// // section: styleSection,
|
|
// col: 4,
|
|
// inline: true,
|
|
// inputType: SelectInput,
|
|
// data: {
|
|
// options: [{
|
|
// value: "",
|
|
// text: "Default"
|
|
// }, {
|
|
// value: "Arial, Helvetica, sans-serif",
|
|
// text: "Arial"
|
|
// }, {
|
|
// value: 'Lucida Sans Unicode", "Lucida Grande", sans-serif',
|
|
// text: 'Lucida Grande'
|
|
// }, {
|
|
// value: 'Palatino Linotype", "Book Antiqua", Palatino, serif',
|
|
// text: 'Palatino Linotype'
|
|
// }, {
|
|
// value: '"Times New Roman", Times, serif',
|
|
// text: 'Times New Roman'
|
|
// }, {
|
|
// value: "Georgia, serif",
|
|
// text: "Georgia, serif"
|
|
// }, {
|
|
// value: "Tahoma, Geneva, sans-serif",
|
|
// text: "Tahoma"
|
|
// }, {
|
|
// value: 'Comic Sans MS, cursive, sans-serif',
|
|
// text: 'Comic Sans'
|
|
// }, {
|
|
// value: 'Verdana, Geneva, sans-serif',
|
|
// text: 'Verdana'
|
|
// }, {
|
|
// value: 'Impact, Charcoal, sans-serif',
|
|
// text: 'Impact'
|
|
// }, {
|
|
// value: 'Arial Black, Gadget, sans-serif',
|
|
// text: 'Arial Black'
|
|
// }, {
|
|
// value: 'Trebuchet MS, Helvetica, sans-serif',
|
|
// text: 'Trebuchet'
|
|
// }, {
|
|
// value: 'Courier New", Courier, monospace',
|
|
// text: 'Courier New", Courier, monospace'
|
|
// }, {
|
|
// value: 'Brush Script MT, sans-serif',
|
|
// text: 'Brush Script'
|
|
// }]
|
|
// }
|
|
// }, {
|
|
name: "Font weight",
|
|
key: "font-weight",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: SelectInput,
|
|
data: {
|
|
options: viWecFontWeightOptions
|
|
}
|
|
}, {
|
|
name: "Color",
|
|
key: "color",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
inline: true,
|
|
inputType: ColorInput
|
|
}, {
|
|
name: "Line height (px)",
|
|
key: "line-height",
|
|
htmlAttr: "style",
|
|
section: styleSection,
|
|
col: 8,
|
|
unit: 'px',
|
|
inline: true,
|
|
inputType: NumberInput
|
|
}]
|
|
});
|
|
|
|
ViWec.Components.addBaseProp({
|
|
type: 'edit_cols',
|
|
name: 'Columns',
|
|
properties: [{
|
|
key: "cols_header",
|
|
inputType: SectionInput,
|
|
name: false,
|
|
section: contentSection,
|
|
data: {header: "Columns"},
|
|
}, {
|
|
key: "cols",
|
|
htmlAttr: 'data-cols',
|
|
section: contentSection,
|
|
inputType: NumberInput,
|
|
data: {min: 1, max: 4, step: 1},
|
|
onChange(element, value, input, component, property) {
|
|
if (value > 0 && value <= 4) {
|
|
let currentCols, diff,
|
|
dataType = `layout/grid${value}cols`,
|
|
width = (100 / value) + '%';
|
|
|
|
currentCols = element.find('.viwec-column');
|
|
diff = Math.abs(currentCols.length - value);
|
|
if (currentCols.length > value) {
|
|
for (let i = 0; i < diff; i++) {
|
|
element.find('.viwec-column').last().remove();
|
|
}
|
|
} else {
|
|
for (let i = 0; i < diff; i++) {
|
|
let lastRow = element.find('.viwec-column').last();
|
|
let clone = lastRow.clone();
|
|
clone.find('.viwec-layout-sortable').columnSortAble();
|
|
lastRow.after(clone);
|
|
}
|
|
}
|
|
|
|
element.find('.viwec-column').width(width);
|
|
element.attr('data-type', dataType);
|
|
element.find('.viwec-layout-inner').attr('data-type', dataType);
|
|
}
|
|
return element;
|
|
}
|
|
}],
|
|
});
|
|
}); |