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/dom/editor/APEditableSection.js ***/
"use strict";

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

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

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

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

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

var _Attributes = _interopRequireDefault(require("absol/src/AppPattern/Attributes"));

var _PreInput = _interopRequireDefault(require("absol-acomp/js/PreInput"));

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




/***
 * @extends AElement
 * @constructor
 */
function APEditableSection() {
  this.imageFiles = [];
  this.$idx = (0, _Core.$)('.ap-editable-question-index-input', this).on('change', this.eventHandler.idxInputChange);
  this.$imagebtn = (0, _Core.$)('.ap-editable-section-image-btn-ctn button', this).on('click', this.eventHandler.clickAddImage);
  this.$imageCtn = (0, _Core.$)('.ap-editable-image-ctn', this);
  this.$attachmentAddBtn = (0, _Core.$)('.as-message-input-attachment-add-btn', this).on('click', this.eventHandler.clickAddImage);
  /***
   *
   * @type {PreInput}
   */

  this.$description = (0, _Core.$)('.ap-editable-section-description', this).on('focus', this.eventHandler.descInputFocus).on('blur', this.eventHandler.descInputBlur);
  this.$name = (0, _Core.$)('.ap-editable-section-name', this).on('change', this.eventHandler.nameInputChange);
  this.$actionBtns = (0, _Core.$$)('.ap-editable-section-tool button', this).forEach(btn => {
    btn.on('click', this.eventHandler.clickActionButton.bind(this, btn.attr('data-action')));
  });
  this._data = new _Attributes.default(this);

  this._data.loadAttributeHandlers(this.dataHandlers);

  this.idx = 1;
}

APEditableSection.tag = "APEditableSection".toLowerCase();

APEditableSection.render = function () {
  return (0, _Core._)({
    extendEvent: ['action', 'change'],
    class: ['ap-block', 'ap-editable-section'],
    child: [{
      class: 'ap-editable-section-header',
      child: [{
        class: 'ap-editable-section-idx',
        child: [{
          class: 'ap-field-name',
          child: {
            tag: 'span',
            child: {
              text: 'Thứ tự section'
            }
          }
        }, {
          tag: 'input',
          class: ['ap-input', 'ap-editable-question-index-input'],
          attr: {
            type: 'number',
            pattern: "\d*",
            inputmode: "decimal",
            value: 1,
            step: 1,
            min: 1,
            max: 3200,
            readonly: 'true'
          }
        }]
      }, {
        class: 'ap-editable-section-tool',
        child: [{
          tag: 'button',
          class: 'ap-button',
          attr: {
            'data-action': 'merge_with_above',
            title: 'Hợp nhất với section trước'
          },
          child: 'span.mdi.mdi-call-merge'
        }, {
          tag: 'button',
          class: 'ap-button',
          attr: {
            "data-action": 'delete',
            title: 'Xóa section'
          },
          child: 'span.mdi.mdi-delete-forever'
        }]
      }]
    }, {
      class: 'ap-editable-section-content',
      child: [{
        class: 'ap-editable-section-name-ctn',
        child: [{
          child: {
            class: 'ap-field-name',
            child: {
              tag: 'span',
              child: {
                text: 'Tên Section'
              }
            }
          }
        }, {
          tag: 'input',
          attr: {
            type: 'text'
          },
          class: ['ap-input', 'ap-editable-section-name']
        }]
      }, {
        class: 'ap-editable-section-description-ctn',
        child: [{
          child: {
            class: 'ap-field-name',
            child: {
              tag: 'span',
              child: {
                text: 'Mô tả Section'
              }
            }
          }
        }, {
          tag: _PreInput.default.tag,
          class: ['ap-input', 'ap-editable-section-description']
        }]
      }, {
        class: 'ap-editable-image-ctn',
        child: [{
          tag: 'button',
          class: 'as-message-input-attachment-add-btn',
          child: [// 'span.mdi.mdi-arrow-down-bold.as-message-input-attachment-add-btn-drop',
          {
            tag: 'span',
            class: 'as-message-input-attachment-add-btn-plus',
            child: {
              text: "+"
            }
          }]
        }]
      }, {
        class: 'ap-editable-section-image-btn-ctn',
        child: {
          tag: 'button',
          class: 'ap-button',
          child: 'span.mdi.mdi-image-outline'
        }
      }]
    }]
  });
};

APEditableSection.prototype.apBlockType = "section";
/***
 *
 * @param {File|string} file
 * @param {Event|*} originalEvent
 * @public
 */

APEditableSection.prototype._addImage = function (file, originalEvent) {
  var thisA = this;
  var src;
  var fileName;

  if (typeof file === "string") {
    src = file;
    fileName = file.split('/').pop() || '';
  } else if (file instanceof Blob || file instanceof File) {
    src = (0, _utils2.toImageUrl)(file);
    fileName = file.name;
  } else return;

  this.imageFiles.push(file);
  this.addClass('ap-has-image');
  var itemElt = (0, _Core._)({
    class: ['as-message-input-attach-preview', 'as-image'],
    attr: {
      title: file.name
    },
    child: [{
      class: 'as-message-input-attach-preview-image',
      style: {
        backgroundImage: 'url(' + src + ')'
      }
    }, {
      tag: 'button',
      class: 'as-message-input-attach-preview-close-btn',
      child: 'span.mdi.mdi-close',
      attr: {
        title: 'remove'
      },
      on: {
        click: function (event) {
          var idx = thisA.imageFiles.indexOf(file);

          if (idx >= 0) {
            thisA.imageFiles.splice(idx, 1);
          }

          itemElt.remove();

          if (thisA.imageFiles.length === 0) {
            thisA.removeClass('ap-has-image');
          }

          thisA.emit('change', {
            type: 'change',
            target: thisA,
            fieldName: 'images'
          }, thisA);
        }
      }
    }, {
      class: 'as-message-input-attach-preview-info',
      child: [{
        class: 'as-message-input-attach-preview-name',
        child: {
          text: fileName
        }
      }, {
        class: 'as-message-input-attach-preview-size',
        child: {
          text: (0, _utils.fileSize2Text)(file.size)
        }
      }]
    }]
  });
  this.$imageCtn.addChildBefore(itemElt, this.$attachmentAddBtn);
  if (originalEvent) this.emit('change', {
    type: 'change',
    target: this,
    fieldName: 'images'
  }, this);
};

APEditableSection.property = {};
APEditableSection.property.idx = {
  set: function (value) {
    if (typeof value !== "number") value = 1;
    value = Math.max(1, Math.min(3200, value)) << 0;
    this.$idx.value = value;
    this.attr('data-idx', value);
  },
  get: function () {
    return parseInt(this.$idx.value);
  }
};
APEditableSection.property.data = {
  set: function (value) {
    Object.assign(this._data, value);
  },
  get: function () {
    return this._data;
  }
};
APEditableSection.eventHandler = {};
/***
 * @this APEditableSection
 */

APEditableSection.eventHandler.clickAddImage = function (event) {
  var thisA = this; // var image = prompt("Enter image url: ", '');
  // if (image && image.trim().length >0){
  //     thisA._addImage(image.trim(), event);
  // }
  // //

  (0, _utils.openFileDialog)({
    accept: "image/*"
  }).then(files => {
    if (files && files[0]) {
      thisA._addImage(files[0], event);
    }
  });
};

APEditableSection.eventHandler.clickActionButton = function (action, event) {
  this.emit('action', {
    action: action,
    target: this,
    type: 'action',
    originalEvent: event
  }, this);
};

APEditableSection.eventHandler.idxInputChange = function (event) {
  this.$idx.value = Math.min(32000, Math.max(1, parseInt(this.$idx.value))) << 0;
  this.emit('action', {
    action: 'set_idx',
    idx: this.idx,
    target: this,
    type: 'action',
    originalEvent: event
  }, this);
};
/***
 * @this APEditableSection
 * @param event
 */


APEditableSection.eventHandler.nameInputChange = function (event) {
  this.emit('change', {
    type: 'change',
    target: this,
    originalEvent: event,
    fieldName: 'name'
  }, this);
};
/***
 * @this APEditableSection
 * @param event
 */


APEditableSection.eventHandler.descInputFocus = function (event) {
  this._prevDescVal = this.$description.value;
};
/***
 * @this APEditableSection
 * @param event
 */


APEditableSection.eventHandler.descInputBlur = function (event) {
  var value = this.$description.value;

  if (value !== this._prevDescVal) {
    this.emit('change', {
      type: 'change',
      target: this,
      originalEvent: event,
      fieldName: 'description'
    }, this);
  }
};

APEditableSection.prototype.dataHandlers = {};
APEditableSection.prototype.dataHandlers.name = {
  set: function (value) {
    value = (value || '') + '';
    this.$name.value = value;
  },
  get: function () {
    return this.$name.value;
  }
};
APEditableSection.prototype.dataHandlers.description = {
  set: function (value) {
    value = (value || '') + '';
    this.$description.value = value;
  },
  get: function () {
    return this.$description.value;
  }
};
APEditableSection.prototype.dataHandlers.images = {
  /***
   * @this APEditableSection
   * @param images
   */
  set: function (images) {
    if (!(images instanceof Array)) images = [];

    while (this.$imageCtn.firstChild !== this.$attachmentAddBtn) {
      this.$imageCtn.removeChild(this.$imageCtn.firstChild);
    }

    this.imageFiles.splice(0, this.imageFiles.length);
    images.forEach(function (file) {
      this._addImage(file);
    }.bind(this));
  },
  get: function () {
    return this.imageFiles.slice();
  }
};
APEditableSection.prototype.dataHandlers.ident = {
  set: function (value) {
    if (!(0, _utils.isRealNumber)(value)) value = 0;
    this.attr('data-ident', value + '');
  },
  get: function () {
    var ident = parseInt(this.attr('data-ident'));
    if (!(0, _utils.isRealNumber)(ident)) ident = 0;
    return ident;
  }
};

_Core.default.install(APEditableSection);

var _default = APEditableSection;
exports.default = _default;