secure-sharing/SecureSharing/wwwroot/plugins/summernote/plugin/databasic/summernote-ext-databasic.js

(function (factory) {
    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',
                },
            },
        },

    });
}));