Your IP : 18.219.40.177
/**
* Edit value in list module
*
* @param {object} window global object
* @param {function} $ jQuery library
* @param {object} EventMgr EventMgr library
* @param {object} App Application
* @param {object} templates doT template
*/
/*global App:true*/
App.EditInList = function(window, $, EventMgr, App, templates) {
'use strict';
var init = function() {
EventMgr.on(contentSelector, editableFieldSelector,
'mouseover', showEditableIcon);
EventMgr.on(contentSelector, editableFieldSelector,
'mouseout', hideEditableIcon);
EventMgr.obind(editableIconSelector, 'mouseout', hideEditableIcon);
EventMgr.obind(editableIconSelector, 'mouseover', selfShowEditableIcon);
EventMgr.obind(editableIconSelector, 'click', openEditFieldForm);
EventMgr.bind('ajaxResponseEditInList', cachedFormData);
EventMgr.bind('ajaxResponseEditInListSave', responseSaveHandler);
EventMgr.bind('ajaxResponseEditInListSaveFailed',
responseSaveHandlerFailed);
EventMgr.on(contentSelector, edittableOkBtnSelector,
'click', saveBtnHandler);
EventMgr.on(contentSelector, edittableCancelBtnSelector,
'click', closeEditBtnHandler);
EventMgr.on(contentSelector, edittableOverlay,
'click', closeEditBtnHandler);
EventMgr.on(contentSelector, editTableFieldSelector,
'keydown', hotKeyHandler);
EventMgr.obind($(document), 'keyup', removeKeyUp);
EventMgr.bind('closeTabEvent', removeEditForm);
EventMgr.bind('closeTabEvent', removeIndexCols);
EventMgr.bind('changedTab', removeEditForm);
EventMgr.bind('changedTab, appendList, appendForm, appendReport, appendMap',
hideEditableIcon);
EventMgr.bind('appendList', removeIndexCols);
EventMgr.bind('failLoadForm', failLoadForm);
},
editableFieldSelector = '.editable',
editableIconSelector = '#edit-filed-in-list',
editTableFieldSelector = '.edit-field-form input[type="text"],' +
' .edit-field-form .b-textarea,' +
' .edit-field-form .b-textarea_for_zoom,' +
' .edit-field-form .b-myselect__select-selected .b-myselect__select-value,' +
' .edit-field-form .b-radio__control,' +
' .edit-field-form .b-checkbox__control',
contentSelector = '#main-wrapper',
edittableOkBtnSelector = '.i-btn-editlis-ok',
edittableCancelBtnSelector = '.i-btn-editlis-cancel',
edittableOverlay = '.i-tab-overlay_trig_editlist',
$$editableIcon = function() {
return App.Dom.byId('edit-filed-in-list');
},
editingField = null,
currentField = null,
iconLeftPos = 0,
//show icon under field when mouseover
showEditableIcon = function(e) {
var self = $(this),
offset = self.offset(),
left = offset.left,
top = offset.top,
width = this.offsetWidth,
editableIconElem = $$editableIcon();
if (editableIconElem.className === 'active') { return; }
currentField = self;
iconLeftPos = left + width - 22;
editableIconElem.style.left = iconLeftPos + 'px';
editableIconElem.style.top = top + 'px';
editableIconElem.style.display = 'block';
},
//show icon
selfShowEditableIcon = function() {
var editableIconElem = $$editableIcon();
editableIconElem.style.display = 'block';
},
//hide icon
hideEditableIcon = function() {
var editableIconElem = $$editableIcon();
if (editableIconElem.className !== 'active') {
editableIconElem.style.display = 'none';
}
},
templateBlock = function(id) {
return '<div id="editinlist-wrapper-' + id +
'" class="edit-field-form"><div class="edit-field-form-loader"><img src="' +
pageInfo.theme + 'img/loader.gif"/></div></div>';
},
editFormElemData = {},
loading = {},
editableCols = {},
//get cols header for data
getEditableCols = function(id) {
var $tableTh = $('#lt-' + id + ' thead th');
editableCols[id] = {};
$tableTh.each(function(index) {
if (this.getAttribute('data-edit-func')) {
editableCols[id][index] = true;
} else {
editableCols[id][index] = false;
}
});
},
//open form edit
openEditFieldForm = function() {
editingField = currentField;
var activeTab = currentField.parents('.tab-content'),
funcName = activeTab.attr('data-func'),
parentTd = currentField.parents('td'),
index = parentTd.index(),
$th = currentField.parents('table').find('th'),
th = $th[index],
colName = th.getAttribute('data-colname'),
keyField = th.className.match('keyfield'),
tabId = activeTab.attr('data-tabid'),
parentTr = currentField.parents('tr'),
elid = parentTr.attr('data-elid'),
rowIndex = parentTr.attr('data-index'),
plid = filterXSS.friendlyAttrValue($('#cont-' + activeTab.attr('data-tabid') +
' .toolbar').attr('data-plid') || ''),
funcEdit = th.getAttribute('data-edit-func'),
curObj = {
tabId: tabId,
funcName: funcName,
colName: colName,
elid: elid,
plid: plid,
funcEdit: funcEdit,
parentTr: parentTr,
index: index,
rowIndex: rowIndex
},
tconvert;
if (keyField) {
tconvert = activeTab.find('.toolbar').attr('data-convert');
curObj.tconvert = tconvert;
}
$$editableIcon().className = 'active';
if (!loading[tabId]) {
if (!editFormElemData[tabId]) {
loadForm(curObj);
} else {
showForm(curObj);
}
}
},
//load form edit
loadForm = function(curObj) {
var url = pageInfo.url,
param = { func: curObj.funcEdit,
scolname: curObj.colName,
stablename: curObj.funcName,
stylesheet: 'editinlist',
elid: curObj.elid
};
if (curObj.tconvert) {
param.tconvert = curObj.tconvert;
}
if (curObj.plid) {
param.plid = curObj.plid;
}
EventMgr.trigger('ajaxRequest', {
url: url,
param: param,
invar: {id: curObj.tabId, curObj: curObj},
type: 'get',
outtype: 'json',
trfunc: 'ajaxResponseEditInList',
failfunc: 'failLoadForm',
queue: 'noqueue' });
loading[curObj.tabId] = true;
},
//handler for failed request
failLoadForm = function(e, data) {
EventMgr.trigger('pullMsg', { msg: 'Request failed. Try again.' });
$$editableIcon().className = '';
},
//remember form structure
cachedFormData = function(e, data) {
var tabId = data.id,
curObj = data.curObj,
editFormElem = $(templateBlock(tabId));
loading[curObj.tabId] = false;
editFormElemData[tabId] = data;
editFormElemData[tabId].eFwrapper = editFormElem;
editFormElemData[tabId].eFwrapper.removeClass('active');
editFormElemData[tabId].eFoverlay = $('#' + tabId + '-progressbar-overlay');
showForm(curObj);
//inser wrapper for form
$('.i-report-wr').append(editFormElem);
//$('#main-wrapper').append(editFormElem);
},
//show form edit
showForm = function(curObj) {
if (!editFormElemData[curObj.tabId][curObj.colName]) {
EventMgr.trigger('pullMsg', { msg: 'Not found field. Sorry...' });
$$editableIcon().className = '';
return;
}
var id = curObj.tabId,
type = editFormElemData[id][curObj.colName].type,
elemObj = editFormElemData[id][curObj.colName],
value = (editingField.hasClass('b-list__table-col-content')) ? editingField.text() :
editingField.find('.b-list__table-col-content').text(),
//position target cell
offset = editingField.offset(),
top = offset.top,
left = offset.left,
wrapper = editFormElemData[id].eFwrapper,
overlay = editFormElemData[id].eFoverlay,
field = '',
len, html;
value = value.replace(/"/g, '"');
$$editableIcon().className = '';
editFormElemData[id].eFsend = false;
editFormElemData[id].curObj = curObj;
editFormElemData[id].eFvalue = value;
editFormElemData[id].editingField = editingField;
//insert current row value in object structure
if (type === 'text') {
elemObj.attr = elemObj.sourceAttr;
elemObj.value = value;
elemObj.setvalue = '';
elemObj.attr += ' value="' + value + '"';
} else if (type === 'select' || type === 'radio') {
if (value === '') {
elemObj.value = '';
elemObj.msg = elemObj.slist[0].value;
} else {
len = elemObj.slist.length;
while (len--) {
if (elemObj.slist[len].value === value) {
elemObj.value = elemObj.slist[len].key;
editFormElemData[id].eFvalue = elemObj.value;
len = 0;
}
}
elemObj.msg = value;
}
} else if (type === 'checkbox') {
if (value === 'on') {
elemObj.cbclass = 'checked';
} else {
elemObj.cbclass = '';
}
elemObj.value = value;
} else {
elemObj.value = value;
}
elemObj.id = id;
//render elem
if (type === 'text') {
if (elemObj.unlimit) {
field += '<div class="b-input-btn b-input-btn_type_unlimit" data-control-field="' +
elemObj.name + '"></div>';
} else if (elemObj.date) {
field += '<div class="b-input-btn b-input-btn_type_calendar" data-control-field="' +
elemObj.name + '"></div>';
}
if (elemObj.zoom) {
field += '<div class="b-input-btn b-input-btn_type_zoom" data-control-field="' +
elemObj.name + '"></div>';
elemObj.textareaClasses = ' b-textarea_for_zoom';
field += templates.formItemInputWithZoom1(elemObj);
} else {
field += templates.formItemInput(elemObj);
}
//} else if (type === 'checkbox') {
//field = templates.formItemCheckbox(elemObj);
} else if (type === 'textarea') {
elemObj.third = '';
elemObj.hint = '';
field = templates.formItemTextarea(elemObj);
} else if (type === 'slider') {
elemObj.tabId = id;
field = templates.formItemSliderEditInList(elemObj);
setTimeout(function() { EventMgr.trigger('appendEditInList', {
tabId: id });}, 100);
} else if (type === 'select') {
field = templates.formItemSelect(elemObj);
} else if (type === 'radio') {
field = templates.formItemRadio(elemObj);
} else {
EventMgr.trigger('pullMsg', { msg: 'Not found field. Sorry...' });
$$editableIcon().className = '';
return;
}
for (var keyVar in editFormElemData[id]) {
if (editFormElemData[id][keyVar].type === 'hidden') {
field += '<' + editFormElemData[id][keyVar].attr + '/>';
}
}
// set position for edit form
wrapper.css('top', top + 'px');
wrapper.css('left', left + 'px');
//currentField.addClass('editing-field');
html = templates.editinListForm({
field: field,
elid: String(curObj.elid).replace(/"/g, '"'),
id: id,
func: curObj.funcEdit });
wrapper.html(html);
wrapper.show();
overlay.addClass('i-tab-overlay_trig_editlist' +
' b-tab-overlay_show_edlist');
//overlay.show();
checkPosition(wrapper, left);
setTimeout(function() { checkPosition(wrapper, left); }, 30);
setTimeout(function() { focusOnField(elemObj); }, 100);
},
//check position for wrapper
checkPosition = function(elem, left) {
var width = elem.width(),
windowWidth = window.innerWidth,
PADDING = 12,
diff = windowWidth - (left + width + PADDING);
if (diff < 0) {
left = left + diff - 16;
elem.css('left', left + 'px');
}
},
//set focus on field [stable function]
focusOnField = function(obj) {
var wrapperSelector = '#editinlist-wrapper-';
if (obj.type === 'text' || obj.type === 'slider' ||
obj.type === 'textarea') {
$(wrapperSelector + obj.id + ' ' +
'[name="' + obj.name + '"]').focus();
} else if (obj.type === 'select') {
$(wrapperSelector + obj.id + ' ' +
'div[data-id="' + obj.name + '"] .b-myselect__select-value')
.focus();
} else if (obj.type === 'radio') {
$(wrapperSelector + obj.id + ' ' +
'div[data-id="' + obj.name + '"][tabindex="0"]').focus();
} else if (obj.type === 'checkbox') {
$(wrapperSelector + obj.id + ' ' +
'input[data-id="' + obj.name + '"]').focus();
}
},
//close btn handler
closeEditBtnHandler = function() {
var id = this.getAttribute('data-id');
if (!id) {
id = this.getAttribute('data-tabid');
//for radio and checkboxes
} else if (!id.match(/tab/)) {
id = this.getAttribute('data-tabid');
}
closeEdit(id);
},
//hide edit form
closeEdit = function(id) {
if (editFormElemData[id]) {
editFormElemData[id].eFwrapper.hide();
// editFormElemData[id].eFoverlay.hide();
editFormElemData[id].eFoverlay
.removeClass('b-tab-overlay_show_edlist' +
' i-tab-overlay_trig_editlist');
}
},
//save btn handler
saveBtnHandler = function(e, nextStep) {
var id = this.getAttribute('data-tabid');
if (id === undefined || id === null) {
id = this.getAttribute('data-id');
}
saveValue(id, nextStep);
},
//save value if it changed
saveValue = function(id, nextStep) {
if (!editFormElemData[id].eFsend) {
var $form = $('#editinlist-form-' + id),
param = $form.serializeObject();
if (editFormElemData[id].eFvalue !==
param[editFormElemData[id].curObj.colName]) {
EventMgr.trigger('ajaxRequest', {
param: param,
invar: { id: id,
tabId: id,
nextStep: nextStep,
value: param[editFormElemData[id].curObj.colName] },
type: 'post',
outtype: 'json',
trfunc: 'ajaxResponseEditInListSave',
failfunc: 'ajaxResponseEditInListSaveFailed',
queue: 'noqueue'});
editFormElemData[id].eFsend = true;
editFormElemData[id].eFwrapper.addClass('active');
} else {
responseSaveHandler.apply({}, [{}, {
ok: true,
id: id,
nextStep: nextStep }]);
}
}
},
//
responseSaveHandlerFailed = function(e, data) {
if (data.erType === 'json') {
EventMgr.trigger('pullMsg', { msg: 'JSON Parse Error. Func: "' + data.param.func + '"' });
} else {
EventMgr.trigger('pullMsg', { msg: 'Request failed. Try again. Func: "' + data.param.func + '"' });
}
var id = data.invar.id;
editFormElemData[id].eFsend = false;
editFormElemData[id].eFwrapper.removeClass('active');
},
//hide edit form if ok, else will show error
responseSaveHandler = function(e, data) {
var id = data.id,
ok = data.ok,
value = data.value,
error = data.error,
errorMsg = data.ermsg,
nextStep = data.nextStep,
elid = data.elid,
elname = data.elname,
curObj = editFormElemData[id].curObj,
nameElem = curObj.colName,
len,
elemObj = editFormElemData[id][nameElem],
op = {};
editFormElemData[id].eFvalue = value;
if (ok) {
if (elemObj.type === 'select' || elemObj.type === 'radio') {
len = elemObj.slist.length;
while (len--) {
if (elemObj.slist[len].key === value) {
value = elemObj.slist[len].value;
}
}
}
// вставляем значения в таблицу
if (editFormElemData[id].editingField.hasClass('b-list__table-col-content')) {
editFormElemData[id].editingField.html(window.filterXSS(value));
} else {
editingField.find('.b-list__table-col-content').html(window.filterXSS(value));
}
editFormElemData[id].eFwrapper.removeClass('active');
closeEdit(id);
if (elid) {
//think jquery escape quotes
curObj.parentTr.attr('data-elid', elid);
if (elname) {
curObj.parentTr.attr('data-elkeyname', elname);
}
}
if (nextStep !== undefined) {
op.index = curObj.index;
op.direction = nextStep;
op.elid = curObj.elid;
op.tr = curObj.parentTr;
op.id = id;
}
if (nextStep !== undefined) {
editNextValue(op);
}
//update list model
if (data.__content && data.__content[curObj.rowIndex] &&
data.__content[curObj.rowIndex][nameElem]) {
data.__content[curObj.rowIndex][nameElem].v = value;
EventMgr.trigger('updateTotalList', {
tabId: id,
index: curObj.index,
colName: nameElem });
}
} else if (error) {
$('#err-cont-' + id).html('<div class="b-error-box">' +
'<div class="b-error-box__top-triangle"></div>' +
'<div class="b-error-box__inner">' + errorMsg + '</div></div>');
editFormElemData[id].eFsend = false;
editFormElemData[id].eFwrapper.removeClass('active');
}
},
//find next/prev/right/left edit cell
editNextValue = function(op) {
var prev, next, run, i, cols, nextElem;
if (op.direction === 'up') {
prev = op.tr.prev();
if (prev.length !== 0) {
var prevElem = prev.find('.data')[op.index];
if (!prevElem.className.match(/editable/)) {
currentField = $(prevElem).parent();
} else {
currentField = $(prevElem);
}
openEditFieldForm.apply();
}
} else if (op.direction === 'down') {
next = op.tr.next();
if (next.length !== 0) {
nextElem = next.find('.data')[op.index];
if (!nextElem.className.match(/editable/)) {
currentField = $(nextElem).parent();
} else {
currentField = $(nextElem);
}
openEditFieldForm.apply();
}
} else if (op.direction === 'right') {
if (!editableCols[op.id]) {
getEditableCols(op.id);
}
run = true;
i = op.index;
cols = editableCols[op.id];
while (run) {
i++;
if (cols[i]) {
run = false;
nextElem = op.tr.find('.data')[i];
if (!nextElem.className.match(/editable/)) {
currentField = $(nextElem).parent();
} else {
currentField = $(nextElem);
}
openEditFieldForm.apply();
} else if (cols[i] === undefined) {
run = false;
}
}
} else if (op.direction === 'left') {
if (!editableCols[op.id]) {
getEditableCols(op.id);
}
run = true;
i = op.index;
cols = editableCols[op.id];
while (run) {
i--;
if (cols[i]) {
run = false;
nextElem = op.tr.find('.data')[i];
if (!nextElem.className.match(/editable/)) {
currentField = $(nextElem).parent();
} else {
currentField = $(nextElem);
}
openEditFieldForm.apply();
} else if (cols[i] === undefined) {
run = false;
}
}
}
},
keys = [],
ENTER_KEY = 13,
ESC_KEY = 27,
UP_KEY = 38,
DOWN_KEY = 40,
TAB_KEY = 9,
SHIFT_KEY = 16,
CTRL_KEY = 17,
ZERO = 0,
//hot key controller
hotKeyHandler = function(e) {
e = e || window.event;
var codeKey = e.which || e.keyCode,
textarea;
keys[codeKey] = true;
if (keys[ENTER_KEY]) {
textarea = this.className.match(/b-textarea/g);
if (!textarea || (textarea && e.ctrlKey)) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'down']);
}
} else if (keys[ESC_KEY]) {
e.preventDefault();
e.stopPropagation();
closeEditBtnHandler.apply(this);
} else if (keys[UP_KEY] && keys[CTRL_KEY]) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'up']);
} else if (keys[DOWN_KEY] && keys[CTRL_KEY]) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'down']);
} else if (keys[UP_KEY]) {
if (!this.className.match(/b-myselect__select-value|b-radio__control|b-input_for_slider|b-textarea/g)) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'up']);
}
} else if (keys[DOWN_KEY]) {
if (!this.className.match(/b-myselect__select-value|b-radio__control|b-input_for_slider|b-textarea/g)) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'down']);
}
} else if ((keys[SHIFT_KEY] || keys[ZERO]) && keys[TAB_KEY]) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'left']);
} else if (keys[TAB_KEY]) {
e.preventDefault();
saveBtnHandler.apply(this, [{}, 'right']);
}
},
removeKeyUp = function(e) {
var codeKey = e.which || e.keyCode;
if (keys[ZERO]) {
delete keys[ZERO];
}
if (keys[codeKey]) {
delete keys[codeKey];
}
},
//handler for ext events
removeEditForm = function(e, data) {
var tabId = data.prevTabId || data.tabId;
closeEdit(tabId);
},
removeIndexCols = function(e, data) {
var id = data.tabId;
if (!id) {id = data.tabId;}
if (editFormElemData[id]) {
editFormElemData[id].eFwrapper.remove();
delete loading[id];
delete editFormElemData[id];
delete editableCols[id];
}
};
return {
init: init
};
}(window, $, EventMgr, App, templates);