# all files / src/js/base/module/ Codeview.js

66.67% Statements 42/63
45.83% Branches 11/24
66.67% Functions 8/12
66.67% Lines 42/63

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    1241×
    1×

    1×
    1×

    1×
    1×
    95×
    95×
    95×
    95×
    95×

    1×
    2×
    2×

    1×
    20×

    1×
    2×
    1×

    1×

    2×

    2×
    1×
    1×

    1×
    1×
    1×

    1×

    1×

    1×

    1×

    1×
    1×

    1×
    1×
    1×

    1×

    1×

    1×

    1×
    2×

    1×
     import env from '../core/env';
    import dom from '../core/dom';

    let CodeMirror;
    Iif (env.hasCodeMirror) {
      if (env.isSupportAmd) {
        require(['codemirror'], function(cm) {
          CodeMirror = cm;
        });
      } else {
        CodeMirror = window.CodeMirror;
      }
    }

    /**
     * @class Codeview
     */
    export default class CodeView {
      constructor(context) {
        this.context = context;
        this.$editor = context.layoutInfo.editor;
        this.$editable = context.layoutInfo.editable;
        this.$codable = context.layoutInfo.codable;
        this.options = context.options;
      }

      sync() {
        const isCodeview = this.isActivated();
        Iif (isCodeview && env.hasCodeMirror) {
          this.$codable.data('cmEditor').save();
        }
      }

      /**
       * @return {Boolean}
       */
      isActivated() {
        return this.$editor.hasClass('codeview');
      }

      /**
       * toggle codeview
       */
      toggle() {
        if (this.isActivated()) {
          this.deactivate();
        } else {
          this.activate();
        }
        this.context.triggerEvent('codeview.toggled');
      }

      /**
       * activate code view
       */
      activate() {
        this.$codable.val(dom.html(this.$editable, this.options.prettifyHtml));
        this.$codable.height(this.$editable.height());

        this.context.invoke('toolbar.updateCodeview', true);
        this.$editor.addClass('codeview');
        this.$codable.focus();

        // activate CodeMirror as codable
        Iif (env.hasCodeMirror) {
          const cmEditor = CodeMirror.fromTextArea(this.$codable[0], this.options.codemirror);

          // CodeMirror TernServer
          if (this.options.codemirror.tern) {
            const server = new CodeMirror.TernServer(this.options.codemirror.tern);
            cmEditor.ternServer = server;
            cmEditor.on('cursorActivity', (cm) => {
              server.updateArgHints(cm);
            });
          }

          cmEditor.on('blur', (event) => {
            this.context.triggerEvent('blur.codeview', cmEditor.getValue(), event);
          });

          // CodeMirror hasn't Padding.
          cmEditor.setSize(null, this.$editable.outerHeight());
          this.$codable.data('cmEditor', cmEditor);
        } else {
          this.$codable.on('blur', (event) => {
            this.context.triggerEvent('blur.codeview', this.$codable.val(), event);
          });
        }
      }

      /**
       * deactivate code view
       */
      deactivate() {
        // deactivate CodeMirror as codable
        Iif (env.hasCodeMirror) {
          const cmEditor = this.$codable.data('cmEditor');
          this.$codable.val(cmEditor.getValue());
          cmEditor.toTextArea();
        }

        const value = dom.value(this.$codable, this.options.prettifyHtml) || dom.emptyPara;
        const isChange = this.$editable.html() !== value;

        this.$editable.html(value);
        this.$editable.height(this.options.height ? this.$codable.height() : 'auto');
        this.$editor.removeClass('codeview');

        Iif (isChange) {
          this.context.triggerEvent('change', this.$editable.html(), this.$editable);
        }

        this.$editable.focus();

        this.context.invoke('toolbar.updateCodeview', false);
      }

      destroy() {
        Iif (this.isActivated()) {
          this.deactivate();
        }
      }
    }