Skip to content

Instantly share code, notes, and snippets.

@benfavre

benfavre/gist:ca664493db461f9452512f08749e6c30

Created June 3, 2020 16:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benfavre/ca664493db461f9452512f08749e6c30 to your computer and use it in GitHub Desktop.
Save benfavre/ca664493db461f9452512f08749e6c30 to your computer and use it in GitHub Desktop.
Download ZIP
unminified js
Raw
gistfile1.txt
(function (window) {
"use strict";
function define_library() {
var Core = {};
var Modal = { closeButton: null, modal: null, overlay: null, defaults: { className: "fade-and-drop", closeButton: true, content: "", width: "600px", height: "480px", overlay: true } };
var Form = { clickEvents: [] };
var Profiler = {};
var config = { devmode: false, debug: false };
Profiler.startTime = function () {
this._startTime = performance.now();
};
Profiler.runTime = function () {
this._endTime = performance.now();
this._runtime = this._endTime - this._startTime;
if (Core.debug()) console.log("Execution time: " + this._runtime + " ms.");
};
Form.initialize = function () {
var re = /{mauticform([^}]+)}/g,
text;
while ((text = re.exec(document.body.innerHTML))) {
var replaceText = text[0];
var replaceArgs = { data: {}, params: "" };
var tmpParams = [];
text[1]
.trim()
.split(/\s+/)
.forEach(function (strAttribute) {
var tmpAtr = strAttribute.split("=");
replaceArgs.data[tmpAtr[0]] = tmpAtr[1];
if (tmpAtr[0] != "id") tmpParams.push(tmpAtr[0] + "=" + encodeURIComponent(tmpAtr[1]));
});
tmpParams.push("html=1");
replaceArgs.params = tmpParams.join("&");
replaceArgs.data["replace"] = replaceText;
replaceArgs.data["style"] = typeof replaceArgs.data["style"] == "undefined" ? "embed" : replaceArgs.data["style"];
if (Core.debug()) console.log(replaceArgs.data["style"] + " Mautic Form: " + replaceText);
switch (replaceArgs.data["style"]) {
case "modal":
document.body.innerHTML = document.body.innerHTML.replace(replaceText, "");
Form.clickEvents.push(replaceArgs);
break;
case "embed":
default:
document.body.innerHTML = document.body.innerHTML.replace(replaceText, this.createIframe(replaceArgs).outerHTML);
break;
}
}
this.bindClickEvents();
Profiler.runTime();
};
Form.bindClickEvents = function () {
if (Core.debug()) console.log("binding modal click events");
for (var index in Form.clickEvents) {
var current = Form.clickEvents[index];
document.querySelector(current.data.element).setAttribute("_mautic_form_index", index);
document.querySelector(current.data.element).addEventListener("click", function () {
if (Core.debug()) console.log("add event to " + current.data.element);
Form.openModal(Form.clickEvents[this.getAttribute("_mautic_form_index")]);
});
}
};
Form.openModal = function (options) {
Core.openModal({
content: Form.createIframe(options, true).outerHTML,
width: typeof options.data["width"] != "undefined" ? options.data["width"] : "600px",
height: typeof options.data["height"] != "undefined" ? options.data["height"] : "480px",
});
};
Form.getFormLink = function (options) {
var index = Core.devMode() ? "index_dev.php" : "index.php";
return Core.getMauticBaseUrl() + index + "/form/" + options.data["id"] + "?" + options.params;
};
Form.createIframe = function (options, embed) {
var embed = typeof embed == "undefined" ? false : true;
var iframe = document.createElement("iframe");
iframe.frameBorder = typeof options.data["border"] != "undefined" ? parseInt(options.data["border"]) : "0";
iframe.width = embed ? "100%" : typeof options.data["width"] != "undefined" ? options.data["width"] : "600px";
iframe.height = embed ? "100%" : typeof options.data["height"] != "undefined" ? options.data["height"] : "400px";
iframe.className = typeof options.data["class"] == "string" ? options.data["class"] : "";
iframe.src = this.getFormLink(options);
return iframe;
};
Form.customCallbackHandler = function (formId, event, data) {
if (typeof MauticFormCallback !== "undefined" && typeof MauticFormCallback[formId] !== "undefined" && typeof MauticFormCallback[formId][event] == "function") {
if (typeof data == "undefined") {
data = null;
}
return MauticFormCallback[formId][event](data);
}
return null;
};
Form.prepareForms = function () {
var forms = document.getElementsByTagName("form");
for (var i = 0, n = forms.length; i < n; i++) {
var formId = forms[i].getAttribute("data-mautic-form");
if (formId !== null) {
Form.prepareMessengerForm(formId);
Form.prepareValidation(formId);
Form.preparePagination(formId);
}
}
};
Form.prepareMessengerForm = function (formId) {
var theForm = document.getElementById("mauticform_" + formId);
if (!theForm.getAttribute("onsubmit")) {
theForm.onsubmit = function (event) {
event.preventDefault();
Core.validateForm(formId, true);
};
}
if (!document.getElementById("mauticiframe_" + formId)) {
var ifrm = document.createElement("IFRAME");
ifrm.style.display = "none";
ifrm.style.margin = 0;
ifrm.style.padding = 0;
ifrm.style.border = "none";
ifrm.style.width = 0;
ifrm.style.heigh = 0;
ifrm.setAttribute("id", "mauticiframe_" + formId);
ifrm.setAttribute("name", "mauticiframe_" + formId);
document.body.appendChild(ifrm);
theForm.target = "mauticiframe_" + formId;
}
if (!document.getElementById("mauticform_" + formId + "_messenger")) {
var messengerInput = document.createElement("INPUT");
messengerInput.type = "hidden";
messengerInput.setAttribute("name", "mauticform[messenger]");
messengerInput.setAttribute("id", "mauticform_" + formId + "_messenger");
messengerInput.value = 1;
theForm.appendChild(messengerInput);
}
};
Form.prepareValidation = function (formId) {
if (typeof window.MauticFormValidations[formId] == "undefined") {
window.MauticFormValidations[formId] = {};
var theForm = document.getElementById("mauticform_" + formId);
var validations = theForm.querySelectorAll("[data-validate]");
[].forEach.call(validations, function (container) {
var alias = container.getAttribute("data-validate");
window.MauticFormValidations[formId][alias] = { type: container.getAttribute("data-validation-type"), name: alias, multiple: container.getAttribute("data-validate-multiple") };
});
}
};
Form.preparePagination = function (formId) {
var theForm = document.getElementById("mauticform_" + formId);
var pages = theForm.querySelectorAll("[data-mautic-form-page]");
var lastPageNumber = pages.length;
[].forEach.call(pages, function (page) {
var pageNumber = parseInt(page.getAttribute("data-mautic-form-page"));
var pageBreak = theForm.querySelector('[data-mautic-form-pagebreak="' + pageNumber + '"]');
if (pageNumber > 1) {
page.style.display = "none";
}
if (pageBreak) {
var prevPageNumber = pageNumber - 1;
var nextPageNumber = pageNumber + 1;
var prevButton = pageBreak.querySelector('[data-mautic-form-pagebreak-button="prev"]');
var nextButton = pageBreak.querySelector('[data-mautic-form-pagebreak-button="next"]');
prevButton.onclick = (function (formId, theForm, showPageNumber) {
return function () {
Form.customCallbackHandler(formId, "onShowPreviousPage", showPageNumber);
Form.switchPage(theForm, showPageNumber);
};
})(formId, theForm, prevPageNumber);
nextButton.onclick = (function (formId, theForm, hidePageNumber, showPageNumber) {
return function () {
var validations = theForm.querySelector('[data-mautic-form-page="' + hidePageNumber + '"]').querySelectorAll("[data-validate]");
var isValid = true;
[].forEach.call(validations, function (container) {
var fieldKey = container.getAttribute("data-validate");
if (!Core.getValidator(formId).validateField(theForm, fieldKey)) {
isValid = false;
}
});
if (!isValid) {
return;
}
Form.customCallbackHandler(formId, "onShowNextPage", showPageNumber);
Form.switchPage(theForm, showPageNumber);
};
})(formId, theForm, pageNumber, nextPageNumber);
if (1 === pageNumber) {
prevButton.setAttribute("disabled", "disabled");
pageBreak.style.display = "block";
} else {
if (lastPageNumber === pageNumber) {
var theSubmit = theForm.querySelector('button[type="submit"]').parentNode;
nextButton.parentNode.appendChild(theSubmit);
nextButton.remove();
}
}
}
});
};
Form.switchPage = function (theForm, showPageNumber) {
var pages = theForm.querySelectorAll("[data-mautic-form-page]");
[].forEach.call(pages, function (page) {
page.style.display = "none";
var pageNumber = parseInt(page.getAttribute("data-mautic-form-page"));
var pageBreak = theForm.querySelector('[data-mautic-form-pagebreak="' + pageNumber + '"]');
if (pageBreak) {
pageBreak.style.display = "none";
}
});
var thePage = theForm.querySelector('[data-mautic-form-page="' + showPageNumber + '"]');
if (thePage) {
thePage.style.display = "block";
}
var showPageBreak = theForm.querySelector('[data-mautic-form-pagebreak="' + showPageNumber + '"]');
if (showPageBreak) {
showPageBreak.style.display = "block";
}
};
Form.getPageForField = function (formId, fieldId, switchPage) {
if (typeof switchPage === "undefined") {
switchPage = true;
}
var containerId = Form.getFieldContainerId(formId, fieldId);
var container = document.getElementById(containerId);
if (!container) {
return;
}
var pageBreak = Form.findAncestor(container, "mauticform-page-wrapper");
if (pageBreak) {
var page = pageBreak.getAttribute("data-mautic-form-page");
if (switchPage) {
Form.switchPage(document.getElementById("mauticform_" + formId), page);
}
return page;
}
};
Form.findAncestor = function (el, cls) {
var ancestor = false;
while (true) {
var parent = el.parentElement;
if (!parent || Form.hasClass(parent, "mauticform-innerform")) {
break;
} else if (Form.hasClass(parent, cls)) {
ancestor = parent;
break;
} else {
el = parent;
}
}
return ancestor;
};
Form.hasClass = function (el, cls) {
return (" " + el.className + " ").indexOf(" " + cls + " ") > -1;
};
Form.validator = function (formId) {
var validator = {
validateForm: function (submitForm) {
if (!submitForm) {
Form.prepareMessengerForm(formId);
}
var elId = "mauticform_" + formId;
var theForm = document.getElementById(elId);
var formValid = Form.customCallbackHandler(formId, "onValidate");
var firstInvalidField = false;
validator.disableSubmitButton();
if (formValid === null) {
Form.customCallbackHandler(formId, "onValidateStart");
var formContainer = document.getElementById("mauticform_wrapper_" + formId);
if (formContainer) {
formContainer.className = formContainer.className.replace(" mauticform-post-success", "");
}
validator.setMessage("", "message");
validator.setMessage("", "error");
var formValid = true;
for (var fieldKey in MauticFormValidations[formId]) {
if (!validator.validateField(theForm, fieldKey)) {
formValid = false;
firstInvalidField = fieldKey;
}
}
if (formValid) {
document.getElementById(elId + "_return").value = document.URL;
}
}
if (Form.customCallbackHandler(formId, "onValidateEnd", formValid) === false) {
formValid = false;
}
if (formValid && submitForm) {
theForm.submit();
} else {
Form.getPageForField(formId, firstInvalidField);
validator.enableSubmitButton();
}
return formValid;
},
validateField: function (theForm, fieldKey) {
var field = MauticFormValidations[formId][fieldKey];
var valid = Form.customCallbackHandler(formId, "onValidateField", { fieldKey: fieldKey, field: field });
if (valid === null) {
var name = "mauticform[" + field.name + "]";
if (field.multiple == "true" || field.type == "checkboxgrp") {
name = name + "[]";
}
var valid = true;
if (typeof theForm.elements[name] != "undefined") {
switch (field.type) {
case "radiogrp":
var elOptions = theForm.elements[name];
valid = validator.validateOptions(elOptions);
break;
case "checkboxgrp":
var elOptions = theForm.elements[name];
valid = validator.validateOptions(elOptions);
break;
case "email":
valid = validator.validateEmail(theForm.elements[name].value);
break;
default:
valid = theForm.elements[name].value != "";
break;
}
}
var containerId = Form.getFieldContainerId(formId, fieldKey);
if (!valid) {
validator.markError(containerId, valid);
} else {
validator.clearError(containerId);
}
}
return valid;
},
validateOptions: function (elOptions) {
if (typeof elOptions === "undefined") {
return;
}
var optionsValid = false;
if (elOptions.length == undefined) {
elOptions = [elOptions];
}
for (var i = 0; i < elOptions.length; i++) {
if (elOptions[i].checked) {
optionsValid = true;
break;
}
}
return optionsValid;
},
validateEmail: function (email) {
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
var valid = atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length ? false : true;
return valid;
},
markError: function (containerId, valid, validationMessage) {
var elErrorSpan = false;
var callbackValidationMessage = validationMessage;
var elContainer = document.getElementById(containerId);
if (elContainer) {
elErrorSpan = elContainer.querySelector(".mauticform-errormsg");
if (typeof validationMessage == "undefined" && elErrorSpan) {
callbackValidationMessage = elErrorSpan.innerHTML;
}
}
var callbackData = { containerId: containerId, valid: valid, validationMessage: callbackValidationMessage };
if (!Form.customCallbackHandler(formId, "onErrorMark", callbackData)) {
if (elErrorSpan) {
if (typeof validationMessage !== "undefined") {
elErrorSpan.innerHTML = validationMessage;
}
elErrorSpan.style.display = valid ? "none" : "";
elContainer.className = elContainer.className + " mauticform-has-error";
}
}
},
clearErrors: function () {
var theForm = document.getElementById("mauticform_" + formId);
var hasErrors = theForm.querySelectorAll(".mauticform-has-error");
var that = this;
[].forEach.call(hasErrors, function (container) {
that.clearError(container.id);
});
},
clearError: function (containerId) {
if (!Form.customCallbackHandler(formId, "onErrorClear", containerId)) {
var elContainer = document.getElementById(containerId);
if (elContainer) {
var elErrorSpan = elContainer.querySelector(".mauticform-errormsg");
if (elErrorSpan) {
elErrorSpan.style.display = "none";
elContainer.className = elContainer.className.replace(" mauticform-has-error", "");
}
}
}
},
parseFormResponse: function (response) {
var ifrm = document.getElementById("mauticiframe_" + formId);
if (ifrm) {
ifrm.src = "about:blank";
}
if (!Form.customCallbackHandler(formId, "onResponse", response)) {
Form.customCallbackHandler(formId, "onResponseStart", response);
if (response.download) {
document.getElementById("mauticiframe_" + formId).src = response.download;
if (response.redirect) {
setTimeout(function () {
window.location = response.redirect;
}, 2000);
}
} else if (response.redirect) {
window.location = response.redirect;
} else if (response.validationErrors) {
var firstPage = false;
for (var field in response.validationErrors) {
var elPage = Form.getPageForField(formId, field, false);
if (elPage) {
elPage = parseInt(elPage);
if (firstPage) {
firstPage = firstPage < elPage ? firstPage : elPage;
} else {
firstPage = elPage;
}
}
this.markError("mauticform_" + formId + "_" + field, false, response.validationErrors[field]);
}
if (firstPage) {
Form.switchPage(document.getElementById("mauticform_" + formId), firstPage);
}
} else if (response.errorMessage) {
this.setMessage(response.errorMessage, "error");
}
if (response.success) {
if (response.successMessage) {
this.setMessage(response.successMessage, "message");
}
var formContainer = document.getElementById("mauticform_wrapper_" + formId);
if (formContainer) {
formContainer.className = formContainer.className + " mauticform-post-success";
}
this.resetForm();
}
validator.enableSubmitButton();
Form.customCallbackHandler(formId, "onResponseEnd", response);
}
},
setMessage: function (message, type) {
if (!Form.customCallbackHandler(formId, "onMessageSet", { message: message, type: type })) {
var container = document.getElementById("mauticform_" + formId + "_" + type);
if (container) {
container.innerHTML = message;
} else if (message) {
alert(message);
}
}
},
resetForm: function () {
this.clearErrors();
Form.switchPage(document.getElementById("mauticform_" + formId), 1);
document.getElementById("mauticform_" + formId).reset();
},
disableSubmitButton: function () {
if (!Form.customCallbackHandler(formId, "onSubmitButtonDisable")) {
var submitButton = document.getElementById("mauticform_" + formId).querySelector(".mauticform-button");
if (submitButton) {
MauticLang.submitMessage = submitButton.innerHTML;
submitButton.innerHTML = MauticLang.submittingMessage;
submitButton.disabled = "disabled";
}
}
},
enableSubmitButton: function () {
if (!Form.customCallbackHandler(formId, "onSubmitButtonEnable")) {
var submitButton = document.getElementById("mauticform_" + formId).querySelector(".mauticform-button");
if (submitButton) {
submitButton.innerHTML = MauticLang.submitMessage;
submitButton.disabled = "";
}
}
},
};
return validator;
};
Form.registerFormMessenger = function () {
window.addEventListener(
"message",
function (event) {
if (Core.debug()) console.log(event);
if (MauticDomain.indexOf(event.origin) !== 0) return;
try {
var response = JSON.parse(event.data);
if (response && response.formName) {
Core.getValidator(response.formName).parseFormResponse(response);
}
} catch (err) {
if (Core.debug()) console.log(err);
}
},
false
);
if (Core.debug()) console.log("Messenger listener started.");
};
Form.getFieldContainerId = function (formId, fieldKey) {
var containerId = "mauticform_" + formId + "_" + fieldKey;
if (!document.getElementById(containerId)) {
containerId = "mauticform_" + fieldKey;
}
return containerId;
};
Core.getValidator = function (formId) {
return Form.validator(formId);
};
Core.validateForm = function (formId, submit) {
if (typeof submit == "undefined") {
submit = false;
}
return Core.getValidator(formId).validateForm(submit);
};
Core.prepareForm = function (formId) {
return Form.prepareForm(formId);
};
Modal.loadStyle = function () {
if (typeof config.modal_css != "undefined" && parseInt(config.modal_css) != "Nan" && config.modal_css == 0) {
if (Core.debug()) console.log("custom modal css style");
return;
}
var s = document.createElement("link");
s.rel = "stylesheet";
s.type = "text/css";
s.href = Core.debug() ? Core.getMauticBaseUrl() + "media/css/modal.css" : Core.getMauticBaseUrl() + "media/css/modal.min.css";
document.head.appendChild(s);
if (Core.debug()) console.log(s);
};
Modal.open = function () {
if (arguments[0] && typeof arguments[0] === "object") {
this.options = this.extendDefaults(this.defaults, arguments[0]);
}
this.buildOut();
this.initializeEvents();
window.getComputedStyle(this.modal).height;
this.modal.className = this.modal.className + (this.modal.offsetHeight > window.innerHeight ? " mauticForm-open mauticForm-anchored" : " mauticForm-open");
this.overlay.className = this.overlay.className + " mauticForm-open";
};
Modal.buildOut = function () {
var content, contentHolder, docFrag;
content = typeof this.options.content == "string" ? this.options.content : this.options.content.innerHTML;
docFrag = document.createDocumentFragment();
this.modal = document.createElement("div");
this.modal.className = "mauticForm-modal " + this.options.className;
this.modal.style.width = this.options.width;
this.modal.style.height = this.options.height;
if (this.options.closeButton === true) {
this.closeButton = document.createElement("button");
this.closeButton.className = "mauticForm-close close-button";
this.closeButton.innerHTML = "&times;";
this.modal.appendChild(this.closeButton);
}
if (this.options.overlay === true) {
this.overlay = document.createElement("div");
this.overlay.className = "mauticForm-overlay " + this.options.className;
docFrag.appendChild(this.overlay);
}
contentHolder = document.createElement("div");
contentHolder.className = "mauticForm-content";
contentHolder.innerHTML = content;
this.modal.appendChild(contentHolder);
docFrag.appendChild(this.modal);
document.body.appendChild(docFrag);
};
Modal.extendDefaults = function (source, properties) {
for (var property in properties) {
if (properties.hasOwnProperty(property)) source[property] = properties[property];
}
return source;
};
Modal.initializeEvents = function () {
if (this.closeButton) this.closeButton.addEventListener("click", this.close.bind(this));
if (this.overlay) this.overlay.addEventListener("click", this.close.bind(this));
};
Modal.transitionSelect = function () {
var el = document.createElement("div");
return el.style.WebkitTransition ? "webkitTransitionEnd" : el.style.WebkitTransition ? "webkitTransitionEnd" : "oTransitionEnd";
};
Modal.close = function () {
var _ = this;
this.modal.className = this.modal.className.replace(" mauticForm-open", "");
this.overlay.className = this.overlay.className.replace(" mauticForm-open", "");
this.modal.addEventListener(this.transitionSelect(), function () {
_.modal.parentNode.removeChild(_.modal);
});
this.overlay.addEventListener(this.transitionSelect(), function () {
if (_.overlay.parentNode) _.overlay.parentNode.removeChild(_.overlay);
});
this.overlay.parentNode.removeChild(this.overlay);
this.modal.parentNode.removeChild(this.modal);
};
Core.parseToObject = function (params) {
return JSON.parse('{"' + decodeURI(params.trim().replace(/&/g, '","').replace(/=/g, '":"')) + '"}');
};
Core.setConfig = function (options) {
config = options;
};
Core.getConfig = function () {
return config;
};
Core.debug = function () {
return typeof config.debug != "undefined" && parseInt(config.debug) != "Nan" && config.debug == 1 ? true : false;
};
Core.devMode = function () {
return typeof config.devmode != "undefined" && parseInt(config.devmode) != "Nan" && config.devmode == 1 ? true : false;
};
Core.setMauticBaseUrl = function (base_url) {
config.mautic_base_url = base_url.split("/").slice(0, -3).join("/") + "/";
};
Core.getMauticBaseUrl = function () {
return config.mautic_base_url;
};
Core.initialize = function (base_url) {
Profiler.startTime();
if (Core.debug()) console.log("SDK initialized");
if (typeof config.mautic_base_url == "undefined") Core.setMauticBaseUrl(base_url);
if (Core.debug()) console.log("Automatic setup mautic_base_url as: " + config.mautic_base_url);
Modal.loadStyle();
document.addEventListener("DOMContentLoaded", function (e) {
if (Core.debug()) console.log("DOM is ready");
Form.initialize();
});
};
Core.openModal = function (options) {
Modal.open(options);
};
Core.onLoad = function () {
Form.prepareForms();
Form.registerFormMessenger();
};
return Core;
}
if (typeof MauticSDK === "undefined") {
window.MauticSDK = define_library();
var sjs = document.getElementsByTagName("script"),
tjs = sjs.length;
for (var i = 0; i < sjs.length; i++) {
if (!sjs[i].hasAttribute("src") || sjs[i].getAttribute("src").indexOf("mautic-form.js") == -1) continue;
var sParts = sjs[i].getAttribute("src").split("?");
if (sParts[1]) MauticSDK.setConfig(MauticSDK.parseToObject(sParts[1]));
MauticSDK.initialize(sParts[0]);
break;
}
}
if (typeof window.MauticFormValidations == "undefined") {
window.MauticFormValidations = {};
}
})(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment