profile.js

$(function(){

    var ProfileEdit = (function(){
        var ProfileEdit = function($element) {

            if (typeof($element) === 'string') {
                this.$element = $($element);
            } else if ($element) {
                this.$element = $element;
            }

            if (!this.$element) {
                console.error("No element selected" + (typeof($element) === 'string') ? ' by "' + $element + '"' : '');
                return false;
            }

            this.$edit = $('.btn-edit-data', this.$element);

            if(this.$element.is('#city')) {
                this.$element.hide();
            }

            this.$template = HandlebarsService.getJQueryFromNode('#handlebars-profile-edit-' + (this.$element.data('profile-edit-type')));

            if (!this.$template.length) {
                this.$template = $('#handlebars-profile-edit-input');
            }

            this.$template.appendTo($('.row', this.$element));

            this.$editBlockUserData = $('.edit-block-user-data', this.$element);

            this.$buttonSave = $('button', this.$template).eq(0);
            this.$buttonCancel = $('button', this.$template).eq(1);

            this.$errorList = $('.error-list input', this.$element);
            this.valid = false;

            this.openEditBlockFlag = false;

            this.init();
        };
        $.extend(ProfileEdit.prototype, {

            init: function() {
                this.initElements();
                this.popListeners();
                this.initListeners();
                this.pushListeners();
            },
            initElements: function() {},
            initListeners: function() {
                if (!!this.$edit.length) {
                    this.$edit.on('click.profile-edit', this.onEditClickDefault.bind(this));
                }

                if (!!this.$buttonSave.length) {
                    this.$buttonSave.on('click.profile-edit', this.onButtonSaveClickDefault.bind(this));
                }

                if (!!this.$buttonCancel.length) {
                    this.$buttonCancel.on('click.profile-edit', this.onButtonCancelClickDefault.bind(this));
                }

                $(document).on('open-edit-block.profile-edit', this.onOpenEditBlockDefault.bind(this));
            },
            popListeners: function() {},
            pushListeners: function() {},
            validate: function() {
                return this.valid = true;
            },
            getValidateFoo: function(foo) {
                var validateFoo = function(){return false;};
                var fooName = '';
                foo = foo || '';
                foo = foo.toString();

                if (!!foo.length) {
                    fooName = 'validate' + foo.charAt(0).toUpperCase() + foo.substr(1);
                } else {
                    console.error('Foo name is empty');
                    return validateFoo;
                }

                if (this[fooName]) {
                    if (typeof(this[fooName]) === 'function') {
                        return this[fooName];
                    } else {
                        console.error('"' + foo + '" not a function');
                    }
                } else {
                    console.error('Validate foo with name "' + foo + '" not found');
                    return validateFoo;
                }

                return validateFoo;
            },

            // validateField: function($field) {
            // 	var $errorList = $('.error-list input', $field.parent());

            // 	$errorList.each(function(index, value) {
            // 		var $err = $(value);

            // 		if ($err.data('regexp')) {
            // 			this.valid = $field.text().match(new RegExp($err.data('regexp'))) === null ? true : false;
            // 		} else if ($err.data('foo')) {
            // 			this.valid = this.getValidateFoo($err.data('foo'))($field);
            // 		}

            // 		if (!this.valid) {
            // 			this.enableErrorLabel($f, );
            // 		}

            // 		return !this.valid;
            // 	}.bind(this));
            // },

            validateIsEmpty: function($field) {
                return !!$field.length && (!!$field.val().length || !!$field.text().lengt) ? true : false;
            },
            validateByRegExp: function($field, regexp) {
                var str = '';
                $field = $field || null;
                regexp = regexp || '';
                regexp = regexp.toString();

                if ($field === null || !$field.length) {
                    console.error('Bad $field');
                    return false;
                }

                return ($field.text() || $field.val()).match(new RegExp(regexp)) === null ? true : false;
            },
            onEditClickDefault: function(e) {
                this.openEditBlock(e);
            },
            onButtonSaveClickDefault: function(e) {
                if (this.valid) {
                    this.closeEditDefault(e);
                }
                e.preventDefault();
            },
            onButtonCancelClickDefault: function(e) {
                this.closeEditDefault(e);
                e.preventDefault();
            },
            closeEditDefault: function(e) {
                this.$element.removeClass('open-edit-block');
            },
            onOpenEditBlockDefault: function(e) {
                if (this.openEditBlockFlag === true) {
                    this.openEditBlockFlag = false;
                } else {
                    this.closeEditDefault(e);
                    e.preventDefault();
                }
            },
            openEditBlock: function(e) {
                this.$element.addClass('open-edit-block');
                e.preventDefault();
                this.openEditBlockFlag = true;
                $(document).trigger('open-edit-block.profile-edit');
            },
            enableErrorLabel: function($field, message) {
                var $errorLabel = $field.next();

                $errorLabel.text(message);
                $field.parent().addClass('input-text-holder-error');
            },
            disableErrorLabel: function($field) {
                $field.parent().removeClass('input-text-holder-error');
                $field.next().text('');
            }
        });
        return ProfileEdit;
    })();

    var ProfileCustomSelectEdit = (function(){
        var ProfileCustomSelectEdit = function() {
            ProfileCustomSelectEdit.parent.constructor.apply(this, arguments);
        };
        __extend(ProfileCustomSelectEdit, ProfileEdit);
        $.extend(ProfileCustomSelectEdit.prototype, {
            initElements: function() {

                this.$input = $('.user-data-item', this.$element);

                this.$customSelect      = $('.custom-select-block', this.$element);
                this.$customSelectLabel = $('.profile-edit-custom-select', this.$customSelect);

                this.$customSelectLabel.dropdown();
                this.$customSelect.customSelect();

                this.onLoadDocument();
            },

            popListeners: function() {
                this.$buttonSave.on('click', this.onButtonSaveClick.bind(this));
                this.$edit      .on('click', this.onEditClick.bind(this)      );
            },

            onLoadDocument: function(e){
                if(this.$element.is('#country')){

                    if(this.$input[0].innerText != ""){

                        var val      = this.$input[0].innerText,
                            cityList = this.$element.find('.option-list a'),
                            result;

                        this.valid = true;

                        for ( counter = 0, _len = cityList.length; counter < _len; counter += 1 ) {
                            if ( val === $(cityList[counter]).text()) {
                                result = $(cityList[counter]).data('id');
                                break;
                            }
                        }

                        var output = [];

                        $.ajax({
                            url: '/sodabox_resources/php/clubFiltersData.php?dataType=city&parentId=' + result,
                            success: function(fromServer) {
                                for( var city in fromServer) {
                                    output+= '<li><a href="#" data-value="' + fromServer[city] + '">' + fromServer[city] + '</a></li>';
                                }

                                $('#city').show().find('.option-list').html(output);
                            }
                        });
                    }
                }
            },

            onButtonSaveClick: function(e) {

                var val         = this.$customSelectLabel.text(),
                    dataVal     = this.$customSelectLabel.data('value'),
                    cityList    = this.$element.find('.option-list a'),
                    cityName    = $('#city').find('.user-data-item').text(),
                    countryName = this.$input.text(),
                    output      = [],
                    data        = {},
                    result;
                console.log(cityName);
                this.valid = true;
                this.$input.text(val);

                for ( counter = 0, _len = cityList.length; counter < _len; counter += 1 ) {
                    if (val === $(cityList[counter]).text()) {
                        result = $(cityList[counter]).data('id');
                        break;
                    }
                }

                data[this.$customSelect.data('name') || 'SELECT'] = dataVal;

                if(this.$element.is('#country')) {

                    if(val == countryName){
                        $('#city').find('.user-data-item').text(cityName);
                        data['PERSONAL_CITY'] = cityName;
                        return false;
                    }

                    $.ajax({
                        url: '/sodabox_resources/php/clubFiltersData.php?dataType=city&parentId=' + result,
                        success: function(fromServer) {

                            if(fromServer.empty){
                                $('#city').slideUp().find('.option-list').html(output);
                                $(document).trigger('save-data.profile-controller');
                                return false;
                            }else{

                                for( var city in fromServer) {
                                    output+= '<li><a href="#" data-value="' + fromServer[city] + '">' + fromServer[city] + '</a></li>';
                                }

                                $('#city').find('.user-data-item').text('');
                                data['PERSONAL_CITY'] = 'Все города';
                                $('#city').slideDown(600).find('.option-list').html(output);

                                $(document).trigger('save-data.profile-controller', data);
                            }
                        }
                    });
                }

                $(document).trigger('save-data.profile-controller', data);
            },

            onEditClick : function(e) {
                this.$customSelectLabel.text(this.$input.text());
            }
        });
        return ProfileCustomSelectEdit;
    })();

    var ProfileAddressEdit = (function() {
        var ProfileAddressEdit = function() {
            ProfileAddressEdit.parent.constructor.apply(this, arguments);
        };
        __extend(ProfileAddressEdit, ProfileEdit);
        $.extend(ProfileAddressEdit.prototype, {
            initElements: function() {
                this.$editAddress = $('.btn-edit-address', this.$element);

                this.labels = {
                    $city: $('.user-city', this.$element),
                    $street: $('.user-street', this.$element),
                    $house: $('.user-house', this.$element),
                    $building: $('.user-building', this.$element),
                    $entrance: $('.user-entrance', this.$element),
                    $level: $('.user-level', this.$element),
                    $flat: $('.user-flat', this.$element)
                };

                this.inputs = {
                    $city: $('.input-text-city', this.$template),
                    $street: $('.input-text-street', this.$template),
                    $house: $('.input-text-house', this.$template),
                    $building: $('.input-text-building', this.$template),
                    $entrance: $('.input-text-entrance', this.$template),
                    $level: $('.input-text-level'),
                    $flat: $('.input-text-flat', this.$template)
                };

                this.$errorList = $('.error-list input', this.$element);
            },
            popListeners: function() {
                this.$editAddress.on('click.profile-address-edit', this.onEditAddressClick.bind(this));
                this.$buttonSave.on('click.profile-address-edit', this.onButtonSaveClick.bind(this));
            },
            pushListeners: function() {
                this.$buttonCancel.on('click.profile-address-edit', this.onButtonCancelClick.bind(this));
            },
            onEditAddressClick: function(e) {
                for (var id in this.labels) {
                    this.disableErrorLabel(this.inputs[id]);
                    this.inputs[id].val(this.labels[id].text());
                }

                this.openEditBlock(e);
            },
            onButtonSaveClick: function(e) {
                if (this.validate()) {
                    for (var id in this.inputs) {
                        this.labels[id].text(this.inputs[id].val());
                    }
                }
            },
            onButtonCancelClick: function(e) {
                $(document).trigger('remove.profile-address-edit', [this.$element]);
            },
            validate: function() {
                this.valid = true;

                this.$errorList.each(function(index, value) {
                    var $err = $(value);
                    var $input = this.inputs['$' + $err.data('target')];

                    if ($err.data('regexp')) {
                        this.valid = this.validateByRegExp($input, $err.data('regexp'));
                    } else if ($err.data('foo')) {
                        this.valid = this.getValidateFoo($err.data('foo'))($input);
                    }

                    if(!this.valid) {
                        this.enableErrorLabel($input, $err.data('message'));
                    }

                    return this.valid;
                }.bind(this));

                return this.valid;
            }
        });
        return ProfileAddressEdit;
    })();
    var ProfileInputEdit = (function() {
        var ProfileInputEdit = function() {
            ProfileInputEdit.parent.constructor.apply(this, arguments)
        };
        __extend(ProfileInputEdit, ProfileEdit);
        $.extend(ProfileInputEdit.prototype, {
            initElements: function(e) {
                this.$input = $('.user-data-item', this.$element);
                this.$inputEdit = $('.input-text', this.$element);
                this.$inputEdit.attr('placeholder', this.$input.data('placeholder') || '');
            },
            popListeners: function() {
                this.$buttonSave.on('click.profile-input-edit', this.onButtonSaveClick.bind(this));
                this.$buttonCancel.on('click.profile-input-edit', this.onButtonCancelClick.bind(this));
                this.$edit.on('click.profile-input-edit', this.onEditClick.bind(this));
                this.$inputEdit.on('keydown.profile-input-edit', this.onInputEditKeyDown.bind(this));
            },

            onButtonSaveClick: function(e) {
                var data = {};
                if (this.validate()) {
                    this.$input.text(this.$inputEdit.val());
                    data[this.$input.data('name') || 'name'] = this.$input.text();
                    $(document).trigger('save-data.profile-controller', [data]);
                }
            },
            onButtonCancelClick: function(e) {
                // this.disableErrorLabel(this.$inputEdit);
            },
            onEditClick: function(e) {
                this.disableErrorLabel(this.$inputEdit);
                this.$inputEdit.val(this.$input.text());
            },
            onInputEditKeyDown: function(e) {
                this.disableErrorLabel(this.$inputEdit);
            },

            validate: function() {
                this.valid = true;

                this.$errorList.each(function(index, value) {
                    var $err = $(value);

                    if ($err.data('regexp')) {
                        this.valid = this.validateByRegExp(this.$inputEdit, $err.data('regexp'));
                    } else if ($err.data('foo')) {
                        this.valid = this.getValidateFoo($err.data('foo'))(this.$inputEdit);
                    }

                    if (!this.valid) {
                        this.enableErrorLabel(this.$inputEdit, $err.data('message'));
                    }

                    return this.valid;
                }.bind(this));

                return this.valid;
            }
        });
        return ProfileInputEdit;
    })();
    var ProfilePasswordEdit = (function() {
        var ProfilePasswordEdit = function() {
            ProfilePasswordEdit.parent.constructor.apply(this, arguments);
        };
        __extend(ProfilePasswordEdit, ProfileEdit);
        $.extend(ProfilePasswordEdit.prototype, {
            initElements: function() {
                this.$editPassword = $('.show-edit-password', this.$element);
            },
            popListeners: function() {
                this.$editPassword.on('click', this.onEditPasswordClick.bind(this));
            },
            onEditPasswordClick: function(e) {
                this.openEditBlock(e);
            }
        });
        return ProfilePasswordEdit;
    })();
    var ProfileLoginEdit = (function() {
        var ProfileLoginEdit = function() {
            ProfileLoginEdit.parent.constructor.apply(this, arguments);
        };
        __extend(ProfileLoginEdit, ProfileEdit);
        return ProfileLoginEdit;
    })();
    var ProfileAbout = (function(){
        var ProfileAbout = function() {
            this.$element = $('#about-me-tab .user-profile-data-box');

            this.$aboutText = $('.user-profile-data-box-text p', this.$element);
            this.$aboutTextarea = $('.user-profile-data-box-textarea', this.$element);

            this.$edit = $('.btn-edit-data', this.$element);

            this.$buttonSave = $('.edit-block-button-holder button', this.$element).eq(0);
            this.$buttonCancel = $('.edit-block-button-holder button', this.$element).eq(1);

            this.init();
        };
        $.extend(ProfileAbout.prototype, {
            init: function() {
                this.initListeners();
            },
            initListeners: function() {
                this.$edit.on('click', this.onEditClick.bind(this));
                this.$buttonSave.on('click', this.onButtonSaveClick.bind(this));
                this.$buttonCancel.on('click', this.onButtonCancelClick.bind(this))
            },
            onEditClick: function(e) {
                this.$aboutTextarea.val(this.$aboutText.text());
                this.$element.addClass('open-edit-block');
            },
            onButtonSaveClick: function(e) {
                var data = {};
                this.$aboutText.text(this.$aboutTextarea.val());
                this.$element.removeClass('open-edit-block');

                data[this.$aboutText.data('name')] = this.$aboutText.text();
                $(document).trigger('save-data.profile-controller', [data]);

                e.preventDefault();
            },
            onButtonCancelClick: function(e) {
                this.$element.removeClass('open-edit-block');
                e.preventDefault();
            }
        });
        return new ProfileAbout();
    })();
    var ProfileController = (function() {
        var ProfileController = function() {
            if ($('body').attr('id') === 'profile-page') {
                this.$profile = $('.main');

                this.$addressLabel = $('.add-new-address-label', this.$profile);
                this.$addressAddBox = $('.add-address-box-holder', this.$profile);
                this.$addressAdd = $('.add-new-address', this.$profile);
                this.addressCounter = $('.edit-address-box-holder', this.$profile).length;

                this.$contactForm = $('.user-profile-data-box-contacts form', this.$profile);

                if (__GLOBALS['profile-default-tab-id']) {
                    $('.user-profile-tab-content').addClass('hide');
                    $('#' + __GLOBALS['profile-default-tab-id']).removeClass('hide');
                    $('#' + __GLOBALS['profile-default-tab-id'] + '-link').trigger('click');
                }

                this.$menu = $('.tabset', this.$profile);

                this.bitrixFields = {};
                $('.bitrix-hidden-fields input').each(function(index, value){
                    var $hidden = $(value);
                    this.bitrixFields[$hidden.attr('name')] = $hidden.attr('value');
                }.bind(this));

                this.$recordsWrapper = $('.threecolumns', this.$profile);
                this.recordsInit = false;

                this.profileBlockUsername = {
                    $name: $('.profile-block-name', this.$profile),
                    $lastname: $('.profile-block-lastname', this.$profile)
                };

                this.init();
            } else {
                return false;
            }
        };
        $.extend(ProfileController.prototype, {
            init: function() {
                this.initListeners();
                this.initEditFields();
                this.initAddress();
                this.initPosts();
            },
            initListeners: function() {
                this.$addressAdd.on('click.profile-controller'    , this.onAddressAddClick.bind(this));
                this.$menu      .on('click.profile-controller'    , this.onMenuClick      .bind(this));
                $(document)     .on('save-data.profile-controller', this.onSaveData       .bind(this));
            },
            initEditFields: function() {
                $('.wrap', this.$profile).each(function(index, value) {
                    var $wrap = $(value);

                    switch($wrap.data('profile-edit-type')) {
                        case 'input':
                            new ProfileInputEdit($wrap);
                            break;
                        case 'password':
                            new ProfilePasswordEdit($wrap);
                            break;
                        case 'custom-select':
                            new ProfileCustomSelectEdit($wrap);
                            break;
                        case 'custom-select-country':
                            new ProfileCustomSelectEdit($wrap);
                            break;
                        case 'custom-select-city':
                            new ProfileCustomSelectEdit($wrap);
                            break;
                        case 'address':
                            new ProfileAddressEdit($wrap);
                            break;
                    }
                });
            },
            initAddressListeners: function() {
                $(document).trigger('remove.profile-address-edit', [this.$element]);
                $(document).on('remove.profile-address-edit', this.onAddressRemove.bind(this));
            },
            initAddress: function() {
                if (this.addressCounter === 0) {
                    this.enableAddressLabel();
                }

                this.initAddressListeners();
            },
            initPosts: function() {
                var mobile = 0;
                var $container = $('#postsList').masonry({
                    columnWidth: 304,
                    gutter: 16,
                    itemSelector: '.box'
                });

                var page = 0;
                var loading = false;
                var allDone = false;
            },
            enableAddressLabel: function() {
                this.$addressLabel.text(this.$addressLabel.data('text')).removeClass('hide');
            },
            disableAddressLabel: function() {
                this.$addressLabel.text('&nbsp;').addClass('hide');
            },
            onAddressAddClick: function(e) {
                e.preventDefault();
                this.insertAddressNode();
            },
            onAddressRemove: function(e, $address) {
                var counter = 1;

                this.addressCounter--;

                $address.remove();
                // $('.address-label', this.$profile).text('Адрес ' + counter++ + ':');g
                $('.address-label', this.$profile).each(function(index, value) {
                    var $label = $(value);
                    $label.text('Адрес ' + counter++ + ':');
                });

                if (this.addressCounter === 0) {
                    this.enableAddressLabel();
                }
            },
            onMenuClick: function(e) {
                var $target = $(e.target);

                if ($target.hasClass('btn-my-records')) {
                    this.recordsInit = true;

                    $(document).trigger('do-load.profile-page');
                }
            },
            onSaveData: function(e, data, successCallback, errorCallback) {

                var name = data['NAME'] || '';
                var lastname = data['LAST_NAME'] || '';

                if (!!name.length) {
                    this.profileBlockUsername.$name.text(name);
                }

                if (!!lastname.length) {
                    this.profileBlockUsername.$lastname.text(lastname);
                }

                this.ajax(data || {}, successCallback, errorCallback);
            },

            ajax: function(data, successCallback, errorCallback) {
                $.ajax({
                    url: __GLOBALS['profile-post-url'] || '',
                    type: 'post',
                    data: $.extend(data || {}, this.bitrixFields),
                    success: (successCallback || function(){}).bind(this),
                    error: (errorCallback || function(){}).bind(this)
                });
            },

            getAddressNode: function() {
                return HandlebarsService.getJQueryFromNode('#handlebars-profile-edit-address-wrap', {addressCounter: ++this.addressCounter});
            },
            insertAddressNode: function($address) {
                $address = $address || this.getAddressNode();
                $(document).trigger('open-edit-block.profile-edit');

                this.disableAddressLabel();
                $address.addClass('open-edit-block').insertBefore(this.$addressAddBox);

                new ProfileAddressEdit($address);
            }
        });
        return new ProfileController();
    })();
    var ProfileEmailEdit = (function() {
        var ProfileEmailEdit = function() {
            ProfileEmailEdit.parent.constructor.apply(this, arguments);
        };
        __extend(ProfileEmailEdit, ProfileEdit);
        return ProfileEmailEdit;
    })();
    var ProfilePhoneEdit = (function() {
        var ProfilePhoneEdit = function() {
            ProfilePhoneEdit.parent.constructor.apply(this, arguments);
        };
        __extend(ProfilePhoneEdit, ProfileEdit);
        return ProfilePhoneEdit;
    })();
});