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

77.78% Statements 28/36
50% Branches 3/6
58.33% Functions 7/12
77.78% Lines 28/36

    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
    801×
    1×

    1×
    1×
    96×

    96×
    96×
    96×
    96×
    96×

    1×
    96×

    96×

    96×

    96×

    1×
    2×
    2×

    97×
    96×
    96×
    2592×
    2592×
    2592×

    2592×

    1×

    1×

    1×
     import $ from 'jquery';
    import env from '../core/env';

    export default class HelpDialog {
      constructor(context) {
        this.context = context;

        this.ui = $.summernote.ui;
        this.$body = $(document.body);
        this.$editor = context.layoutInfo.editor;
        this.options = context.options;
        this.lang = this.options.langInfo;
      }

      initialize() {
        const $container = this.options.dialogsInBody ? this.$body : this.$editor;

        const body = [
          '<p class="text-center">',
          '<a href="http://summernote.org/" target="_blank">Summernote @@VERSION@@</a> · ',
          '<a href="https://github.com/summernote/summernote" target="_blank">Project</a> · ',
          '<a href="https://github.com/summernote/summernote/issues" target="_blank">Issues</a>',
          '</p>',
        ].join('');

        this.$dialog = this.ui.dialog({
          title: this.lang.options.help,
          fade: this.options.dialogsFade,
          body: this.createShortcutList(),
          footer: body,
          callback: ($node) => {
            $node.find('.modal-body,.note-modal-body').css({
              'max-height': 300,
              'overflow': 'scroll',
            });
          },
        }).render().appendTo($container);
      }

      destroy() {
        this.ui.hideDialog(this.$dialog);
        this.$dialog.remove();
      }

      createShortcutList() {
        const keyMap = this.options.keyMap[env.isMac ? 'mac' : 'pc'];
        return Object.keys(keyMap).map((key) => {
          const command = keyMap[key];
          const $row = $('<div><div class="help-list-item"/></div>');
          $row.append($('<label><kbd>' + key + '</kdb></label>').css({
            'width': 180,
            'margin-right': 10,
          })).append($('<span/>').html(this.context.memo('help.' + command) || command));
          return $row.html();
        }).join('');
      }

      /**
       * show help dialog
       *
       * @return {Promise}
       */
      showHelpDialog() {
        return $.Deferred((deferred) => {
          this.ui.onDialogShown(this.$dialog, () => {
            this.context.triggerEvent('dialog.shown');
            deferred.resolve();
          });
          this.ui.showDialog(this.$dialog);
        }).promise();
      }

      show() {
        this.context.invoke('editor.saveRange');
        this.showHelpDialog().then(() => {
          this.context.invoke('editor.restoreRange');
        });
      }
    }