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

Node内容发布

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

  var win = window;
  var doc = document;

  // 为fragment统一定义一个事件对象。
  var fragmentEvent = new topic.Events();

  var Fragment = function (commentElm) {
    this.init(commentElm);
  };

  Fragment.prototype = {

    init: function (commentElm, model) {
      this.initParams(commentElm);
      this.initLayout();
      this.initEvent();
    },

    initParams: function (commentElm, model) {
      this.initDataParams(commentElm);
      this.initElmParams(commentElm);
    },

    // initDataParams: function (commentElm) {
    //   var params = lib.analyze(commentElm.data);
    //   this.uid = params.uid;
    //   this.id = params.data.id;
    //   this.data = params.data;
    //   this.type = params.type;
    //   this.isHide = false;
    //   this.editable = typeof params.data.editable === 'undefined' ? true : params.data.editable;
    //   this.status = params.status;
    //   this.bannerId = params.data.bannerId;
    //   this.bannerUid = params.data.puuid;
    //   this.isPreview = false;
    // },

    initDataParams: function (commentElm) {
      var params = lib.analyze(commentElm.data);
      this.uid = params.uid;
      this.id = params.id;
      this.data = params.data;
      this.type = params.type;
      this.isHide = false;
      this.name = params.name;
      this.editable = typeof params.editable === 'undefined' ? true : params.editable;
      this.isPreview = false;
      this.ssi = params.ssi;
      this.bindTemplateId = params.bindTemplateId;
      this.projectName = params.projectName;
    },

    initElmParams: function (commentElm) {
      this.commentElm = commentElm;
      var result = lib.getIncludeElm(this.id, this.commentElm, 'chip');
      this.domNodes = result.domNodes;
      this.commentEndElm = result.commentEndElm;
      this.nodes = result.nodes;
      this.insideNodes = result.insideNodes;
    },

    // 因为碎片的type(静态，动态，推荐位)类型不能确定这个碎片是否能建立蒙层，
    // 所以对每个碎片都会建立一个蒙层
    initLayout: function () {
      var nodes;
      var label;
      var statusClass = this.status === 'error' ? ' t-fragment-layout-error' : '';
      var disableClass = this.editable ? '' : ' t-fragment-layout-disable';
      var hiddenClass = this.data.hidden === 0 ? '' : ' t-banner-layout-hidden';
      var title = this.name ? this.name : '';
      var hide = this.data.hidden === 0 ? '' : ' (隐藏)';
      var disable = this.editable ? '' : ' (不可编辑)';
      var positionClass;
      var matchClass = '|relative|absolute|fixed|';
      this.layout = $('<nyx-div id="t-fragment-layout-' +
          this.uid + '" data-maskId="' + this.uid + '" class="t-fragment-layout ' +
          't-fragment-layout-' + this.type + ' ' + disableClass +
          statusClass + hiddenClass + '" data-topicSystem="true">' +
        '<nyx-div class="t-fragment-layout-title" data-topicSystem="true">' + title + hide + disable + '</nyx-div>' +
      '</nyx-div>');
      this.title = this.layout.find('.t-fragment-layout-title');

      // vtype代表蒙层的嵌入类型，
      // 0 代表嵌入，是将蒙层放到碎片的dom节点内部，
      //   如果碎片的最外层dom节点不止一个，
      //   就需要在这些dom节点外面建立再添加一层根节点，将蒙层嵌入到此节点中
      // 1 代表浮动，直接将蒙层放置在body节点内即可
      // @note 内嵌碎片在添加蒙层时，为了相对定位和清除浮动，会对修改原始的html代码和样式
      //       有可能造成一些显示差异问题，如非必要，尽量使用浮动碎片。
      if (this.data.vtype === 0) {
        // 对碎片内部单一dom节点和多dom节点进行分别处理
        if (this.domNodes.length > 1) {
          nodes = this.nodes.slice();
          nodes.pop();
          nodes.shift();
          label = $('<nyx-label class="t-fragment-label-insert" data-topicSystem="true"></nyx-label>');
          label.append(this.layout);
          label.append(nodes);
          $(this.commentElm).after(label);
          this.nodes.push(label);
        } else {
          positionClass = $(this.domNodes).css('position');
          if (matchClass.indexOf('|' + positionClass + '|') < 0) {
            $(this.domNodes).addClass('t-fragment-insert-fixed');
          }
          $(this.domNodes).append(this.layout);
        }
      } else {
        $(doc.body).append(this.layout);
      }

      // //通过碎片找到对应的通栏，查看通栏是否是隐藏状态
      // var hideStatus = 0;
      // $.ajax({
      //   url: '/lark/banner_info.jhtml',
      //   data: {
      //       id: this.bannerId
      //   },
      //   type: 'get',
      //   dataType: 'json',
      //   async: false,
      //   success: function(result){
      //       if(result.code === 1){
      //           hideStatus = result.data.hidden;
      //       }
      //   }
      // });
      // if(hideStatus != 0){
      //     this.layout.find('.t-fragment-layout-title').text(this.title.text()+' (隐藏)');
      // }
      // if(this.data.hidden != 0 || hideStatus != 0){
      //   //$(this.domNodes).children().not("h2").css('display','none');
      //   //$(this.domNodes).children().first().nextAll().css('display','none');
      //   $(this.domNodes).children().css('display','none');
      //   $(this.domNodes).append('<label class="t-fragment-label-insert" style="height: 30px">'+this.data.name+'(隐藏)</label>');
      // }
      this.layoutReset();
      this.show();
    },

    layoutReset: function () {

      // calRange 计算会返回两种结果，
      // 如果计算的所有容器都没有宽高，则返回一个字符串("invisible")代表不可见
      // 如果其中有些容器可以获取到位置属性，则返回一个位置对象{left:,right:,top:,bottom:}
      var position = lib.calRange(this.domNodes);

      // 如果碎片包含的dom元素不可见，对visible赋值后，直接退出。
      // 这里对内嵌碎片做了特殊处理，如果是内嵌碎片，则需要将visible(是否可见)设为true
      if (position === 'invisible' && this.data.vtype === 1) {
        this.visible = false;
        return;
      } else {
        this.visible = true;
      }

      // 内嵌的时候，让碎片蒙层相对于外层的容器撑满即可
      // （问题：外部容器需要是块元素，但是如果将外部label设为block，有可能引起布局问题）
      // @todo 考虑尝试计算容器的宽高，对其进行赋值。
      if (this.data.vtype === 0) {
        this.layoutInsertReset();
      } else {
        this.layoutFloatReset(position);
      }

      // // 如果当前的编辑模式为切碎片，则加上对应的样式
      // if (topic.state.get('pageModel') === 'fragmentDesign') {
      //   this.layout.addClass('t-fragment-cutState');
      // } else {
      //   this.layout.removeClass('t-fragment-cutState');
      // }

      // if (typeof this.menu !== 'undefined') {
      //   this.menu.cancel();
      // }
    },

    layoutInsertReset: function () {
      this.layout.css({
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      });
    },

    layoutFloatReset: function (position) {
      var scrollTop = $(win).scrollTop();
      var scrollLeft = $(win).scrollLeft();
      var width = position.right - position.left;
      var height = position.bottom - position.top;

      // 碎片高度小于24的话，需要加入特殊样式和设置最小高度为24。
      if (height < 24) {
        this.layout.addClass('t-fragment-layout-miniHeight');
      } else {
        this.layout.removeClass('t-fragment-layout-miniHeight');
      }
 
      height = height < 24 ? 24 : height;

      this.layout.css({
        left: position.left + scrollLeft + 'px',
        top: position.top + scrollTop + 'px',
        width: width + 'px',
        height: height + 'px'
      });
    },

    commentDataUpdate: function (dataString) {
      this.commentElm.data = dataString;
      this.initDataParams(this.commentElm);
      this.layoutUpdate();
    },

    layoutUpdate: function () {
      this.title.html(this.data.title);
    },

    show: function () {
      this.isHide = false;
      if (!this.isHide && typeof this.layout !== 'undefined' &&
          this.modelCheck() && this.visible) {
        this.layout.show();
      }
    },

    hide: function () {
      this.isHide = true;
      if (typeof this.layout !== 'undefined') {
        this.layout.hide();
      }
      if (typeof this.menu !== 'undefined') {
        this.menu.cancel();
      }
    },

    initEvent: function () {
      var _this = this;

      this.layout.on('click', function (e) {

        // if (topic.state.get('pageModel') === 'fragmentEdit') {
          _this.edit();
        // } else {

        //   if (typeof _this.menu === 'undefined') {
        //     _this.menu = new topic.module.FragmentMenu(_this);
        //   }
        //   _this.menu.show(e.pageX, e.pageY);
        // }
      });
    },

    checkEditAble: function () {
      if (typeof this.editable !== 'undefined' && this.editable === false) {
        alert('您没有此碎片的编辑权限。');
        return false;
      } else {
        return true;
      }
    },

    edit: function () {

      if (!this.checkEditAble()) {
        return false;
      }

      var data = this.data;

      var _this = this;
      var id = this.id;
      var uid = this.uid;

      var messageData = {
        handler: 'editCallback',
        scope: 'topic.fragmentGroup.fragments["' + uid + '"]',
        sender: 'window.parent',
        data: this.data
      };
      var params = "";
      if(this.bindTemplateId == true){
         params = "?templateDataId="+this.data.params.dataId;
      }
      var url = '/chip/ui/edit/' +this.projectName+"."+this.type+'/'+this.id+params;
      var buttons = [{
          value: 'save',
          desc: '保存'
        }, /*, {
          value: 'previewPage',
          desc: '全页预览'
        }, {
          value: 'previewFragment',
          desc: '预览'
        }, {
          value: 'unPreviewFragement',
          desc: '还原'
        }*/];
      if (!this.bindTemplateId) {
        buttons.push({
          value: 'saveAndPublish',
          desc: '保存并发布'
        });
      }
      this.dialog = new topic.module.Dialog({
        title: '编辑' + this.name,
        url: url + '?postMessage__=' + encodeURIComponent(JSON.stringify(messageData)),
        width: 800,
        height: 650,
        isFoot: true,
        buttons: buttons,
        context: this,
        beforeClose: function () {
          if (_this.isPreview) {
            _this.unPreview();
          }
          // topic.ws.unregister('edit', 'fragment', id);
          return true;
        }
      });

      // this.editWsRegister();
      // switch (this.type) {
      // // 推荐位
      // case 'showcase':
      //   this.editDefault(conf.editShowcaseFragmentUrl);
      //   break;
      // case 'dynamic':
      //   var url = topic.state.get('pageModel') === 'fragmentDesign' ? data.designUrl : data.editUrl;
      //   this.editDynamic(data.extHost + url);
      //   break;
      // case 'ad':
      //   this.editDefault(conf.editAdFragmentUrl);
      //   break;
      // default:
      //   this.editDefault(conf.editStaticFragmentUrl);
      //   break;
      // }
    },

    _save: function (data , callback) {
      var url = '/chip/edit/' +this.projectName+"."+this.type+'/'+this.id;
      var data = {
        templateId: this.bindTemplateId ? this.data.params.dataId : undefined,
        editData: data
      };
      $.ajax({
        url: url,
        dataType: 'json',
        type: 'post',
        data: data,
        context: this,
        success: function (msg) {
             if(!msg.result){
                alert(msg.err);
             }
             callback();
        }
      });
    },

    _publish: function (callback) {
      var url = '/chip/publish/' + this.projectName + "." + this.type + '/' + this.id;
      $.ajax({
        url: url,
        dataType: 'json',
        type: 'get',
        data: {},
        context: this,
        success: function (msg) {
          if(!msg.result){
                alert(msg.err);
             }
             callback();
        }
      });
    },

    _preview: function (callback) {
      topic.mask.changeMsg('碎片刷新中...');
      topic.mask.show();
      var params ="?ssi="+this.ssi+"&bindTemplateId="+this.bindTemplateId;
      if(this.bindTemplateId == true){
         params += "&templateDataId="+this.data.params.dataId;
      }
      var url = '/chip/preview/'+this.projectName +"."+ this.type + '/' + this.id+params;
      $.ajax({
        url: url,
        type: 'get',
        dataType: 'text',
        context: this,
        success: function (text) {
          callback(text);
        }
      });
    },

    save: function (data) {
      var _self = this;
      this._save(data , function(){
         //_self.editCallback();
         _self._preview(_self.refreshCallback.bind(_self));
         _self.dialog.closeIt();
      });
    },

    editCallback: function () {
      this.refresh();
      this.dialog.closeIt();
    },

    saveAndPublish: function (data) {
      console.log('saveAndPublish ok');
      var _self = this;
      this._save(data , function(){
         _self._publish(function(){
           _self._preview(_self.refreshCallback.bind(_self));
           _self.dialog.closeIt();
         });
      });
    },

    previewFragment: function (data) {
      console.log();
    },

    previewPage: function (data) {
      console.log('previewPage ok');
      var toHtml = '<div>' + data + '</div>';
      this.preview(toHtml);
    },


    // copy: function (elm) {
    //   var id = this.id;
    //   var type = this.type;
    //   // type = 'fragment' + type.slice(0, 1).toUpperCase() + type.slice(1);
    //   $.ajax({
    //     url: conf.clipboardCopyUrl,
    //     dataType: 'json',
    //     type: 'post',
    //     data: {
    //       id: id,
    //       type: type
    //     },
    //     context: this,
    //     success: function (msg) {
    //       if (msg.code === 1) {
    //         new topic.module.Hint({
    //           content: '复制成功',
    //           target: elm,
    //           scope: this
    //         });
    //         // this.saveClipBoard();
    //       } else {
    //         console.error(msg);
    //         alert(msg.msg);
    //       }
    //     }
    //   });
    // },

    // // @todo 这个地方在碎片和通栏以及页面里面都是相同的实现，
    // // 回头最好合并成一个方法进行调用
    // saveClipBoard: function () {
    //   $.ajax({
    //     url: conf.clipboardQueryUrl,
    //     dataType: 'json',
    //     type: 'get',
    //     context: this,
    //     success: function (msg) {
    //       if (msg.code === 1) {
    //         // 为了能跨页面进行剪贴板内容查询，这里使用了localStorage
    //         localStorage['clipboard'] = JSON.stringify(msg.data);
    //       }
    //     }
    //   });
    // },

    // replace: function () {

    //   // var clipboard = topic.state.get('clipboard');

    //   // if (typeof clipboard === 'undefined') {
    //   //   return;
    //   // }
    //   // if (clipboard.type === 'banner') {
    //   //   alert('不能用通栏替换碎片');
    //   // } else {
    //   //   this.replaceIt(clipboard);
    //   // }

    //   $.ajax({
    //     url: conf.clipboardQueryUrl,
    //     dataType: 'json',
    //     type: 'get',
    //     context: this,
    //     success: function (msg) {
    //       if (msg.code === 1) {

    //         if (msg.data.type === 'banner') {
    //           alert('不能用通栏替换碎片');
    //         } else {
    //           this.replaceIt(msg.data);
    //         }
    //       } else {
    //         console.error(msg);
    //         alert(msg.msg);
    //       }
    //     }
    //   });
    // },

    // replaceIt: function (data) {
    //   var params = {
    //     bannerId: topic.bannerGroup.banners[this.bannerUid].id,
    //     bannerVersion: topic.bannerGroup.banners[this.bannerUid].data.version,
    //     type: data.type,
    //     fragmentId: data.content.id,
    //     sourceType : this.type,
    //     sourceFragmentId: this.id,
    //     position: this.data.position2
    //   };

    //   $.ajax({
    //     url: conf.fragementReplaceUrl,
    //     dataType: 'json',
    //     type: 'post',
    //     data: params,
    //     context: this,
    //     success: function (msg) {
    //       if (msg.code === 1) {
    //         topic.bannerGroup.banners[this.bannerUid].refresh();
    //       } else {
    //         console.error(msg);
    //         alert(msg.msg);
    //       }
    //     }
    //   });

    // },

    // editDefault: function (url) {
    //   var _this = this;
    //   var id = this.id;
    //   var uid = this.uid;

    //   var messageData = {
    //     handler: 'editDefaultCallback',
    //     scope: 'topic.fragmentGroup.fragments["' + uid + '"]',
    //     sender: 'window.parent',
    //     data: {
    //       id: id,
    //       uid: uid,
    //       pageId: topic_global_params.page.id,
    //       categoryId: topic_global_params.page.categoryId
    //     }
    //   };

    //   this.dialog = new topic.module.Dialog({
    //     title: '编辑' + this.data.name,
    //     url: url + '?postMessage__=' + encodeURIComponent(JSON.stringify(messageData)),
    //     width: 800,
    //     height: 650,
    //     beforeClose: function () {
    //       if (_this.isPreview) {
    //         _this.unPreview();
    //       }
    //       topic.ws.unregister('edit', 'fragment', id);
    //       return true;
    //     }
    //   });

    //   // @todo这个地方需要添加命名空间
    //   this.editWsRegister();
    // },

    // editDefaultCallback: function () {
    //   this.refresh();
    //   this.dialog.closeIt();
    // },

    // editDynamic: function (url) {
    //   var _this = this;
    //   var id = this.id;
    //   var uid = this.uid;

    //   var messageData = {
    //     // @todo 命名空间整理
    //     handler: 'editDynamicCallback',
    //     scope: 'topic.fragmentGroup.fragments["' + uid + '"]',
    //     sender: 'window.parent',
    //     data: {
    //       id: id,
    //       uid: uid,
    //       pageId: topic_global_params.page.id,
    //       categoryId: topic_global_params.page.categoryId
    //     }
    //   };

    //   this.dialog = new topic.module.Dialog({
    //     title: '编辑' + this.data.name,
    //     url: url + '&postMessage__=' + encodeURIComponent(JSON.stringify(messageData)),
    //     width: 800,
    //     height: 600,
    //     beforeClose: function () {
    //       if (_this.isPreview) {
    //         _this.unPreview();
    //       }
    //       topic.ws.unregister('edit', 'fragment', id);
    //       return true;
    //     }
    //   });

    //   this.editWsRegister();
    // },

    // // 将在其他系统处理返回的结果再提交到可视化系统中。
    // editDynamicCallback: function (data, option) {
    //   data = JSON.parse(decodeURIComponent(data));
    //   data = lib.dynamicParamsTransform(data.idxConfig);
    //   option = JSON.parse(decodeURIComponent(option));
    //   var params = {
    //     id: option.id
    //   };

    //   // 服务器端对参数的特殊要求。
    //   for (var key in data) {
    //     params['fragment.' + key] = data[key];
    //   }

    //   $.ajax({
    //     url: conf.dynamimcFragmentUpdateUrl,
    //     dataType: 'json',
    //     type: 'post',
    //     data: params,
    //     context: this,
    //     success: function (msg) {
    //       if (msg.code === 1) {
    //         this.refresh();
    //         this.dialog.closeIt();
    //       } else {
    //         console.error(msg);
    //         alert(msg.msg);
    //       }
    //     }
    //   });
    // },

    editWsRegister: function () {

      var _this = this;
      topic.ws.register('edit', 'fragment', this.id, function (data) {
        var users = data.data.users;
        var html = [' 当前编辑:'];

        for (var i = 0, iLen = users.length; i < iLen; i++) {
          html.push(users[i].userName);
        }

        // @todo 这个操作，应该放到dialog对象中。
        var userBox = _this.dialog.header.find('h1 .userBox');
        userBox.html(html.join(' '));
      });
    },

    // 刷新碎片，就是将碎片节点的内容重新请求回来。
    refresh: function () {

      topic.mask.changeMsg('碎片刷新中...');
      topic.mask.show();
      var params ="?ssi="+this.ssi+"&bindTemplateId="+this.bindTemplateId;
      if(this.bindTemplateId == true){
         params += "&templateDataId="+this.data.params.dataId;
      }
      
      var url = '/chip/preview/'+this.projectName +"."+ this.type + '/' + this.id+params;

      $.ajax({
        url: url,
        type: 'get',
        dataType: 'text',
        context: this,
        success: function (text) {
          console.log(text);
          this.refreshCallback(text);
          // if (msg.code === 1) {
          //   this.refreshCallback(msg.data.content);

          //   // if (typeof this.menu !== 'undefined') {
          //   //   this.menu.cancel();
          //   // }
          // } else {
          //   // @todo 统一alert的处理
          //   alert(msg.msg);
          // }
        }
      });
    },

    // 更新碎片对应的html代码。
    // 现在的操作顺序是
    // 1.先建立一个空的span点，
    // 2.将此节点插入到当前需要刷新的碎片的commentElm节点前面
    // 3.将需要刷新的碎片移除
    // 4.重新创建所有通栏 
    // 5.重新创建所有碎片 4、5是有先后顺序的，不能改
    refreshCallback: function (html) {
      var _this = this;
      var tempNode = $('<span class="t-node-temp"></span>');
      var tempFn = document.write;
      doc.write = function () {
        console.error(_this.uid, "代码内部有使用document.write", arguments);
        // @todo 这里的alert会阻止线程，无法点开log查看调用堆栈，回头改成自己写的提示框
        alert('当前页面上脚本有使用document.write，会导致刷新出现问题，' +
              '您可以在控制台查看log代码，点击确认，将对页面进行刷新');
        window.location.reload();
      };
      $(this.commentElm).after(tempNode);
      topic.fragmentGroup.remove(this.uid);
      tempNode.before(html);
      doc.write = tempFn;
      tempNode.remove();
      topic.mask.hide();
      fragmentEvent.trigger('refresh');

    },

    // trans: function (elm) {

    //   this.layout.addClass('active');
    //   new topic.module.Hint({
    //     content: '确认要将当前碎片转换成副本碎片么？',
    //     target: elm,
    //     scope: this,
    //     type: 'confirm',
    //     callback: function () {
    //       this.transCallBack();
    //       this.layout.removeClass('active');
    //     },
    //     cancelCallback: function () {
    //       this.layout.removeClass('active');
    //     }
    //   });
    // },

    // transCallBack: function () {
      
    //   var params = {
    //     bannerId: topic.bannerGroup.banners[this.bannerUid].id,
    //     bannerVersion: topic.bannerGroup.banners[this.bannerUid].data.version,
    //     fragmentId: this.id,
    //     type : this.type,
    //     position: this.data.position2
    //   };

    //   $.ajax({
    //     url: conf.fragementTransUrl,
    //     dataType: 'json',
    //     type: 'post',
    //     data: params,
    //     context: this,
    //     success: function (msg) {
    //       if (msg.code === 1) {
    //         topic.bannerGroup.banners[this.bannerUid].refresh();
    //       } else {
    //         console.error(msg);
    //         alert(msg.msg);
    //       }
    //     }
    //   });
    // },

    // // 将已经切好的碎片恢复为未切割的状态。
    // restore: function (elm) {

    //   // if (!this.checkEditAble()) {
    //   //   return false;
    //   // }

    //   this.layout.addClass('active');
    //   new topic.module.Hint({
    //     content: '确认对当前碎片进行还原操作么？',
    //     target: elm,
    //     scope: this,
    //     type: 'confirm',
    //     callback: function () {
    //       this.restoreCallBack();
    //       this.layout.removeClass('active');
    //     },
    //     cancelCallback: function () {
    //       this.layout.removeClass('active');
    //     }
    //   });
    // },

    // restoreCallBack: function () {
    //   var _this = this;
    //   var data = this.data;
    //   var outerBannerUid = data.puuid;
    //   var outerBanner = topic.bannerGroup.banners[outerBannerUid];
    //   var param = {
    //     bannerId: outerBanner.id,
    //     type: this.type,
    //     fragmentId: this.id,
    //     bannerVersion: outerBanner.data.version,
    //     position: data.position2
    //   };

    //   $.ajax({
    //     url: conf.topicRestoreUrl,
    //     data: param,
    //     context: this,
    //     dataType: 'jsonp',
    //     success: function (msg) {
    //       if (msg.code === 1) {
    //         // _this.menu.cancel();
    //         fragmentEvent.trigger('restore', outerBanner);
    //       } else {
    //         // @todo 回头对错误进行统一处理。
    //         alert(msg.msg);
    //       }
    //     }
    //   });
    // },

    destory: function () {
      this.removeLayout();
      this.removeNodes();
      this.commentElm = null;
      this.commentEndElm = null;
    },

    removeLayout: function () {
      if (this.layout) {
        this.layout.remove();
      }
    },

    removeNodes: function () {
      $(this.insideNodes).remove();
    },

    // @todo 回头对外的状态校验，应该交由统一的状态对象进行
    modelCheck: function () {
      if (topic.state.get('pageModel') === 'fragmentDesign' ||
          topic.state.get('pageModel') === 'fragmentEdit') {
        return true;
      }
      return false;
    },

    focus: function () {
      var layout = this.layout;
      var top;
      if (typeof layout === 'undefined') {
        return;
      }

      if (this.isHide) {
        top = $(this.domNodes[0]).offset().top;
      } else {
        top = layout.offset().top;
      }

      var windowHeight = $(win).height();

      // 对相应的蒙板进行定位。
      $(win).scrollTop(top - windowHeight / 2);
      // if (top < scrollTop || top > scrollTop + windowHeight) {
      //   $(win).scrollTop(top - 50);
      // }

      // 如果想要点击动画多次触发，需要先将动画样式去掉，然后再延迟触发一次。
      layout.removeClass('t-mask-layout-click');
      setTimeout(function () {
        layout.addClass('t-mask-layout-click');
      }, 100);
    },

    active: function () {

      if (typeof this.layout === 'undefined') {
        return;
      }

      this.layout.addClass('t-mask-layout-active');
    },

    unActive: function () {
      if (typeof this.layout === 'undefined') {
        return;
      }

      this.layout.removeClass('t-mask-layout-click');
      this.layout.removeClass('t-mask-layout-active');
    },

    preview: function (data) {
      this.isPreview = true;
      this.previewContent = $(data);

      var tempFn = document.write;
      doc.write = function () {
        console.error(this.uid, "代码内部有使用document.write", arguments);
        // @todo 这里的alert会阻止线程，无法点开log查看调用堆栈，回头改成自己写的提示框
        alert('代码中不能出现document.write');
      };

      if (content !== '') {
        $(this.domNodes).addClass('hideNodes');
        $(this.commentElm).after(this.previewContent);
      }

      doc.write = tempFn;
      this.hide();
      //this.dialog.minimize();
      this.dialog.preview();
    },

    // preview: function (data) {
    //   this.isPreview = true;
    //   data = JSON.parse(decodeURIComponent(data));
    //   var content = data.msg || data.data.content || '';
    //   this.previewContent = $(content);

    //   var tempFn = document.write;
    //   doc.write = function () {
    //     console.error(this.uid, "代码内部有使用document.write", arguments);
    //     // @todo 这里的alert会阻止线程，无法点开log查看调用堆栈，回头改成自己写的提示框
    //     alert('代码中不能出现document.write');
    //   };

    //   if (content !== '') {
    //     $(this.domNodes).addClass('hideNodes');
    //     $(this.commentElm).after(this.previewContent);
    //   }

    //   doc.write = tempFn;
    //   this.hide();
    //   //this.dialog.minimize();
    //   this.dialog.preview();
    // },

    unPreview: function () {
      this.isPreview = false;
      $(this.domNodes).removeClass('hideNodes');
      $(this.previewContent).remove();
      this.show();
      //this.menu.show();
    }

  };

  lib.ns('topic.module').Fragment = Fragment;
  lib.ns('topic').fragmentEvent = fragmentEvent;

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