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

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
124
1×
1×
 
1×
1×
 
 
 
 
 
 
 
 
 
 
 
 
1×
1×
78×
78×
78×
78×
78×
 
 
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();
    }
  }
}