pavel
11 years ago
parent
8b9d0921db
commit
f3d358a6d5
7 changed files with 52 additions and 2260 deletions
@ -1,240 +0,0 @@ |
|||||||
/** |
|
||||||
* Created by pavel.handleman@gmail.com on 15.10.2014. |
|
||||||
* commonly using snippets and functions. this module must be loaded on every page |
|
||||||
*/ |
|
||||||
var EXPO = EXPO || {}; //isolated namespace
|
|
||||||
//общий для всех страниц модуль Функционал общий для всех страниц
|
|
||||||
if (EXPO.common){ |
|
||||||
console.warn('WARNING: EXPO.common is already defined!'); |
|
||||||
}else { |
|
||||||
|
|
||||||
EXPO.common = (function () { |
|
||||||
// variables
|
|
||||||
var that = {}; |
|
||||||
var matches = function(el, selector) { |
|
||||||
return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector); |
|
||||||
}; |
|
||||||
that.settings = {}; //свойства по умолчанию
|
|
||||||
// Валидация форм, каждый объект содержит поля объектов формы и методы работы с формой
|
|
||||||
var Validation = function(obj){ |
|
||||||
//поля над которыми проводится валидация
|
|
||||||
this.fields = []; |
|
||||||
//флаг которые опдвтерждает отправку формы. если true то ошибок нет
|
|
||||||
this.allIsClear = false; |
|
||||||
this.ajaxUrl = obj.getAttribute('action'); |
|
||||||
this.DOM = obj; |
|
||||||
this._initFields(); |
|
||||||
this._eventController(); |
|
||||||
|
|
||||||
|
|
||||||
}; |
|
||||||
Validation.prototype = { |
|
||||||
//связывает данные объекта с html кодом
|
|
||||||
_eventController: function () { |
|
||||||
var self = this; |
|
||||||
if(this.DOM.addEventListener){ |
|
||||||
this.DOM.addEventListener("submit", function (event) { |
|
||||||
self.validate(); |
|
||||||
event.preventDefault(); |
|
||||||
return false; |
|
||||||
}, false); //Modern browsers
|
|
||||||
}else if(this.DOM.attachEvent){ |
|
||||||
this.DOM.attachEvent('onsubmit', function (event) { |
|
||||||
self.validate(); |
|
||||||
event.preventDefault(); |
|
||||||
return false; |
|
||||||
}); //Old IE
|
|
||||||
} |
|
||||||
}, |
|
||||||
//берет все поля с классом required
|
|
||||||
_initFields: function () { |
|
||||||
//this.fields = this.DOM.querySelectorAll('.required input');
|
|
||||||
|
|
||||||
}, |
|
||||||
//проводит валидацию, выводит сообщение об ошибках
|
|
||||||
validate: function () { |
|
||||||
var self = this, |
|
||||||
formData = $(self.DOM).serialize(), |
|
||||||
responseData, |
|
||||||
inputObj ={}, |
|
||||||
errBoxClass = 'err-message-box', |
|
||||||
DOMerrBox = self.DOM.querySelector('.'+errBoxClass), |
|
||||||
errBoxText = DOMerrBox.innerHTML, |
|
||||||
handler = function (data){ |
|
||||||
responseData = data; |
|
||||||
self.unHighlightFields(); |
|
||||||
if(responseData.success){ |
|
||||||
if(DOMerrBox){ |
|
||||||
EXPO.common.removeClass(DOMerrBox, 'active'); |
|
||||||
} |
|
||||||
window.location.reload(); |
|
||||||
}else{ |
|
||||||
EXPO.common.removeClass(DOMerrBox, 'active'); |
|
||||||
inputObj ={}; |
|
||||||
self.fields = []; |
|
||||||
for(var prop in responseData.errors) { |
|
||||||
if (!responseData.errors.hasOwnProperty(prop)) continue; |
|
||||||
if(prop != '__all__'){ |
|
||||||
inputObj ={'name':prop, 'id':'id_'+prop, 'errorText':responseData.errors[prop]}; |
|
||||||
//inputObj.name = prop;
|
|
||||||
//inputObj.id = 'id_'+prop;
|
|
||||||
//inputObj.errorText = responseData.errors[prop];
|
|
||||||
self.fields.push(inputObj); |
|
||||||
}else{ |
|
||||||
if(DOMerrBox){ |
|
||||||
EXPO.common.addClass(DOMerrBox, 'active'); |
|
||||||
if(errBoxText.indexOf(responseData.errors[prop]) < 0) { |
|
||||||
DOMerrBox.insertAdjacentHTML('beforeend', responseData.errors[prop]+' '); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
self.highliteFields(); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
}; |
|
||||||
self.unHighlightFields(); |
|
||||||
EXPO.common.postRequest(formData, self.ajaxUrl,handler); |
|
||||||
|
|
||||||
}, |
|
||||||
//подсвечивает неправильно введенные поля,
|
|
||||||
highliteFields: function () { |
|
||||||
var DOMfield, |
|
||||||
DOMfieldWrap; |
|
||||||
for(var i = 0; i < this.fields.length; i++){ |
|
||||||
DOMfield = this.DOM.querySelector('#'+ this.fields[i].id); |
|
||||||
DOMfieldWrap = DOMfield.parentNode; |
|
||||||
EXPO.common.addClass(DOMfieldWrap,'required'); |
|
||||||
EXPO.common.addClass(DOMfieldWrap,'err'); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
}, |
|
||||||
unHighlightFields: function () { |
|
||||||
var DOMfield, |
|
||||||
DOMfieldWrap; |
|
||||||
for(var i = 0; i < this.fields.length; i++){ |
|
||||||
DOMfield = this.DOM.querySelector('#'+ this.fields[i].id); |
|
||||||
DOMfieldWrap = DOMfield.parentNode; |
|
||||||
EXPO.common.removeClass(DOMfieldWrap,'required'); |
|
||||||
EXPO.common.removeClass(DOMfieldWrap,'err'); |
|
||||||
} |
|
||||||
}, |
|
||||||
submit: function () { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
}; |
|
||||||
//dependences
|
|
||||||
|
|
||||||
//private
|
|
||||||
$(function () { |
|
||||||
/* Нестандартное оформление для поля checkbox */ |
|
||||||
$.fn.customRadioCheck = function () { |
|
||||||
return $(this).each(function () { |
|
||||||
var $el = $(this); |
|
||||||
var type = $el.attr("type"); |
|
||||||
var $label = $el.closest("label"); |
|
||||||
var $customCheckbox = $el.wrap("<span class='custom-"+ type +"' />").parent(); |
|
||||||
$label.addClass("custom-radio-check"); |
|
||||||
function setState () { |
|
||||||
if (type == 'radio') { |
|
||||||
var name = $el.attr('name'); |
|
||||||
var $radios = $('input[type="radio"]').filter('[name="' + name + '"]'); |
|
||||||
$radios.each(function () { |
|
||||||
var $container = $(this).closest('.custom-radio'); |
|
||||||
$container.removeClass('checked'); |
|
||||||
if ($(this).is(':checked')) { |
|
||||||
$container.addClass('checked'); |
|
||||||
} |
|
||||||
}); |
|
||||||
} else { |
|
||||||
if ($el.prop("checked")) { |
|
||||||
$customCheckbox.addClass("checked"); |
|
||||||
} else { |
|
||||||
$customCheckbox.removeClass("checked"); |
|
||||||
} |
|
||||||
} |
|
||||||
$el.trigger('blur'); |
|
||||||
} |
|
||||||
setState(); |
|
||||||
$el.on("change", setState); |
|
||||||
}); |
|
||||||
}; |
|
||||||
var forms = []; |
|
||||||
$(function () { |
|
||||||
$('form.validate').each(function () { |
|
||||||
forms.push(new Validation(this)); |
|
||||||
}); |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
$("input[type='checkbox'], input[type='radio']").customRadioCheck(); |
|
||||||
}); |
|
||||||
|
|
||||||
// methods
|
|
||||||
//инициализация общих свойств
|
|
||||||
that.init = function (options) { |
|
||||||
$.extend(this.settings, options); |
|
||||||
var self = this; |
|
||||||
|
|
||||||
|
|
||||||
}; |
|
||||||
that.hasClass = function (DOM, className) { |
|
||||||
if (DOM.classList) |
|
||||||
return DOM.classList.contains(className); |
|
||||||
else |
|
||||||
return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); |
|
||||||
}; |
|
||||||
that.addClass = function (DOM, className) { |
|
||||||
if (!that.hasClass(DOM, className)) { |
|
||||||
if (DOM.classList) |
|
||||||
DOM.classList.add(className); |
|
||||||
else |
|
||||||
DOM.className += ' ' + className; |
|
||||||
} |
|
||||||
return DOM; |
|
||||||
}; |
|
||||||
that.removeClass = function (DOM, className) { |
|
||||||
var newClass = ' ' + DOM.className.replace(/[\t\r\n]/g, ' ') + ' '; |
|
||||||
if (that.hasClass(DOM, className)) { |
|
||||||
if (DOM.classList){ |
|
||||||
DOM.classList.remove(className); |
|
||||||
}else{ |
|
||||||
while (newClass.indexOf( ' ' + className + ' ') >= 0) { |
|
||||||
newClass = newClass.replace(' ' + className + ' ', ' '); |
|
||||||
} |
|
||||||
DOM.className = newClass.replace(/^\s+|\s+$/g, ' '); |
|
||||||
} |
|
||||||
} |
|
||||||
return DOM; |
|
||||||
}; |
|
||||||
//Jquery .closest analog for pure js
|
|
||||||
that.closest = function(el, className) { |
|
||||||
var fn = function(className){ |
|
||||||
return that.hasClass(el, className); |
|
||||||
}; |
|
||||||
while (el) { |
|
||||||
if (fn(className)) return el; |
|
||||||
el = el.parentNode; |
|
||||||
} |
|
||||||
}; |
|
||||||
//JQUERY .children alternative ie 9+
|
|
||||||
that.children = function (elm, sel){ |
|
||||||
var ret = [], i = 0, l = elm.childNodes.length; |
|
||||||
for (var i; i < l; ++i){ |
|
||||||
if (matches(elm.childNodes[i], sel)){ |
|
||||||
ret.push(elm.childNodes[i]); |
|
||||||
} |
|
||||||
} |
|
||||||
return ret; |
|
||||||
}; |
|
||||||
return that; |
|
||||||
}()); |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue