@themarioga/grid-editor 3.1.0

package/src/js/plugins/grideditor.popup.js

@@ -0,0 +1,143 @@
+/**
+ * Popups for grid-editor.
+ *
+ * A container plugin: load this file after the editor and the toolbar offers
+ * a popup: a bootstrap modal and its trigger. What it can ask the editor for is the handle its factory is
+ * called with, described in docs/plugins.md.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.popup.min.js"></script>
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'container.add_popup': 'Popup',
+    'container.popup_title': 'Title',
+    'container.popup_trigger': 'Open',
+    'tool.toggle_popup': 'Fold this popup away while editing',
+});
+
+$.fn.gridEditor.containers.popup = function(ge) {
+
+    function popupIdOf(container) {
+        return container.attr('data-ge-popup-id');
+    }
+
+    function wirePopupTriggers() {
+        ge.canvas.find('[data-ge-popup-target]').each(function() {
+            var trigger = $(this).addClass('ge-popup-trigger');
+            var wanted = trigger.attr('data-ge-popup-target');
+
+            // Bootstrap's own attributes are written at getHtml time, not
+            // while editing, so a click here cannot open a real modal
+            trigger.removeAttr('data-bs-toggle').removeAttr('data-bs-target');
+
+            if (ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) {
+                trigger.removeClass('ge-popup-orphan');
+                return;
+            }
+
+            var nearby = trigger.closest('.column').find('[data-ge-popup-id]');
+
+            if (nearby.length === 1) {
+                trigger.attr('data-ge-popup-target', popupIdOf(nearby)).removeClass('ge-popup-orphan');
+                return;
+            }
+
+            trigger.addClass('ge-popup-orphan');
+
+            ge.operate(function() {
+                ge.emit('popup-orphan', ge.payloadFor('popup', trigger, {
+                    parent: trigger.parent(),
+                    source: 'api',
+                    missing: wanted,
+                }));
+            });
+        });
+    }
+
+    function writePopupTriggerAttributes() {
+        ge.canvas.find('[data-ge-popup-target]').each(function() {
+            var trigger = $(this);
+            var wanted = trigger.attr('data-ge-popup-target');
+
+            // The warning marking is editing furniture, whether or not
+            // the trigger can be wired up
+            trigger.removeClass('ge-popup-orphan');
+            if (!trigger.attr('class')) { trigger.removeAttr('class'); }
+
+            if (!ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) { return; }
+
+            trigger.attr('data-bs-toggle', 'modal').attr('data-bs-target', '#' + wanted);
+        });
+    }
+
+    return {
+        labelKey: 'container.add_popup',
+        paneKind: 'popup',
+
+        // Triggers are markup the host owns, anywhere in the canvas, so they
+        // are looked at whenever the canvas is initialized rather than only
+        // when a popup is touched
+        onInit: wirePopupTriggers,
+        onDeinit: writePopupTriggerAttributes,
+
+        create: function(options) {
+            var id = ge.containerId('popup');
+            var container = $('<div />')
+                .attr('data-ge-container', 'popup')
+                .attr('data-ge-popup-id', id)
+            ;
+
+            if (options.trigger !== false) {
+                $('<button type="button" class="btn btn-primary ge-popup-trigger" />')
+                    .attr('data-ge-popup-target', id)
+                    .text(options.trigger_label || ge.t('container.popup_trigger'))
+                    .appendTo(container)
+                ;
+            }
+
+            var dialog = $('<div class="modal-dialog" />');
+            if (options.size) { dialog.addClass('modal-' + options.size); }
+
+            $('<div class="modal fade" tabindex="-1" aria-hidden="true" />')
+                .attr('id', id)
+                .append(dialog.append($('<div class="modal-content" />')
+                    .append($('<div class="modal-header" />')
+                        .append($('<h5 class="modal-title" />')
+                            .append($('<span class="ge-pane-label" />')
+                                .text(options.title || ge.t('container.popup_title'))))
+                        .append('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'))
+                    .append($('<div class="modal-body" />').append(ge.defaultRegion()))))
+                .appendTo(container)
+            ;
+
+            return container;
+        },
+
+        mark: function(container) {
+            // Nothing in a popup may reach Bootstrap while editing:
+            // the modal is rendered unfolded and static, and a real
+            // modal opening over it would be the editor fighting
+            // itself
+            ge.suspendToggles(container.find('[data-bs-dismiss]'));
+            ge.makeLabelEditable(ge.labelIn(container.find('.modal-title')));
+        },
+
+        unmark: function(container) {
+            ge.resumeToggles(container);
+            container.removeClass('ge-popup-collapsed');
+            ge.unwrapLabels(container);
+        },
+
+        /** A page of unfolded modals stays workable if they can be folded away. */
+        tools: function(drawer, container) {
+            ge.createTool(drawer, ge.t('tool.toggle_popup'), 'ge-toggle-popup', 'bi bi-chevron-bar-contract',
+                function() {
+                    container.toggleClass('ge-popup-collapsed');
+                });
+        },
+    };
+};
+
+})(jQuery);

package/src/js/plugins/grideditor.tabs.js

@@ -0,0 +1,140 @@
+/**
+ * Tabs for grid-editor.
+ *
+ * A container plugin: load this file after the editor and the toolbar offers
+ * a tabs container. What it can ask the editor for is the handle its factory is
+ * called with, described in docs/plugins.md.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.tabs.min.js"></script>
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'container.add_tabs': 'Tabs',
+    'container.add_tab': 'Add tab',
+    'container.tab_label': 'Tab {number}',
+    'confirm.delete_tab': 'Delete this tab and everything in it?',
+});
+
+$.fn.gridEditor.containers.tabs = function(ge) {
+
+    function addTabTo(container, options) {
+        options = options || {};
+
+        var strip = container.find('> .nav-tabs');
+        var content = container.find('> .tab-content');
+        var id = ge.containerId('tab');
+        var number = strip.children('.nav-item').length + 1;
+
+        $('<li class="nav-item ge-tab" role="presentation" />')
+            .append($('<button class="nav-link" type="button" role="tab" data-bs-toggle="tab" />')
+                .attr('data-bs-target', '#' + id)
+                .attr('aria-controls', id)
+                .append($('<span class="ge-pane-label" />')
+                    .text(options.label || ge.t('container.tab_label', { number: number })))
+            )
+            .appendTo(strip)
+        ;
+
+        var pane = $('<div class="tab-pane fade" role="tabpanel" tabindex="0" />')
+            .attr('id', id)
+            .append(ge.defaultRegion())
+            .appendTo(content)
+        ;
+
+        if (options.activate || number === 1) { activatePane(container, pane); }
+
+        return pane;
+    }
+
+    function activatePane(container, pane) {
+        var id = pane.attr('id');
+
+        container.find('> .tab-content > .tab-pane').removeClass('show active');
+        pane.addClass('show active');
+
+        container.find('> .nav-tabs .nav-link').each(function() {
+            var button = $(this);
+            var active = button.attr('data-bs-target') === '#' + id;
+
+            button.toggleClass('active', active).attr('aria-selected', active ? 'true' : 'false');
+        });
+    }
+
+    function tabOf(container, pane) {
+        return container.find('> .nav-tabs .nav-link[data-bs-target="#' + pane.attr('id') + '"]')
+            .closest('.nav-item');
+    }
+
+    function paneOf(container, tab) {
+        return container.find(tab.find('.nav-link').attr('data-bs-target'));
+    }
+
+    return {
+        labelKey: 'container.add_tabs',
+        addPaneKey: 'container.add_tab',
+        paneKind: 'tab',
+
+        create: function(options) {
+            var container = $('<div />').attr('data-ge-container', 'tabs');
+            var labels = options.labels || [];
+            var count = options.tabs || labels.length || 2;
+
+            $('<ul class="nav nav-tabs" role="tablist" />').appendTo(container);
+            $('<div class="tab-content" />').appendTo(container);
+
+            for (var i = 0; i < count; i++) {
+                addTabTo(container, { label: labels[i] });
+            }
+
+            return container;
+        },
+
+        addPane: addTabTo,
+
+        mark: function(container) {
+            container.find('> .tab-content > .tab-pane').addClass('ge-tab-pane');
+
+            container.find('> .nav-tabs > .nav-item').each(function() {
+                var tab = $(this).addClass('ge-tab');
+
+
+                ge.makeLabelEditable(ge.labelIn(tab.find('.nav-link')));
+
+                if (tab.find('> .ge-tools-drawer').length) { return; }
+
+                ge.createPaneControls(tab, 'tab', ge.settings.tab_tools, ge.t('confirm.delete_tab'),
+                    function(removed) {
+                        var pane = paneOf(container, tab);
+                        var wasActive = pane.hasClass('active');
+
+                        tab.fadeOut(200, function() {
+                            pane.remove();
+                            removed();
+
+                            var first = container.find('> .tab-content > .tab-pane').first();
+                            if (wasActive && first.length) { activatePane(container, first); }
+                        });
+                    });
+            });
+        },
+
+        unmark: function(container) {
+            ge.resumeToggles(container);
+            container.find('.ge-tab-pane').removeClass('ge-tab-pane');
+            ge.unwrapLabels(container);
+        },
+
+        /** Panes read in tab order, whatever order they were dropped in. */
+        afterPaneMove: function(container) {
+            var content = container.find('> .tab-content');
+
+            container.find('> .nav-tabs > .nav-item').each(function() {
+                content.append(paneOf(container, $(this)));
+            });
+        },
+    };
+};
+
+})(jQuery);