You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

754 lines
20 KiB

var EXPO = EXPO || {}; //isolated namespace
//общий для всех страниц модуль Функционал общий для всех страниц
// module requires JQuery library
// protection against duplication of a module code
if (EXPO.profile){
console.warn('WARNING: EXPO.profile is already defined!');
}else{
EXPO.profile = (function() {
// variables
var that = {};
that.opt = {
updateFormClass:'update-profile-form'
}; //default module setting
//language object
that.lang ={};
//dependences
var com = EXPO.common,
$waiter;
//private
/**
* Rating functional. Object stores data, HTML Instance of rating field, and can refresh its value
* @param {Object} opt - options for rating instance, like HTML Id and other
* @constructor
*/
function Rating(opt){
this.opt = opt;
this.$inst = $('#'+opt.id);
this.value = this.$inst.text;
}
Rating.prototype = {
/**
* refreshes value of HTML instance with new.
* @param {number} newRating - new profile rating value
*/
refresh: function (newRating) {
this.value = newRating;
this.$inst.text(this.value);
}
};
function Forms(){};
// methods to perform ajax responses to send and receive data from the server
// factory for on page form objects
Forms.prototype = {
// ajax request realization
getajax: function (dataToSend) {
var self = this;
if(!dataToSend){
dataToSend = '';
}
$.ajax({
type: 'POST',
url: self.ajaxPath,
data:dataToSend,
processData: false,
contentType: false,
success: function(data) {
self.pullHandler(data);
if(data.success){
EXPO.profile.rating.refresh(data.rating);
}
$('#wait-ajax').fadeOut();
}
});
},
// check if there exists custom data manipulation handler and evaluate it
pushData: function (data, formName) {
var handler = this.pushHandler,
formData = data;
if(typeof formData != "string"){
this.formData =formData;
}else{
this.formData = JSON.parse('{"' + decodeURI(formData).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
}
this.formId = formName;
if(typeof handler == 'function'){
// if particular data change required
this.formData = handler(data, formName);
this.getajax(data);
$('#wait-ajax').show();
} else{
this.getajax(data);
$('#wait-ajax').show();
}
},
pullData: function (data) {
var handler = this.pullHandler;
if(typeof handler == 'function'){
handler(data);
} else{
throw{
name: 'Error',
message: " handler function for processing response after form submit not defined, please define it!"
};
}
},
// method to fulfill edited inputs with new content
fulfillInputs: function () {
var self = this;
for (input in self.formData) {
if($('#id_'+input, $('#'+self.formId)).length > 0){
$('#id_'+input, $('#'+self.formId)).value(self.formData[input]);
}
if($('#static-'+input).length > 0){
$('#static-'+input).html();
}
}
},
/**
* refreshes form state: if value was entered by user, then there will be label with rhis value
* or there will be prompt to enter value
* @function
* @public
*/
refreshState: function () {
var pureText = $.trim( this.$staticValue.text()).replace(/[^0-9a-zA-Zа-я\s]/g,'').replace( /(\d)\s/, '' ).replace(/\s+/g,'');
if(($.trim( this.$staticValue.text()) == '' || pureText == 'NoneNone') && this.$wrapper.length && this.refrashable){
this.$editable.addClass('hidden');
this.$editable.removeClass(EXPO.profile.opt.formCurrentClass);
this.$description.removeClass('hidden');
}else if(this.$wrapper.length && this.refrashable){
this.$editable.removeClass('hidden');
this.$description.addClass('hidden');
}
}
};
Forms.factory = function (type, ajaxpath) {
var constr = type,
newForm;
if (typeof Forms[constr] !== 'function'){
throw{
name: 'Error',
message: constr + "doesen't exist"
};
}
if(typeof Forms[constr].prototype.pushData !== "function"){
Forms[constr].prototype = new Forms();
}
newForm = new Forms[constr](ajaxpath);
return newForm;
};
//# constructors for each indivivdual form
// please add functionality for new profile forms here
// pushHandler is for ajax to server, pullHandler for ajax from it. Data is the response information from server
// name of each method is equal 'id' attribute of <form/> element on the page.
Forms.home_form = function (path) {
var self = this;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
var country = $('#s2id_id_country').find('.select2-chosen').text(),
city = $('#s2id_id_city').find('.select2-chosen').text();
$('#static-home-country').text(country);
$('#static-home-city').text(city);
$('.p-editable').removeClass('pe-current');
this.refreshState();
}
};
this.ajaxPath = path;
};
Forms.name_form = function (path) {
var self = this;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
$('#static-name-value').text($('#id_last_name').val()+' '+$('#id_first_name').val());
$('.p-editable').removeClass('pe-current');
this.refreshState();
}
};
this.ajaxPath = path;
};
Forms.work_form = function (path) {
var self = this;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
var staticText,
work_fieldValue = $.trim($('#s2id_id_company').text());
if (data.success ){
staticText = $('#id_position').val();
if(work_fieldValue != '' && work_fieldValue != "Поиск компании"){
staticText += ' '+ EXPO.profile.opt.lang.workIn + ' '+work_fieldValue;
}
$('#static-work-value').text(staticText);
$('.p-editable').removeClass('pe-current');
this.refreshState();
}
};
this.ajaxPath = path;
};
Forms.phone_form = function (path) {
var self = this;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
$('#static-phone-value').text($('#id_phone')[0].value);
$('.p-editable').removeClass('pe-current');
this.refreshState();
}
};
this.ajaxPath = path;
};
Forms.web_page_form = function (path) {
var self = this;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
var userLink = $('#id_web_page').val();
$('#static-web-page-value').attr('href',userLink).text(userLink);
$('.p-editable').removeClass('pe-current');
this.refreshState();
}
};
this.ajaxPath = path;
};
Forms.about_form = function (path) {
var self = this;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
$('#static-about-value').html(com.nl2br($('#id_about').val()));
$('.p-editable').removeClass('pe-current');
this.refreshState();
}
};
this.ajaxPath = path;
};
Forms.social_form = function (path) {
var self = this,
$img, imgSrc, $input, inputValue;
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
for (item in self.formData) {
$input = $('#id_'+item);
$input.parent('.required').removeClass('err');
if($.trim(self.formData[item]) != '' && $input.length){
$img = $('#img-'+item);
if($img.length){
inputValue = $.trim($input.val());
if ($img.parent('a').length){
$img.parent('a').attr('href',inputValue);
imgSrc = $img.attr('src').replace('_hover','');
$img.attr('src',imgSrc);
}else {
imgSrc = $img.attr('src').replace('_hover','');
$img.attr('src',imgSrc);
$img.wrap('<a href="'+inputValue+'" target="_blank"></a>');
}
}
}else if($input.length){
$img = $('#img-'+item);
if ($img.parent('a').length){
imgSrc = $img.attr('src').replace('.png','_hover.png');
$img.attr('src',imgSrc);
$img.unwrap();
}
}
}
$('.p-editable').removeClass('pe-current');
this.refreshState();
}else {
for (item in data.errors) {
$input = $('#id_' + item);
$input.parent('.required').addClass('err');
$input.blur(function () {
$input.parent('.required').removeClass('err');
self.$form.submit();
});
}
}
};
this.pushHandler = function (data, formName){
var formData = $('#'+formName).serialize();
return JSON.parse('{"' + decodeURI(formData).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
};
this.refreshState = function () {
console.log(this);
var fullComplete = true;
$('input:text',this.$form).each(function () {
if($.trim($(this).val()) == ''){
fullComplete = false;
}
});
if(fullComplete){
$('.full-complete',this.$description).removeClass('hidden');
$('.not-complete',this.$description).addClass('hidden');
}else{
$('.full-complete',this.$description).addClass('hidden');
$('.not-complete',this.$description).removeClass('hidden');
}
};
this.ajaxPath = path;
};
Forms.avatar_form = function (path) {
var self = this,
$input = $('#id_avatar'),
$editPhoto = $('#pic-edit-photo'),
$pickBlock = $('#pick-block'),
$form,
$avatar = $('img',$pickBlock);
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
if($avatar.length){
$avatar.attr('src', data.url);
this.refreshState();
}
}
};
this.pushHandler = function(data){
if(typeof data != 'string'){
self.getajax(data);
$('#wait-ajax').show();
}else{
$form = $('#'+self.formId);
$form.off('submit');
$form.trigger('submit');
}
};
$input.on('change', function () {
$(this).parents('form').submit();
});
this.ajaxPath = path;
this.refreshState = function () {
if($.trim(this.$image.attr('src')) == this.noImageSrc){
this.$editable.addClass('hidden');
this.$description.removeClass('hidden');
}else{
this.$editable.removeClass('hidden');
this.$description.addClass('hidden');
}
}
};
/**
* add new company form init
* @param path
*/
Forms.create_company_form = function (path) {
var self = this,
containerClass = 'pwf-field';
/**
* callback after successful request to the server
* @param data -data object recieved from server
*/
this.pullHandler = function (data) {
if (data.success){
location.reload();
}else{
for ( var key in data.errors) {
if (data.errors.hasOwnProperty(key)) {
$('input[name="' + key + '"], select[name="' + key + '"]', self.$form).closest('.'+containerClass).addClass('err');
$waiter.hide();
}
}
}
};
this.ajaxPath = path;
};
// methods
//инициализация общих свойств
that.init = function(options) {
$.extend(this.lang, options.lang);
//options.lang = null;
$.extend(this.opt, options);
var self = this,
initMaskedInput = function (inputId) {
var maskList = $.masksSort($.masksLoad("/static/client/js/plugins/inputmask/phone-codes.json"), ['#'], /[0-9]|#/, "mask"),
maskOpts = {
inputmask: {
definitions: {
'#': {
validator: "[0-9]",
cardinality: 1
}
},
showMaskOnHover: false,
insertMode:false,
autoUnmask: true
},
insertMode:false,
match: /[0-9]/,
replace: '#',
list: maskList,
listKey: "mask",
onMaskChange: function(maskObj, determined) {
$(this).attr("placeholder", '+_(___)___-__-__');
}
},
selector = '#'+inputId;
$(selector).inputmasks(maskOpts);
};
this.rating = new Rating(this.opt.rating);
this.forms = {};
$(function () {
var $editables = $('.'+self.opt.editableClass),
$country = $('#'+self.opt.selectBox[0].id),
$city = $('#'+self.opt.selectBox[2].id),
$companyUrl = $("#id_url");
$waiter = $('#wait-ajax').css({'z-index': '8012'});
/**
* <selectbox> styling with 3-rd party libs
*/
/**
* select country
*/
$country.select2({
width: 'element'
});
$country.on("change", function () {
$city.val(0);
$city.select2("val", "");
});
/**
* select theme
*/
$('#'+self.opt.selectBox[1].id).select2({
width: 'element',
placeholder: self.opt.selectBox[1].placeholder,
maximumSelectionSize: 3
});
/**
* select city
*/
$city.select2({
placeholder: self.opt.selectBox[2].placeholder,
width: 'element',
ajax: {
url: self.opt.selectBox[2].path,
dataType: "json",
quietMillis: 200,
data: function(term, page, country){
var country = $('#'+self.opt.selectBox[0].id).val();
return {term: term,
page: page,
country: country};
},
results: function (data) {
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id,
text: item.label
});
});
return {results: results};
}
},
initSelection : function(element, callback) {
var id= $(element).val();
var text = $(element).attr('data-init-text');
callback({id: id, text:text});
}
});
$('#'+self.opt.selectBox[3].id).select2({
placeholder: self.opt.selectBox[3].placeholder,
width: '200px',
minimumInputLength: 1,
ajax: {
url: self.opt.selectBox[3].path,
dataType: "json",
quietMillis: 200,
data: function(term, page, country){
return {term: term,
page: page};
},
results: function (data) {
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id,
text: item.label
});
});
return {results: results};
}
},
initSelection : function(element, callback) {
var id= $(element).val();
var text = $(element).attr('data-init-text');
callback({id: id, text:text});
}
});
// make mask on phone field input
initMaskedInput(self.opt.phoneBox);
//forms init
$('.'+self.opt.updateFormClass).each(function () {
var formName = $(this).attr('id'),
path = $(this).attr('action'),
inputData,
$wrapper = $(this).closest('.'+self.opt.formWrapperClass),
$staticValue = $('.'+self.opt.staticValueClass, $wrapper),
$description = $('.'+self.opt.descriptionClass, $wrapper),
$editable = $('.'+self.opt.editableClass, $wrapper),
$closeButton = $('.'+self.opt.closeButtonClass, $wrapper),
$image = $('.'+self.opt.avatarImageClass, $wrapper);
//make and initialize form objects
self.forms[formName] = Forms.factory(formName,path);
if($('.'+self.opt.editButtonClass, $wrapper).hasClass('no-refresh')){
self.forms[formName].refrashable = false;
}else{
self.forms[formName].refrashable = true;
}
self.forms[formName].$form = $(this);
self.forms[formName].$wrapper = $wrapper;
self.forms[formName].$staticValue = $staticValue;
self.forms[formName].$description = $description;
self.forms[formName].$editable = $editable;
/**
* Send proper information if there is image. mainly for avatar editing
*/
if($image.length){
self.forms[formName].$image = $image;
self.forms[formName].noImageSrc = self.opt.noImageSrc;
}
// todo:временно отключил
//self.forms[formName].refreshState();
// submit events handler
$(this).off('submit');
$(this).on('submit', function () {
//check if formData is supported
$waiter.show();
if ( window.FormData && ("upload" in ($.ajaxSettings.xhr())) ){
inputData = new FormData(this);
self.forms[formName].pushData(inputData, formName);
} else {
inputData = $(this).serialize();
self.forms[formName].pushData(inputData, formName);
}
return false;
});
$closeButton.on('click', function() {
$editable.removeClass(self.opt.formCurrentClass);
self.forms[formName].refreshState();
return false;
});
if($('.'+self.opt.avatarButtonClass, $wrapper).length){
/**
* avatar image choose button
*/
$('.'+self.opt.editButtonClass+','+' .'+self.opt.avatarButtonClass, $wrapper).on('click', function () {
var $input = $('#'+self.opt.avatarInputId);
$input.trigger('click');
return false;
});
}else{
/**
* edit button
*/
$('.'+self.opt.editButtonClass+', .'+self.opt.avatarButtonClass, $wrapper).on('click', function () {
//close other active editable forms
var $wrapper = $(this).closest('.'+self.opt.formWrapperClass),
formId = $wrapper.find('.'+self.opt.updateFormClass).attr('id'),
$description = $wrapper.find('.'+self.opt.descriptionClass),
$editable = $wrapper.find('.'+self.opt.editableClass);
$editables.each(function () {
var $wrapper = $(this).closest('.'+self.opt.formWrapperClass),
formId = $wrapper.find('.'+self.opt.updateFormClass).attr('id'),
$description = $wrapper.find('.'+self.opt.descriptionClass),
$editable = $wrapper.find('.'+self.opt.editableClass);
if($(this).hasClass(self.opt.formCurrentClass)){
if(self.forms[formId].refrashable){
self.forms[formId].refreshState();
$editable.removeClass(EXPO.profile.opt.formCurrentClass);
}else{
$editable.removeClass(self.opt.formCurrentClass);
}
}
});
if(self.forms[formId].refrashable){
$editable.removeClass('hidden');
$description.addClass('hidden');
}else{
}
$editable.addClass(self.opt.formCurrentClass);
$(document).on('click.form', function(event) {
var targetObj = $(event.target);
if (targetObj.parents().filter('.e-form').length < 1) {
$editable.removeClass(self.opt.formCurrentClass);
self.forms[formName].refreshState();
$(document).off('click.form');
}
});
return false;
});
}
});
/**
* add new company modal window trigger
*/
$('#'+self.opt.addCompanyButtonId).on('click', function (event) {
event.preventDefault();
$.fancybox.open('#'+ self.opt.addCompany.modalId);
return false;
});
/**
* add company url placeholder
*/
$companyUrl.on('focus', function () {
var $this = $(this),
placeholder = self.opt.companyAddInputMask;
if($.trim($this.val()) == ''){
$this.val(placeholder);
}
return false;
});
$companyUrl.on('click', function () {
if (this.setSelectionRange && $.trim($(this).val()) == self.opt.companyAddInputMask){
var len = $(this).val().length;
this.setSelectionRange(len, len);
}
});
$companyUrl.on('keypress', function () {
var $this = $(this),
placeholder = self.opt.companyAddInputMask;
if($.trim($this.val()) == ''){
$this.val(placeholder);
}
});
$companyUrl.on('blur', function () {
var $this = $(this),
placeholder = self.opt.companyAddInputMask;
if($.trim($this.val()) == placeholder){
$this.val('');
}
});
/**
* show phone to all checkbox
*/
//$('#id_show_phone').on("change", function () {
// if ($(this).prop("checked")){
// $(this).closest(".custom-radio-check").addClass("active");
// }else{
// $(this).closest(".custom-radio-check").removeClass("active");
// }
//});
});
};
return that;
}());
}