nyx_server/ui/visual/js/module/design/maskSeletor.js

Node内容发布

(function ($, lib) {
  'use strict';

  var win = window;
  var doc = document;

  var MaskSelector = function () {
    this.init();
  };

  MaskSelector.prototype = {
    init: function () {
      this.paramInit();
      this.render();
      this.eventInit();
    },

    paramInit: function () {
      this.maskTimer = null;
      this.maskFliterType = 'pass';
      this.lockeElm = null;
      this.locked = false;
      // @todo 考虑一下，是否放到topic.state中维护
      // this.status = topic.state.get('isDesign') ? 'enable' : 'disable';
    },

    render: function () {
      this.layout = $('<div id="t_mask" class="t_mask t_anim" data-topicSystem="true"></div>');
      $(doc.body).append(this.layout);
    },

    eventInit: function () {
      doc.body.addEventListener('click', $.proxy(this.selectElm, this), true);
      $(doc.body).on('mouseover', $.proxy(this.maskDelay, this));
    },

    show: function () {
      this.layout.show();
      this.trigger('show');
    },

    hide: function () {
      this.layout.hide();
      this.trigger('hide');
    },

    select: function (elm, x, y) {
      var elementTree = lib.getElementTree(elm);
      this.lock(elm);
      this.trigger('select', elm, elementTree, x, y);
    },

    lock: function (elm) {
      this.changeLockElm(elm);
      this.locked = true;
    },

    changeLockElm: function (elm) {
      this.lockeElm = elm;
    },

    unlock: function () {
      this.changeLockElm(null);
      this.locked = false;
    },

    isLocked: function () {
      return this.locked;
    },

    selectElm: function (e) {
      var elm = e.target;

      if (elm.getAttribute('data-topicSystem') === 'true' ||
          this.getDesignStatus() === false || this.isLocked()) {
        return;
      }

      e.stopPropagation();
      e.preventDefault();

      var type = this.checkElmMaskFilterType(elm);

      if (type === 'pass' || type === 'notLarkSource') {
        this.select(elm, e.pageX, e.pageY);
      }

    },

    maskDelay: function (e) {

      var elm = e.target;
      var _this = this;
      clearTimeout(this.maskTimer);

      if (this.locked || this.getDesignStatus() === false) {
        return;
      }

      this.maskTimer = setTimeout(function () {
        _this.mask(elm);
      }, 50);
    },

    mask: function (elm) {

      var type = this.checkElmMaskFilterType(elm);
      if (type === 'isBody' || type === 'isSystem' ||
          type === 'hasFragment' || type === 'belongFragment') {
        this.hide();
        return;
      }

      if (type !== 'pass') {
        this.layout.addClass('t_mask_disabled');
      } else {
        this.layout.removeClass('t_mask_disabled');
      }

      var r = elm.getBoundingClientRect();
      var offset = $(elm).offset();
      var top = offset.top;
      var left = offset.left;
      var height = r.height;
      var width = r.width;
      this.layout.css({
        top: top + 'px',
        left: left + 'px',
        height: height + 'px',
        width: width + 'px'
      });
      this.show(elm);
      this.trigger('mask', elm);
    },

    checkElmMaskFilterType: function (elm) {
      var type = lib.getElmMaskFilterType(elm);
      console.log(type);
      this.maskFliterType = type;
      return type;
    },

    isMaskable: function () {
      return this.maskFliterType === 'pass';
    },

    getDesignStatus: function () {
      return topic.state.get('isDesign');
    }
  };

  topic.Events.mixTo(MaskSelector);

  lib.ns('topic.module').MaskSelector = MaskSelector;

}(topicJquery, topic.utils));