에디터 변경

e_lib/summernote/lang/summernote-ko-KR.js

@@ -0,0 +1,155 @@
+(function($) {
+  $.extend($.summernote.lang, {
+    'ko-KR': {
+      font: {
+        bold: '굵게',
+        italic: '기울임꼴',
+        underline: '밑줄',
+        clear: '글자 효과 없애기',
+        height: '줄간격',
+        name: '글꼴',
+        superscript: '위 첨자',
+        subscript: '아래 첨자',
+        strikethrough: '취소선',
+        size: '글자 크기'
+      },
+      image: {
+        image: '사진',
+        insert: '사진 추가',
+        resizeFull: '100% 크기로 변경',
+        resizeHalf: '50% 크기로 변경',
+        resizeQuarter: '25% 크기로 변경',
+        floatLeft: '왼쪽 정렬',
+        floatRight: '오른쪽 정렬',
+        floatNone: '정렬하지 않음',
+        shapeRounded: '스타일: 둥근 모서리',
+        shapeCircle: '스타일: 원형',
+        shapeThumbnail: '스타일: 액자',
+        shapeNone: '스타일: 없음',
+        dragImageHere: '텍스트 혹은 사진을 이곳으로 끌어오세요',
+        dropImage: '텍스트 혹은 사진을 내려놓으세요',
+        selectFromFiles: '파일 선택',
+        maximumFileSize: 'Maximum file size',
+        maximumFileSizeError: 'Maximum file size exceeded.',
+        url: '사진 URL',
+        remove: '사진 삭제',
+        original: 'Original'
+      },
+      video: {
+        video: '동영상',
+        videoLink: '동영상 링크',
+        insert: '동영상 추가',
+        url: '동영상 URL',
+        providers: '(YouTube, Vimeo, Vine, Instagram, DailyMotion, Youku 사용 가능)'
+      },
+      link: {
+        link: '링크',
+        insert: '링크 추가',
+        unlink: '링크 삭제',
+        edit: '수정',
+        textToDisplay: '링크에 표시할 내용',
+        url: '이동할 URL',
+        openInNewWindow: '새창으로 열기'
+      },
+      table: {
+        table: '테이블',
+        addRowAbove: 'Add row above',
+        addRowBelow: 'Add row below',
+        addColLeft: 'Add column left',
+        addColRight: 'Add column right',
+        delRow: 'Delete row',
+        delCol: 'Delete column',
+        delTable: 'Delete table'
+      },
+      hr: {
+        insert: '구분선 추가'
+      },
+      style: {
+        style: '스타일',
+        p: '본문',
+        blockquote: '인용구',
+        pre: '코드',
+        h1: '제목 1',
+        h2: '제목 2',
+        h3: '제목 3',
+        h4: '제목 4',
+        h5: '제목 5',
+        h6: '제목 6'
+      },
+      lists: {
+        unordered: '글머리 기호',
+        ordered: '번호 매기기'
+      },
+      options: {
+        help: '도움말',
+        fullscreen: '전체 화면',
+        codeview: '코드 보기'
+      },
+      paragraph: {
+        paragraph: '문단 정렬',
+        outdent: '내어쓰기',
+        indent: '들여쓰기',
+        left: '왼쪽 정렬',
+        center: '가운데 정렬',
+        right: '오른쪽 정렬',
+        justify: '양쪽 정렬'
+      },
+      color: {
+        recent: '마지막으로 사용한 색',
+        more: '다른 색 선택',
+        background: '배경색',
+        foreground: '글자색',
+        transparent: '투명',
+        setTransparent: '투명',
+        reset: '취소',
+        resetToDefault: '기본 값으로 변경'
+      },
+      shortcut: {
+        shortcuts: '키보드 단축키',
+        close: '닫기',
+        textFormatting: '글자 스타일 적용',
+        action: '기능',
+        paragraphFormatting: '문단 스타일 적용',
+        documentStyle: '문서 스타일 적용',
+        extraKeys: 'Extra keys'
+      },
+      help: {
+        'insertParagraph': 'Insert Paragraph',
+        'undo': 'Undoes the last command',
+        'redo': 'Redoes the last command',
+        'tab': 'Tab',
+        'untab': 'Untab',
+        'bold': 'Set a bold style',
+        'italic': 'Set a italic style',
+        'underline': 'Set a underline style',
+        'strikethrough': 'Set a strikethrough style',
+        'removeFormat': 'Clean a style',
+        'justifyLeft': 'Set left align',
+        'justifyCenter': 'Set center align',
+        'justifyRight': 'Set right align',
+        'justifyFull': 'Set full align',
+        'insertUnorderedList': 'Toggle unordered list',
+        'insertOrderedList': 'Toggle ordered list',
+        'outdent': 'Outdent on current paragraph',
+        'indent': 'Indent on current paragraph',
+        'formatPara': 'Change current block\'s format as a paragraph(P tag)',
+        'formatH1': 'Change current block\'s format as H1',
+        'formatH2': 'Change current block\'s format as H2',
+        'formatH3': 'Change current block\'s format as H3',
+        'formatH4': 'Change current block\'s format as H4',
+        'formatH5': 'Change current block\'s format as H5',
+        'formatH6': 'Change current block\'s format as H6',
+        'insertHorizontalRule': 'Insert horizontal rule',
+        'linkDialog.show': 'Show Link Dialog'
+      },
+      history: {
+        undo: '실행 취소',
+        redo: '다시 실행'
+      },
+      specialChar: {
+        specialChar: '특수문자',
+        select: '특수문자를 선택하세요'
+      }
+    }
+  });
+})(jQuery);

e_lib/summernote/plugin/databasic/summernote-ext-databasic.css

@@ -0,0 +1,16 @@
+.ext-databasic {
+	position: relative;
+	display: block;
+	min-height: 50px;
+	background-color: cyan;
+	text-align: center;
+	padding: 20px;
+	border: 1px solid white;
+	border-radius: 10px;
+}
+
+.ext-databasic p {
+	color: white;
+	font-size: 1.2em;
+	margin: 0;
+}

e_lib/summernote/plugin/databasic/summernote-ext-databasic.js

@@ -0,0 +1,292 @@
+(function(factory) {
+  /* global define */
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(window.jQuery);
+  }
+}(function($) {
+  // pull in some summernote core functions
+  var ui = $.summernote.ui;
+  var dom = $.summernote.dom;
+
+  // define the popover plugin
+  var DataBasicPlugin = function(context) {
+    var self = this;
+    var options = context.options;
+    var lang = options.langInfo;
+
+    self.icon = '<i class="fa fa-object-group"/>';
+
+    // add context menu button for dialog
+    context.memo('button.databasic', function() {
+      return ui.button({
+        contents: self.icon,
+        tooltip: lang.databasic.insert,
+        click: context.createInvokeHandler('databasic.showDialog')
+      }).render();
+    });
+
+    // add popover edit button
+    context.memo('button.databasicDialog', function() {
+      return ui.button({
+        contents: self.icon,
+        tooltip: lang.databasic.edit,
+        click: context.createInvokeHandler('databasic.showDialog')
+      }).render();
+    });
+
+    //  add popover size buttons
+    context.memo('button.databasicSize100', function() {
+      return ui.button({
+        contents: '<span class="note-fontsize-10">100%</span>',
+        tooltip: lang.image.resizeFull,
+        click: context.createInvokeHandler('editor.resize', '1')
+      }).render();
+    });
+    context.memo('button.databasicSize50', function() {
+      return ui.button({
+        contents: '<span class="note-fontsize-10">50%</span>',
+        tooltip: lang.image.resizeHalf,
+        click: context.createInvokeHandler('editor.resize', '0.5')
+      }).render();
+    });
+    context.memo('button.databasicSize25', function() {
+      return ui.button({
+        contents: '<span class="note-fontsize-10">25%</span>',
+        tooltip: lang.image.resizeQuarter,
+        click: context.createInvokeHandler('editor.resize', '0.25')
+      }).render();
+    });
+
+    self.events = {
+      'summernote.init': function(we, e) {
+        // update existing containers
+        $('data.ext-databasic', e.editable).each(function() { self.setContent($(this)); });
+        // TODO: make this an undo snapshot...
+      },
+      'summernote.keyup summernote.mouseup summernote.change summernote.scroll': function() {
+        self.update();
+      },
+      'summernote.dialog.shown': function() {
+        self.hidePopover();
+      }
+    };
+
+    self.initialize = function() {
+      // create dialog markup
+      var $container = options.dialogsInBody ? $(document.body) : context.layoutInfo.editor;
+
+      var body = '<div class="form-group row-fluid">' +
+          '<label>' + lang.databasic.testLabel + '</label>' +
+          '<input class="ext-databasic-test form-control" type="text" />' +
+          '</div>';
+      var footer = '<button href="#" class="btn btn-primary ext-databasic-save">' + lang.databasic.insert + '</button>';
+
+      self.$dialog = ui.dialog({
+        title: lang.databasic.name,
+        fade: options.dialogsFade,
+        body: body,
+        footer: footer
+      }).render().appendTo($container);
+
+      // create popover
+      self.$popover = ui.popover({
+        className: 'ext-databasic-popover'
+      }).render().appendTo('body');
+      var $content = self.$popover.find('.popover-content');
+
+      context.invoke('buttons.build', $content, options.popover.databasic);
+    };
+
+    self.destroy = function() {
+      self.$popover.remove();
+      self.$popover = null;
+      self.$dialog.remove();
+      self.$dialog = null;
+    };
+
+    self.update = function() {
+      // Prevent focusing on editable when invoke('code') is executed
+      if (!context.invoke('editor.hasFocus')) {
+        self.hidePopover();
+        return;
+      }
+
+      var rng = context.invoke('editor.createRange');
+      var visible = false;
+
+      if (rng.isOnData()) {
+        var $data = $(rng.sc).closest('data.ext-databasic');
+
+        if ($data.length) {
+          var pos = dom.posFromPlaceholder($data[0]);
+
+          self.$popover.css({
+            display: 'block',
+            left: pos.left,
+            top: pos.top
+          });
+
+          // save editor target to let size buttons resize the container
+          context.invoke('editor.saveTarget', $data[0]);
+
+          visible = true;
+        }
+      }
+
+      // hide if not visible
+      if (!visible) {
+        self.hidePopover();
+      }
+    };
+
+    self.hidePopover = function() {
+      self.$popover.hide();
+    };
+
+    // define plugin dialog
+    self.getInfo = function() {
+      var rng = context.invoke('editor.createRange');
+
+      if (rng.isOnData()) {
+        var $data = $(rng.sc).closest('data.ext-databasic');
+
+        if ($data.length) {
+          // Get the first node on range(for edit).
+          return {
+            node: $data,
+            test: $data.attr('data-test')
+          };
+        }
+      }
+
+      return {};
+    };
+
+    self.setContent = function($node) {
+      $node.html('<p contenteditable="false">' + self.icon + ' ' + lang.databasic.name + ': ' +
+        $node.attr('data-test') + '</p>');
+    };
+
+    self.updateNode = function(info) {
+      self.setContent(info.node
+        .attr('data-test', info.test));
+    };
+
+    self.createNode = function(info) {
+      var $node = $('<data class="ext-databasic"></data>');
+
+      if ($node) {
+        // save node to info structure
+        info.node = $node;
+        // insert node into editor dom
+        context.invoke('editor.insertNode', $node[0]);
+      }
+
+      return $node;
+    };
+
+    self.showDialog = function() {
+      var info = self.getInfo();
+      var newNode = !info.node;
+      context.invoke('editor.saveRange');
+
+      self
+        .openDialog(info)
+        .then(function(dialogInfo) {
+          // [workaround] hide dialog before restore range for IE range focus
+          ui.hideDialog(self.$dialog);
+          context.invoke('editor.restoreRange');
+
+          // insert a new node
+          if (newNode) {
+            self.createNode(info);
+          }
+
+          // update info with dialog info
+          $.extend(info, dialogInfo);
+
+          self.updateNode(info);
+        })
+        .fail(function() {
+          context.invoke('editor.restoreRange');
+        });
+    };
+
+    self.openDialog = function(info) {
+      return $.Deferred(function(deferred) {
+        var $inpTest = self.$dialog.find('.ext-databasic-test');
+        var $saveBtn = self.$dialog.find('.ext-databasic-save');
+        var onKeyup = function(event) {
+          if (event.keyCode === 13) {
+            $saveBtn.trigger('click');
+          }
+        };
+
+        ui.onDialogShown(self.$dialog, function() {
+          context.triggerEvent('dialog.shown');
+
+          $inpTest.val(info.test).on('input', function() {
+            ui.toggleBtn($saveBtn, $inpTest.val());
+          }).trigger('focus').on('keyup', onKeyup);
+
+          $saveBtn
+            .text(info.node ? lang.databasic.edit : lang.databasic.insert)
+            .click(function(event) {
+              event.preventDefault();
+
+              deferred.resolve({ test: $inpTest.val() });
+            });
+
+          // init save button
+          ui.toggleBtn($saveBtn, $inpTest.val());
+        });
+
+        ui.onDialogHidden(self.$dialog, function() {
+          $inpTest.off('input keyup');
+          $saveBtn.off('click');
+
+          if (deferred.state() === 'pending') {
+            deferred.reject();
+          }
+        });
+
+        ui.showDialog(self.$dialog);
+      });
+    };
+  };
+
+  // Extends summernote
+  $.extend(true, $.summernote, {
+    plugins: {
+      databasic: DataBasicPlugin
+    },
+
+    options: {
+      popover: {
+        databasic: [
+          ['databasic', ['databasicDialog', 'databasicSize100', 'databasicSize50', 'databasicSize25']]
+        ]
+      }
+    },
+
+    // add localization texts
+    lang: {
+      'en-US': {
+        databasic: {
+          name: 'Basic Data Container',
+          insert: 'insert basic data container',
+          edit: 'edit basic data container',
+          testLabel: 'test input'
+        }
+      }
+    }
+
+  });
+}));

e_lib/summernote/plugin/hello/summernote-ext-hello.js

@@ -0,0 +1,81 @@
+(function(factory) {
+  /* global define */
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(window.jQuery);
+  }
+}(function($) {
+  // Extends plugins for adding hello.
+  //  - plugin is external module for customizing.
+  $.extend($.summernote.plugins, {
+    /**
+     * @param {Object} context - context object has status of editor.
+     */
+    'hello': function(context) {
+      var self = this;
+
+      // ui has renders to build ui elements.
+      //  - you can create a button with `ui.button`
+      var ui = $.summernote.ui;
+
+      // add hello button
+      context.memo('button.hello', function() {
+        // create button
+        var button = ui.button({
+          contents: '<i class="fa fa-child"/> Hello',
+          tooltip: 'hello',
+          click: function() {
+            self.$panel.show();
+            self.$panel.hide(500);
+            // invoke insertText method with 'hello' on editor module.
+            context.invoke('editor.insertText', 'hello');
+          }
+        });
+
+        // create jQuery object from button instance.
+        var $hello = button.render();
+        return $hello;
+      });
+
+      // This events will be attached when editor is initialized.
+      this.events = {
+        // This will be called after modules are initialized.
+        'summernote.init': function(we, e) {
+          console.log('summernote initialized', we, e);
+        },
+        // This will be called when user releases a key on editable.
+        'summernote.keyup': function(we, e) {
+          console.log('summernote keyup', we, e);
+        }
+      };
+
+      // This method will be called when editor is initialized by $('..').summernote();
+      // You can create elements for plugin
+      this.initialize = function() {
+        this.$panel = $('<div class="hello-panel"/>').css({
+          position: 'absolute',
+          width: 100,
+          height: 100,
+          left: '50%',
+          top: '50%',
+          background: 'red'
+        }).hide();
+
+        this.$panel.appendTo('body');
+      };
+
+      // This methods will be called when editor is destroyed by $('..').summernote('destroy');
+      // You should remove elements on `initialize`.
+      this.destroy = function() {
+        this.$panel.remove();
+        this.$panel = null;
+      };
+    }
+  });
+}));

e_lib/summernote/plugin/specialchars/summernote-ext-specialchars.js

@@ -0,0 +1,312 @@
+(function(factory) {
+  /* global define */
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(window.jQuery);
+  }
+}(function($) {
+  $.extend($.summernote.plugins, {
+    'specialchars': function(context) {
+      var self = this;
+      var ui = $.summernote.ui;
+
+      var $editor = context.layoutInfo.editor;
+      var options = context.options;
+      var lang = options.langInfo;
+
+      var KEY = {
+        UP: 38,
+        DOWN: 40,
+        LEFT: 37,
+        RIGHT: 39,
+        ENTER: 13
+      };
+      var COLUMN_LENGTH = 15;
+      var COLUMN_WIDTH = 35;
+
+      var currentColumn = 0;
+      var currentRow = 0;
+      var totalColumn = 0;
+      var totalRow = 0;
+
+      // special characters data set
+      var specialCharDataSet = [
+        '"', '&', '<', '>', '¡', '¢',
+        '£', '¤', '¥', '¦', '§',
+        '¨', '©', 'ª', '«', '¬',
+        '®', '¯', '°', '±', '²',
+        '³', '´', 'µ', '¶', '·',
+        '¸', '¹', 'º', '»', '¼',
+        '½', '¾', '¿', '×', '÷',
+        'ƒ', 'ˆ', '˜', '–', '—',
+        '‘', '’', '‚', '“', '”',
+        '„', '†', '‡', '•', '…',
+        '‰', '′', '″', '‹', '›',
+        '‾', '⁄', '€', 'ℑ', '℘',
+        'ℜ', '™', 'ℵ', '←', '↑',
+        '→', '↓', '↔', '↵', '⇐',
+        '⇑', '⇒', '⇓', '⇔', '∀',
+        '∂', '∃', '∅', '∇', '∈',
+        '∉', '∋', '∏', '∑', '−',
+        '∗', '√', '∝', '∞', '∠',
+        '∧', '∨', '∩', '∪', '∫',
+        '∴', '∼', '≅', '≈', '≠',
+        '≡', '≤', '≥', '⊂', '⊃',
+        '⊄', '⊆', '⊇', '⊕', '⊗',
+        '⊥', '⋅', '⌈', '⌉', '⌊',
+        '⌋', '◊', '♠', '♣', '♥',
+        '♦'
+      ];
+
+      context.memo('button.specialchars', function() {
+        return ui.button({
+          contents: '<i class="fa fa-font fa-flip-vertical">',
+          tooltip: lang.specialChar.specialChar,
+          click: function() {
+            self.show();
+          }
+        }).render();
+      });
+
+      /**
+       * Make Special Characters Table
+       *
+       * @member plugin.specialChar
+       * @private
+       * @return {jQuery}
+       */
+      this.makeSpecialCharSetTable = function() {
+        var $table = $('<table/>');
+        $.each(specialCharDataSet, function(idx, text) {
+          var $td = $('<td/>').addClass('note-specialchar-node');
+          var $tr = (idx % COLUMN_LENGTH === 0) ? $('<tr/>') : $table.find('tr').last();
+
+          var $button = ui.button({
+            callback: function($node) {
+              $node.html(text);
+              $node.attr('title', text);
+              $node.attr('data-value', encodeURIComponent(text));
+              $node.css({
+                width: COLUMN_WIDTH,
+                'margin-right': '2px',
+                'margin-bottom': '2px'
+              });
+            }
+          }).render();
+
+          $td.append($button);
+
+          $tr.append($td);
+          if (idx % COLUMN_LENGTH === 0) {
+            $table.append($tr);
+          }
+        });
+
+        totalRow = $table.find('tr').length;
+        totalColumn = COLUMN_LENGTH;
+
+        return $table;
+      };
+
+      this.initialize = function() {
+        var $container = options.dialogsInBody ? $(document.body) : $editor;
+
+        var body = '<div class="form-group row-fluid">' + this.makeSpecialCharSetTable()[0].outerHTML + '</div>';
+
+        this.$dialog = ui.dialog({
+          title: lang.specialChar.select,
+          body: body
+        }).render().appendTo($container);
+      };
+
+      this.show = function() {
+        var text = context.invoke('editor.getSelectedText');
+        context.invoke('editor.saveRange');
+        this.showSpecialCharDialog(text).then(function(selectChar) {
+          context.invoke('editor.restoreRange');
+
+          // build node
+          var $node = $('<span></span>').html(selectChar)[0];
+
+          if ($node) {
+            // insert video node
+            context.invoke('editor.insertNode', $node);
+          }
+        }).fail(function() {
+          context.invoke('editor.restoreRange');
+        });
+      };
+
+      /**
+       * show image dialog
+       *
+       * @param {jQuery} $dialog
+       * @return {Promise}
+       */
+      this.showSpecialCharDialog = function(text) {
+        return $.Deferred(function(deferred) {
+          var $specialCharDialog = self.$dialog;
+          var $specialCharNode = $specialCharDialog.find('.note-specialchar-node');
+          var $selectedNode = null;
+          var ARROW_KEYS = [KEY.UP, KEY.DOWN, KEY.LEFT, KEY.RIGHT];
+          var ENTER_KEY = KEY.ENTER;
+
+          function addActiveClass($target) {
+            if (!$target) {
+              return;
+            }
+            $target.find('button').addClass('active');
+            $selectedNode = $target;
+          }
+
+          function removeActiveClass($target) {
+            $target.find('button').removeClass('active');
+            $selectedNode = null;
+          }
+
+          // find next node
+          function findNextNode(row, column) {
+            var findNode = null;
+            $.each($specialCharNode, function(idx, $node) {
+              var findRow = Math.ceil((idx + 1) / COLUMN_LENGTH);
+              var findColumn = ((idx + 1) % COLUMN_LENGTH === 0) ? COLUMN_LENGTH : (idx + 1) % COLUMN_LENGTH;
+              if (findRow === row && findColumn === column) {
+                findNode = $node;
+                return false;
+              }
+            });
+            return $(findNode);
+          }
+
+          function arrowKeyHandler(keyCode) {
+            // left, right, up, down key
+            var $nextNode;
+            var lastRowColumnLength = $specialCharNode.length % totalColumn;
+
+            if (KEY.LEFT === keyCode) {
+              if (currentColumn > 1) {
+                currentColumn = currentColumn - 1;
+              } else if (currentRow === 1 && currentColumn === 1) {
+                currentColumn = lastRowColumnLength;
+                currentRow = totalRow;
+              } else {
+                currentColumn = totalColumn;
+                currentRow = currentRow - 1;
+              }
+            } else if (KEY.RIGHT === keyCode) {
+              if (currentRow === totalRow && lastRowColumnLength === currentColumn) {
+                currentColumn = 1;
+                currentRow = 1;
+              } else if (currentColumn < totalColumn) {
+                currentColumn = currentColumn + 1;
+              } else {
+                currentColumn = 1;
+                currentRow = currentRow + 1;
+              }
+            } else if (KEY.UP === keyCode) {
+              if (currentRow === 1 && lastRowColumnLength < currentColumn) {
+                currentRow = totalRow - 1;
+              } else {
+                currentRow = currentRow - 1;
+              }
+            } else if (KEY.DOWN === keyCode) {
+              currentRow = currentRow + 1;
+            }
+
+            if (currentRow === totalRow && currentColumn > lastRowColumnLength) {
+              currentRow = 1;
+            } else if (currentRow > totalRow) {
+              currentRow = 1;
+            } else if (currentRow < 1) {
+              currentRow = totalRow;
+            }
+
+            $nextNode = findNextNode(currentRow, currentColumn);
+
+            if ($nextNode) {
+              removeActiveClass($selectedNode);
+              addActiveClass($nextNode);
+            }
+          }
+
+          function enterKeyHandler() {
+            if (!$selectedNode) {
+              return;
+            }
+
+            deferred.resolve(decodeURIComponent($selectedNode.find('button').attr('data-value')));
+            $specialCharDialog.modal('hide');
+          }
+
+          function keyDownEventHandler(event) {
+            event.preventDefault();
+            var keyCode = event.keyCode;
+            if (keyCode === undefined || keyCode === null) {
+              return;
+            }
+            // check arrowKeys match
+            if (ARROW_KEYS.indexOf(keyCode) > -1) {
+              if ($selectedNode === null) {
+                addActiveClass($specialCharNode.eq(0));
+                currentColumn = 1;
+                currentRow = 1;
+                return;
+              }
+              arrowKeyHandler(keyCode);
+            } else if (keyCode === ENTER_KEY) {
+              enterKeyHandler();
+            }
+            return false;
+          }
+
+          // remove class
+          removeActiveClass($specialCharNode);
+
+          // find selected node
+          if (text) {
+            for (var i = 0; i < $specialCharNode.length; i++) {
+              var $checkNode = $($specialCharNode[i]);
+              if ($checkNode.text() === text) {
+                addActiveClass($checkNode);
+                currentRow = Math.ceil((i + 1) / COLUMN_LENGTH);
+                currentColumn = (i + 1) % COLUMN_LENGTH;
+              }
+            }
+          }
+
+          ui.onDialogShown(self.$dialog, function() {
+            $(document).on('keydown', keyDownEventHandler);
+
+            self.$dialog.find('button').tooltip();
+
+            $specialCharNode.on('click', function(event) {
+              event.preventDefault();
+              deferred.resolve(decodeURIComponent($(event.currentTarget).find('button').attr('data-value')));
+              ui.hideDialog(self.$dialog);
+            });
+          });
+
+          ui.onDialogHidden(self.$dialog, function() {
+            $specialCharNode.off('click');
+
+            self.$dialog.find('button').tooltip('destroy');
+
+            $(document).off('keydown', keyDownEventHandler);
+
+            if (deferred.state() === 'pending') {
+              deferred.reject();
+            }
+          });
+
+          ui.showDialog(self.$dialog);
+        });
+      };
+    }
+  });
+}));