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

Node内容发布

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

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

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

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

    paramInit: function () {
      
    },

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

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

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

        var selectElm = $('[lark-source="' + this.getAttribute('data-lark-source') + '"]')[0];
        _this.pathCurrentSet(selectElm);
        _this.trigger('select', selectElm);
      });

      // 对路径节点的提示说明的操作。
      this.layout.on('mouseenter', '.t_fragment_path_node', function () {
        _this.trigger('show', this);
      });

      this.layout.on('mouseleave', '.t_fragment_path_node', function () {
        _this.trigger('hide');
      });

    },

    pathCurrentSet: function (elm) {
      this.layout.find('span').removeClass('t_fragment_path_node_current');
      var currentElm = $('[data-lark-source = "' + $(elm).attr('lark-source') + '"]');
      currentElm.addClass('t_fragment_path_node_current');
    },

    fill: function (nodes, currentElm) {
      var node;
      var htmls = [];

      for (var i = 0, iLen = nodes.length; i < iLen; i++) {
        node = nodes[i];
        htmls.push(this.nodeCreate(node.elm, node.type, node.elm === currentElm));
      }

      this.layout.html(htmls.join(''));
    },

    nodeCreate: function (elm, type, isCurrent) {
      var current = isCurrent ? 't_fragment_path_node_current' : '';
      var info = lib.contentInfoCreate(elm);
      var disableClass = type === 'pass' ? '' : 't_fragment_path_node_disable';
      return '<span class="t_fragment_path_node ' + disableClass + ' ' + current + '" data-t-id="' +
          elm.id + '" data-t-tagName="' +
          elm.tagName.toLocaleLowerCase() + '" data-t-className="' + elm.className + '" data-lark-source="' +
          elm.getAttribute('lark-source') + '" data-topicSystem="true">' +
          info + '</span>';
    },

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

    hide: function () {
      this.layout.removeClass('t_fragment_path_show');
    }
  };

  topic.Events.mixTo(Path);

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

}(topicJquery, topic.utils));