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

Node内容发布

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

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

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

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

    paramInit: function () {
      this.defaultDirect = 'down';
    },

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

    position: function (elm) {
      
      var layout = this.layout;
      var r = elm.getBoundingClientRect();
      var offset = $(elm).offset();
      var top = offset.top;
      var left = offset.left;
      var height = r.height;
      var width = r.width;
      var windowHeight = $(win).height();
      var windowWidth = $(win).width();
      var windowScrollTop = $(win).scrollTop();
      var windowScrollLeft = $(win).scrollLeft();
      var infoWidth = layout[0].getBoundingClientRect().width;

      if (top + height + 30 < windowScrollTop + windowHeight) {
        layout.css({
          top: (top + height + 10) + 'px'
        });
        layout.addClass('t_mask_info_arrow');
        layout.addClass('t_mask_info_arrow_up');
        layout.removeClass('t_mask_info_arrow_down');
      } else if (top + 30 > windowScrollTop) {
        layout.css({
          top: (top - 30) + 'px'
        });
        layout.addClass('t_mask_info_arrow');
        layout.addClass('t_mask_info_arrow_down');
        layout.removeClass('t_mask_info_arrow_up');
      } else {
        layout.css({
          top: (windowScrollTop + 5) + 'px'
        });
        layout.removeClass('t_mask_info_arrow');
        layout.removeClass('t_mask_info_arrow_down');
        layout.removeClass('t_mask_info_arrow_up');
      }

      // marginLeft 是用来减去右侧的工具条的宽度。
      if (left + infoWidth + marginLeft <= windowScrollLeft + windowWidth) {
        layout.addClass('t_mask_info_arrow_left');
        layout.removeClass('t_mask_info_arrow_right');
        layout.css({
          left: left + 'px'
        });
      } else {
        layout.addClass('t_mask_info_arrow_right');
        layout.removeClass('t_mask_info_arrow_left');
        layout.css({
          left: (left + width - infoWidth) + 'px'
        });
      }
    },

    fillContent: function (elm) {
      this.layout.html(lib.contentInfoCreate(elm));
    },

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

    hide: function () {
      this.layout.hide();
    }

  };

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

}(topicJquery, topic.utils));