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

import $ from '../util/dom-core.js';
import { getParentByClassname, isEmptyElement } from '../util/util.js';
const _mapOptionNum = [
  'A', 'B', 'C', 'D', 'E', 'F',
  'G', 'H', 'I', 'J', 'K', 'L',
  'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X',
  'Y', 'Z'
];
/**
 * function 添加选择题
 * @param $border {DomElement} 需要添加题的框
 * @param data {JSON} 题目数据
 * @param editor {Objec} 编辑器对象 
 */

let generateChoice = function ($border, data, editor) {
  // 1、判断框是主观题框还是客观题框
  let proId = data.proId;
  let quId = data.quId;
  let type = parseInt($border.attr('data-type'));
  let nums = parseInt(data.nums);
  let pnum = data.pnum;
  let $questionItem = $('<div class="lsiten-question-choice js-lsiten-question"></div>');
  $questionItem.attr('data-type', 1);
  $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 = generateOptions(nums);

  $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 '';
    }
    if(!$currentRow.length) {
      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 根据选项个数生产选项
  * @param num {int} 选项个数 
  */
 function generateOptions (num) {
  let $box = $('<div class="lsiten-options-box"></div>');
  $box.css('display', 'inline-block').css('float', 'left').css('width', 'auto').css('font-size', '0');
  for (let i = 0; i < num; i++) {
    let $option = $('<div class="lsiten-option">' + _mapOptionNum[i] + '</div>');
    $option.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($option);
  }

  return $box;
 }

 export default {
   generateChoice: generateChoice
 }