| Current File : /home/escuelai/public_html/toledo/assets/formoid/formoid.min.js |
var Formoid = (function () {
var API_URL = 'https://formoid.net/api/push';
function $ajax(url, settings) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(settings.type, url);
xhr.onload = function () {
if (xhr.status !== 200) {
return reject(new Error('Incorrect server response.'));
}
resolve(xhr.responseText);
};
xhr.onerror = function () {
var message = 'Failed to query the server. ';
if ('onLine' in navigator && !navigator.onLine) {
message += 'No connection to the Internet.';
} else {
message += 'Check the connection and try again.';
}
reject(new Error(message));
};
xhr.send(settings.data);
})
};
var prop = function (name, args) {
name = '__' + name + '__';
if (args.length) {
this[name] = args[0];
return this;
}
return this[name];
};
var Form = function (settings) {
settings = settings || {};
this.__email__ = settings.email || '';
this.__title__ = settings.title || '';
this.__data__ = settings.data || [];
};
Form.prototype.email = function (value) {
return prop.call(this, 'email', arguments);
};
Form.prototype.title = function (value) {
return prop.call(this, 'title', arguments);
};
Form.prototype.data = function (value) {
return prop.call(this, 'data', arguments);
};
Form.prototype.send = function (data) {
return $ajax(API_URL, {
type: 'POST',
data: JSON.stringify({
email: this.__email__,
form: {
title: this.__title__,
data: (arguments.length ? data : this.__data__)
}
})
})
.then(function(responseText) {
var data;
try {
data = JSON.parse(responseText);
} catch (e) {
throw new Error('Incorrect server response.');
}
if (data.error) {
throw new Error(data.error);
}
return data.response;
});
};
return {
Form: function (settings) {
return new Form(settings);
}
}
})();
const formModalDOM = document.createElement('div');
let formModal;
formModalDOM.classList.add('modal');
formModalDOM.setAttribute('tabindex', -1);
formModalDOM.style.overflow = 'hidden';
if (typeof bootstrap !== 'undefined') {
if (bootstrap.Tooltip.VERSION.startsWith(5)) {
//bs5
formModalDOM.innerHTML = `
<div class="modal-dialog d-flex align-items-center" style="">
<div class="modal-content" style="height:auto;border-radius:0;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);">
<div class="modal-body d-flex justify-content-end flex-column align-items-end">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<p class="display-7" style="text-align:center;width:100%;">Modal body text goes here.</p>
</div>
</div>
</div>`
} else {
// bs4
formModalDOM.innerHTML = `
<div class="modal-dialog d-flex align-items-center" style="">
<div class="modal-content" style="height:auto;border-radius:0;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);">
<div class="modal-body d-flex justify-content-end flex-column align-items-end">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p class="display-7" style="text-align:center;width:100%;">Modal body text goes here.</p>
</div>
</div>
</div>`
}
} else if ($.fn.Tooltip) {
// bs3
formModalDOM.innerHTML = `
<div class="modal-dialog d-flex align-items-center" style="">
<div class="modal-content" style="height:auto;border-radius:0;border:none;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);">
<div class="modal-body d-flex justify-content-end flex-column align-items-end">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p class="display-7" style="text-align:center;width:100%;">Modal body text goes here.</p>
</div>
</div>
</div>`
}
if (bootstrap) {
formModal = new bootstrap.Modal(formModalDOM);
}
var isValidEmail = function (input) {
return input.value ? /^([^@]+?)@(([a-z0-9]-*)*[a-z0-9]+\.)+([a-z0-9]+)$/i.test(input.value) : true;
};
var formComponents = document.querySelectorAll('[data-form-type="formoid"]');
formComponents.forEach(function (component) {
var formData,
form = component.tagName === 'FORM' ? component : component.querySelector('form'),
alert = component.querySelector('[data-form-alert]'),
title = component.getAttribute('data-form-title') ? component : component.querySelector('[data-form-title]'),
submit = component.querySelector('[type="submit"]'),
inputArr = component.querySelectorAll('[data-form-field]'),
alertSuccess = alert.innerHTML;
form.addEventListener('change', function (event) {
if (event.target.type === 'file') {
if (event.target.files[0].size > 1000000) {
formModal._element.querySelector('.modal-body p').innerText = 'File size must be less than 1mb';
formModal._element.querySelector('.modal-content').classList.add('alert-danger');
formModal._element.querySelector('.modal-content').style.backgroundColor = '#ff9966';
formModal.show();
submit.classList.add('btn-loading');
submit.setAttribute('disabled', true);
}
}
});
form.addEventListener('submit', function (event) {
event.stopPropagation();
event.preventDefault();
if (submit.classList.contains('btn-loading')) return;
var inputs = inputArr;
form.classList.add('form-active');
submit.classList.add('btn-loading');
submit.setAttribute('disabled', true);
alert.innerHTML = '';
formData = formData || Formoid.Form({
email: component.querySelector('[data-form-email]').value,
title: title.getAttribute('data-form-title') || title.innerText
});
function parseInput(input) {
return new Promise(function (resolve, reject) {
// valide email
if (input.getAttribute('name') === 'email' && !isValidEmail(input)) {
return reject(new Error('Form is not valid'));
}
var name = input.getAttribute('data-form-field') || input.getAttribute('name');
switch (input.getAttribute('type')) {
case 'file':
var file = input.files[0];
if (!file) return resolve();
var reader = new FileReader()
reader.onloadend = function () {
resolve([name, reader.result]);
};
reader.onerror = function () {
reject(reader.error);
};
reader.readAsDataURL(file);
break;
case 'checkbox':
resolve([name, input.checked ? input.value : 'No']);
break;
case 'radio':
resolve(input.checked && [name, input.value]);
break;
default:
resolve([name, input.value]);
}
});
}
Promise
.all(Array.prototype.map.call(inputs, function (input) { return parseInput(input); }))
.then(function (data) { return formData.send(data.filter(function (v) { return v; })); })
.then(function (message) {
form.reset();
form.classList.remove('form-active');
formModal._element.querySelector('.modal-body p').innerText = alertSuccess || message;
formModal._element.querySelector('.modal-content').classList.add('alert-success');
formModal._element.querySelector('.modal-content').style.backgroundColor = '#70c770'
formModal.show();
}, function (err) {
formModal._element.querySelector('.modal-body p').innerText = err.message;
formModal._element.querySelector('.modal-content').classList.add('alert-danger');
formModal._element.querySelector('.modal-content').style.backgroundColor = '#ff9966'
})
.then(function () {
submit.classList.remove('btn-loading');
submit.removeAttribute('disabled');
});
});
inputArr.forEach(function (elem) {
elem.addEventListener('focus', function () {
submit.classList.remove('btn-loading')
submit.removeAttribute('disabled');
});
});
})