<\/td>\n <\/tr><\/table>
<\/p> <\/pre><\/body><\/html>\n","dirty":"","disabled":"","from":"{email84}|{name}","html":"1","lastQuestionID":"87","name":"Notification 1","replyto":"none","subject":"Notification 1","to":"formgallery@interlogy.com","type":"notification"}],"form_formStrings":[{"confirmClearForm":"Are you sure you want to clear the form","lessThan":"Your score should be less than"}],"form_welcomePage":[{"buttonText":"START","isActive":"1","logo":"https:\/\/icons.jotfor.ms\/cardforms\/assets\/icons\/icon-sets\/default\/business-building.svg","showQuestionCount":"No","subTitle":"A support request form to make it easy for your supporters to deal with issues faster.","title":"Support Request Form"}],"form_title":"Support Request Form","form_status":"Enabled","form_type":"LEGACY","form_slug":"20804428156451","86_alt":"","86_headerImage":"","86_headerType":"Large","86_imageAlign":"Left","86_name":"clickTo","86_nextButtonText":"Next","86_order":"1","86_previousButtonText":"Previous","86_qid":"86","86_showQuestionCount":"Yes","86_subHeader":"","86_text":"Support Request","86_textAlign":"Left","86_type":"control_head","86_verticalTextAlign":"Middle","86_width":"","65_defaultValue":"","65_description":"This is not critical, so if you can't find the order number don't worry about it. \n\nBut, it is helpful, especially for enrollees who are just beginning, so we can look up the original enrollment information, in order to property record your test information. ","65_hint":" ","65_inputTextMask":"","65_labelAlign":"Auto","65_maxsize":"","65_name":"orderReference65","65_order":"2","65_qid":"65","65_readonly":"No","65_required":"No","65_size":"310","65_subLabel":"","65_text":"Order Reference No","65_type":"control_textbox","65_validation":"None","83_compoundHint":"","83_description":"","83_labelAlign":"Auto","83_middle":"No","83_name":"name","83_order":"3","83_prefix":"No","83_prefixChoices":"","83_qid":"83","83_readonly":"No","83_required":"No","83_sublabels":{"prefix":"Prefix","first":"First Name","middle":"Middle Name","last":"Last Name","suffix":"Suffix"},"83_suffix":"No","83_text":"Name","83_type":"control_fullname","84_allowCustomDomains":"No","84_allowedDomains":"","84_confirmation":"No","84_confirmationHint":"Confirm Email","84_confirmationSublabel":"Confirm Email","84_defaultValue":"","84_description":"","84_disallowFree":"No","84_domainCheck":"No","84_hint":"ex: myname@example.com","84_labelAlign":"Auto","84_maxsize":"","84_name":"email84","84_order":"4","84_qid":"84","84_readonly":"No","84_required":"No","84_size":"310","84_subLabel":"example@example.com","84_text":"E-mail","84_type":"control_email","84_validation":"Email","84_verificationCode":"No","85_compoundHint":"","85_countryCode":"No","85_description":"","85_inputMask":"enable","85_inputMaskValue":"(###) ###-####","85_labelAlign":"Auto","85_name":"phoneNumber85","85_order":"5","85_qid":"85","85_readonly":"No","85_required":"No","85_sublabels":{"area":"Area Code","phone":"Phone Number"},"85_text":"Phone Number","85_type":"control_phone","56_allowOther":"No","56_calcValues":"","56_checked":"No","56_description":"","56_labelAlign":"Auto","56_name":"imHaving","56_options":"New Order|Delivery of product|Billing or charge|Other","56_order":"6","56_otherText":"Other","56_qid":"56","56_readonly":"No","56_required":"No","56_selected":"","56_shuffle":"No","56_special":"None","56_spreadCols":"1","56_text":"I'm having a problem with:","56_type":"control_radio","46_cols":"648","46_defaultValue":"","46_description":"","46_entryLimit":"None-0","46_entryLimitMin":"None-0","46_hint":"","46_labelAlign":"Left","46_maxsize":"","46_mde":"No","46_name":"describeYour","46_order":"7","46_qid":"46","46_readonly":"No","46_required":"No","46_rows":"163","46_subLabel":"","46_text":"Describe Your Problem","46_type":"control_textarea","46_validation":"None","46_wysiwyg":"Disable","87_allowMultiple":"Yes","87_buttonStyle":"None","87_buttonText":"Browse Files","87_description":"","87_extensions":"pdf, doc, docx, xls, xlsx, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif","87_fileLimit":"","87_labelAlign":"Auto","87_limitFileSize":"Yes","87_maxFileSize":"10854","87_minFileSize":"0","87_name":"fileUpload","87_order":"8","87_qid":"87","87_required":"No","87_subLabel":"","87_text":"File Upload (If Any)","87_type":"control_fileupload","67_allowOther":"No","67_calcValues":"","67_description":"","67_labelAlign":"Auto","67_name":"urgencyLevel67","67_options":"Today|In the next 48 hours|This week|Not Urgent","67_order":"9","67_otherText":"Other","67_qid":"67","67_readonly":"No","67_required":"No","67_selected":"","67_shuffle":"No","67_special":"None","67_spreadCols":"1","67_text":"Urgency Level","67_type":"control_radio","68_allowOther":"No","68_calcValues":"","68_description":"","68_labelAlign":"Auto","68_name":"howWould68","68_options":"Either phone or e-mail|By phone|By e-mail","68_order":"10","68_otherText":"Other","68_qid":"68","68_readonly":"No","68_required":"No","68_selected":"","68_shuffle":"No","68_special":"None","68_spreadCols":"1","68_text":"How would you like to be contacted?","68_type":"control_radio","1_buttonAlign":"Auto","1_buttonStyle":"None","1_clear":"No","1_clearText":"Clear Form","1_encryptIcon":"No","1_name":"submit","1_order":"11","1_paypalBt":"","1_print":"No","1_printText":"Print Form","1_qid":"1","1_text":"Submit","1_type":"control_button","1_useImage":""};
const cardColorSchemesMeta = [];
const colorSchemeListV3New = [{"name":"isDefault","order":0,"style":{"borderColor":"hsl(223, 100%, 97%)","backgroundColor":"hsl(0, 0%, 100%)","color":"hsl(223, 22%, 22%)"},"colors":{"clrText":"#2c3344","clrFrame":"#ffffff","clrBg":"#f3f3fe","clrActive":"#e3e5f5","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isBlue","order":1,"style":{"borderColor":"hsl(196, 47%, 40%)","backgroundColor":"hsl(192, 100%, 98%)","color":"hsl(195, 100%, 23%)"},"colors":{"clrText":"#005875","clrFrame":"#f5fdff","clrBg":"#367c96","clrActive":"#dbf3fa","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isRed","order":2,"style":{"borderColor":"hsl(15, 86%, 57%)","backgroundColor":"hsl(55, 100%, 87%)","color":"hsl(15, 100%, 21%)"},"colors":{"clrText":"#6b1b00","clrFrame":"#fff9bd","clrBg":"#f06233","clrActive":"#9a8f6a","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isBrown","order":3,"style":{"borderColor":"hsl(19, 14%, 31%)","backgroundColor":"hsl(44, 46%, 88%)","color":"hsl(19, 39%, 14%)"},"colors":{"clrText":"#321f16","clrFrame":"#efe8d4","clrBg":"#5a4b44","clrActive":"#90827a","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isGreen","order":4,"style":{"borderColor":"hsl(81, 44%, 43%)","backgroundColor":"hsl(81, 100%, 94%)","color":"hsl(81, 34%, 25%)"},"colors":{"clrText":"#46552a","clrFrame":"#f4ffe0","clrBg":"#7c9e3d","clrActive":"#d2e9aa","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isBlack","order":5,"style":{"borderColor":"hsl(240, 23%, 9%)","backgroundColor":"hsl(231, 6%, 40%)","color":"hsl(0, 0%, 100%)"},"colors":{"clrText":"#ffffff","clrFrame":"#60626c","clrBg":"#12121c","clrActive":"#505b77","clrErrorBg":"#632733","clrTextInputBg":"#e3e3e3"}},{"name":"isPink","order":6,"style":{"borderColor":"hsl(338, 40%, 60%)","backgroundColor":"hsl(343, 100%, 99%)","color":"hsl(338, 54%, 38%)"},"colors":{"clrText":"#952d53","clrFrame":"#fffafb","clrBg":"#c2708e","clrActive":"#ffebf1","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isDarkBlue","order":7,"style":{"borderColor":"hsl(215, 67%, 43%)","backgroundColor":"hsl(215, 100%, 92%)","color":"hsl(215, 77%, 31%)"},"colors":{"clrText":"#12458c","clrFrame":"#d6e7ff","clrBg":"#2461b7","clrActive":"#5b95e6","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}},{"name":"isPurple","order":8,"style":{"borderColor":"hsl(262, 91%, 41%)","backgroundColor":"hsl(263, 100%, 97%)","color":"hsl(262, 42%, 29%)"},"colors":{"clrText":"#422b69","clrFrame":"#f6f0ff","clrBg":"#4f09c8","clrActive":"#e6d9fc","clrErrorBg":"#ffd6d6","clrTextInputBg":"#ffffff"}}];
setTimeout(() => {
const selectedColorScheme = document.querySelector(".colorScheme-list li.isSelected");
if (selectedColorScheme) {
selectedColorScheme.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
}
}, 1000);
function generateThemeCSS(newValue, formProps) {
const name = 'statelessColorScheme';
const formProperties = formProps || {};
let styleJSON = formProperties.form_styleJSON || formProperties.styleJSON || {};
let _injectCSS = (formProperties.form_injectCSS || formProperties.injectCSS || '/*__INSPECT_SEPERATOR__*/').replace(/((\/\*PREFERENCES STYLE\*\/)([\s\S]*?)(\/\*PREFERENCES STYLE\*\/))/g, '');
const isNewDefaultTheme = (formProperties.form_defaultTheme || formProperties.defaultTheme) === 'v2';
const isCdnColorScheme = window.location.href.indexOf('cdnColorScheme') === -1;
const advancedDesingerProps = [
'clrButtonBorder', 'clrTextInputBorder', 'clrDropdownBorder', 'okColor', 'clrButtonBg', 'clrErrorMsg', 'clrTextInputFont', 'clrDropdownBg', 'pbClrButtonBorder', 'collapseTextColor',
'collapseBgColor', 'clrDropdownFont', 'clrHeader', 'clrActive'];
try {
if (typeof styleJSON === typeof 'string') {
styleJSON = JSON.parse(styleJSON);
}
} catch (e) {
styleJSON = {};
}
function lightenColor(color, percent) {
try {
let col = color;
let usePound = false;
if (col[0] === '#') {
col = col.slice(1);
usePound = true;
}
if (col.length === 3) { // Convert 3 digit to 6 digit hex
col = `${col[0]}${col[0]}${col[1]}${col[1]}${col[2]}${col[2]}`;
}
const num = parseInt(col, 16);
const amt = Math.round(2.55 * percent);
const R = (num >> 16) + amt;
const B = (num >> 8 & 0x00FF) + amt;
const G = (num & 0x0000FF) + amt;
const lighten = (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + //eslint-disable-line
(B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + //eslint-disable-line
(G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1); //eslint-disable-line
if (usePound) {
return `#${lighten}`;
}
return lighten;
} catch (e) {
return color;
}
}
function generateAlignmentRule(name, newValue) {
let value = formProperties.form_alignment ?? formProperties.alignment ?? styleJSON['@labelAlign'] ?? 'Top';
if (name === 'alignment') {
value = newValue;
}
styleJSON['@labelAlign'] = value;
const topRules = `
display: block;
float: none;
text-align: left;
width: 100%;
`;
const leftRightRules = `
display: inline-block;
float: left;
text-align: ${value === 'Left' ? 'left' : 'right'};
`;
const alignmentRule = `
.form-label.form-label-auto {
${value === 'Top' ? topRules : leftRightRules}
}
`;
return alignmentRule;
}
function generateLineSpacingRule(name, newValue) {
let value = formProperties.form_lineSpacing ?? formProperties.lineSpacing ?? styleJSON['@lineSpacing'] ?? 10;
if (name === 'lineSpacing') {
value = newValue;
}
styleJSON['@lineSpacing'] = value;
const rule = `
.form-line {
margin-top: ${value}px;
margin-bottom: ${value}px;
}
`;
return rule;
}
// unclosed paranthesis check for rgb, rgba
function unclosedParanthesesCheck(str) {
return /[()]/.test(str) && (str.match(/\(/g) || '').length === (str.match(/\)/g) || '').length;
}
// add missing paranthesis for rgb, rgba
function addMissingParantheses(s) {
let missedOpen = 0;
const stack = [];
for (let i = 0; i < s.length; i++) {
if (s[i] === '(') {
stack.push(s[i]);
} else if (s[i] === ')') {
if (!stack.pop()) {
missedOpen++;
}
}
}
return Array(missedOpen + 1).join('(') + s + Array(stack.length + 1).join(')');
}
function generateBackgroundRule(name, newValue, schemeColor) {
let value = schemeColor || formProperties.form_background || formProperties.background;
if (name === 'background') {
value = schemeColor || newValue;
}
let clrFrame = typeof value === 'string' ? value.replace(new RegExp(/\"/gi), '\'') : '';
if (clrFrame.indexOf('rgb') > -1 && !unclosedParanthesesCheck(clrFrame)) {
clrFrame = addMissingParantheses(clrFrame);
}
styleJSON['@clrFrame'] = clrFrame;
const rule = `
.supernova .form-all, .form-all {
background-color: ${clrFrame};
}
`;
return rule;
}
function generateFontColorRule(name, newValue, schemeColor) {
let value = schemeColor || formProperties.form_fontcolor || formProperties.fontcolor;
if (name === 'fontcolor') {
value = schemeColor || newValue;
}
styleJSON['@clrText'] = value;
styleJSON['@clrLabel'] = value;
// If header color is specified we mustn't change it.
const headerColor = (styleJSON && styleJSON['@clrHeader'] && styleJSON['@clrHeader'].length > 0) ? styleJSON['@clrHeader'] : value;
const rule = `
.form-all {
color: ${value};
}
.form-header-group .form-header {
color: ${headerColor};
}
.form-header-group .form-subHeader {
color: ${value};
}
.form-label-top,
.form-label-left,
.form-label-right,
.form-html,
.form-checkbox-item label,
.form-radio-item label,
span.FITB .qb-checkbox-label,
span.FITB .qb-radiobox-label,
span.FITB .form-radio label,
span.FITB .form-checkbox label,
[data-blotid][data-type=checkbox] [data-labelid],
[data-blotid][data-type=radiobox] [data-labelid],
span.FITB-inptCont[data-type=checkbox] label,
span.FITB-inptCont[data-type=radiobox] label {
color: ${value};
}
.form-sub-label {
color: ${lightenColor(value, 10)};
}
`;
return rule;
}
function generateWidthRule(name, newValue) {
let value = formProperties.form_formWidth ?? formProperties.formWidth ?? styleJSON['@formWidth'] ?? 700;
if (name === 'formWidth') {
value = newValue;
}
styleJSON['@formWidth'] = value;
const rule = `
.form-all {
max-width: ${value}px;
width: 100%;
}
`;
return rule;
}
function generateLabelWidthRule(name, newValue) {
let value = formProperties.form_labelWidth ?? formProperties.labelWidth ?? styleJSON['@labelWidth'] ?? 150;
if (name === 'labelWidth') {
value = newValue;
}
styleJSON['@labelWidth'] = value;
const rule = `
.form-label.form-label-left,
.form-label.form-label-right,
.form-label.form-label-left.form-label-auto,
.form-label.form-label-right.form-label-auto {
width: ${value}px;
}
`;
return rule;
}
function generateFontLink() {
const fontFamilyString = ['@font', '@headerFont', '@buttonFont', '@pbButtonFont', '@labelFont']
.filter(fontPropPrefix => ['jotform', 'google'].indexOf(styleJSON[`${fontPropPrefix}Type`]) !== -1 && styleJSON[`${fontPropPrefix}Family`])
.map(fontPropPrefix => styleJSON[`${fontPropPrefix}Family`].replace(/ /g, '+'))
.join('|');
return fontFamilyString ? `//cdn.jotfor.ms/fonts/?family=${fontFamilyString}` : '';
}
function generateFontRule(name, newValue) {
const fontSource = formProperties.form_font ?? formProperties.font ?? styleJSON['@fontFamily'] ?? 'Arial';
let fontFamily = (typeof fontSource === 'object' && fontSource && fontSource.value) ? fontSource.value : fontSource;
if (name === 'font' && newValue) {
fontFamily = (typeof newValue === 'object' && newValue.value) ? newValue.value : (typeof newValue === 'string' ? newValue : fontFamily);
if (typeof newValue === 'object') {
styleJSON['@fontType'] = newValue.type;
styleJSON['@fontFamily'] = fontFamily;
styleJSON['@fontLink'] = generateFontLink() || '';
delete styleJSON['@googleFontLink'];
}
}
// @fontFamily
// @buttonFontFamily
// @pbButtonFontFamily
// @headerFontFamily
// @labelFontFamily
const rule = `
.form-all {
font-family: ${fontFamily}, sans-serif;
}
`;
return rule;
}
function generateFontSizeRule(name, newValue) {
let value = formProperties.form_fontsize ?? formProperties.fontsize ?? styleJSON['@fontSize'] ?? 14;
if (name === 'fontsize') {
value = newValue;
}
const rule = `
.form-all {
font-size: ${value}px
}
`;
return rule;
}
function generateWindowBackgroundRule(name, newValue, color) {
let value = color || styleJSON['@clrBg'];
if (name === 'pageColor') {
value = color || newValue;
}
styleJSON['@clrBg'] = value;
const rule = `
.supernova {
background-color: ${value};
}
.supernova body {
background: transparent;
}
`;
return rule;
}
function generateTextInputBackgroundRule(name, newValue, color) {
let value = color || styleJSON['@clrTextInputBg'];
if (name === 'inputColor') {
value = color || newValue;
}
styleJSON['@clrTextInputBg'] = value;
const rule = `
.form-textbox,
.form-textarea,
.form-dropdown,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input {
background-color: ${value};
}
`;
return rule;
}
function generateErrorBackgroundRule(color) {
styleJSON['@clrErrorBg'] = color;
const rule = `
.form-line-error {
overflow: hidden;
transition: none;
background-color: ${color};
}
.form-line-error .form-error-message {
background-color: #DC2626;
clear: both;
float: none;
}
.form-line-error .form-error-arrow {
border-bottom-color: #FF3200;
}
.form-line-error input:not(#coupon-input),
.form-line-error textarea,
.form-line-error .form-validation-error {
border: 1px solid #c61515;
box-shadow: 0 0 3px #c61515;
}
`;
return rule;
}
function generatePageBackgroundImageRule(name, newValue) {
let backgroundUrl = styleJSON['@bgURL'];
if (name === 'pageBackgroundImage') {
backgroundUrl = newValue;
}
const repeat = (styleJSON['@bgRepeat'] ?? styleJSON['bgRepeat'] ?? 'false') === 'true' ? 'repeat' : 'no-repeat';
const fixed = (styleJSON['@bgAttach'] ?? styleJSON['bgAttach'] ?? 'true') !== 'false' ? 'fixed' : 'scroll';
const cover = (styleJSON['@bgCover'] ?? styleJSON['bgCover'] ?? 'true') !== 'false' ? 'cover' : 'auto';
styleJSON['@bgURL'] = backgroundUrl;
const backgroundRules = `
.supernova {
background-repeat: ${repeat};
background-size:${cover};
background-attachment: ${fixed};
background-position: center top;
}`;
if (!backgroundUrl || backgroundUrl === '|nobackground|') {
return `
${backgroundRules}
.supernova {
background-image: none;
}
`;
}
return `
${backgroundRules}
.supernova {
background-image: url("${backgroundUrl}");
}`;
}
function generateFormBackgroundImageRule(name, newValue) {
let backgroundUrl = styleJSON['@frameBgURL'];
if (name === 'formBackgroundImage') {
backgroundUrl = newValue;
}
styleJSON['@frameBgURL'] = backgroundUrl;
if (!backgroundUrl || backgroundUrl === '|nobackground|') {
return `
.form-all {
background-image: none;
}
`;
}
const repeat = (styleJSON['@bgRepeat'] ?? styleJSON['bgRepeat'] ?? 'false') === 'true' ? 'repeat' : 'no-repeat';
const fixed = (styleJSON['@bgAttach'] ?? styleJSON['bgAttach'] ?? 'true') !== 'false' ? 'fixed' : 'scroll';
const cover = (styleJSON['@bgCover'] ?? styleJSON['bgCover'] ?? 'true') !== 'false' ? 'cover' : 'auto';
return `
.form-all {
background-image: url("${backgroundUrl}");
background-repeat: ${repeat};
background-size:${cover};
background-attachment: ${fixed};
background-position: center top;
}
`;
}
function generateInjectCSS() {
let result = '/*PREFERENCES STYLE*/';
result += generateFontRule(name, newValue);
result += generateAlignmentRule(name, newValue);
result += generateLineSpacingRule(name, newValue);
result += generateWidthRule(name, newValue);
result += generateLabelWidthRule(name, newValue);
result += generateFontSizeRule(name, newValue);
if (name === 'colorScheme' || name === 'statelessColorScheme') {
result += generateWindowBackgroundRule(name, newValue, newValue.clrBg);
result += generateBackgroundRule(name, newValue, newValue.clrFrame);
result += generateFontColorRule(name, newValue, newValue.clrText);
result += generateTextInputBackgroundRule(name, newValue, newValue.clrTextInputBg);
result += generateErrorBackgroundRule(newValue.clrErrorBg);
} else {
result += generateBackgroundRule(name, newValue);
result += generateFontColorRule(name, newValue);
result += generateWindowBackgroundRule(name, newValue);
result += generateTextInputBackgroundRule(name, newValue);
}
result += generatePageBackgroundImageRule(name, newValue);
result += generateFormBackgroundImageRule(name, newValue);
result += '/*PREFERENCES STYLE*/';
return result;
}
const generateNewColorSchemeCSS = styleJSON => {
const _styleJSON = typeof styleJSON === 'string' ? JSON.parse(styleJSON) : styleJSON;
let newThemeProps = _styleJSON.newThemeProps || {};
newThemeProps = typeof newThemeProps === 'string' ? JSON.parse(newThemeProps) : newThemeProps; // eslint-disable-line no-unused-vars
const baseDefaults = {
clrText: '#333333',
clrFrame: '#ffffff',
clrBg: '#f5f5f5',
clrActive: '#e8e8e8',
clrErrorBg: '#ffd6d6',
clrTextInputBg: '#ffffff'
};
Object.entries(baseDefaults).forEach(([k, v]) => {
if (!newThemeProps[k]) newThemeProps[k] = v;
});
const schemeProps = {
'dark-color-2x': 'input-border-color',
'label-color': 'clrText',
'light-color': 'main-light-color',
'input-bg-color': 'clrTextInputBg',
'dark-color': 'rating-item-bg-color',
'hover-color': 'rating-item-bg-hover',
'dark-600': 'label-color',
'sub-label-color': 'form-sublabel-color',
'form-bg-color': 'clrFrame',
'main-color': 'clrBg',
'active-bg-color': 'clrActive',
'error-bg-color': 'clrErrorBg',
'control-nextButton-textColor': 'clrFrame',
'white-color': 'control-nextButton-textColor',
'submit-button-bg-color': 'control-button-bg-color',
'submit-button-hover-bg': 'submit-button--hover',
'back-button-hover-bg': 'back-button--hover',
'next-button-hover-bg': 'next-button--hover',
'back-button--hover': 'back-button-hover-bg',
'next-button--hover': 'next-button-hover-bg',
'default-back-bgcolor': 'default-back-bgcolor',
'default-blue-color': 'main-color',
'default-grey-color': 'default-grey-color',
'default-grey-light-color': 'default-grey-light-color',
'empty-state-grey-color': 'empty-state-grey-color',
'empty-state-grey-light-color': 'empty-state-grey-light-color',
'default-dark-color': 'default-dark-color',
'default-blue-light-color': 'default-blue-light-color',
'default-blue-light2x-color': 'default-blue-light2x-color',
'input-border-color': 'dark-color-2x',
'input-border-color--hover': 'input-border-color',
'input-border-color--focus': 'main-color',
'input-box-shadow--hover': 'input-border-color--hover',
'input-box-shadow--focus': 'input-border-color--focus',
'next-bg-color': 'main-color',
'category-btn-color': 'main-color',
'product-item-bg': 'form-bg-color',
'a11y-fitb-label': 'label-color',
'a11y-calendarOtherDay': 'default-grey-light-color'
};
if (!_styleJSON.newThemeProps) {
return '';
}
Object.entries(schemeProps).forEach(([key, value]) => {
if (!newThemeProps[key]) newThemeProps[key] = newThemeProps[value];
});
if (!newThemeProps['default-blue-light-color']) newThemeProps['default-blue-light-color'] = newThemeProps['clrActive'];
if (!newThemeProps['hover-color']) newThemeProps['hover-color'] = newThemeProps['clrActive'];
if (!newThemeProps['input-border-color']) {
var c = newThemeProps['clrText'] || baseDefaults.clrText;
newThemeProps['input-border-color'] = (c && c.indexOf('#') === 0) ? lightenColor(c, 55) : (c || '#d8dae9');
}
if (!newThemeProps['dark-color-2x']) newThemeProps['dark-color-2x'] = newThemeProps['input-border-color'];
if (!newThemeProps['input-border-color--hover']) newThemeProps['input-border-color--hover'] = newThemeProps['input-border-color'];
if (!newThemeProps['input-border-color--focus']) newThemeProps['input-border-color--focus'] = newThemeProps['main-color'];
if (!newThemeProps['input-box-shadow--hover']) newThemeProps['input-box-shadow--hover'] = newThemeProps['input-border-color--hover'];
if (!newThemeProps['input-box-shadow--focus']) newThemeProps['input-box-shadow--focus'] = newThemeProps['input-border-color--focus'];
if (!newThemeProps['submit-button-bg-color']) newThemeProps['submit-button-bg-color'] = newThemeProps['main-color'];
if (!newThemeProps['submit-button-hover-bg']) newThemeProps['submit-button-hover-bg'] = newThemeProps['main-color'];
if (!newThemeProps['back-button--hover']) newThemeProps['back-button--hover'] = newThemeProps['main-color'];
if (!newThemeProps['next-button--hover']) newThemeProps['next-button--hover'] = newThemeProps['main-color'];
if (!newThemeProps['light-color']) newThemeProps['light-color'] = newThemeProps['main-color'];
if (!newThemeProps['category-btn-color']) newThemeProps['category-btn-color'] = newThemeProps['main-color'];
if (!newThemeProps['product-item-bg']) newThemeProps['product-item-bg'] = newThemeProps['form-bg-color'];
if (!newThemeProps['next-bg-color']) newThemeProps['next-bg-color'] = newThemeProps['main-color'];
if (!newThemeProps['white-color']) newThemeProps['white-color'] = newThemeProps['form-bg-color'];
if (!newThemeProps['empty-state-grey-color']) newThemeProps['empty-state-grey-color'] = newThemeProps['form-bg-color'];
if (!newThemeProps['empty-state-grey-light-color']) newThemeProps['empty-state-grey-light-color'] = newThemeProps['form-bg-color'];
if (!newThemeProps['default-grey-light-color']) newThemeProps['default-grey-light-color'] = newThemeProps['clrActive'];
if (!newThemeProps['default-grey-color']) newThemeProps['default-grey-color'] = newThemeProps['label-color'];
if (!newThemeProps['default-dark-color']) newThemeProps['default-dark-color'] = newThemeProps['label-color'];
if (!newThemeProps['default-blue-light2x-color']) newThemeProps['default-blue-light2x-color'] = newThemeProps['input-bg-color'];
if (!newThemeProps['default-back-bgcolor']) newThemeProps['default-back-bgcolor'] = newThemeProps['main-color'];
if (!newThemeProps['a11y-calendarOtherDay']) newThemeProps['a11y-calendarOtherDay'] = newThemeProps['default-grey-light-color'];
if (!newThemeProps['sub-label-color']) newThemeProps['sub-label-color'] = newThemeProps['label-color'];
if (!newThemeProps['placeholder-color']) newThemeProps['placeholder-color'] = newThemeProps['dark-color-2x'] || newThemeProps['input-border-color'];
const safeFallback = newThemeProps['label-color'] || newThemeProps['clrText'] || baseDefaults.clrText;
Object.keys(newThemeProps).forEach(k => {
if (!newThemeProps[k]) newThemeProps[k] = safeFallback;
});
const labelColor = newThemeProps['label-color'] || newThemeProps['clrText'];
const formBgColor = newThemeProps['form-bg-color'] || newThemeProps['clrFrame'];
const mainColor = newThemeProps['main-color'] || newThemeProps['clrBg'];
const inputBgColor = newThemeProps['input-bg-color'] || newThemeProps['clrTextInputBg'];
const errorBgColor = newThemeProps['error-bg-color'] || newThemeProps['clrErrorBg'];
const activeBgColor = newThemeProps['active-bg-color'] || newThemeProps['clrActive'];
if (labelColor) { _styleJSON['@clrText'] = labelColor; _styleJSON['@clrLabel'] = labelColor; }
if (formBgColor) { _styleJSON['@clrFrame'] = formBgColor; }
if (mainColor) { _styleJSON['@clrBg'] = mainColor; }
if (inputBgColor) { _styleJSON['@clrTextInputBg'] = inputBgColor; }
if (errorBgColor) { _styleJSON['@clrErrorBg'] = errorBgColor; }
if (activeBgColor) { _styleJSON['@clrActive'] = activeBgColor; }
return `
/*PREFERENCES STYLE*/
/* NEW THEME STYLE */
/* colors */
.calendar-new-header-withSVG .calendar-new-header .nextYear svg,
.calendar-new-header-withSVG .calendar-new-header .nextMonth svg,
.calendar-new-header-withSVG .calendar-new-header .previousYear svg,
.calendar-new-header-withSVG .calendar-new-header .previousMonth svg,
.FITB-inptCont .form-textbox, .FITB-inptCont .form-dropdown,
span.FITB-inptCont[data-type=selectbox] select,
span.FITB-inptCont[data-type=timebox] select,
.rating-item label,
.currentDate,
.pickerItem select,
.appointmentCalendar .calendarDay,
.calendar.popup table tbody td,
.calendar-new-header > *,
span.form-sub-label, label.form-sub-label, div.form-header-group .form-subHeader,
.rating-item-title.for-to > label:first-child,
.rating-item-title.for-from > label:first-child,
.rating-item-title .editor-container * {
color: ${newThemeProps['label-color']};
}
.rating-item input:hover+label,
.appointmentSlotsContainer > *,
li[data-type=control_fileupload] .qq-upload-button,
li[data-type=control_fileupload] .jfUpload-heading,
.form-textbox::placeholder {
color: ${newThemeProps['placeholder-color'] || newThemeProps['dark-color-2x'] || newThemeProps['default-blue-color']};
}
.clear-pad-btn,
.appointmentCalendar .dayOfWeek,
.calendar.popup th {
color: ${newThemeProps['default-blue-color'] || newThemeProps['white-color'] || newThemeProps['dark-color-2x'] || newThemeProps['label-color']};
}
.until-text,
.form-submit-reset {
color: ${newThemeProps['default-dark-color'] || newThemeProps['label-color']};
}
.appointmentCalendar .calendarDay.isSelected:after {
color: ${newThemeProps['input-bg-color']};
}
.form-pagebreak-next,
.form-pagebreak-back,
.form-collapse-table,
.form-matrix-column-headers,
.form-matrix-row-headers,
.form-spinner-button-container>* {
color: ${newThemeProps['default-dark-color'] || newThemeProps['white-color']};
}
.stageEmpty,
.btn-barebone,
.formPage-stuff,
.scrollToTop .scrollToTop-text {
color: ${newThemeProps['empty-state-grey-color'] || newThemeProps['white-color']};
}
.scrollToTop svg {
fill: ${newThemeProps['empty-state-grey-color'] || newThemeProps['white-color']};
}
.form-dropdown:not(.time-dropdown):not(:required),
.form-dropdown:not(:required),
.form-dropdown:required:invalid,
.form-spinner-input {
color: ${newThemeProps['default-grey-color'] || newThemeProps['dark-600'] || newThemeProps['label-color']};
}
.FITB:not(.formRender) .qb-datebox input:not([data-labelid]), .FITB:not(.formRender) .qb-selectbox input:not([data-labelid]),
.FITB:not(.formRender) .qb-signaturebox input:not([data-labelid]), .FITB:not(.formRender) .qb-textbox input:not([data-labelid]),
.FITB:not(.formRender) .qb-timebox input:not([data-labelid]), span.FITB-inptCont[data-type=datebox] label,
span.FITB-inptCont[data-type=signaturebox] label, span.FITB-inptCont[data-type=textbox] label, span.FITB-inptCont[data-type=timebox] label,
span.FITB-inptCont[data-type=datebox] input:focus~label, span.FITB-inptCont[data-type=datebox] input:valid~label,
span.FITB-inptCont[data-type=signaturebox] input:focus~label, span.FITB-inptCont[data-type=signaturebox] input:valid~label,
span.FITB-inptCont[data-type=textbox] input:focus~label, span.FITB-inptCont[data-type=textbox] input:valid~label,
span.FITB-inptCont[data-type=timebox] input:focus~label, span.FITB-inptCont[data-type=timebox] input:valid~label {
color: ${newThemeProps['default-grey-color'] || newThemeProps['next-bg-color'] || newThemeProps['a11y-fitb-label'] || newThemeProps['dark-color-2x']};
}
.appointmentCalendar .calendarWeek .calendarDay.isUnavailable,
.calendar tr.days td.otherDay,
.calendar tr.days td:hover:not(.unselectable) {
color: ${newThemeProps['default-grey-light-color'] || newThemeProps['a11y-calendarOtherDay'] || newThemeProps['light-color']};
}
/* border-colors */
.form-dropdown,
.form-textarea,
.form-textbox,
li[data-type=control_fileupload] .qq-upload-button,
.rating-item label,
.rating-item input:focus+label,
.rating-item input:checked+label,
.jf-form-buttons,
.form-checkbox+label:before, .form-checkbox+span:before, .form-radio+label:before, .form-radio+span:before,
.signature-pad-passive,
.signature-wrapper,
.appointmentCalendarContainer,
.appointmentField .timezonePickerName,
.appointmentDayPickerButton,
.appointmentCalendarContainer .monthYearPicker .pickerItem+.pickerItem,
.appointmentCalendarContainer .monthYearPicker,
.appointmentCalendar .calendarDay.isActive .calendarDayEach, .appointmentCalendar .calendarDay.isToday .calendarDayEach, .appointmentCalendar .calendarDay:not(.empty):hover .calendarDayEach,
.calendar.popup:before,
.calendar-new-month,
.form-matrix-column-headers, .form-matrix-table td, .form-matrix-table td:last-child,
.form-matrix-table th, .form-matrix-table th:last-child, .form-matrix-table tr:last-child td, .form-matrix-table tr:last-child th, .form-matrix-table tr:not([role=group])+tr[role=group] th,
.form-matrix-headers.form-matrix-column-headers,
.isSelected .form-matrix-column-headers:nth-last-of-type(2),
li[data-type=control_inline] input[type=email], li[data-type=control_inline] input[type=number],
li[data-type=control_inline] input[type=tel], li[data-type=control_inline] input[type=text]:not(#productSearch-input), .form-line[data-payment=true] .form-textbox,
.form-line[data-payment=true] .select-area,
.form-line[data-payment=true] #coupon-input,
.form-line[data-payment=true] #coupon-container input,
.form-line[data-payment=true] input#productSearch-input,
.form-line[data-payment=true] .form-product-category-item:after,
.form-line[data-payment=true] .filter-container .dropdown-container .select-content,
.form-line[data-payment=true] .form-textbox.form-product-custom_quantity,
.form-line[data-payment="true"] .form-product-item .p_checkbox .select_border,
.form-line[data-payment="true"] .form-product-item .form-product-container .form-sub-label-container span.select_cont,
.form-line[data-payment=true] select.form-dropdown,
.form-line[data-payment=true] #payment-category-dropdown .select-area,
.form-line[data-payment=true] #payment-sorting-products-dropdown .select-area,
.form-line[data-payment=true] .dropdown-container .select-content,
.form-line[data-payment="true"] hr,
.form-line[data-payment=true] .p_item_separator,
.form-line[data-payment="true"] .payment_footer.new_ui,
.form-line.card-3col .form-product-item.new_ui,
.form-line.card-2col .form-product-item.new_ui,
.form-line[data-payment=true] .form-product-category-item,
.form-line[data-payment=true] .payment-form-table span.form-sub-label-container iframe,
.form-line[data-type=control_square] .payment-form-table span.form-sub-label-container iframe{
border-color: ${newThemeProps['dark-color-2x']};
}
.stageEmpty,
.form-page-break:before,
.welcome-page-break:before,
.thankyou-page-break:before,
.form-cover-break:before,
.form-page-break:after,
.welcome-page-break:after,
.thankyou-page-break:after,
.form-cover-break:after {
border-color: ${newThemeProps['empty-state-grey-light-color'] || newThemeProps['white-color']};
}
.rating-item input:hover+label,
.appointmentSlot,
.form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span label:before,
.form-radio:checked+label:before, .form-radio:checked+span:before,
.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus,
.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,
.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover {
border-color: ${newThemeProps['default-blue-color'] || newThemeProps['dark-color-2x']};
}
.calendar tr.days td:hover:not(.unselectable):after {
border-color: ${newThemeProps['light-color']};
}
.form-header-group,
.form-buttons-wrapper, .form-pagebreak, .form-submit-clear-wrapper,
.form-pagebreak-next,
.form-pagebreak-back,
.form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-radio:hover+span:before,
.divider {
border-color: ${newThemeProps['main-color']};
}
.form-pagebreak-back:focus, .form-pagebreak-next:focus, .form-submit-button:focus {
border-color: ${newThemeProps['input-border-color--focus']};
}
/* background-colors */
.form-matrix-values,
.form-matrix-values,
.signature-wrapper,
.signature-pad-passive,
.form-checkbox+label:before, .form-checkbox+span:before,
.form-radio+label:before, .form-radio+span:before,
.form-line[data-payment=true] #coupon-input,
.form-line[data-payment=true] input#productSearch-input,
.form-line[data-payment=true] .select-area,
.form-line[data-payment=true] .custom_quantity,
.form-line[data-payment=true] .filter-container .select-content,
.form-line[data-payment=true] .p_checkbox .select_border,
.form-line[data-payment=true] #payment-category-dropdown .select-area,
.form-line[data-payment=true] #payment-sorting-products-dropdown .select-area,
.form-line[data-payment=true] .dropdown-container .select-content {
background-color: ${newThemeProps['input-bg-color']};
}
.form-line-active {
background-color: ${newThemeProps['active-bg-color']};
}
.stageEmpty {
background-color: ${newThemeProps['main-color'] || newThemeProps['dark-color-2x']};
}
.form-matrix-column-headers,
.form-matrix-row-headers,
.form-spinner-button-container>*,
.appointmentDayPickerButton,
.form-collapse-table,
.form-collapse-table:hover {
background-color: ${newThemeProps['default-back-bgcolor'] || newThemeProps['dark-color-2x']};
}
.calendar.popup, .calendar.popup table,
.calendar.popup table tbody td:after {
background-color: ${newThemeProps['form-bg-color']};
}
.form-line-error {
background-color: ${newThemeProps['error-bg-color']};
}
.appointmentCalendar .calendarDay.isActive .calendarDayEach,
.appointmentFieldRow.forSelectedDate,
.calendar.popup tr.days td.selected:after,
.calendar.popup:after,
.submit-button,
.form-checkbox:checked+label:before, .form-checkbox:checked+span:before, .form-checkbox:checked+span label:before,
.form-radio+label:after, .form-radio+span:after,
.rating-item input:checked+label,
.appointmentCalendar .calendarDay:after,
.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,
.rating-item input:focus+label,
.formPage-removePage:hover,
.btn-barebone:hover, .btn-barebone:active {
background-color: ${newThemeProps['dark-color-2x']};
}
.appointmentSlot.active {
background-color: ${newThemeProps['dark-color-2x']} !important;
}
.clear-pad-btn,
.appointmentCalendar .dayOfWeek,
.calendar.popup th {
background-color: ${newThemeProps['default-blue-light-color'] || newThemeProps['dark-600'] || newThemeProps['label-color']};
}
.appointmentField .timezonePicker:hover+.timezonePickerName,
.form-spinner-button-container>*:hover {
background-color: ${newThemeProps['default-blue-light-color'] || newThemeProps['hover-color']};
}
li[data-type=control_fileupload] .qq-upload-button {
background-color: ${newThemeProps['default-blue-light2x-color'] || newThemeProps['input-bg-color']};
}
.JotFormBuilder .appContainer #app li.form-line[data-type=control_matrix].isSelected .questionLine-editButton.forRemove:after,
.JotFormBuilder .appContainer #app li.form-line[data-type=control_matrix].isSelected .questionLine-editButton.forRemove:before {
background-color: ${newThemeProps['default-grey-color'] || newThemeProps['white-color']};
}
.page-section li.form-line-active[data-type="control_button"] {
background-color: ${newThemeProps['active-bg-color']};
}
.appointmentDayPickerButton:after,
.form-collapse-table:after {
background-color: ${newThemeProps['a11y-fitb-label'] || newThemeProps['default-grey-color'] || newThemeProps['form-bg-color']};
}
/* shadow */
.form-dropdown:hover, .form-textarea:hover, .form-textbox:hover, .signature-wrapper:hover,
.calendar.popup:before,
.jSignature:hover,
li[data-type=control_fileupload] .qq-upload-button-hover,
.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,
.form-line[data-payment="true"] .form-product-item .p_checkbox:hover .select_border,
.form-checkbox:hover+label:before, .form-checkbox:hover+span:before, .form-radio:hover+label:before, .form-radio:hover+span:before,
.calendar.popup:before {
border-color: ${newThemeProps['input-border-color--hover']};
box-shadow: 0 0 0 1px ${newThemeProps['input-box-shadow--hover']};
}
.form-dropdown:focus, .form-textarea:focus, .form-textbox:focus, .signature-wrapper:focus,
li[data-type=control_fileupload] .qq-upload-button-focus,
.form-checkbox:focus+label:before, .form-checkbox:focus+span:before, .form-radio:focus+label:before, .form-radio:focus+span:before,
.calendar.popup:before {
border-color: ${newThemeProps['input-border-color--focus']};
box-shadow: 0 0 0 1px ${newThemeProps['input-box-shadow--focus']};
}
.calendar.popup table tbody td{
box-shadow: none;
}
.form-product-item .form-product-container .form-sub-label-container span.select_cont:focus select,
.form-product-item .form-product-container .form-sub-label-container span.select_cont select:focus,
.form-checkbox.form-product-input:focus ~ .select_border,
.form-pagebreak-next:focus,
.form-pagebreak-back:focus,
.preview-submission-button:focus,
.form-submit-button:focus,
.form-collapse-table:focus {
border-color: ${newThemeProps['input-border-color--focus']} !important;
box-shadow: 0 0 1px 3px ${newThemeProps['input-box-shadow--focus']} !important;
}
/* button colors */
.submit-button {
background-color: ${newThemeProps['submit-button-bg-color']};
border-color: ${newThemeProps['submit-button-bg-color']};
}
.submit-button:hover {
background-color: ${newThemeProps['submit-button-hover-bg']};
border-color: ${newThemeProps['submit-button-hover-bg']};
}
.form-pagebreak-next,
.form-pagebreak-back {
background-color: ${newThemeProps['default-blue-color'] || newThemeProps['next-bg-color'] || newThemeProps['main-color']};
}
.form-pagebreak-back:hover {
background-color: ${newThemeProps['back-button--hover']};
border-color: ${newThemeProps['back-button--hover']};
}
.form-pagebreak-next:hover {
background-color: ${newThemeProps['next-button--hover']};
border-color: ${newThemeProps['next-button--hover']};
}
.form-sacl-button, .form-submit-print {
background-color: transparent;
color: ${newThemeProps['default-dark-color'] || newThemeProps['input-border-color']};
border-color: ${newThemeProps['input-border-color']};
}
.form-sacl-button:hover, .form-submit-print:hover,
.appointmentSlot:not(.disabled):not(.active):hover,
.appointmentDayPickerButton:hover,
.rating-item input:hover+label {
background-color: ${newThemeProps['hover-color']};
}
/* payment styles */
.form-line[data-payment=true] .form-product-category-item.title_collapsed.has_selected_product .selected-items-icon {
background-color: ${newThemeProps['category-btn-color']};
border-color: ${newThemeProps['category-btn-color']};
}
.form-line[data-payment=true].form-line.card-3col .form-product-item,
.form-line[data-payment=true].form-line.card-2col .form-product-item {
background-color: ${newThemeProps['product-item-bg']};
}
/* icons */
.appointmentField .timezonePickerName:before,
[data-blotid][data-type=timebox]:after,
span.FITB-inptCont[data-type=timebox] .FITB-inptCont-inner:after {
${newThemeProps['timezone-icon'] ? `background-image: ${newThemeProps['timezone-icon']};` : ''}
}
.appointmentCalendarContainer .monthYearPicker .pickerArrow.prev:after {
${newThemeProps['app-arrow-up-icon'] ? `background-image: ${newThemeProps['app-arrow-up-icon']};` : ''}
}
.appointmentCalendarContainer .monthYearPicker .pickerArrow.next:after {
${newThemeProps['app-arrow-down-icon'] ? `background-image: ${newThemeProps['app-arrow-down-icon']};` : ''}
}
.appointmentField .timezonePickerName:after {
${newThemeProps['app-arrow-icon'] ? `background-image: ${newThemeProps['app-arrow-icon']};` : ''}
width: 11px;
}
li[data-type=control_datetime] [data-wrapper-react=true].extended>div+.form-sub-label-container .form-textbox:placeholder-shown,
li[data-type=control_datetime] [data-wrapper-react=true]:not(.extended) .form-textbox:not(.time-dropdown):placeholder-shown,
.appointmentCalendarContainer .currentDate,
span[data-type="datebox"]:after {
${newThemeProps['calendar-icon'] ? `background-image: ${newThemeProps['calendar-icon']};` : ''}
}
.form-star-rating-star.Stars {
${newThemeProps['star-rating-icon'] ? `background-image: ${newThemeProps['star-rating-icon']} !important;` : ''}
}
.signature-pad-passive, .signature-placeholder:after {
${newThemeProps['signature-icon'] ? `background-image: ${newThemeProps['signature-icon']};` : ''}
}
.form-spinner-button.form-spinner-up:before {
${newThemeProps['spinner-up-icon'] ? `background-image: ${newThemeProps['spinner-up-icon']};` : ''}
}
.form-spinner-button.form-spinner-down:before {
${newThemeProps['spinner-down-icon'] ? `background-image: ${newThemeProps['spinner-down-icon']};` : ''}
}
li[data-type=control_fileupload] .qq-upload-button:before {
${newThemeProps['file-upload-icon'] ? `background-image: ${newThemeProps['file-upload-icon']};` : ''}
}
span[data-type=signaturebox]:after {
${newThemeProps['app-arrow-right-icon'] ? `background-image: ${newThemeProps['fitb-pencil-icon']};` : ''}
}
/* NEW THEME STYLE */
/*PREFERENCES STYLE*/
`;
}
if (!isNewDefaultTheme) {
return {
injectCSS: generateInjectCSS(),
styleJSON: JSON.stringify(styleJSON)
}
}
switch (true) {
case name === 'buttonStyle':
delete styleJSON['@pbButtonCustomTemplate'];
delete styleJSON['@buttonCustomTemplate'];
if (newValue.length > 0) {
styleJSON['@buttonCustomTemplate'] = `form-submit-button-${newValue}`;
}
return { styleJSON: JSON.stringify(styleJSON) };
case name === 'colorScheme' && typeof newValue === 'object':
advancedDesingerProps.forEach(key => delete styleJSON[`@${key}`]);
styleJSON.newThemeProps = newValue;
_injectCSS = generateNewColorSchemeCSS(styleJSON);
break;
case name === 'statelessColorScheme' && typeof newValue === 'object':
advancedDesingerProps.forEach(key => delete styleJSON[`@${key}`]);
styleJSON.newThemeProps = Object.assign({}, styleJSON.newThemeProps || {}, newValue);
_injectCSS = generateNewColorSchemeCSS(styleJSON);
break;
case _injectCSS.indexOf('/* NEW THEME STYLE */') > -1:
_injectCSS = _injectCSS.match(/((\/\*PREFERENCES STYLE\*\/)([\s\S]*?)(\/\* NEW THEME STYLE \*\/)([\s\S]*?)(\/\* NEW THEME STYLE \*\/)([\s\S]*?)([\s\S]*?)(\/\*PREFERENCES STYLE\*\/))/);
_injectCSS = _injectCSS ? _injectCSS[0] : generateNewColorSchemeCSS(styleJSON);
break;
default:
_injectCSS = '';
}
let finalInjectCSS = (formProperties.form_injectCSS || formProperties.injectCSS || '/*__INSPECT_SEPERATOR__*/').replace(/((\/\*PREFERENCES STYLE\*\/)([\s\S]*?)(\/\*PREFERENCES STYLE\*\/))/g, '');
const generatedCSS = generateInjectCSS();
finalInjectCSS = finalInjectCSS.indexOf('/*__INSPECT_SEPERATOR__*/') > -1
? finalInjectCSS.replace('/*__INSPECT_SEPERATOR__*/', generatedCSS + '/*__INSPECT_SEPERATOR__*/')
: finalInjectCSS + generatedCSS;
return {
injectCSS: isCdnColorScheme ? finalInjectCSS : generateInjectCSS(),
styleJSON: JSON.stringify(styleJSON)
};
}
//navigation
var colorTheme = document.querySelector(".jfp-color-theme");
if (colorTheme && !colorTheme.dataset.clickBound) {
colorTheme.dataset.clickBound = "1";
if (!isClassicThemeData && document.body && document.body.classList.contains("jfCardForm")) {
document.documentElement.classList.add("is-color-theme-card");
} else {
document.documentElement.classList.remove("is-color-theme-card");
}
var allItems = colorTheme.querySelectorAll(".colorScheme-list li");
var mobileTrigger = colorTheme.querySelector(".jfp-color-theme-mobile-trigger");
var mobileTriggerSwatch = mobileTrigger && mobileTrigger.querySelector(".jfp-color-theme-mobile-swatch");
var mobileTriggerLabel = mobileTrigger && mobileTrigger.querySelector(".jfp-color-theme-mobile-label");
var defaultColorSchemeLabel = mobileTriggerLabel ? mobileTriggerLabel.textContent : "Color Scheme";
function getCurrentTemplateID() {
return String((formPropsData && formPropsData.form_id) || "");
}
function clearStaleCustomTheme() {
try {
var currentTemplateID = getCurrentTemplateID();
var customThemeTemplateID = window.top && window.top.customTheme ? String(window.top.customTheme.templateID || "") : "";
if (window.top && window.top.customTheme && (!currentTemplateID || !customThemeTemplateID || customThemeTemplateID !== currentTemplateID)) {
window.top.customTheme = undefined;
}
} catch (e) {}
}
clearStaleCustomTheme();
function getTranslatedSchemeLabel(item) {
if (!item) return defaultColorSchemeLabel;
var fallbackLabel = item.dataset.schemeLabel || defaultColorSchemeLabel;
return fallbackLabel.trim ? fallbackLabel.trim() : fallbackLabel;
}
function setMobileDropdownOpen(isOpen) {
colorTheme.classList.toggle("is-dropdown-open", !!isOpen);
if (mobileTrigger) {
mobileTrigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
}
}
function syncColorThemeOffset() {
var rect = colorTheme.getBoundingClientRect();
if (!rect || !rect.height) return;
document.documentElement.style.setProperty("--color-theme-footer-offset", Math.ceil(rect.height) + "px");
}
function refreshMobileDropdownMode() {
if (typeof window.syncColorThemeDropdownMode === "function") {
window.syncColorThemeDropdownMode();
}
if (window.requestAnimationFrame) {
window.requestAnimationFrame(syncColorThemeOffset);
} else {
syncColorThemeOffset();
}
if (!document.documentElement.classList.contains("is-color-theme-dropdown")) {
setMobileDropdownOpen(false);
}
}
syncColorThemeOffset();
window.addEventListener("resize", syncColorThemeOffset);
try {
if (window.top && window.top !== window) {
window.top.addEventListener("resize", syncColorThemeOffset);
}
} catch (e) {}
function syncMobileColorSchemeTrigger(selectedLi) {
if (!mobileTrigger) return;
var selected = selectedLi || colorTheme.querySelector(".colorScheme-list li.isSelected");
var triggerItem = selected || allItems[0];
if (!selected) {
if (!triggerItem) {
if (mobileTriggerLabel) mobileTriggerLabel.textContent = defaultColorSchemeLabel;
return;
}
}
var label = getTranslatedSchemeLabel(triggerItem);
if (mobileTriggerLabel) mobileTriggerLabel.textContent = label || defaultColorSchemeLabel;
if (!mobileTriggerSwatch) return;
var borderColor = triggerItem.style.getPropertyValue("--scheme-border") || triggerItem.style.borderColor;
var backgroundColor = triggerItem.style.getPropertyValue("--scheme-bg") || triggerItem.style.backgroundColor;
var textColor = triggerItem.style.getPropertyValue("--scheme-text") || triggerItem.style.color;
mobileTriggerSwatch.style.borderColor = borderColor;
mobileTriggerSwatch.style.backgroundColor = backgroundColor;
mobileTriggerSwatch.style.color = textColor;
mobileTriggerSwatch.textContent = triggerItem.classList.contains("isClearOption") ? "" : "A";
}
function syncSelectedOptionState(selectedLi) {
allItems.forEach(function (item) {
var isSelected = item === selectedLi;
item.classList.toggle("isSelected", isSelected);
item.setAttribute("aria-selected", isSelected ? "true" : "false");
});
}
function trackColorSchemeClick(className) {
try {
var JotFormActions = window.top && window.top['for-actions'];
if (!window.colorSchemeTracker && typeof JotFormActions === 'function') {
window.colorSchemeTracker = JotFormActions("formTemplateColorThemeSelector");
}
if (!window.colorSchemeTracker || typeof window.colorSchemeTracker.tick !== 'function') {
return;
}
var actor = window.top && window.top.user ? window.top.user.username : '';
window.colorSchemeTracker.tick({ actor: actor, "action": 'click-theme', "target": className });
} catch (e) {}
}
if (mobileTrigger) {
mobileTrigger.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
setMobileDropdownOpen(!colorTheme.classList.contains("is-dropdown-open"));
if (colorTheme.classList.contains("is-dropdown-open")) {
window.setTimeout(function () {
var selected = colorTheme.querySelector(".colorScheme-list li.isSelected");
if (selected) selected.scrollIntoView({ block: "nearest" });
}, 0);
}
});
document.addEventListener("click", function (e) {
if (!colorTheme.contains(e.target)) setMobileDropdownOpen(false);
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") setMobileDropdownOpen(false);
});
window.addEventListener("resize", refreshMobileDropdownMode);
try {
if (window.top && window.top !== window) {
window.top.addEventListener("resize", refreshMobileDropdownMode);
}
} catch (e) {}
}
colorTheme.addEventListener("keydown", function (e) {
var li = e.target.closest(".colorScheme-list li");
if (!li || (e.key !== "Enter" && e.key !== " ")) return;
e.preventDefault();
li.click();
});
function findFormDesignerStyleEl() {
var el = document.getElementById("form-designer-style");
if (el) return el;
try {
var frames = document.querySelectorAll("iframe");
for (var i = 0; i < frames.length; i++) {
var doc = frames[i].contentDocument || (frames[i].contentWindow && frames[i].contentWindow.document);
if (doc && (el = doc.getElementById("form-designer-style"))) return el;
}
if (document.body && document.body.querySelector) {
el = document.querySelector("#form-designer-style");
}
} catch (e) {}
return el || null;
}
function findTemplateNewStyleEl(createIfMissing) {
var el = document.getElementById("templateNewStyle");
if (el) return el;
try {
var frames = document.querySelectorAll("iframe");
for (var i = 0; i < frames.length; i++) {
var doc = frames[i].contentDocument || (frames[i].contentWindow && frames[i].contentWindow.document);
if (doc && (el = doc.getElementById("templateNewStyle"))) return el;
}
if (document.body && document.body.querySelector) {
el = document.querySelector("#templateNewStyle");
if (el) return el;
}
} catch (e) {}
if (createIfMissing && document.head) {
el = document.createElement("style");
el.id = "templateNewStyle";
document.head.appendChild(el);
return el;
}
return null;
}
var originalFormDesignerContent = null;
var prefsBlockRegex = /\/\*PREFERENCES STYLE\*\/[\s\S]*\/\*PREFERENCES STYLE\*\//;
var formProps = formPropsData;
function applyColorSchemeStyle(css) {
var formDesignerEl = findFormDesignerStyleEl();
if (!css) {
if (originalFormDesignerContent !== null && formDesignerEl) {
formDesignerEl.textContent = originalFormDesignerContent;
}
var styleEl = findTemplateNewStyleEl(false);
if (styleEl) styleEl.textContent = '';
return;
}
if (formDesignerEl && formDesignerEl.textContent && prefsBlockRegex.test(formDesignerEl.textContent)) {
if (originalFormDesignerContent === null) originalFormDesignerContent = formDesignerEl.textContent;
formDesignerEl.textContent = formDesignerEl.textContent.replace(prefsBlockRegex, css);
return;
}
var styleEl = findTemplateNewStyleEl(true);
if (!styleEl) return;
styleEl.textContent = css;
}
function removeClassicColorSchemeClasses(html) {
allItems.forEach(function (item) {
var c = item.dataset.className;
if (c) html.classList.remove(c);
});
}
function applyClassicColorScheme(li) {
var html = document.documentElement;
var className = li ? li.dataset.className || '' : '';
var selectedColorObj = colorSchemeListV3New.find(function (item) { return item.name === className; });
removeClassicColorSchemeClasses(html);
if (className) html.classList.add(className);
if (!selectedColorObj || className === '') return null;
var cssObject = generateThemeCSS(selectedColorObj.colors, formProps);
applyColorSchemeStyle(cssObject.injectCSS);
return {
className: className,
colors: selectedColorObj.colors,
cssObject: cssObject
};
}
(function initSelectedState() {
var fdEl = findFormDesignerStyleEl();
if (fdEl && fdEl.textContent && originalFormDesignerContent === null) originalFormDesignerContent = fdEl.textContent;
if (!isClassicThemeData) return;
var selected = colorTheme.querySelector(".colorScheme-list li.isSelected");
if (selected) applyClassicColorScheme(selected);
})();
syncMobileColorSchemeTrigger(colorTheme.querySelector(".colorScheme-list li.isSelected"));
colorTheme.addEventListener("click", function (e) {
var li = e.target.closest(".colorScheme-list li");
if (!li) return;
var className = li.dataset.className || '';
var themeID = li.dataset.themeId || '';
trackColorSchemeClick(className);
const shouldClearSelection = li.classList.contains("isClearOption") || li.classList.contains("isSelected");
syncSelectedOptionState(shouldClearSelection ? null : li);
syncMobileColorSchemeTrigger(shouldClearSelection ? null : li);
setMobileDropdownOpen(false);
if (!isClassicThemeData) {
if (shouldClearSelection) {
const cardFormStyle = document.querySelector('#cardFormStyle');
if (cardFormStyle) {
cardFormStyle.textContent = '';
}
window.top.customTheme = undefined;
return;
}
fetch(`/stylebuilder/${formPropsData.form_id}/style.css?previewTheme=1&themeID=${(themeID)}`)
.then(function (response) {
if (!response.ok) throw new Error('Failed to load theme CSS');
return response.text();
})
.then(function (cssText) {
const cardFormStyle = document.querySelector('#cardFormStyle');
if (cardFormStyle) {
cardFormStyle.textContent = cssText;
} else {
const styleEl = document.createElement('style');
styleEl.id = 'cardFormStyle';
styleEl.textContent = cssText;
document.head.appendChild(styleEl);
}
const selectedFromTpl = cardColorSchemesMeta.find(function (t) { return String(t.id) === String(themeID); });
if (!selectedFromTpl) return;
window.top.customTheme = {
templateID: getCurrentTemplateID(),
isCardForm: true,
styleJSON: { ...formPropsData.styleJSON, ...(selectedFromTpl.styleJSON || {}) },
defaultTheme: selectedFromTpl.defaultTheme,
cardThemeID: themeID
};
});
return;
}
if (shouldClearSelection) {
removeClassicColorSchemeClasses(document.documentElement);
applyColorSchemeStyle('');
window.top.customTheme = undefined;
return;
}
var selectedClassicScheme = applyClassicColorScheme(li);
var isEmpty = className === '';
if (!selectedClassicScheme || isEmpty) return;
const cssObject = selectedClassicScheme.cssObject;
window.top.customTheme = {
templateID: getCurrentTemplateID(),
injectCSS: cssObject.injectCSS,
styleJSON: cssObject.styleJSON,
statelessColorScheme: className,
fontcolor: selectedClassicScheme.colors.clrText,
background: selectedClassicScheme.colors.clrFrame
};
});
(function setupColorSchemeScrollNav() {
var wrap = colorTheme.querySelector('.jfp-color-theme-scroll-wrap');
var list = wrap && wrap.querySelector('.colorScheme-list');
var prev = wrap && wrap.querySelector('.jfp-color-theme-nav--prev');
var next = wrap && wrap.querySelector('.jfp-color-theme-nav--next');
if (!wrap || !list || !prev || !next) return;
['touchstart', 'touchmove', 'touchend', 'touchcancel'].forEach(function (type) {
wrap.addEventListener(type, function (e) {
e.stopPropagation();
}, { passive: true });
});
function getMaxScroll() {
return Math.max(0, list.scrollWidth - list.clientWidth);
}
function isDesktopRTL() {
return document.documentElement.getAttribute('dir') === 'rtl' && !document.documentElement.classList.contains('is-color-theme-dropdown');
}
function sync() {
var max = getMaxScroll();
var overflow = max > 2;
list.classList.toggle('colorScheme-list--scroll-x', overflow);
if (!overflow) {
list.classList.remove('colorScheme-list--at-start', 'colorScheme-list--at-end');
prev.disabled = true;
next.disabled = true;
return;
}
var atStart = list.scrollLeft <= 1;
var atEnd = list.scrollLeft >= max - 1;
list.classList.toggle('colorScheme-list--at-start', atStart);
list.classList.toggle('colorScheme-list--at-end', atEnd);
prev.disabled = isDesktopRTL() ? atEnd : atStart;
next.disabled = isDesktopRTL() ? atStart : atEnd;
}
function scrollByDir(dir) {
var delta = Math.max(120, Math.floor(list.clientWidth * 0.65));
list.scrollBy({ left: (isDesktopRTL() ? -dir : dir) * delta, behavior: 'smooth' });
}
prev.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
scrollByDir(-1);
});
next.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
scrollByDir(1);
});
list.addEventListener('scroll', sync);
window.addEventListener('resize', sync);
if (typeof ResizeObserver !== 'undefined') {
var ro = new ResizeObserver(sync);
ro.observe(list);
}
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(sync).catch(sync);
}
sync();
window.setTimeout(sync, 100);
window.setTimeout(sync, 500);
})();
} |
![\"jotform.com\"](\"http:\/\/www.jotform.com\/images\/win2_title_logo.gif\"){kind=logo}
<\/td>\n