GPQAPP

1
(function(factory) {
2
  if (typeof define === 'function' && define.amd) {
3
    // AMD. Register as an anonymous module.
4
    define(['jquery'], factory);
5
  } else if (typeof module === 'object' && module.exports) {
6
    // Node/CommonJS
7
    module.exports = factory(require('jquery'));
8
  } else {
9
    // Browser globals
10
    factory(window.jQuery);
11
  }
12
}(function($) {
13
  $.extend($.summernote.plugins, {
14
    'specialchars': function(context) {
15
      var self = this;
16
      var ui = $.summernote.ui;
17

18
      var $editor = context.layoutInfo.editor;
19
      var options = context.options;
20
      var lang = options.langInfo;
21

22
      var KEY = {
23
        UP: 38,
24
        DOWN: 40,
25
        LEFT: 37,
26
        RIGHT: 39,
27
        ENTER: 13,
28
      };
29
      var COLUMN_LENGTH = 12;
30
      var COLUMN_WIDTH = 35;
31

32
      var currentColumn = 0;
33
      var currentRow = 0;
34
      var totalColumn = 0;
35
      var totalRow = 0;
36

37
      // special characters data set
38
      var specialCharDataSet = [
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
      context.memo('button.specialchars', function() {
67
        return ui.button({
68
          contents: '<i class="fa fa-font fa-flip-vertical"></i>',
69
          tooltip: lang.specialChar.specialChar,
70
          click: function() {
71
            self.show();
72
          },
73
        }).render();
74
      });
75

76
      /**
77
       * Make Special Characters Table
78
       *
79
       * @member plugin.specialChar
80
       * @private
81
       * @return {jQuery}
82
       */
83
      this.makeSpecialCharSetTable = function() {
84
        var $table = $('<table></table>');
85
        $.each(specialCharDataSet, function(idx, text) {
86
          var $td = $('<td></td>').addClass('note-specialchar-node');
87
          var $tr = (idx % COLUMN_LENGTH === 0) ? $('<tr></tr>') : $table.find('tr').last();
88

89
          var $button = ui.button({
90
            callback: function($node) {
91
              $node.html(text);
92
              $node.attr('title', text);
93
              $node.attr('data-value', encodeURIComponent(text));
94
              $node.css({
95
                width: COLUMN_WIDTH,
96
                'margin-right': '2px',
97
                'margin-bottom': '2px',
98
              });
99
            },
100
          }).render();
101

102
          $td.append($button);
103

104
          $tr.append($td);
105
          if (idx % COLUMN_LENGTH === 0) {
106
            $table.append($tr);
107
          }
108
        });
109

110
        totalRow = $table.find('tr').length;
111
        totalColumn = COLUMN_LENGTH;
112

113
        return $table;
114
      };
115

116
      this.initialize = function() {
117
        var $container = options.dialogsInBody ? $(document.body) : $editor;
118

119
        var body = '<div class="form-group row-fluid">' + this.makeSpecialCharSetTable()[0].outerHTML + '</div>';
120

121
        this.$dialog = ui.dialog({
122
          title: lang.specialChar.select,
123
          body: body,
124
        }).render().appendTo($container);
125
      };
126

127
      this.show = function() {
128
        var text = context.invoke('editor.getSelectedText');
129
        context.invoke('editor.saveRange');
130
        this.showSpecialCharDialog(text).then(function(selectChar) {
131
          context.invoke('editor.restoreRange');
132

133
          // build node
134
          var $node = $('<span></span>').html(selectChar)[0];
135

136
          if ($node) {
137
            // insert video node
138
            context.invoke('editor.insertNode', $node);
139
          }
140
        }).fail(function() {
141
          context.invoke('editor.restoreRange');
142
        });
143
      };
144

145
      /**
146
       * show image dialog
147
       *
148
       * @param {jQuery} $dialog
149
       * @return {Promise}
150
       */
151
      this.showSpecialCharDialog = function(text) {
152
        return $.Deferred(function(deferred) {
153
          var $specialCharDialog = self.$dialog;
154
          var $specialCharNode = $specialCharDialog.find('.note-specialchar-node');
155
          var $selectedNode = null;
156
          var ARROW_KEYS = [KEY.UP, KEY.DOWN, KEY.LEFT, KEY.RIGHT];
157
          var ENTER_KEY = KEY.ENTER;
158

159
          function addActiveClass($target) {
160
            if (!$target) {
161
              return;
162
            }
163
            $target.find('button').addClass('active');
164
            $selectedNode = $target;
165
          }
166

167
          function removeActiveClass($target) {
168
            $target.find('button').removeClass('active');
169
            $selectedNode = null;
170
          }
171

172
          // find next node
173
          function findNextNode(row, column) {
174
            var findNode = null;
175
            $.each($specialCharNode, function(idx, $node) {
176
              var findRow = Math.ceil((idx + 1) / COLUMN_LENGTH);
177
              var findColumn = ((idx + 1) % COLUMN_LENGTH === 0) ? COLUMN_LENGTH : (idx + 1) % COLUMN_LENGTH;
178
              if (findRow === row && findColumn === column) {
179
                findNode = $node;
180
                return false;
181
              }
182
            });
183
            return $(findNode);
184
          }
185

186
          function arrowKeyHandler(keyCode) {
187
            // left, right, up, down key
188
            var $nextNode;
189
            var lastRowColumnLength = $specialCharNode.length % totalColumn;
190

191
            if (KEY.LEFT === keyCode) {
192
              if (currentColumn > 1) {
193
                currentColumn = currentColumn - 1;
194
              } else if (currentRow === 1 && currentColumn === 1) {
195
                currentColumn = lastRowColumnLength;
196
                currentRow = totalRow;
197
              } else {
198
                currentColumn = totalColumn;
199
                currentRow = currentRow - 1;
200
              }
201
            } else if (KEY.RIGHT === keyCode) {
202
              if (currentRow === totalRow && lastRowColumnLength === currentColumn) {
203
                currentColumn = 1;
204
                currentRow = 1;
205
              } else if (currentColumn < totalColumn) {
206
                currentColumn = currentColumn + 1;
207
              } else {
208
                currentColumn = 1;
209
                currentRow = currentRow + 1;
210
              }
211
            } else if (KEY.UP === keyCode) {
212
              if (currentRow === 1 && lastRowColumnLength < currentColumn) {
213
                currentRow = totalRow - 1;
214
              } else {
215
                currentRow = currentRow - 1;
216
              }
217
            } else if (KEY.DOWN === keyCode) {
218
              currentRow = currentRow + 1;
219
            }
220

221
            if (currentRow === totalRow && currentColumn > lastRowColumnLength) {
222
              currentRow = 1;
223
            } else if (currentRow > totalRow) {
224
              currentRow = 1;
225
            } else if (currentRow < 1) {
226
              currentRow = totalRow;
227
            }
228

229
            $nextNode = findNextNode(currentRow, currentColumn);
230

231
            if ($nextNode) {
232
              removeActiveClass($selectedNode);
233
              addActiveClass($nextNode);
234
            }
235
          }
236

237
          function enterKeyHandler() {
238
            if (!$selectedNode) {
239
              return;
240
            }
241

242
            deferred.resolve(decodeURIComponent($selectedNode.find('button').attr('data-value')));
243
            $specialCharDialog.modal('hide');
244
          }
245

246
          function keyDownEventHandler(event) {
247
            event.preventDefault();
248
            var keyCode = event.keyCode;
249
            if (keyCode === undefined || keyCode === null) {
250
              return;
251
            }
252
            // check arrowKeys match
253
            if (ARROW_KEYS.indexOf(keyCode) > -1) {
254
              if ($selectedNode === null) {
255
                addActiveClass($specialCharNode.eq(0));
256
                currentColumn = 1;
257
                currentRow = 1;
258
                return;
259
              }
260
              arrowKeyHandler(keyCode);
261
            } else if (keyCode === ENTER_KEY) {
262
              enterKeyHandler();
263
            }
264
            return false;
265
          }
266

267
          // remove class
268
          removeActiveClass($specialCharNode);
269

270
          // find selected node
271
          if (text) {
272
            for (var i = 0; i < $specialCharNode.length; i++) {
273
              var $checkNode = $($specialCharNode[i]);
274
              if ($checkNode.text() === text) {
275
                addActiveClass($checkNode);
276
                currentRow = Math.ceil((i + 1) / COLUMN_LENGTH);
277
                currentColumn = (i + 1) % COLUMN_LENGTH;
278
              }
279
            }
280
          }
281

282
          ui.onDialogShown(self.$dialog, function() {
283
            $(document).on('keydown', keyDownEventHandler);
284

285
            self.$dialog.find('button').tooltip();
286

287
            $specialCharNode.on('click', function(event) {
288
              event.preventDefault();
289
              deferred.resolve(decodeURIComponent($(event.currentTarget).find('button').attr('data-value')));
290
              ui.hideDialog(self.$dialog);
291
            });
292
          });
293

294
          ui.onDialogHidden(self.$dialog, function() {
295
            $specialCharNode.off('click');
296

297
            self.$dialog.find('button').tooltip();
298

299
            $(document).off('keydown', keyDownEventHandler);
300

301
            if (deferred.state() === 'pending') {
302
              deferred.reject();
303
            }
304
          });
305

306
          ui.showDialog(self.$dialog);
307
        });
308
      };
309
    },
310
  });
311
}));
312