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

Node内容发布

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

  var win = window;
  var doc = document;
  var marginLeft = 50;

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

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

    paramInit: function () {
      
    },

    render: function () {
      this.layout = $('<div class="t_fragment_menu" data-topicSystem="true">' +
        '<span class="t_fragment_menu_ok t_anim_long" data-action="create" data-topicSystem="true">切它</span>' +
        // '<span class="t_fragment_menu_cancel t_anim_long" data-action="cancel" data-topicSystem="true">取消</span>' +
        '<span class="t_fragment_menu_parent t_anim_long" data-action="parent" data-topicSystem="true">上一级</span>' +
        '<span class="t_fragment_menu_child t_anim_long" data-action="child" data-topicSystem="true">下一级</span>' +
        '<span class="t_fragment_menu_replace t_anim_long" data-action="replace" data-topicSystem="true">粘贴</span>' +
      '</div>');
      this.mask = $('<div class="t_screenMask t_system" data-topicSystem="true"></div>');
      this.parentButton = this.layout.find('.t_fragment_menu_parent');
      this.childButton = this.layout.find('.t_fragment_menu_child');
      this.createButton = this.layout.find('.t_fragment_menu_ok');
      this.replaceButton = this.layout.find('.t_fragment_menu_replace');
      $(doc.body).append(this.mask);
      $(doc.body).append(this.layout);
    },

    eventInit: function () {
      var _this = this;
      this.layout.on('click', 'span', function () {
        var action = $(this).attr('data-action');
        _this[action]();
      });
      this.mask.on('click', $.proxy(this.hide, this));
    },

    bind: function (elm, elmTree, x, y) {

      if (typeof x !== 'undefine') {
        this.show(x, y);
      }

      this.elmTree = elmTree;
      this.changeState(elm);
    },

    show: function (x, y) {
      var layout = this.layout;
      layout.removeClass('t_anim_long');
      this.mask.show();

      if (typeof x !== 'undefined' && typeof y !== 'undefined') {
        this.position(x, y);
      }

      setTimeout(function () {
        layout.addClass('t_anim_long');
        layout.addClass('t_fragment_menu_show');
      }, 100);
    },

    position: function (x, y) {
      var windowScrollTop = $(win).scrollTop();
      var windowScrollLeft = $(win).scrollLeft();
      var windowHeight = $(win).height();
      var windowWidth = $(win).width();
      var boxSizeY = 70;
      var boxSizeX = 70;
      var pathbarHeight = 24;

      if (y < boxSizeY + windowScrollTop) {
        y = windowScrollTop + boxSizeY;
      } else if (y + boxSizeY + pathbarHeight > windowScrollTop + windowHeight) {
        y = windowScrollTop + windowHeight - boxSizeY - pathbarHeight;
      }

      if (x < boxSizeX + windowScrollLeft) {
        x = windowScrollLeft + boxSizeX;
      } else if (x + boxSizeX > windowScrollLeft + windowWidth) {
        x = windowScrollLeft + windowWidth - boxSizeX;
      }

      this.layout.css({
        top: y + 'px',
        left: x + 'px'
      });
    },

    changeState: function (elm) {
      this.elm = elm;
      this.stateRefresh(elm);
    },

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

    buttonDisable: function (elm) {
      elm.addClass('t_fragment_menu_disable');
    },

    buttonEnable: function (elm) {
      elm.removeClass('t_fragment_menu_disable');
    },

    isButtonDisable: function (elm) {
      return elm.hasClass('t_fragment_menu_disable');
    },

    stateRefresh: function (elm) {
      this.cutButtonStateRefresh(elm);
      this.replaceButtonStateRefresh(elm);
      this.parentButtonStateRefresh(elm);
      this.childButtonStateRefresh(elm);
    },

    cutButtonStateRefresh: function (elm) {
      var type = lib.getElmMaskFilterType(elm);

      if (type === 'pass') {
        this.buttonEnable(this.createButton);
      } else {
        this.buttonDisable(this.createButton);
        
      }
    },

    replaceButtonStateRefresh: function (elm) {
      var type = lib.getElmMaskFilterType(elm);
      var clipboard = localStorage['clipboard'];

      if (clipboard !== '') {
        clipboard = JSON.parse(clipboard);
      }

      if (type !== 'pass' || clipboard === '' ||
          clipboard.type === 'banner') {
        this.buttonDisable(this.replaceButton);
      } else {
        this.buttonEnable(this.replaceButton);
      }
    },

    parentButtonStateRefresh: function (elm) {
      var elmTree = this.elmTree;
      var node;
      var isParent = false;

      for (var i = elmTree.length - 1; i >= 0; i--) {
        node = elmTree[i];

        if (isParent) {

          if (node.type === 'pass') {
            this.buttonEnable(this.parentButton);
            this.parentElm = node.elm;
            return;
          }
        } else {
          isParent = elm === node.elm;
        }
      }

      this.buttonDisable(this.parentButton);
      this.parentElm = null;
    },

    childButtonStateRefresh: function (elm) {

      var elmTree = this.elmTree;
      var node;
      var isChild = false;

      for (var i = 0, iLen = elmTree.length; i < iLen; i++) {
        node = elmTree[i];

        if (isChild) {

          if (node.type === 'pass') {
            this.buttonEnable(this.childButton);
            this.childElm = node.elm;
            return;
          }
        } else {
          isChild = elm === node.elm;
        }
      }

      this.buttonDisable(this.childButton);
      this.childElm = null;
    },

    cancel: function () {
      this.hide();
    },

    parent: function () {

      if (this.isButtonDisable(this.parentButton)) {
        return;
      }

      var elm = this.parentElm;
      this.trigger('select', elm);
      this.changeState(elm);
    },

    child: function () {

      if (this.isButtonDisable(this.childButton)) {
        return;
      }

      var elm = this.childElm;
      this.changeState(elm);
      this.trigger('select', elm);
    },

    create: function () {
      if (this.isButtonDisable(this.createButton)) {
        return;
      }

      this.trigger('create', this.elm);
    },

    replace: function () {
      if (this.isButtonDisable(this.replaceButton)) {
        return;
      }
      this.trigger('replace', this.elm);
    }
  };

  topic.Events.mixTo(Menu);

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

}(topicJquery, topic.utils));