nyx_server/ui/visual/js/module/banner/bannerList.js

Node内容发布

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

  var doc = document;
  var win = window;

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

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

    initParams: function () {
      // 设置一个状态，用来界定内容是否改变
      this.isChange = true;
      // 设置一个状态，标识列表是否显示。
      this.isShow = false;
      this.strip = $('<div class="t-strip"></div>');
      this.sortTarget = null;
      this.sortDirect = null;
    },

    initLayout: function () {
      this.layout = $('<div class="t-tools-aside-list t_anim_long" data-topicSystem="true"></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('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('mousedown', '.t-list-drag', function (e) {
        var beginY = e.pageY;
        _this.beginDrag(beginY, this);
      });
    },

    beginDrag: function (beginY, dragElm) {

      var _this = this;

      $(doc.body).on('mousemove.listDrag', function (e) {
        var currentY = e.pageY;
        _this.draging(beginY, currentY, dragElm);
      });

      $(doc.body).on('mouseup.listDrag', function () {
        _this.dragEnd(dragElm);
      });

    },

    draging: function (beginY, currentY, dragElm) {

      var scrollTop = $(win).scrollTop();
      var _this = this;
      $(dragElm).addClass('t-list-draging');
      $(dragElm).css('-webkit-transform', 'translateY(' + (currentY - beginY) + 'px)');
      this.layout.find('.t-list-drag').each(function () {
        var r = this.getBoundingClientRect();

        if (this !== dragElm && r.top + scrollTop < currentY && r.bottom + scrollTop > currentY) {
          _this.sortTarget = this;

          if (r.top + r.height / 2 > currentY) {
            _this.sortDirect = 'before';
            $(this).before(_this.strip);
          } else {
            _this.sortDirect = 'after';
            $(this).after(_this.strip);
          }

          return;
        }
      });

    },

    dragEnd: function (dragElm) {
      $(dragElm).removeClass('t-list-draging');
      $(dragElm).css('-webkit-transform', '');
      $(doc.body).off('.listDrag');

      if (this.sortTarget !== null) {
        this.strip.replaceWith(dragElm);

        this.trigger(
          'dragEnd',
          $(dragElm).attr('data-uid'),
          $(this.sortTarget).attr('data-uid'),
          this.sortDirect
        );

        this.sortTarget = null;
        this.sortDirect = null;
      }
    },

    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;
      }

      var list = [];
      var banners = topic.bannerGroup.banners;
      var banner;
      var visibleClass;
      var dragClass;
      var title, dragTitle, editableTitle, visibleTitle;
      var hideClass;
      var editableClass;

      var groups = this.getGroup();

      for (var i = 0, iLen = groups.length; i < iLen; i++) {
        banner = banners[groups[i]];
        visibleClass = banner.visible ? '' : 't-list-invisible';
        dragClass = banner.data.type === 0 ? 't-list-drag' : '';
        editableClass = banner.data.editable ? 't-list-edit' : '';
        hideClass = banner.isHide ? 't-list-hide' : '';
        title = banner.visible ? '点击定位到该通栏' : '点击编辑该通栏';
        dragTitle = banner.data.type === 0 ? '可拖动排序' : '';
        editableTitle = banner.data.editable ? '可编辑' : '不可编辑';
        visibleTitle = banner.isHide ? '显示遮罩' : '隐藏遮罩';

        list.push('<div data-topicSystem="true" class="t-list-item ' + visibleClass + ' ' +
              dragClass + ' ' + editableClass + ' ' + hideClass +
              '" data-uid="' + banner.uid + '" title="' + title + '">' +
          '<em class="id_handle" data-topicSystem="true"><i data-topicSystem="true">' +
              banner.data.id + '</i></em>' +
          banner.data.name +
          '<span class="edit_handle" data-topicSystem="true" data-uid="' +
              banner.uid + '" title="' + editableTitle + '"></span>' +
          '<span class="visible_handle" data-topicSystem="true" data-uid="' +
              banner.uid + '" title="' + visibleTitle + '" data-isHide="' +
              banner.isHide + '"></span>' +
          '<span class="drag_handle" data-topicSystem="true" title="' + dragTitle + '"></span>' +
        '</div>');
      }

      this.layout.html(list.join(''));

    },

    // 通过获取html代码中注释的顺序来生成一个通栏对应uid数组，
    // 这样做的目的在于，获取到的通栏顺序是和文档中出现的顺序严格保持一致的。
    // 避免了对banners对象顺序的维护。
    getGroup: function () {
      var comments = lib.getComments('banner:begin:');
      var groups = [];
      var data;

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

      return groups;
    }

  };

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