lsiten-editor-v2/src/js/question/judge.js

import $ from '../util/dom-core.js';
import { getParentByClassname, isEmptyElement } from '../util/util.js';
 /**
  * function 生成判断题
  * @param {DomElement} $border 需要添加题的框
  * @param {JSON} data  题目数据
  * @param {Objec} editor 编辑器对象
  */
 let generateJudge = function ($border, data, editor) {
  let type = parseInt($border.attr('data-type'));
  let proId = data.proId;
  let quId = data.quId;
  let pnum = data.pnum;
  let $questionItem = $('<div class="lsiten-question-judge js-lsiten-question"></div>');
  $questionItem.attr('data-type', 2);
  $questionItem.attr('data-pid', proId);
  $questionItem.attr('data-qid', quId);
  $questionItem.css('margin', '8px 0')
               .css('outline', 'none')
               .css('overflow', 'hidden')
               .css('position', 'relative');
  let mergePnum = data.proData.pnum;
             
  if (mergePnum && mergePnum.length > 0) {
    pnum = mergePnum +''+ pnum;
  }
  let $span = $('<span class = "lsiten-pnum-box"> ' + pnum + ' </span>');
  $span.css('min-width', '25px')
       .css('height', 'auto')
       .css('width', 'auto')
       .css('line-height', '14px')
       .css('display', 'inline-block')
       .css('text-align', 'right')
       .css('float', 'left')
       .css('margin-right', '0');
  let $optionBox = generateJudgeOptions();

  $questionItem.append($span);
  $questionItem.append($optionBox);


  if (type === 1) {
    // 在客观题里添加
    let currentRow = parseInt($border.attr('data-current-row'));
    let row = parseInt($border.attr('data-row'));
    let column = parseInt($border.attr('data-column'));
    let $currentRow = null;
    try {
      $currentRow = $($border.find('.js-options-row')[currentRow]);
    } catch (err) {
      console.log("%c" + err, "color:red");   
      return '';
    }
    let currentColumn = parseInt($currentRow.attr('data-current-column'));
    let $currentColumn = null;
    try {
      $currentColumn = $($currentRow.find('.js-option-column')[currentColumn]);
    } catch (err) {
      console.log("%c" + err, "color:red");
      return '';
    }
    let questionCount = parseInt($currentColumn.attr('data-question-count'));
    if (questionCount === 5) {
      // 下一栏
      if (currentColumn === (column - 1)) {
        // 下一行
        $border.attr('data-current-row', ++currentRow);
        let nextRowNode = $currentRow[0].nextSibling;
        if (nextRowNode) {
          $currentColumn = $(nextRowNode.firstChild);
        } else {
         console.log("%c该框问题个数已满了，请再添加框", "color:red");
          return '';
        }
      } else {
        $currentRow.attr('data-current-column', ++currentColumn);
        let nextColumnNode = $currentColumn[0].nextSibling;
        if (nextColumnNode) {
          $currentColumn = $(nextColumnNode);
        }
      }

      questionCount = 0;
    }

    $($currentColumn[0].firstChild).append($questionItem);
    $currentColumn.attr('data-question-count', ++questionCount);

    let size = $currentColumn.getSizeData();
    $currentRow.find('.js-option-column').css('min-height', size.height + 'px');
  } else {
    // 在主观题内添加
    let $selectionElem = editor.selection.getSelectionContainerElem();
    let $borderContent = getParentByClassname($selectionElem, 'border-content');
    if (!$borderContent) {
      console.log("%c请在框内添加该题！", "color:red");      
      return '';
    }

    $borderContent.append($questionItem);

    if ( isEmptyElement($borderContent[0].firstChild) ) {
      $borderContent[0].removeChild($borderContent[0].firstChild);
    }
    editor.selection.getRange().setStartAfter($questionItem[0]);
    if (editor.selection.getRange()) {
      editor.selection.restoreSelection();
    }
    editor.selection.saveRange();
    editor.selection.collapseRange();
  }
 }
 /**
  * function 生成判断题选项
  */
 function generateJudgeOptions () {
    let $box = $('<div class="lsiten-options-box"></div>');
    $box.css('display', 'inline-block').css('float', 'left').css('width', 'auto').css('font-size', '0');
    let $right = $('<div class="lsiten-option">√</div>');
    $right.css('border', '1px solid #000')
           .css('text-align', 'center')
           .css('width', '19px')
           .css('height', 'auto')
           .css('box-sizing', 'border-box')
           .css('font-size', '12px')
           .css('display', 'inline-block')
           .css('line-height', '0.95')
           .css('margin', '0 0 0 5px');
    let $err = $('<div class="lsiten-option">×</div>');
    $err.css('border', '1px solid #000')
           .css('text-align', 'center')
           .css('width', '19px')
           .css('height', 'auto')
           .css('box-sizing', 'border-box')
           .css('font-size', '12px')
           .css('display', 'inline-block')
           .css('line-height', '0.95')
           .css('margin', '0 0 0 5px');
    $box.append($right);
    $box.append($err);
    return $box;
 }

 export default {
  generateJudge: generateJudge
 }