Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-full/dist/js/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

/*** module: node_modules/absol-poser/fragment/PoserEditor.js ***/
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _Fragment = _interopRequireDefault(require("absol/src/AppPattern/Fragment"));

var _Core = require("../dom/Core");

var _OOP = _interopRequireDefault(require("absol/src/HTML5/OOP"));

require("../css/posereditor.css");

var _APEditableSection = _interopRequireDefault(require("../dom/editor/APEditableSection"));

var _APEditableQuestion = _interopRequireDefault(require("../dom/editor/question/APEditableQuestion"));

var _ResizeSystem = _interopRequireDefault(require("absol/src/HTML5/ResizeSystem"));

var _EventEmitter = _interopRequireDefault(require("absol/src/HTML5/EventEmitter"));

var _ContextMenu = _interopRequireDefault(require("absol-acomp/js/ContextMenu"));

var _utils = require("absol-acomp/js/utils");

var _BoardTable = _interopRequireDefault(require("absol-acomp/js/BoardTable"));

var _PoserQuestionTreeEditor = _interopRequireDefault(require("./PoserQuestionTreeEditor"));

var _FileSaver = require("absol/src/Network/FileSaver");

var _YesNoQuestionDialog = _interopRequireDefault(require("absol-acomp/js/YesNoQuestionDialog"));

var _Modal = _interopRequireDefault(require("absol-acomp/js/Modal"));

var _utils2 = require("../utils");

var _Dom = _interopRequireDefault(require("absol/src/HTML5/Dom"));

var _LoadingCubeModal = _interopRequireDefault(require("absol-acomp/js/LoadingCubeModal"));

var _printer = require("../dom/printer");


/***
 * @augments Fragment
 * @augments EventEmitter
 * @param {{}=} opt
 * @constructor
 */
function PoserEditor(opt) {
  this.opt = Object.assign({
    hasScroller: true,
    hasTool: true,
    hasSection: true,
    questionTypes: null
  }, opt);

  _Fragment.default.call(this);

  _EventEmitter.default.call(this);

  this.treeEditor = new _PoserQuestionTreeEditor.default(this);
}

_OOP.default.mixClass(PoserEditor, _Fragment.default, _EventEmitter.default);

PoserEditor.prototype.createView = function () {
  this.$view = (0, _Core._)({
    class: 'ap-poser-editor',
    child: [{
      class: 'ap-poser-editor-header',
      child: {
        class: ['as-form-cmd-tool'],
        child: [{
          class: 'as-from-tool-group-buttons',
          child: [{
            tag: 'button',
            class: 'as-from-tool-button',
            child: 'span.mdi.mdi-file-tree-outline',
            attr: {
              title: 'Edit Tree',
              'data-cmd': 'edit_tree'
            }
          }, {
            tag: 'button',
            class: 'as-from-tool-button',
            child: 'span.mdi.mdi-code-json',
            attr: {
              title: 'Edit Tree',
              'data-cmd': 'export_js'
            }
          }]
        }, {
          class: 'as-from-tool-group-buttons',
          child: [{
            tag: 'button',
            class: 'as-from-tool-button',
            child: 'span.mdi.mdi-format-section',
            attr: {
              title: 'New Section',
              'data-cmd': 'new_section'
            }
          }, {
            tag: 'button',
            class: 'as-from-tool-button',
            child: 'span.mdi.mdi-comment-question-outline',
            attr: {
              title: 'New Question',
              'data-cmd': 'new_question'
            }
          }, {
            tag: 'button',
            class: 'as-from-tool-button',
            style: {
              color: 'rgba(222, 30, 30)'
            },
            child: 'span.mdi.mdi-delete-forever',
            attr: {
              title: 'New Question',
              'data-cmd': 'delete'
            },
            props: {
              disabled: true
            }
          }, // {
          //     tag: 'button',
          //     class: 'as-from-tool-button',
          //     style: { color: 'rgba(50, 50, 222)' },
          //     child: 'span.mdi.mdi-printer',
          //     attr: {
          //         title: 'Print',
          //         'data-cmd': 'print'
          //     }
          // },
          {
            tag: 'button',
            class: 'as-from-tool-button',
            style: {
              color: 'rgba(50, 200, 222)'
            },
            child: 'span.mdi.mdi-download',
            attr: {
              title: 'Download',
              'data-cmd': 'download'
            }
          }]
        }]
      }
    }, {
      class: 'ap-poser-editor-body',
      child: [{
        class: 'ap-poser-editor-data'
      }, {
        class: 'ap-poser-editor-tree-editor-ctn',
        child: this.treeEditor.getView()
      }]
    }, {
      class: 'ap-poser-editor-footer'
    }]
  });
  var self = this;
  this.$view.poserEditor = this;
  this.$body = (0, _Core.$)('.ap-poser-editor-body', this.$view);
  this.$data = (0, _Core.$)('.ap-poser-editor-data', this.$view);
  this.$cmdButtons = (0, _Core.$$)('.as-form-cmd-tool button', this.$view).reduce(function (ac, btn) {
    var name = btn.attr('data-cmd');
    ac[name] = btn;
    return ac;
  }, {});
  this.$cmdButtons['edit_tree'].on('click', this.toggleTreeEditor.bind(this));
  this.$cmdButtons['export_js'].on('click', this.exportJS.bind(this));
  this.$cmdButtons['new_section'].on('click', this.addNewSection.bind(this));
  this.$cmdButtons['new_question'].on('click', this.addNewQuestion.bind(this));
  this.$cmdButtons['delete'].on('click', this.deleteFocusBlock.bind(this)); // this.$cmdButtons['print'].on('click', this.print.bind(this));

  this.$cmdButtons['download'].on('click', this.downloadAsPdf.bind(this));
  this.$attachhook = (0, _Core._)('attachhook').addTo(this.$view);
  this.$attachhook.requestUpdateSize = this.updateSize.bind(this);
  this.$attachhook.on('attached', function () {
    self.start();

    _ResizeSystem.default.add(this);

    this.requestUpdateSize();
  });

  _ContextMenu.default.auto();

  if (!this.opt.hasScroller) {
    this.$view.addClass('ap-without-scroller');
  }

  if (!this.opt.hasTool) {
    this.$view.addClass('ap-without-tool');
  }

  if (!this.opt.hasSection) {
    this.$view.addClass('ap-without-section');
  }

  if (this.opt.readOnly) {
    this.$view.addClass('ap-read-only');
  }
};

PoserEditor.prototype.onResume = function () {
  if (this.$view) {
    (0, _utils2.autoThemeVariable)(this.$view);

    _ResizeSystem.default.add(this.$attachhook);
  }
};

PoserEditor.prototype.setData = function (data) {
  this._originalData = data || [];
  this._sections = data instanceof Array ? data : [data];

  if (!this.opt.hasSection) {
    this._sections = this._sections.reduce((ac, cr) => {
      var questions = cr.questions;
      if (questions && questions.length > 0) ac[0].questions.push.apply(ac[0].questions, questions);
      return ac;
    }, [{
      questions: [],
      section: data[0] && data[0].section || {
        name: "Câu hỏi",
        description: "",
        images: [],
        ident: 1
      }
    }]);
  }

  this.$data.clearChild();

  this._sections.forEach(function (stn) {
    var section = this._makeSection({
      data: stn.section
    });

    var questions = stn.questions.map(function (qData) {
      return this._makeQuestion({
        data: qData
      });
    }.bind(this));
    this.$data.addChild([section].concat(questions));
  }.bind(this));

  this.updateIdx();
  this.treeEditor.reload();
};

PoserEditor.prototype.getData = function () {
  var count = 1;
  var dict = {
    "0": true
  };

  var getOnce = () => {
    while (dict[count]) ++count;

    dict[count] = true;
    return count;
  };

  var cleanObject = o => {
    for (var key in o) if (o[key] === null || o[key] === undefined || typeof o[key] === "number" && isNaN(o[key])) {
      delete o[key];
    }

    return o;
  };

  var result = Array.prototype.reduce.call(this.$data.childNodes, (ac, node) => {
    var nodeData;

    if (node.apBlockType === "section") {
      ac.stn = {
        questions: []
      };

      if (this.opt.hasSection) {
        ac.stn.section = cleanObject(Object.assign({}, node.data));
      }

      ac.result.push(ac.stn);
    } else if (node.apBlockType === 'question') {
      nodeData = cleanObject(Object.assign({}, node.data));

      if (!(0, _utils.isNaturalNumber)(nodeData.ident) || dict[nodeData.ident] || nodeData.ident === 0) {
        nodeData.ident = getOnce();
      } else {
        dict[nodeData.ident] = true;
      }

      ac.stn.questions.push(nodeData);
    }

    return ac;
  }, {
    result: [],
    stn: null
  }).result;
  return result;
};

PoserEditor.prototype._getSectionGroupData = function (sectionGroupElt) {
  var sectionElt = sectionGroupElt.firstChild;
  var questionEltArr = Array.prototype.slice.call(sectionGroupElt.childNodes, 1);
  return {
    section: sectionElt.data.export(),
    questions: questionEltArr.map(function (cNode) {
      return cNode.data.export();
    })
  };
};
/***
 *
 * @param {AElement} elt
 * @private
 */


PoserEditor.prototype._findQuestionElt = function (elt) {
  while (elt && elt !== this.$view) {
    if (elt.classList.contains('ap-block') && elt.classList.contains('ap-editable-question')) {
      return elt;
    }

    elt = elt.parentElement;
  }
};
/***
 *
 * @param {AElement} elt
 * @private
 */


PoserEditor.prototype._findSectionGroupElt = function (elt) {
  while (elt && elt !== this.$view) {
    if (elt.classList.contains('ap-section-group')) {
      return elt;
    }

    elt = elt.parentElement;
  }
};

PoserEditor.prototype._makeSection = function (props) {
  var thisE = this;
  return (0, _Core._)({
    tag: _APEditableSection.default.tag,
    props: props,
    on: {
      change: function (event) {
        this.bindingTreeNode.name = this.data.name || "[unset]";
        thisE.notifyChange();
      },
      click: function () {
        thisE.focusBlock(this, false);
      },
      action: function (event) {
        switch (event.action) {
          case 'merge_with_above':
            thisE.deleteBlock(this);
            break;

          case 'delete':
            thisE.requestDeleteSection(this);
            break;

          default:
            console.log("TODO", event.action);
        }
      }
    }
  });
};

PoserEditor.prototype._makeQuestion = function (props) {
  var thisE = this;
  return (0, _Core._)({
    tag: _APEditableQuestion.default.tag,
    props: Object.assign({
      acceptQuestionTypes: this.opt.questionTypes,
      readOnly: this.opt.readOnly
    }, props),
    on: {
      change: function (event) {
        this.bindingTreeNode.name = this.data.content || "[unset]";

        if (event.fieldName === 'type') {
          thisE.treeEditor.reload();
        }

        thisE.emit('change', {
          type: 'change',
          target: thisE
        }, thisE);
      },
      click: function () {
        thisE.focusBlock(this, false);
      },
      action: function (event) {
        switch (event.action) {
          case 'delete':
            thisE.requestDeleteQuestion(this);
            break;

          case 'duplicate':
            thisE.duplicateQuestion(this);
            thisE.notifyChange();
            break;

          default:
            console.log("TODO: action", event.action);
        }
      }
    }
  });
};

PoserEditor.prototype.updateSize = function () {
  var width = this.$view.getBoundingClientRect().width;

  if (!this._prevWidth || this._prevWidth < 500 !== width < 500) {
    if (width < 500) {
      this.$view.addClass('ap-width-s');
    } else {
      this.$view.removeClass('ap-width-s');
    }
  }

  if (!this._prevWidth || this._prevWidth < 390 !== width < 390) {
    if (width < 390) {
      this.$view.addClass('ap-width-xs');
    } else {
      this.$view.removeClass('ap-width-xs');
    }
  }

  this._prevWidth = width;
};

PoserEditor.prototype._updateCmdButtons = function () {
  if (this._currentFocusBlock && this.$data.firstChild !== this._currentFocusBlock && this._currentFocusBlock.parentElement) {
    this.$cmdButtons["delete"].disabled = false;
  } else {
    this.$cmdButtons["delete"].disabled = true;
  }
};

PoserEditor.prototype.updateIdx = function () {
  var qIdx = 1;
  var sIdx = 1;
  var elt;
  var next;

  for (var i = 0; i < this.$data.childNodes.length; ++i) {
    elt = this.$data.childNodes[i];
    next = this.$data.childNodes[i + 1];

    if (elt.apBlockType === "section") {
      elt.idx = sIdx++;
    } else if (elt.apBlockType === "question") {
      elt.idx = qIdx++;

      if (!next || next.apBlockType === "section") {
        elt.addClass('ap-last-question');
      } else {
        elt.removeClass('ap-last-question');
      }
    }
  }
};

PoserEditor.prototype.moveSectionGroupUp = function (sectionGroup) {
  var parent = sectionGroup.parentElement;
  var prevElt = parent.findChildBefore();
  if (!prevElt || prevElt === parent.firstChild) return;
  sectionGroup.selfRemove();
  parent.addChildBefore(sectionGroup, prevElt);
  this.updateIdx();
  (0, _utils.vScrollIntoView)(sectionGroup.firstChild);
};

PoserEditor.prototype.requestDeleteSection = function (sectionElt) {
  this.openYesNoQuestionDialog('Xóa section', "Bạn muốn xóa section " + sectionElt.idx + '. ' + (sectionElt.data.name || '')).then(result => {
    if (result) {
      this.deleteSection(sectionElt);
      this.notifyChange();
    }
  });
};

PoserEditor.prototype.requestDeleteQuestion = function (questionElt) {
  var previewText = questionElt.data.content || '';
  if (previewText.length > 30) previewText = previewText.substring(0, 27) + '...';
  this.openYesNoQuestionDialog('Xóa câu hỏi', "Bạn muốn xóa câu  hỏi số " + questionElt.idx + '. ' + previewText).then(result => {
    if (result) {
      this.deleteQuestion(questionElt);
      this.notifyChange();
    }
  });
};

PoserEditor.prototype.deleteQuestion = function (questionElt) {
  this.deleteBlock(questionElt);
};

PoserEditor.prototype.deleteSection = function (sectionElt) {
  if (!sectionElt.isDescendantOf(this.$data)) return false;
  var blocks = [];
  var curSectionElt, blockElt;

  for (var i = 0; i < this.$data.childNodes.length; ++i) {
    blockElt = this.$data.childNodes[i];
    if (blockElt.hasClass('ap-editable-section')) curSectionElt = blockElt;

    if (curSectionElt === sectionElt) {
      blocks.push(blockElt);
    }
  }

  blocks.forEach(blk => blk.selfRemove());
  this.updateIdx();
  this.treeEditor.reload();
};

PoserEditor.prototype.duplicateQuestion = function (questionElt) {
  var parent = questionElt.parentElement;
  var data = questionElt.data.export();

  var newQuestion = this._makeQuestion({
    data: data
  });

  parent.addChildAfter(newQuestion, questionElt);
  this.updateIdx(parent);
  this.treeEditor.reload();
  setTimeout(() => {
    this.focusBlock(newQuestion, true);
  }, 100);
};

PoserEditor.prototype.toggleTreeEditor = function () {
  if (this.$view.containsClass('ap-open-tree-editor')) {
    this.$view.removeClass('ap-open-tree-editor');
  } else {
    this.$view.addClass('ap-open-tree-editor');
  }
};

PoserEditor.prototype.exportJS = function () {
  var jsCode = 'module.exports = ' + JSON.stringify(this.getData(), null, 4).replace(/"([^"]+)":/g, function (all, g1) {
    return g1 + ':';
  }) + ';';
  (0, _FileSaver.saveTextAs)(jsCode, 'question_data.js');
};

PoserEditor.prototype.focusBlock = function (block, scrollInto) {
  if (this._currentFocusBlock) {
    this._currentFocusBlock.removeClass('ap-focus');

    this._currentFocusBlock.bindingTreeNode.removeClass('ap-focus');

    this._currentFocusBlock = null;
  }

  this._currentFocusBlock = block;

  if (this._currentFocusBlock) {
    this._currentFocusBlock.addClass('ap-focus');

    this._currentFocusBlock.bindingTreeNode.addClass('ap-focus');

    if (scrollInto) (0, _utils.vScrollIntoView)(this._currentFocusBlock);
    if (this._currentFocusBlock.bindingTreeNode.getBoundingClientRect().height > 10) (0, _utils.vScrollIntoView)(this._currentFocusBlock.bindingTreeNode);
  }

  this._updateCmdButtons();
};

PoserEditor.prototype.deleteBlock = function (blockElt) {
  if (blockElt === this.$data.firstChild) return false;
  if (!blockElt.isDescendantOf(this.$data)) return false;
  if (this._currentFocusBlock === blockElt) this._currentFocusBlock = null;
  blockElt.selfRemove();
  this.updateIdx();

  this._updateCmdButtons();

  this.treeEditor.reload();
};

PoserEditor.prototype.deleteFocusBlock = function () {
  if (this._currentFocusBlock) this.deleteBlock(this._currentFocusBlock);
};

PoserEditor.prototype.notifyChange = function () {
  this.emit('change', {
    type: 'change',
    target: this
  }, this);
};

PoserEditor.prototype.ev_contextMenu = function (event) {
  var thisE = this;
  event.stopPropagation();
  var target = event.target;
  var temp = target;

  while (temp) {
    if (temp.classList && temp.classList.contains(_BoardTable.default.DRAG_ZONE_CLASS_NAME)) return;
    temp = temp.parentElement;
  }

  var questionElt = this._findQuestionElt(target);

  var sectionGroupElt = this._findSectionGroupElt(target);

  var menuItems = [{
    text: 'Thêm section',
    cmd: 'delele_section',
    icon: 'span.mdi.mdi-playlist-plus'
  }];

  if (sectionGroupElt) {
    menuItems.push({
      text: 'Nhân bản section',
      cmd: 'duplicate_section',
      icon: 'span.mdi.mdi-content-duplicate'
    });
  }

  if (questionElt) {
    menuItems.push("-----------", {
      text: "Thêm câu hỏi",
      cmd: 'new_question',
      icon: 'span.mdi.mdi-comment-plus-outline'
    }, {
      text: "Nhân bản câu hỏi",
      cmd: "duplicate_question",
      icon: 'span.mdi.mdi-comment-multiple-outline'
    });
  }

  event.showContextMenu({
    items: menuItems
  }, function (event) {
    var item = event.menuItem;

    switch (item.cmd) {
      case 'duplicate_section':
        break;
    }
  });
};

PoserEditor.prototype.addNewSection = function (props) {
  var userAction = props && props.target && props.type;
  if (userAction) props = {};

  var newSection = this._makeSection(props || {});

  if (this._currentFocusBlock && this._currentFocusBlock.parentElement === this.$data) {
    this.$data.addChildAfter(newSection, this._currentFocusBlock);
  } else {
    this.$data.addChild(newSection);
  }

  this.treeEditor.reload();
  this.focusBlock(newSection, true);
  this.updateIdx();
  if (userAction) this.notifyChange();
};

PoserEditor.prototype.addNewQuestion = function (props) {
  var userAction = props && props.target && props.type;
  if (userAction) props = {};

  if (this.$data.childNodes.length === 0) {
    this.addNewSection();
  }

  var newQuestion = this._makeQuestion(props || {});

  if (this._currentFocusBlock && this._currentFocusBlock.parentElement === this.$data) {
    this.$data.addChildAfter(newQuestion, this._currentFocusBlock);
  } else {
    this.$data.addChild(newQuestion);
  }

  this.treeEditor.reload();
  this.focusBlock(newQuestion, true);
  this.updateIdx();
  if (userAction) this.notifyChange();
};

PoserEditor.prototype.openYesNoQuestionDialog = function (title, message) {
  return new Promise(resolve => {
    if (window.ModalElement && window.ModalElement.question) {
      window.ModalElement.question({
        title: title,
        message: message,
        onclick: function (sel) {
          if (sel === 0) {
            resolve(true);
          } else {
            resolve(false);
          }
        }
      });
    } else {
      var modal = (0, _Core._)({
        tag: _Modal.default.tag,
        child: {
          tag: _YesNoQuestionDialog.default.tag,
          props: {
            textYes: 'Có',
            textNo: 'Không',
            message: message,
            dialogTitle: title
          },
          on: {
            action: event => {
              modal.remove();
              resolve(event.action.name === 'yes');
            }
          }
        }
      }).addTo(document.body);
    }
  });
};
/***
 *
 * @param {Object=} opt
 */


PoserEditor.prototype.print = function (opt) {
  _Dom.default.printElement(Object.assign({
    elt: this.getView(),
    keepBackgroundColor: false
  }, opt || {}));
};
/***
 *
 * @param {Object=} opt
 */


PoserEditor.prototype.downloadAsPdf = function (opt) {
  opt = opt || {};

  if (window.ModalElement && window.ModalElement.show_loading) {
    window.ModalElement.show_loading();
  } else {
    this._loadingToken = _LoadingCubeModal.default.show();
  }

  (0, _printer.exportPoserElementAsPDF)(this.getView(), opt).then(() => {
    if (window.ModalElement && window.ModalElement.close) {
      window.ModalElement.close();
    } else {
      _LoadingCubeModal.default.close(this._loadingToken);
    }
  });
};

var _default = PoserEditor;
exports.default = _default;