Skip to content

Instantly share code, notes, and snippets.

@mjcarnaje
Created January 23, 2024 11:43
Show Gist options
  • Save mjcarnaje/5438f1785776949546b091ee44b35a9e to your computer and use it in GitHub Desktop.
Save mjcarnaje/5438f1785776949546b091ee44b35a9e to your computer and use it in GitHub Desktop.
var ajax_window = {
ajax_url: "https://easybrandph.com/wp-admin/admin-ajax.php",
language: "en",
templates: {
line: '\n<div :style="additionalCss" class="calc-item ccb-hr" :class="lineField.additionalStyles" :data-id="lineField.alias">\n\t<div class="ccb-line" :style="getLine"></div>\n</div>\n',
html: '\n<div :style="additionalCss" class="calc-item html" :data-id="htmlField.alias" v-html="htmlContent" :class="htmlField.additionalStyles"></div>\n',
toggle:
'\n<div :style="additionalCss" class="calc-item ccb-field" :class="{required: $store.getters.isUnused(toggleField), [toggleField.additionalStyles]: toggleField.additionalStyles}" :data-id="toggleField.alias">\n\t<div class="calc-item__title">\n\t\t<span> {{ toggleField.label }} </span>\n\t\t<span class="ccb-required-mark" v-if="toggleField.required">*</span>\n\t\t<span v-if="toggleField.required" class="calc-required-field">\n\t\t\t<div class="ccb-field-required-tooltip">\n\t\t\t\t<span class="ccb-field-required-tooltip-text" :class="{active: $store.getters.isUnused(toggleField)}" style="display: none;">{{ $store.getters.getSettings.texts.required_msg }}</span>\n\t\t\t</div>\n\t\t</span>\n\t</div>\n\n\t<div class="calc-item__description before">\n\t\t<span>{{ toggleField.description }}</span>\n\t</div>\n\n\t<div :class="[\'calc-toggle-container\', \'calc_\' + toggleField.alias, toggleView, {\'calc-field-disabled\': getStep === \'finish\'}]">\n\t\t<div class="calc-toggle-item" v-for="( element, index ) in getOptions">\n\t\t\t<div class="calc-toggle-label-wrap">\n\t\t\t\t<span class="calc-toggle-label">{{ element.label }}</span>\n\t\t\t</div>\n\t\t\t<div class="calc-toggle-postfix">\n\t\t\t\t<span class="ccb-checkbox-hint" v-if="element.hint">\n\t\t\t\t\t<i class="ccb-icon-Path-3367"></i>\n\t\t\t\t\t<span class="ccb-checkbox-hint__content" v-html="element.hint"></span>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div class="calc-toggle-wrapper">\n\t\t\t\t<input type="checkbox" :checked="element.isChecked" :value="element.value" @change="change(event, element.label)"/>\n\t\t\t\t<label></label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\n\t<div class="calc-item__description after">\n\t\t<span>{{ toggleField.description }}</span>\n\t</div>\n</div>\n',
"text-area":
'\n<div :style="additionalCss" class="calc-item" :class="textField.additionalStyles" :data-id="textField.alias">\n\t<div class="calc-item__title">\n\t\t<span>{{ textField.label }}</span>\n\t</div>\n\n\t<div class="calc-item__description before">\n\t\t<span>{{ textField.description }}</span>\n\t</div>\n\n\t<textarea v-model="textareaValue" @change="onChange" :id="labelId" :placeholder="textField.placeholder" :class="[\'calc-textarea ccb-appearance-field\', {\'calc-field-disabled\': getStep === \'finish\'}]"></textarea>\n\n\t<div class="calc-item__description after">\n\t\t<span>{{ textField.description }}</span>\n\t</div>\n</div>\n',
checkbox:
'<div :style="additionalCss" class="calc-item ccb-field" :class="{required: $store.getters.isUnused(checkboxField), [checkboxField.additionalStyles]: checkboxField.additionalStyles}" :data-id="checkboxField.alias">\n\t<div class="calc-item__title">\n\t\t<span> {{ checkboxField.label }} </span>\n\t\t<span class="ccb-required-mark" v-if="checkboxField.required">*</span>\n\t\t<span v-if="checkboxField.required" class="calc-required-field">\n\t\t\t<div class="ccb-field-required-tooltip">\n\t\t\t\t<span class="ccb-field-required-tooltip-text" :class="{active: $store.getters.isUnused(checkboxField)}" style="display: none;">{{ $store.getters.getSettings.texts.required_msg }}</span>\n\t\t\t</div>\n\t\t</span>\n\t</div>\n\n\t<div class="calc-item__description before">\n\t\t<span>{{ checkboxField.description }}</span>\n\t</div>\n\n\t<div :class="[\'calc-checkbox\', \'calc_\' + checkboxField.alias, checkboxView, {\'calc-field-disabled\': getStep === \'finish\'}]" >\n\t\t<div class="calc-checkbox-item" v-for="( element, index ) in getOptions">\n\t\t\t<input :checked="element.isChecked" type="checkbox" :id="checkboxLabel + index" :value="element.value" @change="change(event, element.label)">\n\t\t\t<label :for="checkboxLabel + index">\n\t\t\t\t<span>\n\t\t\t\t\t<span class="calc-checkbox-title">{{ element.label }}</span>\n\t\t\t\t\t<span class="ccb-checkbox-hint" v-if="element.hint">\n\t\t\t\t\t\t<i class="ccb-icon-Path-3367"></i>\n\t\t\t\t\t\t<span class="ccb-checkbox-hint__content" v-html="element.hint"></span>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t</div>\n\t<div class="calc-item__description after">\n\t\t<span>{{ checkboxField.description }}</span>\n\t</div>\n</div>\n',
quantity:
'\n<div :style="additionalCss" class="calc-item ccb-field ccb-field-quantity" :class="{required: $store.getters.isUnused(quantityField), [quantityField.additionalStyles]: quantityField.additionalStyles}" :data-id="quantityField.alias">\n\t<div class="calc-item__title">\n\t\t<span> {{ quantityField.label }} </span>\n\t\t<span class="ccb-required-mark" v-if="quantityField.required">*</span>\n\t</div>\n\n\t<div class="calc-item__description before">\n\t\t<span>{{ quantityField.description }}</span>\n\t</div>\n\n\t<div :class="[\'calc-input-wrapper ccb-field\', \'calc_\' + quantityField.alias, {\'calc-field-disabled\': getStep === \'finish\'}]">\n\t\t<input @focusout="parseField" @keypress="intValueFilter($event)" name="quantityField" type="text" v-model="quantityValue" :placeholder="quantityField.placeholder" class="calc-input number ccb-field ccb-appearance-field">\n\t\t<span @click="increment" class="input-number-counter up">\n\t\t\t<i class="ccb-icon-Path-3486"></i>\n\t\t</span>\n\t\t<span @click="decrement" class="input-number-counter down">\n\t\t\t<i class="ccb-icon-Path-3485"></i>\n\t\t</span>\n\t\t<span v-if="quantityField.required" :class="{active: $store.getters.isUnused(quantityField)}" class="ccb-error-tip front default">{{ $store.getters.getSettings.texts.required_msg }}</span>\n\t</div>\n\n\t<div class="calc-item__description after">\n\t\t<span>{{ quantityField.description }}</span>\n\t</div>\n</div>\n',
"radio-button":
'<div :style="additionalCss" class="calc-item ccb-field" :class="{required: $store.getters.isUnused(radioField), [radioField.additionalStyles]: radioField.additionalStyles}" :data-id="radioField.alias">\n\t<div class="calc-item__title">\n\t\t<span> {{ radioField.label }} </span>\n\t\t<span class="ccb-required-mark" v-if="radioField.required">*</span>\n\t\t<span v-if="radioField.required" class="calc-required-field">\n\t\t\t<div class="ccb-field-required-tooltip">\n\t\t\t\t<span class="ccb-field-required-tooltip-text" :class="{active: $store.getters.isUnused(radioField)}" style="display: none;">{{ $store.getters.getSettings.texts.required_msg }}</span>\n\t\t\t</div>\n\t\t</span>\n\t</div>\n\n\t<div class="calc-item__description before">\n\t\t<span>{{ radioField.description }}</span>\n\t</div>\n\t<div class="calc-radio-wrapper" :class="[radioView, {\'calc-field-disabled\': getStep === \'finish\'}, \'calc_\' + radioField.alias]">\n\t\t<label v-for="(element, index) in getOptions">\n\t\t\t<input type="radio" :name="radioLabel" v-model="radioValue" :value="element.value">\n\t\t\t<span class="calc-radio-label">{{ element.label }}</span>\n\t\t</label>\n\t</div>\n\n\t<div class="calc-item__description after">\n\t\t<span>{{ radioField.description }}</span>\n\t</div>\n</div>\n',
"range-button":
'<div :style="additionalCss" class="calc-item" :class="rangeField.additionalStyles" :data-id="rangeField.alias" >\n\t<div class="calc-range" :class="[\'calc_\' + rangeField.alias, {\'calc-field-disabled\': getStep === \'finish\'}]">\n\t\t<div class="calc-item__title ccb-range-field" style="display: flex; justify-content: space-between">\n\t\t\t<span> {{ rangeField.label }} </span>\n\t\t\t<span> {{ getFormatedValue }} {{ rangeField.sign ? rangeField.sign : \'\' }}</span>\n\t\t</div>\n\n\t\t<div class="calc-item__description before">\n\t\t\t<span>{{ rangeField.description }}</span>\n\t\t</div>\n\n\t\t<div :class="[\'range_\' + rangeField.alias]" class="calc-range-slider" :style="getStyles">\n\t\t\t<input type="range" :min="min" :max="max" :step="step" v-model="rangeValue" @input="change">\n\t\t\t<output class="cost-calc-range-output-free"></output>\n\t\t\t<div class=\'calc-range-slider__progress\'></div>\n\t\t</div>\n\n\t\t<div class="calc-range-slider-min-max">\n\t\t\t<span>{{ min }}</span>\n\t\t\t<span>{{ max }}</span>\n\t\t</div>\n\n\t\t<div class="calc-item__description after" >\n\t\t\t<span>{{ rangeField.description }}</span>\n\t\t</div>\n\t</div>\n</div>\n',
"drop-down":
'<div :style="additionalCss" class="calc-item ccb-field" :class="{required: $store.getters.isUnused(dropDownField), [dropDownField.additionalStyles]: dropDownField.additionalStyles}" :data-id="dropDownField.alias">\n\t<div class="calc-item__title">\n\t\t<span>{{ dropDownField.label }}</span>\n\t\t<span class="ccb-required-mark" v-if="dropDownField.required">*</span>\n\t</div>\n\n\t<div class="calc-item__description before">\n\t\t<span>{{ dropDownField.description }}</span>\n\t</div>\n\n\t<div :class="[\'calc_\' + dropDownField.alias, {\'calc-field-disabled\': getStep === \'finish\'}]" class="calc-drop-down-box">\n\t\t<i class="ccb-icon-Path-3485 ccb-select-arrow"></i>\n\t\t<select class="calc-drop-down ccb-field ccb-appearance-field" v-model="selectValue">\n\t\t\t<option value="0" selected>Select value</option>\n\t\t\t<option v-for="element in getOptions" :key="element.value" :value="element.value">\n\t\t\t\t{{element.label}}\n\t\t\t</option>\n\t\t</select>\n\t\t<span v-if="dropDownField.required" :class="{active: $store.getters.isUnused(dropDownField)}" class="ccb-error-tip front default">{{ $store.getters.getSettings.texts.required_msg }}</span>\n\t</div>\n\n\t<div class="calc-item__description after">\n\t\t<span>{{ dropDownField.description }}</span>\n\t</div>\n\n</div>\n',
total:
'\n\n<div :style="[ field.hidden ? { display: \'none\' } : \'flex\' ]" :class="[totalField.additionalStyles, \'sub-list-item total\']" :id="field.alias">\n\t<span class="sub-item-title">{{ field.label }}</span>\n\t<span class="sub-item-value">{{ field.converted }}</span>\n</div>\n',
},
pro_active: "",
};
var calc_data_2258 = {
id: "2258",
settings: {
general: {
tour_title: "Grand Total",
tour_description: "Edit the default view of the Total summary.",
header_title: "Total Summary",
descriptions: true,
hide_empty: true,
boxStyle: "vertical",
in_pro: false,
icons: "ccb-icon-Union-28",
slug: "total-summary",
},
currency: {
tour_title: "Currency",
tour_description:
"Set the currency sign and edit its default appearance.",
currency: "\u20b1",
num_after_integer: "2",
decimal_separator: ".",
thousands_separator: ",",
currencyPosition: "left_with_space",
in_pro: false,
icons: "ccb-icon-Union-23",
slug: "currency",
},
texts: {
tour_title: "Notifications",
tour_description: "Manage notifications of Calculator forms.",
title: "Your service request has been completed!",
description: "We have sent your request information to your email.",
issued_on: "Issued on",
reset_btn: "Create new calculation",
invoice_btn: "Get invoice",
required_msg: "This field is required",
in_pro: false,
icons: "ccb-icon-Path-3601",
slug: "texts",
},
formFields: {
tour_title: "Send Form",
tour_description: "Choose contact form type and fill out settings.",
fields: [],
emailSubject: "",
contactFormId: "",
accessEmail: "",
adminEmailAddress: "",
submitBtnText: "Submit",
allowContactForm: "",
body: "Total: [ccb-total-0]",
payment: "",
paymentMethod: "",
paymentMethods: [],
in_pro: true,
icons: "ccb-icon-XMLID_426",
slug: "send-form",
},
woo_products: {
tour_title: "Woo Products",
tour_description: "Enables Calculator on the product page.",
enable: "",
category_id: "",
hook_to_show: "woocommerce_after_single_product_summary",
hide_woo_cart: true,
meta_links: [],
in_pro: true,
icons: "ccb-icon-Union-17",
slug: "woo-products",
},
woo_checkout: {
tour_title: "Woo Checkout",
tour_description: "Enables WooCommerce Checkout.",
enable: "",
product_id: "",
redirect_to: "cart",
description: "[ccb-total-0]",
formulas: [{ idx: 0, title: "Total Cost" }],
in_pro: true,
icons: "ccb-icon-Path-3498",
slug: "woo-checkout",
replace_product: true,
},
stripe: {
tour_title: "Stripe",
tour_description: "Enables Stripe payment gateway.",
enable: "",
publishKey: "",
currency: "usd",
description: "[ccb-total-0]",
formulas: [{ idx: 0, title: "Total Cost" }],
in_pro: true,
icons: "ccb-icon-Path-3499",
slug: "stripe",
},
paypal: {
tour_title: "PayPal",
tour_description: "Enables PayPal payment gateway.",
enable: "",
description: "[ccb-total-0]",
currency_code: "",
paypal_mode: "sandbox",
formulas: [{ idx: 0, title: "Total Cost" }],
in_pro: true,
icons: "ccb-icon-Path-3500",
slug: "paypal",
},
recaptcha: {
use_in_all: false,
enable: "",
type: "v2",
v3: { siteKey: "", secretKey: "" },
v2: { siteKey: "", secretKey: "" },
options: { v2: "Google reCAPTCHA v2", v3: "Google reCAPTCHA v3" },
},
notice: { requiredField: "This field is required" },
icon: "fas fa-cogs",
type: "Cost Calculator Settings",
calc_id: "2258",
title: "Cost Calculator",
},
currency: {
currency: "\u20b1",
num_after_integer: 2,
decimal_separator: ".",
thousands_separator: ",",
currency_position: "left_with_space",
},
fields: [
{
unit: "1",
label: "Price of Coffee Espresso",
_id: "0",
default: "0",
description: "(php)",
placeholder: "",
required: "false",
_event: "keyup",
type: "Quantity",
allowRound: "",
additionalCss: "",
additionalStyles: "",
allowCurrency: "",
enabled_currency_settings: false,
_tag: "cost-quantity",
icon: "ccb-icon-Subtraction-6",
alias: "quantity_field_id_0",
desc_option: "after",
step: 1,
hidden: null,
text: "Quantity Field",
},
{
unit: 1,
label: "Net Weight of Coffee Espresso",
_id: 1,
default: "2000",
description: "(ml)",
placeholder: "",
required: "false",
_event: "keyup",
type: "Quantity",
allowRound: "",
additionalCss: "",
additionalStyles: "",
allowCurrency: "",
enabled_currency_settings: false,
_tag: "cost-quantity",
icon: "ccb-icon-Subtraction-6",
alias: "quantity_field_id_1",
desc_option: "after",
step: 1,
hidden: null,
text: "Quantity Field",
},
{
unit: "1",
label: "Quantity Needed",
_id: "2",
default: "0",
description: "(ml)",
placeholder: "",
required: "false",
_event: "keyup",
type: "Quantity",
allowRound: "",
additionalCss: "",
additionalStyles: "",
allowCurrency: "",
enabled_currency_settings: false,
_tag: "cost-quantity",
icon: "ccb-icon-Subtraction-6",
alias: "quantity_field_id_2",
desc_option: "after",
step: "2",
hidden: null,
text: "Quantity Field",
},
{
_id: "5",
currency: "$",
type: "Total",
additionalCss: "",
_tag: "cost-total",
costCalcFormula:
"( quantity_field_id_0 / quantity_field_id_1 ) * quantity_field_id_2",
additionalStyles: "",
alias: "total_field_id_",
icon: "ccb-icon-Path-3516",
label: "Total Cost",
totalSymbol: "",
totalSymbolSign: "",
symbol: "$",
default: "",
text: "Total fields",
},
{
label: "HTML (3)",
_id: 3,
_event: "",
type: "Html",
htmlContent:
'<p class="notes">Notes: This computation shows only the cost of Easy Brand products per usage. Cost computation is based on the quantity needed for recipe and does not include other ingredients, electricity, and gas expenses.</p>',
placeholder: "",
_tag: "cost-html",
additionalCss: "",
additionalStyles: "",
icon: "ccb-icon-Path-3517",
alias: "html_field_id_3",
required: "false",
hidden: null,
text: "Html elements",
},
],
formula: [
{
id: "5",
alias: "total_field_id_",
label: "Total Cost",
hidden: null,
formula:
"( quantity_field_id_0 / quantity_field_id_1 ) * quantity_field_id_2",
additionalStyles: "",
totalSymbol: "",
totalSymbolSign: "",
},
],
conditions: [],
language: "en",
appearance: {
desktop: {
colors: {
label: "Colors",
name: "colors",
data: {
container: {
label: "Container background",
name: "container",
value: { color: "#FFFFFF", blur: "0", opacity: "100" },
col: "col-12",
type: "container",
hint: {
label: "Background blur",
content:
"Makes the calculator background color transparent with a blur effect.",
image:
"https://easybrandph.com/wp-content/plugins/cost-calculator-builder/frontend/dist/img/bg-blur.svg",
link: "https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/calculator-customization#colors",
},
data: {
color: {
label: "",
name: "color",
value: "#FFFFFF",
col: "col-12",
type: "color",
default: "#FFFFFF",
},
blur: {
label: "",
name: "blur",
value: "0",
col: "col-6",
type: "number",
additional: { prefix: "Blur" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
opacity: {
label: "",
name: "opacity",
value: "100",
col: "col-6",
type: "number",
additional: { prefix: "%" },
data: { min: 0, max: 100, step: 1, dimension: "%" },
},
},
},
primary_color: {
label: "Primary color",
name: "primary_color",
value: "#000000",
col: "col-6",
type: "color",
default: "#000000",
},
secondary_color: {
label: "Secondary Color",
name: "secondary_color",
value: "#fff",
col: "col-6",
type: "color",
default: "#fff",
},
accent_color: {
label: "Accent Color",
name: "accent_color",
value: "#00B163",
col: "col-6",
type: "color",
default: "#00B163",
},
error_color: {
label: "Error Color",
name: "error_color",
value: "#D94141",
col: "col-6",
type: "color",
default: "#D94141",
},
},
},
typography: {
label: "Typography",
name: "typography",
data: {
header_font_size: {
label: "Header font size",
name: "header_font_size",
value: 20,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
header_font_weight: {
label: "Header font weight",
name: "header_font_weight",
value: "bold",
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
label_font_size: {
label: "Label font size",
name: "label_font_size",
value: 12,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
label_font_weight: {
label: "Label font weight",
name: "label_font_weight",
value: "bold",
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
description_font_size: {
label: "Description font size",
name: "description_font_size",
value: 12,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
description_font_weight: {
label: "Description font weight",
name: "description_font_weight",
value: 500,
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
total_field_font_size: {
label: "Total field font size",
name: "total_field_font_size",
value: 14,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
total_field_font_weight: {
label: "Total field font weight",
name: "total_field_font_weight",
value: 500,
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
total_font_size: {
label: "Total font size",
name: "total_font_size",
value: 16,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
total_font_weight: {
label: "Total font weight",
name: "total_font_weight",
value: "bold",
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
fields_btn_font_size: {
label: "Fields & Buttons font size",
name: "fields_btn_font_size",
value: 16,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
fields_btn_font_weight: {
label: "Fields & Buttons font weight",
name: "fields_btn_font_weight",
value: 500,
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
},
},
borders: {
label: "Borders",
name: "borders",
data: {
container_border: {
label: "Container border",
name: "container_border",
value: { type: "solid", width: 0, radius: 8 },
col: "col-12",
type: "border",
data: {
border_type: {
label: "",
name: "border_type",
value: "solid",
col: "col-6",
type: "select",
data: {
options: {
dotted: "Dotted",
dashed: "Dashed",
solid: "Solid",
double: "Double",
groove: "Groove",
ridge: "Ridge",
inset: "Inset",
outset: "Outset",
none: "None",
hidden: "Hidden",
},
},
},
border_width: {
label: "",
name: "border_width",
value: 0,
col: "col-6",
type: "number",
additional: { prefix: "px" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
border_radius: {
label: "",
name: "border_radius",
value: 8,
col: "col-6",
type: "number",
additional: { prefix: "Radius" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
},
},
fields_border: {
label: "Fields border",
name: "fields_border",
value: { type: "solid", width: 1, radius: 0 },
col: "col-12",
type: "border",
data: {
border_type: {
label: "",
name: "border_type",
value: "solid",
col: "col-6",
type: "select",
data: {
options: {
dotted: "Dotted",
dashed: "Dashed",
solid: "Solid",
double: "Double",
groove: "Groove",
ridge: "Ridge",
inset: "Inset",
outset: "Outset",
none: "None",
hidden: "Hidden",
},
},
},
border_width: {
label: "",
name: "border_width",
value: 1,
col: "col-6",
type: "number",
additional: { prefix: "px" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
border_radius: {
label: "",
name: "border_radius",
value: 0,
col: "col-6",
type: "number",
additional: { prefix: "Radius" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
},
},
button_border: {
label: "Button border",
name: "button_border",
value: { type: "solid", width: 1, radius: 0 },
col: "col-12",
type: "border",
data: {
border_type: {
label: "",
name: "border_type",
value: "solid",
col: "col-6",
type: "select",
data: {
options: {
dotted: "Dotted",
dashed: "Dashed",
solid: "Solid",
double: "Double",
groove: "Groove",
ridge: "Ridge",
inset: "Inset",
outset: "Outset",
none: "None",
hidden: "Hidden",
},
},
},
border_width: {
label: "",
name: "border_width",
value: 1,
col: "col-6",
type: "number",
additional: { prefix: "px" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
border_radius: {
label: "",
name: "border_radius",
value: 0,
col: "col-6",
type: "number",
additional: { prefix: "Radius" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
},
},
},
},
shadows: {
label: "Shadows",
name: "shadows",
data: {
container_shadow: {
label: "Container shadow",
name: "container_shadow",
value: { color: "#ffffff", blur: 0, x: 0, y: 0 },
col: "col-12",
type: "shadow",
data: {
color: {
label: "",
name: "color",
value: "#ffffff",
col: "col-12",
type: "color",
default: "#ffffff",
},
blur: {
label: "",
name: "border_width",
value: 0,
col: "col-6",
type: "number",
additional: { prefix: "Blur" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
x: {
label: "",
name: "border_radius",
value: 0,
col: "col-6",
type: "number",
additional: { prefix: "X" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
y: {
label: "",
name: "border_radius",
value: 0,
col: "col-6",
type: "number",
additional: { prefix: "Y" },
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
},
},
},
},
elements_sizes: {
label: "Sizes",
name: "elements_sizes",
data: {
field_and_buttons_height: {
label: "Fields & Buttons height",
name: "field_and_buttons_height",
value: 45,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
container_vertical_max_width: {
label: "Vertical max-width",
name: "container_vertical_max_width",
value: "970",
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 2000, step: 1, dimension: "px" },
},
container_horizontal_max_width: {
label: "Horizontal max-width",
name: "container_horizontal_max_width",
value: 970,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 2000, step: 1, dimension: "px" },
},
container_two_column_max_width: {
label: "Two columns max-width",
name: "container_two_column_max_width",
value: 1200,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 2000, step: 1, dimension: "px" },
},
},
},
spacing_and_positions: {
label: "Spacing & Positions",
name: "spacing_and_positions",
data: {
field_side_indents: {
label: "Field side indents",
name: "field_side_indents",
value: 20,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
field_spacing: {
label: "Field spacing",
name: "field_spacing",
value: 20,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
container_margin: {
label: "Container margin (px)",
name: "container_margin",
value: [0, 0, 0, 0],
col: "col-12",
type: "indent",
data: {
top: {
value: "0px",
label: "Top",
name: "top",
icon: "arrow-top",
},
right: {
value: "0px",
label: "Right",
name: "right",
icon: "arrow-right",
},
bottom: {
value: "0px",
label: "Bottom",
name: "bottom",
icon: "arrow-bottom",
},
left: {
value: "0px",
label: "Left",
name: "left",
icon: "arrow-left",
},
},
},
container_padding: {
label: "Container padding (px)",
name: "container_padding",
value: [50, 50, 50, 50],
col: "col-12",
type: "indent",
data: {
top: {
value: "50px",
label: "Top",
name: "top",
icon: "arrow-top",
},
right: {
value: "50px",
label: "Right",
name: "right",
icon: "arrow-right",
},
bottom: {
value: "50px",
label: "Bottom",
name: "bottom",
icon: "arrow-bottom",
},
left: {
value: "50px",
label: "Left",
name: "left",
icon: "arrow-left",
},
},
},
description_position: {
label: "Description position",
name: "description_position",
value: "after",
col: "col-12",
type: "select",
data: { options: { before: "Before field", after: "After field" } },
},
},
},
others: {
label: "Others",
name: "others",
data: {
calc_preloader: {
label: "Preloader icon",
name: "calc-preloader",
value: 0,
col: "col-12",
type: "preloader",
},
checkbox_horizontal_view: {
label: "Checkbox horizontal view",
name: "checkbox-is-horizontal",
value: false,
col: "col-12",
type: "toggle",
},
radio_horizontal_view: {
label: "Radio horizontal view",
name: "radio-is-horizontal",
value: false,
col: "col-12",
type: "toggle",
},
toggle_horizontal_view: {
label: "Toggle horizontal view",
name: "toggle-is-horizontal",
value: false,
col: "col-12",
type: "toggle",
},
},
},
},
mobile: {
typography: {
label: "Typography",
name: "typography",
data: {
header_font_size: {
label: "Header font size",
name: "header_font_size",
value: 18,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
header_font_weight: {
label: "Header font weight",
name: "header_font_weight",
value: "bold",
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
label_font_size: {
label: "Label font size",
name: "label_font_size",
value: 11,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
label_font_weight: {
label: "Label font weight",
name: "label_font_weight",
value: "bold",
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
description_font_size: {
label: "Description font size",
name: "description_font_size",
value: 11,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
description_font_weight: {
label: "Description font weight",
name: "description_font_weight",
value: 500,
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
total_field_font_size: {
label: "Total field font size",
name: "total_field_font_size",
value: 14,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
total_field_font_weight: {
label: "Total field font weight",
name: "total_field_font_weight",
value: 500,
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
total_font_size: {
label: "Total font size",
name: "total_font_size",
value: 16,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
total_font_weight: {
label: "Total font weight",
name: "total_font_weight",
value: "bold",
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
fields_btn_font_size: {
label: "Fields & Buttons font size",
name: "fields_btn_font_size",
value: 14,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
fields_btn_font_weight: {
label: "Fields & Buttons font weight",
name: "fields_btn_font_weight",
value: 500,
col: "col-6",
type: "select",
data: {
options: {
normal: "Normal",
inherit: "Inherit",
100: "100",
200: "200",
300: "300",
400: "400",
500: "500",
600: "600",
700: "700",
800: "800",
900: "900",
bold: "Bold",
bolder: "Bolder",
},
},
},
},
},
elements_sizes: {
label: "Sizes",
name: "elements_sizes",
data: {
field_and_buttons_height: {
label: "Fields & Buttons height",
name: "field_and_buttons_height",
value: 45,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
},
},
spacing_and_positions: {
label: "Spacing & Positions",
name: "spacing_and_positions",
data: {
field_side_indents: {
label: "Field side indents",
name: "field_side_indents",
value: 20,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
field_spacing: {
label: "Field spacing",
name: "field_spacing",
value: 20,
col: "col-6",
type: "number",
additional: [],
data: { min: 0, max: 100, step: 1, dimension: "px" },
},
container_margin: {
label: "Container margin (px)",
name: "container_margin",
value: [0, 0, 0, 0],
col: "col-12",
type: "indent",
data: {
top: {
value: "0px",
label: "Top",
name: "top",
icon: "arrow-top",
},
right: {
value: "0px",
label: "Right",
name: "right",
icon: "arrow-right",
},
bottom: {
value: "0px",
label: "Bottom",
name: "bottom",
icon: "arrow-bottom",
},
left: {
value: "0px",
label: "Left",
name: "left",
icon: "arrow-left",
},
},
},
container_padding: {
label: "Container padding (px)",
name: "container_padding",
value: [25, 25, 25, 25],
col: "col-12",
type: "indent",
data: {
top: {
value: "25px",
label: "Top",
name: "top",
icon: "arrow-top",
},
right: {
value: "25px",
label: "Right",
name: "right",
icon: "arrow-right",
},
bottom: {
value: "25px",
label: "Bottom",
name: "bottom",
icon: "arrow-bottom",
},
left: {
value: "25px",
label: "Left",
name: "left",
icon: "arrow-left",
},
},
},
},
},
},
},
dateFormat: "F j, Y",
default_img:
"https://easybrandph.com/wp-content/plugins/cost-calculator-builder/frontend/dist/img/default.png",
error_img:
"https://easybrandph.com/wp-content/plugins/cost-calculator-builder/frontend/dist/img/error.png",
success_img:
"https://easybrandph.com/wp-content/plugins/cost-calculator-builder/frontend/dist/img/success.png",
translations: {
empty_end_date_error: "Please select the second date",
required_field: "This field is required",
select_date_range: "Select Date Range",
select_date: "Select Date",
high_end_date_error: "To date must be greater than from date",
high_end_multi_range: "To value must be greater than from value",
wrong_file_url: "Wrong file url",
big_file_size: "File size is too big",
wrong_file_format: "Wrong file format",
form_no_payment: "No Payment",
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment