Mini Shell

(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'
        }
      }
    }
    
  });

}));