Your IP : 18.219.40.177


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.EditInList.js

/**
 * 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, '&quot;');
        $$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, '&quot;'),
          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);