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

Node内容发布

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

  var doc = document;
  var win = window;

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

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

    initParams: function () {
      this.isChange = true;
      this.isShow = false;
    },

    initLayout: function () {
      this.layout = $('<nyx-div class="t-tools-aside-list t_anim_long" data-topicSystem="true">' +
          '<nyx-div data-topicSystem="true" class="t-tools-aside-list-tools">' +
            '<input type="text" value="" placeholder="输入过滤词" data-topicSystem="true" />' +
          '</nyx-div>' +
          '<nyx-div data-topicSystem="true" class="t-tools-aside-list-title">' +
            '<nyx-span class="t-closeAll" data-topicSystem="true"></nyx-span>' +
            '碎片列表' +
          '</nyx-div>' +
          '<nyx-div class="t-list-box"></nyx-div>' +
        '</nyx-div>');
      $(doc.body).append(this.layout);
    },

    initEvent: function () {
      var _this = this;
      
      this.layout.on('click', '.t-list-item', function () {
        var uid = $(this).attr('data-uid');
        _this.trigger('listClick', uid);
      });

      this.layout.on('click', '.t-list-item .edit_handle', function (e) {
        var uid = $(this).attr('data-uid');
        _this.trigger('editClick', uid, e.pageX, e.pageY);
        return false;
      });

      this.layout.on('click', '.t-list-item .visible_handle', function () {
        var isHide = $(this).attr('data-isHide') === 'true' ? true : false;
        var uid = $(this).attr('data-uid');
        if (!isHide) {
          $(this).attr('data-isHide', 'true');
          $(this).parents('.t-list-item').addClass('t-list-hide');
          $(this).attr('title', '显示遮罩');
        } else {
          $(this).parents('.t-list-item').removeClass('t-list-hide');
          $(this).attr('data-isHide', 'false');
          $(this).attr('title', '隐藏遮罩');
        }
        _this.trigger('hideClick', uid, isHide);
        return false;
      });

      // this.layout.on('click', '.t-list-item-parent u', function () {
      //   var $item = $(this).parent();
      //   if ($item.hasClass('t-list-item-open')) {
      //     $item.removeClass('t-list-item-open');
      //     $item.addClass('t-list-item-close');
      //     $item.next().slideUp();
      //   } else {
      //     $item.removeClass('t-list-item-close');
      //     $item.addClass('t-list-item-open');
      //     $item.next().slideDown();
      //   }
      // });

      this.layout.on('mouseenter', '.t-list-item', function () {
        var uid = $(this).attr('data-uid');
        _this.trigger('mouseenter', uid);
      });

      this.layout.on('mouseleave', '.t-list-item', function () {
        var uid = $(this).attr('data-uid');
        _this.trigger('mouseleave', uid);
      });

      this.layout.on('keyup', 'input', function () {
        _this.filter(this.value);
        _this.renderContent();
      });

      this.layout.on('click', '.t-expandAll', function () {
        _this.expand();
        $(this).addClass('t-closeAll').removeClass('t-expandAll');
      });

      this.layout.on('click', '.t-closeAll', function () {
        _this.unexpand();
        $(this).addClass('t-expandAll').removeClass('t-closeAll');
      });
    },

    hide: function () {
      this.layout.css('right', '');
      this.isShow = false;
    },

    show: function () {
      this.layout.css('right', '50px');
      this.isShow = true;
    },

    render: function () {
      if (!this.isChange || !this.isShow) {
        return;
      }
      // this.getGroup();
      this.getFragment();
      this.renderContent();
    },

    renderContent: function () {
      var fragments = topic.fragmentGroup.fragments;
      // var banners = topic.bannerGroup.banners;
      // var banner;
      var fragment;
      var items;
      var i, iLen;
      var list = [];
      var title, editableTitle, visibleTitle;
      var visibleClass;
      var hideClass;
      var editableClass;

      items = this.fragments;
      list.push('<nyx-div class="t-list-item-group">');

      for (i = 0, iLen = items.length; i < iLen; i++) {
        if (items[i].isFilter) {
          fragment = fragments[items[i].id];
          visibleClass = fragment.visible ? '' : 't-list-invisible';
          hideClass = fragment.isHide ? 't-list-hide' : '';
          editableClass = fragment.editable ? 't-list-edit' : '';
          title = fragment.visible ? '点击定位到该通栏' : '点击编辑该通栏';
          editableTitle = fragment.editable ? '可编辑' : '不可编辑';
          visibleTitle = fragment.isHide ? '显示遮罩' : '隐藏遮罩';
          list.push('<nyx-div class="t-list-item ' + visibleClass + ' ' + editableClass +
              ' ' + hideClass + '" data-uid="' + fragment.uid +
              '" data-topicSystem="true" title="' + title + '">' +
            '<nyx-em class="id_handle" data-topicSystem="true"><nyx-i data-topicSystem="true">' +
                fragment.id + '</nyx-i></nyx-em><nyx-u data-topicSystem="true"></nyx-u>' +
            '<nyx-div data-topicSystem="true">' + fragment.name + '</nyx-div>' +
            '<nyx-span class="edit_handle" data-topicSystem="true" data-uid="' +
                fragment.uid + '" title="' + editableTitle + '"></nyx-span>' +
            '<nyx-span class="visible_handle" data-topicSystem="true" data-uid="' +
                fragment.uid + '" title="' + visibleTitle + '" data-isHide="' +
                fragment.isHide + '"></nyx-span>' +
          '</nyx-div>');
        }
      }
      list.push('</nyx-div>');


      this.layout.find('.t-list-box').html(list.join(""));
    },

    // renderContent: function () {
    //   var fragments = topic.fragmentGroup.fragments;
    //   var banners = topic.bannerGroup.banners;
    //   var banner;
    //   var groups = {};
    //   var fragment;
    //   var items;
    //   var i, iLen;
    //   var list = [];
    //   var title, editableTitle, visibleTitle;
    //   var visibleClass;
    //   var hideClass;
    //   var editableClass;

    //   groups = this.groups;

    //   for (var key in groups) {
    //     items = groups[key].child;

    //     if (groups[key].filterCount > 0) {
    //       banner = banners[key];
    //       list.push('<div class="t-list-item-parent t-list-item-open" data-target="' +
    //           key + '" data-topicSystem="true"><em data-topicSystem="true">ID</em>' +
    //           '<u data-topicSystem="true"></u><span data-topicSystem="true">' + banner.data.name + '</span></div>');
    //       list.push('<div class="t-list-item-group" data-from="' +
    //           key + '" data-topicSystem="true">');

    //       for (i = 0, iLen = items.length; i < iLen; i++) {
            
    //         if (items[i].isFilter) {
    //           fragment = fragments[items[i].id];
    //           visibleClass = fragment.visible ? '' : 't-list-invisible';
    //           hideClass = fragment.isHide ? 't-list-hide' : '';
    //           editableClass = fragment.data.editable ? 't-list-edit' : '';
    //           title = fragment.visible ? '点击定位到该通栏' : '点击编辑该通栏';
    //           editableTitle = fragment.data.editable ? '可编辑' : '不可编辑';
    //           visibleTitle = fragment.isHide ? '显示遮罩' : '隐藏遮罩';
    //           list.push('<div class="t-list-item ' + visibleClass + ' ' + editableClass +
    //               ' ' + hideClass + '" data-uid="' + fragment.uid +
    //               '" data-topicSystem="true" title="' + title + '">' +
    //             '<em class="id_handle" data-topicSystem="true"><i data-topicSystem="true">' +
    //                 fragment.data.id + '</i></em><u data-topicSystem="true"></u>' +
    //             '<div data-topicSystem="true">' + fragment.data.name + '</div>' +
    //             '<span class="edit_handle" data-topicSystem="true" data-uid="' +
    //                 fragment.uid + '" title="' + editableTitle + '"></span>' +
    //             '<span class="visible_handle" data-topicSystem="true" data-uid="' +
    //                 fragment.uid + '" title="' + visibleTitle + '" data-isHide="' +
    //                 fragment.isHide + '"></span>' +
    //           '</div>');
    //         }
    //       }

    //       list.push('</div>');
    //     }
    //   }

    //   this.layout.find('.t-list-box').html(list.join(""));
    // },

    // expand: function () {
    //   this.layout.find('.t-list-item-parent').removeClass('t-list-item-close');
    //   this.layout.find('.t-list-item-parent').addClass('t-list-item-open');
    //   this.layout.find('.t-list-item-group').slideDown();
    // },

    // unexpand: function () {
    //   this.layout.find('.t-list-item-parent').addClass('t-list-item-close');
    //   this.layout.find('.t-list-item-parent').removeClass('t-list-item-open');
    //   this.layout.find('.t-list-item-group').slideUp();
    // },

    getFragment: function () {

      var comments = lib.getComments('chip:start');
      var fragments = [];
      var data;

      for (var i = 0, iLen = comments.length; i < iLen; i++) {
        data = lib.analyze(comments[i].data);
        fragments.push({id: data.uid, isFilter: true});
      }

      this.fragments = fragments;
    },

    // getGroup: function () {

    //   var comments = lib.getComments('begin:');
    //   var groups = {};
    //   var currentUid;
    //   var data;

    //   for (var i = 0, iLen = comments.length; i < iLen; i++) {
    //     data = lib.analyze(comments[i].data);

    //     if (data.model === 'banner') {
    //       currentUid = data.uid;
    //       groups[currentUid] = {unfold: true, child: [], filterCount: 0};
    //     } else {
    //       groups[currentUid].child.push({id: data.uid, isFilter: true});
    //       groups[currentUid].filterCount++;
    //     }
    //   }

    //   this.groups = groups;
    // },

    filter: function (filterWord) {
      var items = this.fragments;
      var name;
      var i, iLen;

      for (i = 0, iLen = items.length; i < iLen; i++) {
        name = topic.fragmentGroup.fragments[items[i].id].name;
        if (name.indexOf(filterWord) >= 0) {
          items[i].isFilter = true;
        } else {
          items[i].isFilter = false;
        }
      }
    }

    // filter: function (filterWord) {
    //   var groups = this.groups;
    //   var items;
    //   var name;
    //   var i, iLen;

    //   for (var key in groups) {
    //     items = groups[key].child;
    //     groups[key].filterCount = 0;

    //     for (i = 0, iLen = items.length; i < iLen; i++) {
    //       name = topic.fragmentGroup.fragments[items[i].id].data.name;

    //       if (name.indexOf(filterWord) >= 0) {
    //         items[i].isFilter = true;
    //         groups[key].filterCount++;
    //       } else {
    //         items[i].isFilter = false;
    //       }
    //     }
    //   }
    // }
  };

  topic.Events.mixTo(FragmentList);
  lib.ns('topic.module').FragmentList = FragmentList;
}(topicJquery, topic.utils, topic.conf));