nyx_server/ui/visual/js/module/fragment/fragmentMenu.js

Node内容发布

// @todo 这里是做成构造函数还是做成单一对象呢？再思考一下。
(function ($, lib, conf) {
  'use strict';

  var win = window;
  var doc = document;

  var FragmentMenu = function (fragment) {
    this.init(fragment);
  };

  FragmentMenu.prototype = {
    init: function (fragment) {
      this.initParams(fragment);
      this.initLayout();
      this.initEvent();
    },

    initParams: function (fragment) {
      this.fragment = fragment;
    },

    initLayout: function () {
      this.layout = $('<div class="t-fragment-layout-tools" data-topicSystem="true">' +
        '<span data-action="trans" class="t-fragment-layout-tools-trans t_anim_long" ' +
            'data-topicSystem="true">转换</span>' +
        '<span data-action="edit" class="t-fragment-layout-tools-edit t_anim_long" ' +
            'data-topicSystem="true">编辑</span>' +
        '<span data-action="restore" class="t-fragment-layout-tools-restore t_anim_long" ' +
            'data-topicSystem="true">还原</span>' +
        '<span data-action="refresh" class="t-fragment-layout-tools-refresh t_anim_long" ' +
            'data-topicSystem="true">刷新</span>' +
        // '<span data-action="cancel" class="t-fragment-layout-tools-cancel t_anim_long" ' +
        //     'data-topicSystem="true">取消</span>' +
        '<span data-action="copy" class="t-fragment-layout-tools-copy t_anim_long" ' +
            'data-topicSystem="true">复制</span>' +
        '<span data-action="replace" class="t-fragment-layout-tools-replace t_anim_long" ' +
            'data-topicSystem="true">粘贴</span>' +
      '</div>');
      this.mask = $('<div class="t_screenMask t_system" data-topicSystem="true"></div>');
      $(doc.body).append(this.mask);
      $(doc.body).append(this.layout);
    },

    initEvent: function () {
      var _this = this;
      this.layout.on('click', 'span', function () {

        if ($(this).hasClass('disable')) {
          return;
        }

        var action = $(this).attr('data-action');
        _this[action](this);
      });
      this.mask.on('click', function () {
        _this.cancel();
      });
    },
    hide: function () {
      this.layout.removeClass('show');
    },
    show: function (x, y) {
      var layout = this.layout;
      layout.removeClass('t_anim_long');
      this.maskShow();
      this.checkButtonStates();

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

      setTimeout(function () {
        layout.addClass('t_anim_long');
        layout.addClass('show');
      }, 100);
    },
    position: function (x, y) {
      var windowScrollTop = $(win).scrollTop();
      var windowScrollLeft = $(win).scrollLeft();
      var windowHeight = $(win).height();
      var windowWidth = $(win).width();
      var boxSizeY = 55;
      var boxSizeX = 55;
      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'
      });
    },

    checkButtonStates: function () {
      this.checkReplaceButtonState();
      this.checkTransButtonState();
    },

    checkReplaceButtonState: function () {
      var className = 'disable';
      var clipboard = localStorage['clipboard'];

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

      if (clipboard !== '' &&
          clipboard.type !== 'banner' &&
          clipboard.content.id !== this.fragment.id) {
        className = '';
      }

      this.layout.find('.t-fragment-layout-tools-replace').addClass(className);
    },

    checkTransButtonState: function () {
      var currentPageId = topic_global_params.page.id;
      var fragmentPageId = this.fragment.data.pageId;
      var className = 'disable';

      if (currentPageId !== fragmentPageId) {
        className = '';
      }

      this.layout.find('.t-fragment-layout-tools-trans').addClass(className);
    },

    maskShow: function () {
      this.mask.show();
    },
    maskHide: function () {
      this.mask.hide();
    },
    edit: function () {
      this.fragment.edit();
    },
    copy: function (elm) {
      this.fragment.copy(elm);
    },
    replace: function () {
      this.fragment.replace();
    },
    trans: function (elm) {
      this.fragment.trans(elm);
    },
    restore: function (elm) {
      // @todo 应该把确认框放到这里
      this.fragment.restore(elm);
    },
    refresh: function () {
      this.fragment.refresh();
    },
    cancel: function () {
      this.hide();
      this.maskHide();
    },
    destroy: function () {
      this.layout.remove();
      this.mask.remove();
    }
  };

  topic.Events.mixTo(FragmentMenu);
  lib.ns('topic.module').FragmentMenu = FragmentMenu;

}(topicJquery, topic.utils, topic.conf));