',
}),
styles: defaultLayout.styles,
},
},
layout = layouts.default,
partials = layout.partials,
selects = {
4: 'gender',
5: 'language',
7: 'format',
},
data = {
_redirect: '',
_fields: '',
_interests: '',
},
el = {},
t = function (string, values) {
var value, regex;
for (value in values) {
if (values.hasOwnProperty(value)) {
regex = new RegExp('{{' + value + '}}', 'g');
string = string.replace(regex, values[value]);
}
}
return string;
},
validateFields = function (e) {
var i = 0,
fields = e.target.elements,
field,
validate,
required,
pattern,
errorMessages = document.getElementsByClassName('p-error-message');
isValid = true;
//clean prev errors
while (errorMessages.length > 0) {
errorMessages[0].parentNode.removeChild(errorMessages[0]);
}
// validate each field
for (i = 0, field = ''; (field = fields[i++]); ) {
if (field.localName !== 'input' && field.localName !== 'select') continue;
if (field.getAttribute('data-validate') === 'EMAIL') {
field.value = field.value.trim();
}
field.className = '';
validate = field.getAttribute('data-validate') || false;
required = field.getAttribute('data-required') || false;
customRegex = field.getAttribute('data-regex') || false;
customMessage = field.getAttribute('data-message') || false;
if (required && field.value === '') {
isValid = false;
field.className = 'p-error';
field.insertAdjacentHTML(
'afterend',
t(partials.error, {
error: rules.REQUIRED.message,
})
);
} else if (validate && !customRegex && field.value !== '') {
pattern = new RegExp(rules[validate].regex);
if (!pattern.test(field.value)) {
isValid = false;
field.className = 'p-error';
field.insertAdjacentHTML(
'afterend',
t(partials.error, {
error: rules[validate].message,
})
);
}
} else if (customRegex && field.value !== '') {
pattern = new RegExp(customRegex);
if (!pattern.test(field.value)) {
isValid = false;
field.className = 'p-error';
field.insertAdjacentHTML(
'afterend',
t(partials.error, {
error: customMessage,
})
);
}
}
}
if (!isValid) {
e.preventDefault();
}
return isValid;
},
closePopUp = function (e) {
// el.body.className = bodyClasses;
el.body.classList.remove('p-popup-open');
el.popup.className = 'p-layer p-closed';
if (callbacks.closed && callbacks.closed instanceof Function) {
callbacks.closed();
}
},
openPopUp = function (e) {
// el.body.className = bodyClasses + ' p-popup-open';
el.body.classList.add('p-popup-open');
el.popup.className = 'p-layer';
setTimeout(() => {
el.popup.className = 'p-layer p-opened';
}, 1);
if (callbacks.opened && callbacks.opened instanceof Function) {
callbacks.opened();
}
},
saveCookie = function () {
var expires = new Date(),
days = 365,
domain = location.host;
if (domain.startsWith('www')) {
domain = domain.replace('www', '');
} else if (domain) {
domain = '.' + domain;
}
expires.setMilliseconds(expires.getMilliseconds() + days * 864e5);
document.cookie = 'p-optin=1; path=/ ; expires=' + expires.toUTCString() + ' ; domain=' + domain;
},
readCookie = function () {
var result,
key = 'p-optin';
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie))
? result[1]
: null;
},
simpleMarkdown = function (mdText) {
var mdHTML = mdText
.replace(/\[(.*?)\]\(\)/gm, '
$1')
.replace(/\[(.*?)\]\((.*?)\)/gm, '
$1')
.replace(/\*\*\*(.*)\*\*\*/gm, '
$1')
.replace(/\*\*(.*)\*\*/gm, '
$1')
.replace(/\*([\w \d]*)\*/gm, '
$1')
.replace(/___(.*)___/gm, '
$1')
.replace(/__(.*)__/gm, '
$1')
.replace(/_(.*)_/gm, '
$1')
.replace(/ *\\n/g, '
');
return mdHTML.trim();
},
i,
j,
current,
template,
script,
bindSubmit,
bodyClasses,
html = '',
isValid = true,
lang = 'es',
config = {},
callbacks = { opened: undefined, closed: undefined, submitted: undefined },
setCallbacks = function ({ opened, closed, submitted }) {
if (opened && opened instanceof Function) {
callbacks.opened = opened;
}
if (closed && closed instanceof Function) {
callbacks.closed = closed;
}
if (submitted && submitted instanceof Function) {
callbacks.submitted = submitted;
}
};
try {
if (form.config) {
config = JSON.parse(form.config);
}
} catch (error) {
console.error('Invalid custom config');
}
if (config.layout) {
layout = layouts[config.layout];
if (!layout) layout = layouts['default'];
}
partials = layout.partials;
// AJAX configuration
form.ajax = form.redirect.length ? false : true;
// Set the action
form.action = action + id;
// Set the ID
form.id = id;
//Browser lang
var navLocale = navigator.language || navigator.userLanguage;
if (navLocale) {
var navLang = navLocale.substr(0, 2);
if (i18nRules[navLang]) {
lang = navLang;
}
}
rules = i18nRules[lang];
var titleInBody = config.styles && config.styles.titleInBody;
// Set the header
if (form.title) {
form.title = simpleMarkdown(form.title);
}
form.header = form.title !== '' && !titleInBody ? t(partials.header, form) : t(partials.closeButton, form);
form.titleBlock = form.title !== '' && titleInBody ? t(partials.titleBlock, form) : '';
// Set the header
if (form.text) {
form.text = simpleMarkdown(form.text);
}
form.textBlock = form.text === '' ? '' : t(partials.textBlock, form);
// Set the footer
if (form.footer) {
form.footer = simpleMarkdown(form.footer);
}
form.footerBlock = form.footer === '' ? '' : t(partials.footerBlock, form);
// Set the Ad
let account = '';
try {
account = action.replace('https://pubapi.myperfit.com/v2/optin/', '').replace('/', '');
} catch (err) {}
form.perfitAdBlock = config.perfitAd
? t(partials.perfitAdBlock, {
perfitAdText: i18n[lang].perfitAdText,
perfitAdUrl: i18n[lang].perfitAdUrl,
account,
})
: '';
form.layout = config.layout || 'default';
var customFieldsConfig = config.fields || {};
if (customFieldsConfig["submit"] && customFieldsConfig["submit"].domId) {
form.buttonDomId = 'id="' + customFieldsConfig["submit"].domId + '"';
} else {
form.buttonDomId = '';
}
// Render the form
html = html + t(partials.layout, form);
// Render redirect
data._redirect = t(partials.redirect, form);
// Render fields
for (i = 0; i < form.fields.length; i++) {
current = form.fields[i];
current.required = current.required ? 'data-required="true"' : '';
current.placeholder = current.format === 'DATE' ? 'DD-MM-AAAA' : current.displayName;
var idStr = form.fields[i].id.toString();
if (customFieldsConfig[idStr] && customFieldsConfig[idStr].domId) {
current.domId = 'id="' + customFieldsConfig[idStr].domId + '"';
} else {
current.domId = '';
}
if (customFieldsConfig[idStr] && customFieldsConfig[idStr].validator) {
var customValidator = customFieldsConfig[idStr].validator;
if (customValidator.regex) {
current.regex = 'data-regex="' + customValidator.regex + '"';
}
if (customValidator.message) {
current.message = 'data-message="' + customValidator.message + '"';
}
} else {
current.regex = '';
current.message = '';
}
if (selects[current.id] !== undefined) {
current.male = i18n[lang].male;
current.female = i18n[lang].female;
current.gender = i18n[lang].gender;
current.language = i18n[lang].language;
template = partials.selects[selects[current.id]];
} else {
if (customFieldsConfig[idStr] && customFieldsConfig[idStr].options) {
current.fieldOptions = '';
for (j = 0; j < customFieldsConfig[idStr].options.length; j++) {
current.fieldOptions += t(partials.fieldOption, { option: customFieldsConfig[idStr].options[j] });
}
template = partials.fieldSelect;
} else {
template = partials.field;
}
}
data._fields += t(template, current);
}
// Render interests
for (i = 0; i < form.interests.length; i++) {
current = form.interests[i];
current.checked = current.selected ? 'checked' : '';
current.displayName = current.displayName.replace(
/\[([^\]]+)\]\(([^\)]+)\)/,
'
$1'
);
data._interests += t(partials.interests, current);
}
// Add fields to the form
html = t(html, data);
// Select the container
el.container = document.getElementById('optin-' + id);
// Select the body
el.body = document.getElementsByTagName('body')[0];
bodyClasses = el.body.className;
// Add class acording to type
form.type = el.container.getAttribute('data-type') || 'inline';
el.container.className = 'p-' + form.type;
// Inline form
if (form.type === 'inline') {
el.container.innerHTML = html;
el.form = el.container.childNodes[0];
}
// Pop-Up form
if (form.type === 'popup' || form.type === 'button') {
if (form.type === 'popup') {
form.mode = el.container.getAttribute('data-mode') || 'once';
}
el.popup = document.createElement('div');
el.popup.innerHTML = html;
el.form = el.popup.childNodes[0];
el.body.appendChild(el.popup);
// If the cookie is found, close the pop-up
if (readCookie() || (form.mode !== 'always' && form.mode !== 'once')) {
closePopUp();
} else {
openPopUp();
}
// Bind Pop-Up close button
el.close = el.popup.querySelectorAll('.p-close')[0];
if (el.close) {
if (el.close.addEventListener) {
el.close.addEventListener('click', closePopUp, false);
} else if (el.close.attachEvent) {
//IE8 compatib - deprecar?
el.close.attachEvent('onclick', closePopUp);
}
}
// Bind click outside
var clickableLayer = document.createElement('div');
clickableLayer.className = 'p-close-layer';
clickableLayer.addEventListener('click', closePopUp, false);
el.popup.insertBefore(clickableLayer, el.popup.firstChild);
if (form.mode === 'once') {
saveCookie();
}
}
// Button
if (form.type === 'button') {
el.container.innerHTML = t(partials.button, form);
closePopUp();
// Bind Pop-Up open button
el.open = document.getElementById('p-open');
if (el.open.addEventListener) {
el.open.addEventListener('click', openPopUp, false);
} else if (el.open.attachEvent) {
el.open.attachEvent('onclick', openPopUp);
}
}
// Bind form submission
el.form.addEventListener('submit', validateFields, false);
// Apply custom styling
var buildStyle = function (name, value) {
if (!value) return '';
if (!layout.styles[name]) {
// console.error('Invalid Perfit form style: ' + name);
return '';
}
var style =
layout.styles[name].selector.replace(/{{id}}/g, '#optin-form-' + id) +
'{' +
layout.styles[name].property +
':' +
value +
'}\n';
return style;
};
var customCss = '';
if (config.styles) {
for (var style in config.styles) {
if (config.styles.hasOwnProperty(style)) {
customCss += buildStyle(style, config.styles[style]);
}
}
}
if (config.customCss) {
customCss += config.customCss;
}
var headTag = document.getElementsByTagName('head')[0];
if (customCss) {
var customStyleTag = document.createElement('style');
customStyleTag.type = 'text/css';
customStyleTag.innerHTML = customCss;
headTag.appendChild(customStyleTag);
}
if (
config.fonts &&
((config.fonts.title && config.fonts.title.family) || (config.fonts.text && config.fonts.text.family))
) {
var customFontsTag = document.createElement('style');
customFontsTag.rel = 'stylesheet';
customFontsTag.innerHTML = '@import url(https://fonts.googleapis.com/css2?display=swap';
if (config.fonts.text && config.fonts.text.family) {
customFontsTag.innerHTML +=
'&family=' +
encodeURIComponent(
config.fonts.text.family + (config.fonts.text.weight ? ':wght@' + config.fonts.text.weight : '')
);
}
if (config.fonts.title && config.fonts.title.family) {
customFontsTag.innerHTML +=
'&family=' +
encodeURIComponent(
config.fonts.title.family + (config.fonts.title.weight ? ':wght@' + config.fonts.title.weight : '')
);
}
customFontsTag.innerHTML += ');\n';
if (config.fonts.text && config.fonts.text.family) {
customFontsTag.innerHTML +=
'#optin-form-' + id + ' {font-family: ' + config.fonts.text.family + ' !important}\n';
}
if (config.fonts.title && config.fonts.title.family) {
customFontsTag.innerHTML +=
'#optin-form-' + id + '.p-optin .p-title {font-family: ' + config.fonts.title.family + ' !important}\n';
}
headTag.insertBefore(customFontsTag, headTag.firstChild);
}
// Manage AJAX submissions
if (window.forceAjax || form.ajax) {
// Bind form sumbit event
bindSubmit = function () {
const form = document.querySelector('#optin-form-' + id);
form.addEventListener('submit', function (e) {
const content = form.querySelector('.p-col-form')
? form.querySelector('.p-col-form')
: form.querySelector('.p-body'),
button = form.querySelector('.p-submit');
e.preventDefault();
if (isValid) {
content.style.minHeight = content.clientHeight + 'px';
button.style.minHeight = button.clientHeight + 'px';
button.style.minWidth = button.clientWidth + 'px';
button.innerHTML = layout.partials.spinner;
button.setAttribute('disbled', true);
form.classList.add('p-submitting');
const formData = new FormData(form);
const formDataString = new URLSearchParams(formData).toString();
fetch(form.action, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formDataString,
})
.then((res) => {
if (res.ok) return res.json();
})
.then((json) => {
content.innerHTML = t(partials.success, {
message: json.data.userMessage,
});
if (callbacks.submitted && callbacks.submitted instanceof Function) {
callbacks.submitted();
}
saveCookie();
})
.catch((error) => {
alert(i18n[lang].submitError);
});
if (window.Perfit) {
window.Perfit('identify', { email: formData.get('fields[3]') });
}
}
});
};
bindSubmit();
}
//Export API
return {
open: openPopUp,
close: closePopUp,
form: form,
config: config,
setCallbacks: setCallbacks,
};
})();