mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
957 lines
33 KiB
JavaScript
957 lines
33 KiB
JavaScript
kit.PluginManager.register('toolkit',function(module, exports, require) {
|
|
|
|
var $ = require('jquery');
|
|
|
|
|
|
|
|
var __Config = function () {
|
|
|
|
function Config() {
|
|
this.mask =
|
|
{
|
|
tel: '+375 (99) 999-99-99'
|
|
}
|
|
}
|
|
|
|
Config.prototype.test = function test() {
|
|
|
|
};
|
|
|
|
return Config;
|
|
}();
|
|
var Config = new __Config();
|
|
|
|
|
|
var __Helper = function () {
|
|
|
|
function Helper() {
|
|
|
|
}
|
|
|
|
/**
|
|
* @description Вызывает событие
|
|
* @param {object} elem
|
|
* @param {string} event Название события
|
|
*/
|
|
Helper.prototype.triggerEvent = function triggerEvent(elem, event) {
|
|
var ev = document.createEvent('HTMLEvents');
|
|
ev.initEvent(event, true, false);
|
|
return elem.dispatchEvent(ev);
|
|
};
|
|
|
|
return Helper;
|
|
}();
|
|
var Helper = new __Helper();
|
|
|
|
|
|
var __Events = function Events() {
|
|
function Events() {
|
|
this.submitForm();
|
|
}
|
|
|
|
Events.prototype.submitForm = function () {
|
|
$('form.js-kit-form').attr('novalidate', true);
|
|
$(document).on('submit.kit-event', 'form.js-kit-form', function (e) {
|
|
e.preventDefault();
|
|
|
|
Inputs.clearForm(e.target);
|
|
Message.clear(e.target, true);
|
|
|
|
var formNode = $(e.target);
|
|
var sendData = formNode.serializeArray();
|
|
var action = formNode.attr('action');
|
|
var additionalData = {};
|
|
|
|
var jqxhr = $.post(action, sendData, function (response) {
|
|
console.log('success');
|
|
if (typeof response == 'object') {
|
|
|
|
Ajax.ajaxProcessingSuccess(response, $(e.target));
|
|
|
|
}
|
|
}, 'json')
|
|
.done(function (response) {
|
|
// console.log('done');
|
|
// console.log(response);
|
|
})
|
|
.fail(function (response) {
|
|
console.log('fail');
|
|
console.log(response);
|
|
})
|
|
.always(function (response) {
|
|
// console.log('always');
|
|
// console.log(response);
|
|
});
|
|
|
|
|
|
});
|
|
};
|
|
|
|
return Events;
|
|
}();
|
|
var Events = new __Events();
|
|
|
|
|
|
var __Message = function () {
|
|
|
|
function Message() {
|
|
this.selector = '.kit-message';
|
|
}
|
|
|
|
Message.prototype.clear = function (node, recursive = false) {
|
|
node = $(node);
|
|
if (!node.length) {
|
|
return;
|
|
}
|
|
function clearNode(node) {
|
|
node.removeClass('kit-message-error kit-message-success kit-message-warning')
|
|
.html('');
|
|
}
|
|
if(node.is(this.selector)) {
|
|
clearNode(node);
|
|
}
|
|
if(recursive) {
|
|
clearNode(node.find(this.selector));
|
|
}
|
|
};
|
|
|
|
return Message;
|
|
}();
|
|
var Message = new __Message();
|
|
|
|
var __Ajax = function () {
|
|
|
|
function Ajax() {
|
|
|
|
}
|
|
|
|
Ajax.prototype.ajaxProcessingSuccess = function ajaxProcessingSuccess(data, $form) {
|
|
console.log('ajaxProcessingSuccess');
|
|
$form = $($form);
|
|
|
|
|
|
if (data.hasOwnProperty('inputs') && Array.isArray(data.inputs)) {
|
|
data.inputs.forEach(function (item) {
|
|
|
|
var inputNode = $('[name="' + item.name + '"]');
|
|
if (inputNode.length) {
|
|
if (item.hasOwnProperty('error')) {
|
|
Inputs.showFieldError(inputNode, item.error)
|
|
}
|
|
if (item.hasOwnProperty('readonly')) {
|
|
inputNode.prop('readonly', item.readonly);
|
|
}
|
|
if (item.hasOwnProperty('disabled')) {
|
|
inputNode.prop('disabled', item.disabled);
|
|
}
|
|
if (item.hasOwnProperty('type')) {
|
|
inputNode.prop('type', item.type);
|
|
if (item.type === 'hidden') {
|
|
inputNode.parent().removeClass('kit-hidden').addClass('kit-hidden');
|
|
} else {
|
|
inputNode.parent().removeClass('kit-hidden');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (data.hasOwnProperty('do') && Array.isArray(data.do)) {
|
|
data.do.forEach(function (item) {
|
|
var $do = false;
|
|
var selector = $(document);
|
|
if (item.hasOwnProperty('form') && item.form === true) {
|
|
selector = $form;
|
|
if (selector.length) {
|
|
$do = true
|
|
}
|
|
}
|
|
if (item.hasOwnProperty('selector')) {
|
|
selector = $(item.selector);
|
|
if (selector.length) {
|
|
$do = true
|
|
}
|
|
}
|
|
|
|
if ($do) {
|
|
if (item.hasOwnProperty('html')) {
|
|
selector.html(item.html);
|
|
}
|
|
if (item.hasOwnProperty('replace')) {
|
|
selector.replaceWith(item.replace);
|
|
}
|
|
if (item.hasOwnProperty('addClass')) {
|
|
selector.addClass(item.addClass);
|
|
}
|
|
if (item.hasOwnProperty('removeClass')) {
|
|
selector.removeClass(item.removeClass);
|
|
}
|
|
if (item.hasOwnProperty('disabled')) {
|
|
selector.prop('disabled', item.disabled);
|
|
}
|
|
if (item.hasOwnProperty('trigger')) {
|
|
selector.trigger(item.trigger);
|
|
}
|
|
}
|
|
|
|
|
|
if (item.hasOwnProperty('hide')) {
|
|
item.hide && selector.find(item.hide).hide();
|
|
}
|
|
if (item.hasOwnProperty('show')) {
|
|
item.show && selector.find(item.show).show();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (data.hasOwnProperty('success')) {
|
|
this.showMessageSmart(data.success, $form, 'success');
|
|
}
|
|
if (data.hasOwnProperty('warning')) {
|
|
this.showMessageSmart(data.warning, $form, 'warning');
|
|
}
|
|
if (data.hasOwnProperty('errors')) {
|
|
this.showMessageSmart(data.errors, $form, 'error');
|
|
}
|
|
};
|
|
|
|
Ajax.prototype.showMessageSmart = function showMessageSmart(messageObject, formNode, type = 'error') {
|
|
console.log('showMessageSmart');
|
|
console.log(messageObject);
|
|
console.log(formNode);
|
|
console.log(type);
|
|
|
|
formNode = $(formNode);
|
|
console.log(formNode);
|
|
var unknownMessage = [];
|
|
var msg = [];
|
|
var inputNode,
|
|
key;
|
|
if (Object.keys(messageObject).length) {
|
|
|
|
for (key in messageObject) {
|
|
msg = messageObject[key];
|
|
console.log(msg);
|
|
inputNode = formNode.find("[name='" + key + "']");
|
|
|
|
if (inputNode.length) {
|
|
if (type === 'success') {
|
|
Inputs.showFieldSuccess(inputNode, msg);
|
|
} else if (type === 'warning') {
|
|
Inputs.showFieldWarning(inputNode, msg);
|
|
} else {
|
|
Inputs.showFieldError(inputNode, msg);
|
|
}
|
|
} else {
|
|
unknownMessage[unknownMessage.length] = msg;
|
|
}
|
|
}
|
|
console.log('unknownMessage');
|
|
console.log(unknownMessage);
|
|
var messageNode = formNode.find('.kit-message');
|
|
if (unknownMessage.length) {
|
|
console.log('1');
|
|
console.log(messageNode.length ? 'messageNode.length' : 'no messageNode.length');
|
|
messageNode.length && messageNode.html(unknownMessage.join('<br>')).addClass('kit-message-' + type);
|
|
} else {
|
|
console.log(unknownMessage);
|
|
}
|
|
}
|
|
};
|
|
|
|
return Ajax;
|
|
}();
|
|
var Ajax = new __Ajax();
|
|
|
|
|
|
function Select() {
|
|
|
|
if (Helper.isMobile) {
|
|
//document.body.classList.add('kit-select-fix');
|
|
}
|
|
|
|
document.addEventListener('click', clickHandler, false);
|
|
document.addEventListener('change', changeHandler, false);
|
|
document.addEventListener('keydown', escapeKeyHandler, false);
|
|
window.addEventListener('resize', resizeHandler, false);
|
|
|
|
var MINWIDTH = 200;
|
|
var MAXHEIGHT = 8 * 40;
|
|
var MINHEIGHT = 4 * 40;
|
|
|
|
function clickHandler(e) {
|
|
|
|
//if (_helper2.default.isMobile) return;
|
|
|
|
var fieldDisplay = e.target;
|
|
var container = fieldDisplay.parentNode;
|
|
var dropdownOptionNode = e.target.closest('.kit-dropdown__option');
|
|
/**
|
|
* клик по .kit-field__display
|
|
* открывает селект
|
|
*/
|
|
if (hasClass(e.target, 'kit-field__display')) {
|
|
e.preventDefault();
|
|
|
|
if (!hasClass(container, 'kit-select--open')) {
|
|
|
|
closeAll(container);
|
|
addDropdown(container);
|
|
} else {
|
|
closeAll(null);
|
|
}
|
|
}
|
|
/**
|
|
* клик по option
|
|
*/
|
|
else if (hasClass(e.target, 'kit-dropdown__option') || dropdownOptionNode) {
|
|
var wrapper, wrapper2;
|
|
if (hasClass(e.target, 'kit-dropdown__option')) {
|
|
wrapper = e.target.parentNode;
|
|
wrapper2 = e.target;
|
|
} else {
|
|
wrapper2 = dropdownOptionNode;
|
|
wrapper = wrapper2.parentNode;
|
|
}
|
|
|
|
var stamp = wrapper.getAttribute('data-for-select-id');
|
|
var select = document.querySelector('[ data-select-id = "' + stamp + '" ]');
|
|
var option = select.querySelectorAll('option')[wrapper2.getAttribute('data-index')];
|
|
|
|
if (select.hasAttribute('multiple')) {
|
|
wrapper2.classList.toggle('kit-active');
|
|
option.selected = hasClass(wrapper2, 'kit-active');
|
|
Helper.triggerEvent(select, 'change');
|
|
closeAll(null);
|
|
} else {
|
|
option.selected = true;
|
|
Helper.triggerEvent(select, 'change');
|
|
closeAll(null);
|
|
}
|
|
} else {
|
|
closeAll(null);
|
|
}
|
|
}
|
|
|
|
function closeAll(exceptSelect) {
|
|
|
|
var arrayOfOpenedSelects = document.querySelectorAll('.kit-select--open');
|
|
|
|
[].filter.call(arrayOfOpenedSelects, function (elem) {
|
|
return elem !== exceptSelect;
|
|
}).forEach(function (elem) {
|
|
removeClass(elem, 'kit-select--open');
|
|
});
|
|
|
|
detachDropDown();
|
|
}
|
|
|
|
// изменение инпута
|
|
function changeHandler(e) {
|
|
var select = e.target;
|
|
changeSelect(select);
|
|
}
|
|
|
|
|
|
function __dirtyTests(value, dirtyValidTestData) {
|
|
var r = true;
|
|
dirtyValidTestData.forEach(function(attr, i){
|
|
if(attr.name === 'data-dirty-min') {
|
|
r = r && (Number(value) >= Number(attr.value))
|
|
}
|
|
});
|
|
return r;
|
|
}
|
|
|
|
/**
|
|
* изменение инпута
|
|
* @param select {HTMLElement}
|
|
*/
|
|
function changeSelect(select) {
|
|
if (hasClass(select, 'kit-field__input') && select.tagName === 'SELECT') {
|
|
var selected = select.querySelectorAll('option:checked')[0];
|
|
var data = {};
|
|
var dataAttrs = [];
|
|
if(selected) {
|
|
dataAttrs.filter.call(selected.attributes, function (attr) {
|
|
return (/^data-/.test(attr.name)
|
|
);
|
|
});
|
|
}
|
|
|
|
var dirtyValidTestData = [];
|
|
dirtyValidTestData = dirtyValidTestData.filter.call(select.attributes, function (attr) {
|
|
return (/^data-dirty-/.test(attr.name)
|
|
);
|
|
});
|
|
|
|
var isMultiple = select.hasAttribute('multiple');
|
|
|
|
var parent = select.parentNode;
|
|
|
|
var display = select.parentNode.querySelector('.kit-field__display');
|
|
|
|
var bDirty = !!selected;
|
|
if(isMultiple) {
|
|
bDirty = false;
|
|
}
|
|
if(!isMultiple) {
|
|
bDirty = bDirty && __dirtyTests(select.value, dirtyValidTestData);
|
|
}
|
|
|
|
display.textContent = '';
|
|
|
|
if(bDirty) {
|
|
display.textContent = selected.textContent;
|
|
}
|
|
|
|
removeClass(parent, 'kit-select--open');
|
|
|
|
select.setAttribute('data-dirty', bDirty?'true':'false');
|
|
|
|
removeClass(select, 'kit-field--error');
|
|
|
|
// for(let key in attrs){
|
|
// if( attrs[key].nodeName !== 'value' && attrs[key].nodeName !== undefined){
|
|
// select.setAttribute( attrs[key].nodeName, attrs[key].nodeValue )
|
|
// }
|
|
// }
|
|
|
|
forEach(dataAttrs, function (index, attr) {
|
|
data[normalizeDataAttrName(attr.nodeName)] = attr.nodeValue;
|
|
});
|
|
|
|
select.data = data;
|
|
|
|
setTimeout(function () {
|
|
Helper.triggerEvent(select, 'kit-select-change');
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function resizeHandler() {
|
|
|
|
var dropdownWrapper = document.querySelectorAll('.kit-dropdown')[0] || null;
|
|
var stamp = void 0;
|
|
var select = void 0;
|
|
var container = void 0;
|
|
|
|
if (dropdownWrapper !== null) {
|
|
|
|
stamp = dropdownWrapper.getAttribute('data-for-select-id');
|
|
select = document.querySelector('[ data-select-id = "' + stamp + '" ]') || [];
|
|
container = select.parentNode;
|
|
|
|
dropdownWrapper.style.top = container.getBoundingClientRect().top + container.offsetHeight + window.pageYOffset + 'px';
|
|
dropdownWrapper.style.maxHeight = calcMaxHeight(container);
|
|
dropdownWrapper.style.left = calcPosition(container).left;
|
|
dropdownWrapper.style.width = container.offsetWidth + 'px';
|
|
}
|
|
}
|
|
|
|
function addDropdown(container) {
|
|
|
|
var select = container.querySelector('select');
|
|
var optionElementList = select.querySelectorAll('option');
|
|
var dropdownWrapper = document.createElement('div');
|
|
var stamp = Date.now();
|
|
var isMultiple = select.hasAttribute('multiple');
|
|
|
|
if (select.disabled) return;
|
|
|
|
select.classList.forEach(function(value, key, listObj){
|
|
if(value !== 'kit-field__input') {
|
|
dropdownWrapper.classList.add(value);
|
|
}
|
|
});
|
|
|
|
select.setAttribute('data-select-id', stamp);
|
|
dropdownWrapper.setAttribute('data-for-select-id', stamp);
|
|
|
|
addClass(dropdownWrapper, 'kit-dropdown');
|
|
|
|
if (isMultiple) {
|
|
dropdownWrapper.setAttribute('data-multiple', 'true');
|
|
}
|
|
|
|
forEach(optionElementList, function (i, item) {
|
|
|
|
var dropdownInner = document.createElement('div');
|
|
var textContent = item.textContent;
|
|
var dropdownInnerIcon = document.createElement('span');
|
|
var dropdownInnerIconCheck = '<svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>';
|
|
var dataClass = String(item.getAttribute('data-class'));
|
|
addClass(dropdownInnerIcon, 'kit-field__icon');
|
|
$(dropdownInnerIcon).append(dropdownInnerIconCheck);
|
|
dropdownInner.textContent = textContent;
|
|
dropdownInner.setAttribute('data-index', i);
|
|
|
|
addClass(dropdownInner, 'kit-dropdown__option');
|
|
addClass(dropdownInner, dataClass);
|
|
|
|
if (isMultiple) {
|
|
dropdownInner.appendChild(dropdownInnerIcon);
|
|
}
|
|
if (item.disabled) {
|
|
addClass(dropdownInner, 'kit-disabled');
|
|
}
|
|
if (item.selected) {
|
|
addClass(dropdownInner, 'kit-active');
|
|
}
|
|
dropdownWrapper.appendChild(dropdownInner);
|
|
});
|
|
|
|
Helper.triggerEvent(select, 'beforeOpen');
|
|
|
|
document.body.appendChild(dropdownWrapper);
|
|
|
|
dropdownWrapper.style.position = 'absolute';
|
|
dropdownWrapper.style.minWidth = MINWIDTH + 'px';
|
|
dropdownWrapper.style.top = calcPosition(container).top;
|
|
dropdownWrapper.style.left = calcPosition(container).left;
|
|
dropdownWrapper.style.minHeight = calcMinHeight(dropdownWrapper);
|
|
dropdownWrapper.style.maxHeight = calcMaxHeight(container);
|
|
dropdownWrapper.style.width = container.offsetWidth + 'px';
|
|
dropdownWrapper.style.zIndex = 20002;
|
|
|
|
setTimeout(function () {
|
|
addClass(dropdownWrapper, 'kit-active');
|
|
addClass(container, 'kit-select--open');
|
|
}, 0);
|
|
}
|
|
|
|
function calcPosition(container) {
|
|
var offsetTop = getOffset(container).top;
|
|
var offsetLeft = getOffset(container).left;
|
|
|
|
var scrollTop = window.pageYOffset;
|
|
var scrollLeft = window.pageXOffset;
|
|
|
|
var left = 0;
|
|
var top = offsetTop + container.offsetHeight + window.pageYOffset;
|
|
|
|
if (viewport().width - MINWIDTH > offsetLeft || container.offsetWidth >= MINWIDTH) {
|
|
left = offsetLeft + scrollLeft;
|
|
} else {
|
|
left = offsetLeft + scrollLeft + container.offsetWidth - MINWIDTH;
|
|
}
|
|
|
|
return {
|
|
top: top + 'px',
|
|
left: left + 'px'
|
|
};
|
|
}
|
|
|
|
function calcMinHeight(el) {
|
|
|
|
var height = el.offsetHeight;
|
|
|
|
if (height > MINHEIGHT) {
|
|
return MINHEIGHT + 'px';
|
|
} else {
|
|
return height + 'px';
|
|
}
|
|
}
|
|
|
|
function calcMaxHeight(container) {
|
|
|
|
var offsetTop = getOffset(container).top;
|
|
var _maxHeight = viewport().height + window.pageYOffset - offsetTop - container.offsetHeight - window.pageYOffset;
|
|
|
|
if (_maxHeight > MAXHEIGHT) {
|
|
return MAXHEIGHT + 'px';
|
|
} else {
|
|
return _maxHeight + 'px';
|
|
}
|
|
}
|
|
|
|
function escapeKeyHandler(e) {
|
|
if (e.keyCode == 27) {
|
|
closeAll(null);
|
|
}
|
|
}
|
|
|
|
function detachDropDown() {
|
|
var elements = document.querySelectorAll('.kit-dropdown');
|
|
forEach(elements, function (i, element) {
|
|
element.parentNode.removeChild(element);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
|
|
*/
|
|
function forEach(array, callback, scope) {
|
|
for (var i = 0; i < array.length; i++) {
|
|
callback.call(scope, i, array[i]);
|
|
}
|
|
};
|
|
|
|
function hasClass(el, className) {
|
|
if (el.classList) return el.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
|
|
}
|
|
|
|
function addClass(el, className) {
|
|
if (el.classList) return el.classList.add(className);else return el.className += ' ' + className;
|
|
}
|
|
|
|
function removeClass(el, className) {
|
|
if (el.classList) return el.classList.remove(className);else return el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
|
}
|
|
|
|
function normalizeDataAttrName(string) {
|
|
var _arguments = arguments;
|
|
|
|
return string.replace(/^data-/g, '').replace(/(\-\w)/g, function () {
|
|
return _arguments[0][1].toUpperCase();
|
|
});
|
|
}
|
|
|
|
function viewport() {
|
|
|
|
var height = void 0;
|
|
var width = void 0;
|
|
|
|
if (document.compatMode === 'BackCompat') {
|
|
height = document.body.clientHeight;
|
|
width = document.body.clientWidth;
|
|
} else {
|
|
height = document.documentElement.clientHeight;
|
|
width = document.documentElement.clientWidth;
|
|
}
|
|
|
|
return {
|
|
width: width,
|
|
height: height
|
|
};
|
|
}
|
|
|
|
function getOffset(el) {
|
|
return {
|
|
top: el.getBoundingClientRect().top,
|
|
left: el.getBoundingClientRect().left
|
|
};
|
|
}
|
|
|
|
function setLabelByNode(selectNode, html) {
|
|
|
|
selectNode = (0, _jquery2.default)(selectNode);
|
|
|
|
if(!selectNode.length) return;
|
|
|
|
var select = selectNode[0];
|
|
|
|
if (hasClass(select, 'kit-field__input') && select.tagName == 'SELECT') {
|
|
|
|
|
|
|
|
var selected = select.querySelectorAll('option:checked')[0];
|
|
var data = {};
|
|
var dataAttrs = [];
|
|
if(selected) {
|
|
dataAttrs.filter.call(selected.attributes, function (attr) {
|
|
return (/^data-/.test(attr.name)
|
|
);
|
|
});
|
|
}
|
|
|
|
var isMultiple = select.hasAttribute('multiple');
|
|
|
|
var parent = select.parentNode;
|
|
|
|
var display = select.parentNode.querySelector('.kit-field__display');
|
|
var label = select.parentNode.querySelector('.kit-field__label');
|
|
var labelContent = label.querySelector('.kit-field__label-content');
|
|
if(labelContent) {
|
|
label = labelContent;
|
|
}
|
|
|
|
var arrow;
|
|
|
|
var arrowInLabel = false;
|
|
if(label) {
|
|
arrow = label.querySelector('.kit-field__arrow');
|
|
if(arrow) {
|
|
arrowInLabel = true;
|
|
}
|
|
}
|
|
|
|
if(arrowInLabel) {
|
|
(0, _jquery2.default)(label).html('').append(html).append(arrow);
|
|
} else {
|
|
(0, _jquery2.default)(label).html('').append(html);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
var __selectClass = function(){
|
|
|
|
}
|
|
__selectClass.prototype.setLabelByNode = function(select, html) {
|
|
setLabelByNode(select, html);
|
|
}
|
|
__selectClass.prototype.change = function(select) {
|
|
changeSelect(select);
|
|
}
|
|
|
|
return new __selectClass();
|
|
};
|
|
|
|
var __Inputs = function () {
|
|
|
|
function Inputs() {
|
|
var _this = this;
|
|
|
|
this.init();
|
|
|
|
console.log('Inputs constructor');
|
|
|
|
window.addEventListener('resize', function () {
|
|
return _this.refresh();
|
|
}, false);
|
|
document.addEventListener('inputs.reset', function () {
|
|
return _this.refresh();
|
|
}, false);
|
|
document.addEventListener('tabs.toggle', function () {
|
|
return _this.refresh();
|
|
}, false);
|
|
document.addEventListener('modal.open', function () {
|
|
return _this.refresh();
|
|
}, false);
|
|
document.addEventListener('input', function (e) {
|
|
console.log('input');
|
|
return _this.changeFiled(e);
|
|
}, false);
|
|
document.addEventListener('paste', function (e) {
|
|
return _this.changeFiled(e);
|
|
}, false);
|
|
document.addEventListener('drop', function (e) {
|
|
return _this.changeFiled(e);
|
|
}, false);
|
|
document.addEventListener('cut', function (e) {
|
|
return _this.changeFiled(e);
|
|
}, false);
|
|
document.addEventListener('change', function (e) {
|
|
return _this.switchField(e);
|
|
}, false);
|
|
|
|
}
|
|
|
|
Inputs.prototype.checkDirty = function checkDirty(element) {
|
|
var bDirty = false;
|
|
|
|
if(element.placeholder.length) {
|
|
element.setAttribute('data-dirty', 'true');
|
|
return true;
|
|
}
|
|
|
|
if(element.mask) {
|
|
var raw = element.mask.getRaw();
|
|
bDirty = !!raw.length;
|
|
} else {
|
|
bDirty = !!element.value;
|
|
}
|
|
|
|
element.setAttribute('data-dirty', bDirty?'true':'false');
|
|
return bDirty;
|
|
};
|
|
|
|
|
|
Inputs.prototype.changeFiled = function changeFiled(e) {
|
|
console.log('changeFiled');
|
|
var _this2 = this;
|
|
var target = e.target || e;
|
|
if (target.classList.contains('kit-field__input')) {
|
|
if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') {
|
|
this.checkDirty(target);
|
|
|
|
var value_min = $(target).attr('value_min');
|
|
var value_max = $(target).attr('value_max');
|
|
if ((value_min != "") && (Number(value_min) > Number(target.value))) {
|
|
this.showFieldError(target, 'Минимальное значение ' + value_min);
|
|
} else if ((value_max != "") && (Number(value_max) < Number(target.value))) {
|
|
this.showFieldError(target, 'Максимальное значение ' + value_max);
|
|
} else {
|
|
this.fieldNormalize(target);
|
|
}
|
|
|
|
if (!$(target).hasClass('kit-field--error')) {
|
|
$(target).siblings('.kit-field__message').text('');
|
|
}
|
|
if (target.classList.contains('kit-autoheight')) {
|
|
this.calcAutoHeight(target);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
Inputs.prototype.checkAllInputs = function checkAllInputs() {
|
|
var _this2 = this;
|
|
|
|
var inputNode = document.querySelectorAll('input.kit-field__input, textarea.kit-field__input');
|
|
[].forEach.call(inputNode, function (item) {
|
|
if (item.tagName == 'TEXTAREA') {
|
|
if (item.classList.contains('kit-autoheight')) {
|
|
_this2.calcAutoHeight(item);
|
|
_this2.checkDirty(item);
|
|
}
|
|
} else {
|
|
_this2.checkDirty(item);
|
|
}
|
|
});
|
|
};
|
|
|
|
Inputs.prototype.calcAutoHeight = function calcAutoHeight(target) {
|
|
target.style.height = target.style.minHeight = 'auto';
|
|
var h;
|
|
if (target.scrollHeight < 30) {
|
|
h = '30' + 'px';
|
|
} else {
|
|
h = target.scrollHeight + 'px';
|
|
}
|
|
target.style.height = target.style.minHeight = h;
|
|
};
|
|
|
|
|
|
Inputs.prototype.switchField = function switchField(e) {
|
|
var target = e.target;
|
|
var input = target.parentNode.querySelector('.kit-field__input');
|
|
if (input && input.type == 'checkbox') {
|
|
input.classList.remove('kit-field--error');
|
|
} else if (input && input.type == 'radio') {
|
|
var name = input.parentNode.querySelector('.kit-field__input').name;
|
|
var otherRadio = document.querySelectorAll('[name= ' + name + ']');
|
|
input.classList.remove('kit-field--error');
|
|
[].forEach.call(otherRadio, function (item) {
|
|
item.classList.remove('kit-field--error');
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
Inputs.prototype.clearForm = function clearForm(formNode) {
|
|
formNode = $(formNode);
|
|
if (formNode.length) {
|
|
formNode.find('.kit-field--error').removeClass('kit-field--error');
|
|
formNode.find('.kit-field__message').html('');
|
|
}
|
|
};
|
|
|
|
Inputs.prototype.setTelMask = function () {
|
|
var _this3 = this;
|
|
|
|
$('[type=tel]').mask(Config.mask.tel, {
|
|
placeholder: '_', completed: function completed() {
|
|
_this3.fieldNormalize(this);
|
|
}
|
|
}).on('blur.mask', function (e) {
|
|
//_this3.checkDirty(e.currentTarget);
|
|
});
|
|
};
|
|
|
|
Inputs.prototype.setMask = function () {
|
|
var _this3 = this;
|
|
|
|
var node = $('[data-mask]');
|
|
|
|
node.each(function(index, item){
|
|
item = $(item);
|
|
var placeholder = item.attr('data-mask-placeholder');
|
|
placeholder = placeholder?placeholder:'_';
|
|
item.mask(item.attr('data-mask'), {
|
|
placeholder: placeholder,
|
|
completed: function completed() {
|
|
_this3.fieldNormalize(this);
|
|
}
|
|
}).on('blur.mask', function (e) {
|
|
//_this3.checkDirty(e.currentTarget);
|
|
});
|
|
});
|
|
};
|
|
|
|
Inputs.prototype.unsetTelMask = function() {
|
|
$('input[type=tel]').unmask();
|
|
};
|
|
|
|
Inputs.prototype.init = function init() {
|
|
this.checkAllInputs();
|
|
this.setMask();
|
|
this.setTelMask();
|
|
};
|
|
|
|
Inputs.prototype.refresh = function refresh() {
|
|
this.unsetTelMask();
|
|
this.init();
|
|
};
|
|
|
|
|
|
Inputs.prototype.fieldNormalize = function fieldNormalize(inputNode) {
|
|
inputNode = $(inputNode);
|
|
if (inputNode.length) {
|
|
//var parentNode = inputNode.parent();
|
|
inputNode.removeClass('kit-field--warning kit-field--success kit-field--error');
|
|
inputNode.siblings('.kit-field__message').html('');
|
|
}
|
|
return inputNode;
|
|
};
|
|
Inputs.prototype.showFieldError = function showFieldError(inputNode, msg) {
|
|
inputNode = this.fieldNormalize(inputNode);
|
|
if (inputNode.length) {
|
|
//var parentNode = inputNode.parent();
|
|
inputNode.addClass('kit-field--error');
|
|
inputNode.siblings('.kit-field__message').html(msg);
|
|
}
|
|
};
|
|
Inputs.prototype.showFieldSuccess = function showFieldSuccess(inputNode, msg) {
|
|
inputNode = this.fieldNormalize(inputNode);
|
|
if (inputNode.length) {
|
|
//var parentNode = inputNode.parent();
|
|
inputNode.addClass('kit-field--success');
|
|
inputNode.siblings('.kit-field__message').html(msg);
|
|
}
|
|
};
|
|
Inputs.prototype.showFieldWarning = function showFieldWarning(inputNode, msg) {
|
|
inputNode = this.fieldNormalize(inputNode);
|
|
if (inputNode.length) {
|
|
//var parentNode = inputNode.parent();
|
|
inputNode.addClass('kit-field--warning');
|
|
inputNode.siblings('.kit-field__message').html(msg);
|
|
}
|
|
};
|
|
Inputs.prototype.hideFieldError = function hideFieldError(inputNode) {
|
|
inputNode = $(inputNode);
|
|
if (inputNode.length) {
|
|
var parentNode = inputNode.parent();
|
|
inputNode.removeClass('kit-field--error');
|
|
inputNode.siblings('.kit-field__message').html('');
|
|
}
|
|
};
|
|
|
|
|
|
return Inputs;
|
|
}();
|
|
var Inputs = new __Inputs();
|
|
|
|
|
|
/**
|
|
* @class kit.toolkit
|
|
*/
|
|
var toolkit = {
|
|
Helper: Helper,
|
|
Select: Select(),
|
|
Config: Config,
|
|
Message: Message,
|
|
Inputs: Inputs,
|
|
};
|
|
|
|
|
|
Object.assign(module.exports, toolkit);
|
|
|
|
|
|
|
|
return module.exports;
|
|
});
|