XueXiTongSrtDownloads/学生学习页面_files/foldTitle.js.下载

/** 标题折叠
 * 2022-7 */
function initFoldTitle(me, domUtils) {
  domUtils = domUtils;
  var foldTitle;
  //鼠标移上显示折叠
  me.addListener('mouseover', function (type, e) {
    var hTitle;
    if (/h\d/i.test(e.target.nodeName)) {
      hTitle = e.target;
    }
    if((e.target.nodeName == 'OL' || e.target.nodeName == 'UL') && e.target.firstChild && e.target.firstChild.firstChild && /h\d/i.test(e.target.firstChild.firstChild.nodeName)){
      hTitle = e.target.firstChild.firstChild;
    }
    if (hTitle) {
      //表格、课程报告、勾选框、录音打点、收件箱签名 不显示折叠三角
      if($(hTitle).parents('table').length > 0 || $(hTitle).parents('.top-cover-bot').length > 0
        || $(hTitle).parents('.todo-view').length > 0 || $(hTitle).parents('.callout-block').length > 0 || $(hTitle).parents('.record-box').length > 0 || $(hTitle).parents('.signDiv').length > 0 || $(hTitle).hasClass('signTitle')){
        return
      }
      if(hTitle.innerText.trim() == '' || domUtils.isFillChar(hTitle.innerText.trim()) || hTitle.innerText.trim() == '​'){
        return
      }
      //PC端笔记编辑器，正文标题下如果没有子内容，不显示展开收起按钮。
      if(!hTitle.nextSibling || (hTitle.nextSibling && /h\d/i.test(hTitle.nextSibling.nodeName) && hTitle.nextSibling.nodeName.replace(/h/i,'') <= hTitle.nodeName.replace(/h/i,''))){
        return;
      }
      if (!foldTitle) {
        foldTitle = new Title();
        foldTitle.init(me, hTitle);
        me.ui.getDom().appendChild(foldTitle.resizer);
      }
      foldTitle.show(hTitle,domUtils);
    }
  });
  me.addListener('mouseleave',function (type,e) {
    var hTitle;
    if (/h\d/i.test(e.target.nodeName)) {
      hTitle = e.target;
    }
    if((e.target.nodeName == 'OL' || e.target.nodeName == 'UL') && e.target.firstChild && e.target.firstChild.firstChild && /h\d/i.test(e.target.firstChild.firstChild.nodeName)){
      hTitle = e.target.firstChild.firstChild;
    }
    if(hTitle){
      $(me.body).find('.edui-editor-foldTitlebar .tri').css('transition','')
    }
  })
  $('body').on('mouseover', function (e) {
    if ($(e.target).hasClass('edui-editor-foldTitlebar') || $(e.target).parents('.edui-editor-foldTitlebar').length > 0) {
      var resizer = $(e.target).hasClass('edui-editor-foldTitlebar') ? e.target : $(e.target).parents('.edui-editor-foldTitlebar')[0];
      var editorId = $(resizer).parents('.edui-editor.edui-default').parent().attr('id');
      var editor = UE.getEditor(editorId);
      //列表悬浮隐藏
      $(editor.body).find('li').removeClass('hover');
      $(resizer).parents('.edui-editor.edui-default').parent().find('.listtoolList,.modifyListNum,.edui-editor-listtoolbar .hoverTips').hide();
      $(resizer).parents('.edui-editor.edui-default').parent().find('.continueListNumBtn,.startNewListBtn,.modifyListNumBtn').removeClass('disabled');
      $(resizer).parents('.edui-editor.edui-default').parent().find('.edui-editor-listtoolbar').removeClass('hover');
      if ($(editor.container).find('.edui-editor-foldTitlebar')[0] == resizer) {
        $(editor.body).find('h1,h2,h3,h4,h5,h6').eq($(resizer).attr('index')).addClass('hover');
      }
    }
  })
  $(me.container).on('mouseleave', function (e) {
    if(foldTitle){
        foldTitle.hide();
    }
  })
  me.addListener("contentchange", function () {
    $(me.container).find('.edui-editor-foldTitlebar').removeClass('hover')
  })
  me.addListener('keydown', function (type, evt) {
    var keyCode = evt.keyCode || evt.which;
    if (keyCode == 8) { //删除
      var range = me.selection.getRange();
      var start = range.startContainer;
      while(!(start.nodeType == 1 && domUtils.isBlockElm(start))){
        start = start.parentNode;
      }
      //折叠标题后，光标定在标题下一行的开始点删除，展开上一个折叠标题，当前标题变成正文，当前标题也展开
      if(range.collapsed && domUtils.isStartInblock(range) && /h\d/i.test(start.tagName) && ((start.previousElementSibling && start.previousElementSibling.style.display == 'none') || (start.innerText.trim() == '' || start.innerText == fillChar))){
        evt.preventDefault()
        var prev = start.previousElementSibling;
        var next = start.nextElementSibling;

        //如果当前标题折叠，全部打开
        if($(start).hasClass('fold')){
          while(next && next.style.display == 'none'){
            next.style.display = '';
            next = next.nextElementSibling;
          }
        }
        //当前标题变成p
        var p = document.createElement('p');
        p.innerHTML = start.innerHTML;
        p.setAttribute('element-id',start.getAttribute('element-id'));
        start.parentNode.insertBefore(p,start);
        range.setStart(p,0).collapse(true).select(true);
        start.parentNode.removeChild(start);

        //start前面折叠起来的全部展开
        while(prev && prev.style.display == 'none'){
          prev.style.display = '';
          prev = prev.previousElementSibling;
        }
        if(prev) prev.classList.remove('fold');
      }
    }
  });
}

function Title() {
  this.editor = null;
  this.resizer = null;
  this.doc = document;
  this.title = null;
}

Title.prototype = {
  init: function (editor) {
    var me = this;
    me.editor = editor;

    var resizer = me.resizer = document.createElement('div');
    resizer.innerHTML = '<div class="foldtitle-tri-wrap">' +
      '<i class="tri"></i>' +
      '<div class="hoverTips"><span>收起</span><i></i></div>' +
      '</div>';
    resizer.id = me.editor.ui.id + '_foldTitlebar';
    resizer.className = 'edui-editor-foldTitlebar edui-editor-resizer';
    resizer.style.cssText += ';z-index:' + (me.editor.options.zIndex) + ';';
    me.editor.ui.getDom().appendChild(resizer);
    me.initEvents();
  },
  initEvents: function () {
    var me = this;
    $(me.resizer).on('click', '.foldtitle-tri-wrap', function() {
      var target = me.target;
      var nowHeadLevel = parseInt(target.tagName.replace(/h/i,''));
      var next = target.nextElementSibling;
      if($(target).parents('ol,ul').length>0){
        next = $(target).parents('ol,ul')[0].nextElementSibling;
      }
      var _this = this;
      $(_this).find('.tri')[0].style.transition = 'all 0.3s';
      setTimeout(function () {
        $(_this).find('.tri')[0].style.transition = '';
      },400)
      if($(this).hasClass('fold')){
        //展开
        $(this).removeClass('fold');
        target.classList.remove('fold');
        $(me.resizer).find('.hoverTips span').text('收起');
        if(!next) return;
        while(next){
          var tagName = next.nodeName;
          var headLevel;
          if(/h\d/i.test(tagName)){
            headLevel = parseInt(tagName.replace(/h/i,''));
            if(headLevel <= nowHeadLevel){
              //标题等级等于或者大于当前标题，结束循环
              break;
            }
            next.classList.remove('fold');
          }else if(tagName == 'UL' || tagName == 'OL'){
            if(next.firstChild && next.firstChild.firstChild && next.firstChild.firstChild.nodeType == 1 && /h\d/i.test(next.firstChild.firstChild.nodeName)){
              headLevel = parseInt(next.firstChild.firstChild.nodeName.replace(/h/i,''));
              next.firstChild.firstChild.classList.remove('fold');
              if(headLevel <= nowHeadLevel){
                //标题等级等于或者大于当前标题，结束循环
                break;
              }
            }
          }
          next.style.display = '';
          next.classList.remove('fold');
          next = next.nextElementSibling;
        }
      }else{
        //收起
        $(this).addClass('fold');
        target.classList.add('fold');
        $(me.resizer).find('.hoverTips span').text('展开');
        if(!next) return;
        while(next){
          var tagName = next.nodeName;
          var headLevel;
          if(/h\d/i.test(tagName)){
            headLevel = parseInt(tagName.replace(/h/i,''));
            if(headLevel <= nowHeadLevel){
              //标题等级等于或者大于当前标题，结束循环
              break;
            }
            next.classList.remove('fold');
          }else if(tagName == 'UL' || tagName == 'OL') {
            if (next.firstChild && next.firstChild.firstChild && next.firstChild.firstChild.nodeType == 1 && /h\d/i.test(next.firstChild.firstChild.nodeName)) {
              headLevel = parseInt(next.firstChild.firstChild.nodeName.replace(/h/i, ''));
              next.firstChild.firstChild.classList.remove('fold');
              if (headLevel <= nowHeadLevel) {
                //标题等级等于或者大于当前标题，结束循环
                break;
              }
            }
          }
          next.style.display = 'none';
          next = next.nextElementSibling;
        }
      }
      var range = me.editor.selection.getRange();
      range.setStart(target,0).collapse(true).select(true)
      // me.editor.adjustHeight();
      me.editor.fireEvent('contentchange');
      me.editor.fireEvent('saveScene');
    })
  },
  show: function (targetObj,domUtils) {
    var me = this;
    if (targetObj) {
      me.resizer.classList.add('hover');
      me.attachTo(targetObj,domUtils);
      if($(targetObj).hasClass('fold')){
        me.resizer.querySelector('.foldtitle-tri-wrap').classList.add('fold');
        $(me.resizer).find('.hoverTips span').text('展开');
      }else{
        me.resizer.querySelector('.foldtitle-tri-wrap').classList.remove('fold');
        $(me.resizer).find('.hoverTips span').text('收起');
      }
    }
  },
  hide: function () {
    var me = this;
    me.resizer.classList.remove('hover');
    me.resizer.querySelector('.foldtitle-tri-wrap').classList.remove('fold')
  },
  attachTo: function (targetObj,domUtils) {
    var me = this,
      target = me.target = targetObj,
      resizer = this.resizer,
      titlePos = domUtils.getXY(target),
      iframePos = domUtils.getXY(me.editor.iframe),
      editorPos = domUtils.getXY(resizer.parentNode);
    var index = $(me.editor.body).find('h1,h2,h3,h4,h5,h6').index(target);
    resizer.setAttribute('index', index);
    domUtils.setStyles(resizer, {
      'width': 0,
      'height': 0,
      'left': 0,
      'top': iframePos.y + titlePos.y - me.editor.document.body.scrollTop - editorPos.y + 'px'
    });
    domUtils.setStyles(resizer.querySelector('.foldtitle-tri-wrap'), {
      'top': parseInt($(target).css('line-height').replace('px','')/2) - 7 - 9 + 'px',
      'left': iframePos.x - editorPos.x + parseInt($(me.editor.body).css('padding-left').replace('px','')) - 30 + 'px'
    });
  }
}