619 lines
16 KiB
JavaScript
619 lines
16 KiB
JavaScript
if(typeof window.JIconset === 'undefined'){
|
|
window.JIconset = function(rand, code, arConfig){
|
|
this.rand = rand;
|
|
this.code = code;
|
|
this.config = {};
|
|
|
|
this.popup = false;
|
|
this.block = false;
|
|
this.form = false;
|
|
this.selectButton = false;
|
|
|
|
this.eventListners = [];
|
|
|
|
if(typeof arConfig === 'object'){
|
|
this.config = arConfig;
|
|
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
window.JIconset.prototype = {
|
|
init: function(){
|
|
var that = this;
|
|
|
|
BX.ready(function(){
|
|
if(that.block = BX('iconset-' + that.rand)){
|
|
that.block.iconset = that;
|
|
|
|
if(that.popup = that.block.closest('.bx-core-window')){
|
|
that.selectButton = that.popup.querySelector('.adm-btn-save[id=iconset_button--select]');
|
|
if(!that.popup.querySelector('.iconset_item--selected')){
|
|
that.disableSelectButton();
|
|
}
|
|
}
|
|
|
|
if(that.form = that.block.querySelector('.iconset_form')){
|
|
that.formUrl = that.form.getAttribute('action') || location.href
|
|
}
|
|
|
|
that.bindEvents();
|
|
}
|
|
});
|
|
},
|
|
|
|
bindEvents: function(){
|
|
var that = this;
|
|
|
|
if(
|
|
typeof that.onDocClick !== 'function' &&
|
|
that.block
|
|
){
|
|
// live click on document
|
|
that.onDocClick = function(e){
|
|
if(!e){
|
|
e = window.event;
|
|
}
|
|
|
|
var target = e.target || e.srcElement;
|
|
|
|
var block = target.closest('#iconset-' + that.rand);
|
|
if(block){
|
|
// is click on delete button
|
|
var buttonDelete = target.closest('.iconset_btn--delete');
|
|
if(buttonDelete){
|
|
var icon = buttonDelete.closest('.iconset_item');
|
|
if(icon){
|
|
var id = BX.data(buttonDelete.closest('.iconset_item'), 'id');
|
|
var value = BX.data(buttonDelete.closest('.iconset_item'), 'value');
|
|
that.deleteIcon(id, value, function(bSuccess){
|
|
if(bSuccess){
|
|
BX.addClass(icon, 'iconset_item--deleted');
|
|
|
|
// wait animation 0.5s
|
|
setTimeout(function(){
|
|
BX.remove(icon);
|
|
}, 490);
|
|
|
|
if(that.popup){
|
|
if(!that.popup.querySelector('.iconset_item--selected')){
|
|
that.disableSelectButton();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
else{
|
|
// is click on item
|
|
var item = target.closest('.iconset_item');
|
|
if(item){
|
|
var items = Array.prototype.slice.call(item.parentNode.children);
|
|
for(var i in items){
|
|
if(items[i] === item){
|
|
BX.addClass(items[i], 'iconset_item--selected');
|
|
}
|
|
else{
|
|
BX.removeClass(items[i], 'iconset_item--selected');
|
|
}
|
|
}
|
|
|
|
that.enableSelectButton();
|
|
}
|
|
else{
|
|
// is click on load button
|
|
var buttonLoad = target.closest('.iconset_btn--load');
|
|
if(buttonLoad){
|
|
if(that.form){
|
|
BX.fireEvent(that.form, 'submit');
|
|
}
|
|
}
|
|
else{
|
|
var subtabs = target.closest('.adm-detail-subtabs');
|
|
if(subtabs){
|
|
var addIconTab = that.block.querySelector('.adm-detail-subtabs[id=view_tab_iconset_add_icon]');
|
|
if(addIconTab){
|
|
if(BX.hasClass(addIconTab, 'adm-detail-subtab-active')){
|
|
that.disableSelectButton();
|
|
}
|
|
else{
|
|
that.enableSelectButton();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener('click', that.onDocClick);
|
|
|
|
// sumbmit form
|
|
if(that.form){
|
|
that.onFormSubmit = function(e){
|
|
if(!e){
|
|
e = window.event;
|
|
}
|
|
|
|
BX.PreventDefault(e);
|
|
|
|
var errorMessage = '';
|
|
var fd = new FormData();
|
|
|
|
fd.set('code', that.code);
|
|
fd.set('value', that.form.querySelector('input[name=value]').value);
|
|
fd.set('action', 'add_icon');
|
|
|
|
var fileInputs = Array.prototype.slice.call(that.form.querySelectorAll('input[name=iconset_new]'));
|
|
var fileInput = fileInputs.length ? fileInputs[fileInputs.length - 1] : null;
|
|
if(fileInput){
|
|
var bFile = fileInput.getAttribute('type') === 'file';
|
|
|
|
if(bFile){
|
|
var files = fileInput.files || [fileInput.value];
|
|
var filename = files.length ? (files[0].name || files[0]) : '';
|
|
var p = Math.max(filename.lastIndexOf('/'), filename.lastIndexOf('\\'));
|
|
if(p > 0){
|
|
filename = filename.substring(p + 1, filename.length);
|
|
}
|
|
}
|
|
else{
|
|
var filename = fileInput.value;
|
|
}
|
|
|
|
var filename = bFile ? (files.length ? files[0].name : '') : fileInput.value;
|
|
|
|
if(filename.length){
|
|
if(that.config.validation_pattern){
|
|
if(filename.match(new RegExp(that.config.validation_pattern, 'i')) === null){
|
|
errorMessage = BX.message('ICONSET_ERROR_VALIDATION_FILE_BAD_NAME');
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
errorMessage = BX.message('ICONSET_ERROR_VALIDATION_FILE_EMPTY_VALUE');
|
|
if(!bFile){
|
|
// wait error animation 0.3s
|
|
setTimeout(function(){
|
|
that.resetFileInput();
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
if(!errorMessage.length){
|
|
fd.append(
|
|
bFile ? 'icon_file' : 'icon_path',
|
|
bFile ? files[0] : fileInput.value
|
|
);
|
|
}
|
|
}
|
|
|
|
if(errorMessage.length){
|
|
that.showError(errorMessage);
|
|
}
|
|
else{
|
|
that.addIcon(fd, function(id){
|
|
if(id){
|
|
that.getIcon(id, function(response){
|
|
if(response){
|
|
var child = BX.create({
|
|
tag: 'div',
|
|
html: response,
|
|
});
|
|
child = child.querySelector('.iconset_item');
|
|
if(child){
|
|
that.openItemsTab();
|
|
|
|
var wrap = that.block.querySelector('.iconset_wrap');
|
|
if(wrap){
|
|
wrap.scrollTop = 0;
|
|
|
|
var emptyItem = wrap.querySelector('.iconset_item--empty');
|
|
if(emptyItem){
|
|
BX.insertAfter(child, emptyItem);
|
|
}
|
|
else{
|
|
BX.prepend(child, wrap);
|
|
}
|
|
|
|
// wait animation 0.5s
|
|
setTimeout(function(){
|
|
BX.removeClass(child, 'iconset_item--added');
|
|
}, 1000);
|
|
}
|
|
}
|
|
else{
|
|
that.showError(BX.message('ICONSET_ERROR_REQUEST'));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
that.form.addEventListener('submit', that.onFormSubmit);
|
|
}
|
|
},
|
|
|
|
unbindEvents: function(){
|
|
if(typeof this.onDocClick === 'function'){
|
|
document.removeEventListener('click', this.onDocClick);
|
|
}
|
|
|
|
if(
|
|
typeof this.onFormSubmit === 'function' &&
|
|
this.form
|
|
){
|
|
this.form.removeEventListener('submit', this.onFormSubmit);
|
|
}
|
|
},
|
|
|
|
showError: function(errorMessage){
|
|
var bForm = this.block.querySelector('.adm-detail-subtab-active[id=view_tab_iconset_add_icon]') && this.form;
|
|
var prependTo = bForm ? this.block.querySelector('div[id=iconset_add_icon]') : this.block.querySelector('div[id=iconset_items]');
|
|
var error = BX.create({
|
|
tag: 'div',
|
|
attrs: {
|
|
class: 'adm-info-message-wrap adm-info-message-red iconset_error',
|
|
},
|
|
style: {
|
|
display: 'none',
|
|
},
|
|
html: '<div class="adm-info-message"><div class="adm-info-message-title"></div><div class="adm-info-message-icon"></div></div>',
|
|
});
|
|
|
|
BX.prepend(error, prependTo.querySelector('.adm-detail-content-item-block-view-tab'));
|
|
if(error){
|
|
error.querySelector('.adm-info-message-title').textContent = errorMessage;
|
|
error.style.display = 'block';
|
|
BX.addClass(error, 'iconset_error--visible');
|
|
|
|
setTimeout(function(){
|
|
BX.removeClass(error, 'iconset_error--visible');
|
|
|
|
// wait animation 0.3s
|
|
setTimeout(function(){
|
|
BX.remove(error);
|
|
}, 300);
|
|
}, 2300);
|
|
}
|
|
},
|
|
|
|
showLoader: function(){
|
|
BX.addClass(this.form.closest('.iconset'), 'iconset--sending');
|
|
},
|
|
|
|
hideLoader: function(){
|
|
BX.removeClass(this.form.closest('.iconset'), 'iconset--sending');
|
|
},
|
|
|
|
enableSelectButton: function(){
|
|
if(this.selectButton){
|
|
this.selectButton.removeAttribute('disabled');
|
|
}
|
|
},
|
|
|
|
disableSelectButton: function(){
|
|
if(this.selectButton){
|
|
this.selectButton.setAttribute('disabled', '');
|
|
}
|
|
},
|
|
|
|
openItemsTab: function(){
|
|
var tab = this.block.querySelector('.adm-detail-subtabs[id=view_tab_iconset_items]');
|
|
if(tab){
|
|
BX.fireEvent(tab, 'click');
|
|
}
|
|
},
|
|
|
|
openFormTab: function(){
|
|
if(this.form){
|
|
var tab = this.block.querySelector('.adm-detail-subtabs[id=view_tab_iconset_add_icon]');
|
|
if(tab){
|
|
BX.fireEvent(tab, 'click');
|
|
}
|
|
}
|
|
},
|
|
|
|
resetFileInput: function(){
|
|
if(!this.form){
|
|
return;
|
|
}
|
|
|
|
var openers = Array.prototype.slice.call(this.form.querySelectorAll('.add-file-popup-btn'));
|
|
var opener = openers.length ? openers[openers.length - 1] : null;
|
|
if(opener && typeof opener.OPENER === 'object'){
|
|
var menu = opener.OPENER.GetMenu();
|
|
if(typeof menu === 'object'){
|
|
if(menu.DIV){
|
|
var menuItem = menu.DIV.querySelector('.adm-menu-delete') ? menu.DIV.querySelector('.adm-menu-delete').parentNode : null;
|
|
if(menuItem){
|
|
menu.DIV.style.visibility = 'hidden';
|
|
menu.Show();
|
|
var interval = setInterval(function(){
|
|
BX.fireEvent(menuItem, 'click');
|
|
if(!opener.closest('.iconset')){
|
|
menu.DIV.style.visibility = '';
|
|
clearInterval(interval);
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
addIcon: function(data, callback){
|
|
if(this.form){
|
|
var that = this;
|
|
|
|
if(data instanceof FormData){
|
|
data.set('action', 'add_icon');
|
|
}
|
|
else{
|
|
data.action = 'add_icon';
|
|
}
|
|
|
|
that.showLoader();
|
|
BX.ajax({
|
|
url: that.formUrl,
|
|
method: 'POST',
|
|
data: data,
|
|
dataType: 'html',
|
|
processData: false,
|
|
preparePost: false,
|
|
emulateOnload: false,
|
|
start: true,
|
|
async: true,
|
|
cache: false,
|
|
onsuccess: function(response){
|
|
errorMessage = '';
|
|
|
|
try{
|
|
var result = JSON.parse(response);
|
|
|
|
if(result.error.length){
|
|
errorMessage = result.error;
|
|
}
|
|
else if(!result.id){
|
|
errorMessage = BX.message('ICONSET_ERROR_REQUEST');
|
|
}
|
|
}
|
|
catch(e){
|
|
errorMessage = BX.message('ICONSET_ERROR_REQUEST');
|
|
}
|
|
|
|
that.resetFileInput();
|
|
that.hideLoader();
|
|
|
|
if(errorMessage.length){
|
|
that.showError(errorMessage);
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
}
|
|
else{
|
|
if(typeof callback === 'function'){
|
|
callback(result.id);
|
|
}
|
|
}
|
|
},
|
|
onfailure: function(error){
|
|
that.hideLoader();
|
|
that.showError(BX.message('ICONSET_ERROR_REQUEST'));
|
|
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else{
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
}
|
|
},
|
|
|
|
deleteIcon: function(id, value, callback){
|
|
var that = this;
|
|
|
|
if(confirm(BX.message('ICONSET_CONFIRM_DELETE'))){
|
|
var iconset_values = Array.prototype.slice.call(document.querySelectorAll('.iconset_value'));
|
|
if(iconset_values){
|
|
for(var i in iconset_values){
|
|
var input = iconset_values[i].querySelector('input');
|
|
if(input && input.value === value){
|
|
this.showError(BX.message('ICONSET_ERROR_DELETE_ICON_IS_SAVED_AS_OPTION_VALUE'));
|
|
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
that.showLoader();
|
|
BX.ajax({
|
|
url: that.formUrl,
|
|
method: 'POST',
|
|
data: {
|
|
action: 'delete_icon',
|
|
code: that.code,
|
|
id: id
|
|
},
|
|
dataType: 'html',
|
|
processData: false,
|
|
preparePost: true,
|
|
emulateOnload: false,
|
|
start: true,
|
|
async: true,
|
|
cache: false,
|
|
onsuccess: function(response){
|
|
errorMessage = '';
|
|
|
|
try{
|
|
var result = JSON.parse(response);
|
|
|
|
if(result.error.length){
|
|
errorMessage = result.error;
|
|
}
|
|
}
|
|
catch(e){
|
|
errorMessage = BX.message('ICONSET_ERROR_REQUEST');
|
|
}
|
|
|
|
that.hideLoader();
|
|
|
|
if(errorMessage.length){
|
|
that.showError(errorMessage);
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
}
|
|
else{
|
|
if(typeof callback === 'function'){
|
|
callback(true);
|
|
}
|
|
}
|
|
},
|
|
onfailure: function(error){
|
|
that.hideLoader();
|
|
that.showError(BX.message('ICONSET_ERROR_REQUEST'));
|
|
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
getIcon: function(id, callback){
|
|
var that = this;
|
|
|
|
that.showLoader();
|
|
BX.ajax({
|
|
url: that.formUrl,
|
|
method: 'POST',
|
|
data: {
|
|
action: 'get_icon',
|
|
code: that.code,
|
|
id: id
|
|
},
|
|
dataType: 'html',
|
|
processData: false,
|
|
preparePost: true,
|
|
emulateOnload: false,
|
|
start: true,
|
|
async: true,
|
|
cache: false,
|
|
onsuccess: function(response){
|
|
that.hideLoader();
|
|
|
|
if(typeof callback === 'function'){
|
|
callback(response);
|
|
}
|
|
},
|
|
onfailure: function(error){
|
|
that.hideLoader();
|
|
that.showError(BX.message('ICONSET_ERROR_REQUEST'));
|
|
|
|
if(typeof callback === 'function'){
|
|
callback(false);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// click on iconset icon value
|
|
window.JIconset._onValueClick = function(e){
|
|
if(!e){
|
|
e = window.event;
|
|
}
|
|
|
|
BX.PreventDefault(e);
|
|
|
|
var icon = this;
|
|
if(icon){
|
|
if(BX.hasClass(icon, 'iconset_value--readonly')){
|
|
return false;
|
|
}
|
|
|
|
var code = BX.data(icon, 'code');
|
|
var input = icon.parentNode.querySelector('input');
|
|
var value = input.value;
|
|
var lang = BX.message('LANGUAGE_ID');
|
|
var iconsetUrl = '/bitrix/admin/aspro.allcorp3_iconset.php';
|
|
var iconsetDialog = new BX.CAdminDialog({
|
|
content_url: iconsetUrl,
|
|
content_post: {
|
|
code: code,
|
|
value: value,
|
|
lang: lang,
|
|
},
|
|
title: BX.message('ICONSET_POPUP_TITLE'),
|
|
draggable: true,
|
|
resizable: true,
|
|
width: 300,
|
|
min_width: 300,
|
|
height: 142,
|
|
min_height: 142,
|
|
buttons: [
|
|
{
|
|
title: BX.message('ICONSET_POPUP_SELECT'),
|
|
id: 'iconset_button--select',
|
|
name: 'select',
|
|
className: 'adm-btn-save',
|
|
action: function(){
|
|
var selected = this.parentWindow.DIV.querySelector('.iconset_item--selected');
|
|
if(selected){
|
|
var value = BX.data(selected, 'value');
|
|
var content = selected.querySelector('.iconset_item_middle').innerHTML.trim();
|
|
icon.querySelector('.iconset_value_wrap').innerHTML = content;
|
|
icon.querySelector('input').value = value;
|
|
}
|
|
this.parentWindow.Close();
|
|
}
|
|
},
|
|
{
|
|
title: BX.message('ICONSET_POPUP_CLOSE'),
|
|
id: 'iconset_button--cancel',
|
|
name: 'close',
|
|
action: function(){
|
|
this.parentWindow.Close();
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// unset popup height on show
|
|
BX.addCustomEvent(iconsetDialog, 'onWindowRegister', function(){
|
|
BX.WindowManager.Get().DIV.querySelector('.bx-core-adm-dialog-content').style.height = '';
|
|
});
|
|
|
|
// unbind popup iconset events
|
|
BX.addCustomEvent(iconsetDialog, 'onWindowClose', function(){
|
|
var iconset = BX.WindowManager.Get().DIV.querySelector('.iconset');
|
|
if(iconset){
|
|
if(typeof iconset.iconset === 'object' && iconset.iconset){
|
|
iconset.iconset.unbindEvents();
|
|
}
|
|
}
|
|
});
|
|
|
|
// show dialog
|
|
iconsetDialog.Show();
|
|
}
|
|
}
|
|
|
|
BX.ready(function(){
|
|
BX.bindDelegate(document.body, 'click', {class: 'iconset_value'}, window.JIconset._onValueClick);
|
|
});
|
|
}
|