@themarioga/grid-editor 7.2.0 → 8.0.0-beta.2

package/dist/plugins/grideditor.visibility.esm.js

@@ -1,158 +0,0 @@
-// src/js/plugins/grideditor.visibility.js
-import { GridEditor } from "../grideditor.esm.js";
-
-// src/js/dom.js
-function all(root, selector) {
-  return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
-}
-function selfAndAll(root, selector) {
-  if (!root) {
-    return [];
-  }
-  var found = all(root, selector);
-  if (root.nodeType === 1 && root.matches(selector)) {
-    found.unshift(root);
-  }
-  return found;
-}
-function children(node, selector) {
-  if (!node) {
-    return [];
-  }
-  return Array.prototype.filter.call(node.children, function(each) {
-    return !selector || each.matches(selector);
-  });
-}
-function is(node, selector) {
-  return !!node && node.nodeType === 1 && node.matches(selector);
-}
-function removeClass(node, names) {
-  split(names).forEach(function(name) {
-    node.classList.remove(name);
-  });
-  return node;
-}
-function toggleClass(node, names, state) {
-  split(names).forEach(function(name) {
-    if (state === void 0) {
-      node.classList.toggle(name);
-    } else {
-      node.classList.toggle(name, !!state);
-    }
-  });
-  return node;
-}
-function split(names) {
-  return String(names || "").split(/\s+/).filter(Boolean);
-}
-function dropEmptyClass(node) {
-  if (!node.getAttribute("class")) {
-    node.removeAttribute("class");
-  }
-  return node;
-}
-
-// src/js/plugins/grideditor.visibility.js
-Object.assign(GridEditor.locales.en, {
-  "utility.visibility": "Visibility",
-  "utility.visibility_hidden": "Hidden",
-  "utility.visibility_shown": "Shown",
-  "tool.hide_in_view": "Hide in this view",
-  "tool.show_in_view": "Show in this view",
-  "badge.hidden_in": "Hidden at {breakpoints}"
-});
-var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
-var NODES = ".row, .column, .ge-content, .ge-element, [data-ge-container]";
-GridEditor.utilities.visibility = function(ge) {
-  var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
-  function shown(kind) {
-    return kind === "row" ? "flex" : "block";
-  }
-  function applies(node, kind) {
-    return kind === "row" || kind === "column" || kind === "element" || kind === "text" || kind === "plain" || is(node, "[data-ge-container]");
-  }
-  function hiddenAt(node, view) {
-    return ge.getUtility(node, "visibility", view) === "none";
-  }
-  function hiddenTiers(node) {
-    return ge.breakpoints.filter(function(key) {
-      return hiddenAt(node, key);
-    });
-  }
-  function hiddenHere(node) {
-    return ge.view() === "all" ? hiddenTiers(node).length === ge.breakpoints.length : hiddenAt(node, ge.view());
-  }
-  function hiddenBelow(node) {
-    var index = ge.breakpoints.indexOf(ge.view());
-    return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
-  }
-  function toggle(node, kind) {
-    var hide = !hiddenHere(node);
-    var value;
-    if (ge.view() === "all") {
-      value = hide ? "none" : null;
-    } else if (hide) {
-      value = hiddenBelow(node) ? null : "none";
-    } else {
-      value = hiddenBelow(node) ? shown(kind) : null;
-    }
-    ge.setUtility(node, "visibility", value, { source: "tool" });
-  }
-  function mark(scope) {
-    selfAndAll(scope, NODES).forEach(function(node) {
-      var kind = ge.kindOf(node);
-      var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute("class") || "");
-      var tiers = carries ? hiddenTiers(node) : [];
-      var here = carries && hiddenHere(node);
-      var partly = carries && ge.view() === "all" && tiers.length > 0 && !here;
-      toggleClass(node, "ge-visibility", carries);
-      toggleClass(node, "ge-hidden-in-view", here);
-      if (partly) {
-        node.setAttribute("data-ge-hidden-in", ge.t("badge.hidden_in", { breakpoints: tiers.join(", ") }));
-      } else {
-        node.removeAttribute("data-ge-hidden-in");
-      }
-      children(node, ".ge-tools-drawer").forEach(function(drawer) {
-        children(drawer, ".ge-visibility-tool").forEach(function(tool) {
-          tool.setAttribute("title", here ? ge.t("tool.show_in_view") : ge.t("tool.hide_in_view"));
-          all(tool, "i").forEach(function(icon) {
-            icon.setAttribute("class", here ? "bi bi-eye-slash" : "bi bi-eye");
-          });
-        });
-      });
-    });
-  }
-  function unmark() {
-    all(ge.canvas, ".ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]").forEach(function(node) {
-      removeClass(node, "ge-visibility ge-hidden-in-view");
-      node.removeAttribute("data-ge-hidden-in");
-      dropEmptyClass(node);
-    });
-  }
-  return {
-    families: [{
-      name: "visibility",
-      prefix: "d",
-      values: ["none", "block", "flex"],
-      appliesTo: ["row", "column", "text", "element", "container"],
-      labelKey: "utility.visibility",
-      /** Hidden, or shown the way this kind of node is shown. */
-      choices: function(node, kind) {
-        return ["none", shown(kind)];
-      },
-      label: function(value) {
-        return value === "none" ? ge.t("utility.visibility_hidden") : ge.t("utility.visibility_shown");
-      }
-    }],
-    drawerTools: function(drawer, node, kind) {
-      if (!options.drawer || !applies(node, kind)) {
-        return;
-      }
-      ge.createTool(drawer, ge.t("tool.hide_in_view"), "ge-visibility-tool", "bi bi-eye", function() {
-        toggle(node, kind);
-      });
-    },
-    onRefresh: mark,
-    onDeinit: unmark
-  };
-};

package/dist/plugins/grideditor.visibility.js

@@ -1,163 +0,0 @@
-(() => {
-  // src/js/register.js
-  var GridEditor = window.GridEditor;
-  if (!GridEditor || typeof GridEditor.get !== "function") {
-    throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");
-  }
-
-  // src/js/dom.js
-  function all(root, selector) {
-    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
-  }
-  function selfAndAll(root, selector) {
-    if (!root) {
-      return [];
-    }
-    var found = all(root, selector);
-    if (root.nodeType === 1 && root.matches(selector)) {
-      found.unshift(root);
-    }
-    return found;
-  }
-  function children(node, selector) {
-    if (!node) {
-      return [];
-    }
-    return Array.prototype.filter.call(node.children, function(each) {
-      return !selector || each.matches(selector);
-    });
-  }
-  function is(node, selector) {
-    return !!node && node.nodeType === 1 && node.matches(selector);
-  }
-  function removeClass(node, names) {
-    split(names).forEach(function(name) {
-      node.classList.remove(name);
-    });
-    return node;
-  }
-  function toggleClass(node, names, state) {
-    split(names).forEach(function(name) {
-      if (state === void 0) {
-        node.classList.toggle(name);
-      } else {
-        node.classList.toggle(name, !!state);
-      }
-    });
-    return node;
-  }
-  function split(names) {
-    return String(names || "").split(/\s+/).filter(Boolean);
-  }
-  function dropEmptyClass(node) {
-    if (!node.getAttribute("class")) {
-      node.removeAttribute("class");
-    }
-    return node;
-  }
-
-  // src/js/plugins/grideditor.visibility.js
-  Object.assign(GridEditor.locales.en, {
-    "utility.visibility": "Visibility",
-    "utility.visibility_hidden": "Hidden",
-    "utility.visibility_shown": "Shown",
-    "tool.hide_in_view": "Hide in this view",
-    "tool.show_in_view": "Show in this view",
-    "badge.hidden_in": "Hidden at {breakpoints}"
-  });
-  var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
-  var NODES = ".row, .column, .ge-content, .ge-element, [data-ge-container]";
-  GridEditor.utilities.visibility = function(ge) {
-    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
-    function shown(kind) {
-      return kind === "row" ? "flex" : "block";
-    }
-    function applies(node, kind) {
-      return kind === "row" || kind === "column" || kind === "element" || kind === "text" || kind === "plain" || is(node, "[data-ge-container]");
-    }
-    function hiddenAt(node, view) {
-      return ge.getUtility(node, "visibility", view) === "none";
-    }
-    function hiddenTiers(node) {
-      return ge.breakpoints.filter(function(key) {
-        return hiddenAt(node, key);
-      });
-    }
-    function hiddenHere(node) {
-      return ge.view() === "all" ? hiddenTiers(node).length === ge.breakpoints.length : hiddenAt(node, ge.view());
-    }
-    function hiddenBelow(node) {
-      var index = ge.breakpoints.indexOf(ge.view());
-      return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
-    }
-    function toggle(node, kind) {
-      var hide = !hiddenHere(node);
-      var value;
-      if (ge.view() === "all") {
-        value = hide ? "none" : null;
-      } else if (hide) {
-        value = hiddenBelow(node) ? null : "none";
-      } else {
-        value = hiddenBelow(node) ? shown(kind) : null;
-      }
-      ge.setUtility(node, "visibility", value, { source: "tool" });
-    }
-    function mark(scope) {
-      selfAndAll(scope, NODES).forEach(function(node) {
-        var kind = ge.kindOf(node);
-        var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute("class") || "");
-        var tiers = carries ? hiddenTiers(node) : [];
-        var here = carries && hiddenHere(node);
-        var partly = carries && ge.view() === "all" && tiers.length > 0 && !here;
-        toggleClass(node, "ge-visibility", carries);
-        toggleClass(node, "ge-hidden-in-view", here);
-        if (partly) {
-          node.setAttribute("data-ge-hidden-in", ge.t("badge.hidden_in", { breakpoints: tiers.join(", ") }));
-        } else {
-          node.removeAttribute("data-ge-hidden-in");
-        }
-        children(node, ".ge-tools-drawer").forEach(function(drawer) {
-          children(drawer, ".ge-visibility-tool").forEach(function(tool) {
-            tool.setAttribute("title", here ? ge.t("tool.show_in_view") : ge.t("tool.hide_in_view"));
-            all(tool, "i").forEach(function(icon) {
-              icon.setAttribute("class", here ? "bi bi-eye-slash" : "bi bi-eye");
-            });
-          });
-        });
-      });
-    }
-    function unmark() {
-      all(ge.canvas, ".ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]").forEach(function(node) {
-        removeClass(node, "ge-visibility ge-hidden-in-view");
-        node.removeAttribute("data-ge-hidden-in");
-        dropEmptyClass(node);
-      });
-    }
-    return {
-      families: [{
-        name: "visibility",
-        prefix: "d",
-        values: ["none", "block", "flex"],
-        appliesTo: ["row", "column", "text", "element", "container"],
-        labelKey: "utility.visibility",
-        /** Hidden, or shown the way this kind of node is shown. */
-        choices: function(node, kind) {
-          return ["none", shown(kind)];
-        },
-        label: function(value) {
-          return value === "none" ? ge.t("utility.visibility_hidden") : ge.t("utility.visibility_shown");
-        }
-      }],
-      drawerTools: function(drawer, node, kind) {
-        if (!options.drawer || !applies(node, kind)) {
-          return;
-        }
-        ge.createTool(drawer, ge.t("tool.hide_in_view"), "ge-visibility-tool", "bi bi-eye", function() {
-          toggle(node, kind);
-        });
-      },
-      onRefresh: mark,
-      onDeinit: unmark
-    };
-  };
-})();

package/dist/plugins/grideditor.visibility.min.js

@@ -1 +0,0 @@
-(()=>{var a=window.GridEditor;if(!a||typeof a.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");function s(t,n){return t?Array.prototype.slice.call(t.querySelectorAll(n)):[]}function x(t,n){if(!t)return[];var r=s(t,n);return t.nodeType===1&&t.matches(n)&&r.unshift(t),r}function p(t,n){return t?Array.prototype.filter.call(t.children,function(r){return!n||r.matches(n)}):[]}function b(t,n){return!!t&&t.nodeType===1&&t.matches(n)}function w(t,n){return E(n).forEach(function(r){t.classList.remove(r)}),t}function d(t,n,r){return E(n).forEach(function(u){r===void 0?t.classList.toggle(u):t.classList.toggle(u,!!r)}),t}function E(t){return String(t||"").split(/\s+/).filter(Boolean)}function A(t){return t.getAttribute("class")||t.removeAttribute("class"),t}Object.assign(a.locales.en,{"utility.visibility":"Visibility","utility.visibility_hidden":"Hidden","utility.visibility_shown":"Shown","tool.hide_in_view":"Hide in this view","tool.show_in_view":"Show in this view","badge.hidden_in":"Hidden at {breakpoints}"});var O=/(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/,H=".row, .column, .ge-content, .ge-element, [data-ge-container]";a.utilities.visibility=function(t){var n=Object.assign({drawer:!0},t.settings.utilities.visibility);function r(i){return i==="row"?"flex":"block"}function u(i,e){return e==="row"||e==="column"||e==="element"||e==="text"||e==="plain"||b(i,"[data-ge-container]")}function c(i,e){return t.getUtility(i,"visibility",e)==="none"}function h(i){return t.breakpoints.filter(function(e){return c(i,e)})}function v(i){return t.view()==="all"?h(i).length===t.breakpoints.length:c(i,t.view())}function m(i){var e=t.breakpoints.indexOf(t.view());return e>0&&c(i,t.breakpoints[e-1])}function T(i,e){var l=!v(i),o;t.view()==="all"?o=l?"none":null:l?o=m(i)?null:"none":o=m(i)?r(e):null,t.setUtility(i,"visibility",o,{source:"tool"})}function C(i){x(i,H).forEach(function(e){var l=t.kindOf(e),o=u(e,l)&&O.test(e.getAttribute("class")||""),g=o?h(e):[],f=o&&v(e),_=o&&t.view()==="all"&&g.length>0&&!f;d(e,"ge-visibility",o),d(e,"ge-hidden-in-view",f),_?e.setAttribute("data-ge-hidden-in",t.t("badge.hidden_in",{breakpoints:g.join(", ")})):e.removeAttribute("data-ge-hidden-in"),p(e,".ge-tools-drawer").forEach(function(B){p(B,".ge-visibility-tool").forEach(function(y){y.setAttribute("title",f?t.t("tool.show_in_view"):t.t("tool.hide_in_view")),s(y,"i").forEach(function(k){k.setAttribute("class",f?"bi bi-eye-slash":"bi bi-eye")})})})})}function S(){s(t.canvas,".ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]").forEach(function(i){w(i,"ge-visibility ge-hidden-in-view"),i.removeAttribute("data-ge-hidden-in"),A(i)})}return{families:[{name:"visibility",prefix:"d",values:["none","block","flex"],appliesTo:["row","column","text","element","container"],labelKey:"utility.visibility",choices:function(i,e){return["none",r(e)]},label:function(i){return i==="none"?t.t("utility.visibility_hidden"):t.t("utility.visibility_shown")}}],drawerTools:function(i,e,l){!n.drawer||!u(e,l)||t.createTool(i,t.t("tool.hide_in_view"),"ge-visibility-tool","bi bi-eye",function(){T(e,l)})},onRefresh:C,onDeinit:S}};})();

package/dist/plugins/grideditor.visibility.min.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/js/register.js", "../../src/js/dom.js", "../../src/js/plugins/grideditor.visibility.js"],
-  "sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n        'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * The DOM, the way grid-editor uses it.\n *\n * Small helpers over the browser's own API, for the core and the shipped\n * plugins. Not a public API: a plugin of a host's own is free to write its\n * DOM code however it likes, and this file makes no promise to it.\n *\n * Stateless on purpose. The build puts a copy of this file in each plugin's\n * classic script, so anything kept here would be kept once per copy; a\n * module that needs to remember something about a node keeps its own\n * WeakMap.\n */\n\n/** Every element under `root` matching `selector`, as an array. */\nexport function all(root, selector) {\n    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];\n}\n\n/** The first element under `root` matching `selector`, or null. */\nexport function one(root, selector) {\n    return root ? root.querySelector(selector) : null;\n}\n\n/** `root` itself when it matches, then every element under it that does. */\nexport function selfAndAll(root, selector) {\n    if (!root) { return []; }\n\n    var found = all(root, selector);\n    if (root.nodeType === 1 && root.matches(selector)) { found.unshift(root); }\n    return found;\n}\n\n/** The element children of `node`, those matching `selector` if one is given. */\nexport function children(node, selector) {\n    if (!node) { return []; }\n\n    return Array.prototype.filter.call(node.children, function(each) {\n        return !selector || each.matches(selector);\n    });\n}\n\n/** The first element child matching `selector`, or null. */\nexport function child(node, selector) {\n    return children(node, selector)[0] || null;\n}\n\n/** The nearest ancestor-or-self matching `selector` below `stopAt`, or null. */\nexport function closest(node, selector, stopAt) {\n    var found = node && node.nodeType === 1 ? node.closest(selector) : null;\n\n    if (found && stopAt && found !== stopAt && !stopAt.contains(found)) { return null; }\n    return found;\n}\n\n/** Whether `node` is an element matching `selector`. */\nexport function is(node, selector) {\n    return !!node && node.nodeType === 1 && node.matches(selector);\n}\n\n/** Whether `node` is in the document. */\nexport function attached(node) {\n    return !!node && document.documentElement.contains(node);\n}\n\n/** The element siblings after `node` that match `selector`. */\nexport function nextAll(node, selector) {\n    var found = [];\n\n    for (var next = node.nextElementSibling; next; next = next.nextElementSibling) {\n        if (!selector || next.matches(selector)) { found.push(next); }\n    }\n    return found;\n}\n\n/** The ancestors of `node` up to, and not including, `stop`, nearest first. */\nexport function parentsUntil(node, stop) {\n    var found = [];\n\n    for (var parent = node.parentElement; parent && parent !== stop; parent = parent.parentElement) {\n        found.push(parent);\n    }\n    return found;\n}\n\n/**\n * The nodes the html parses into, detached. Parsed the way innerHTML parses,\n * so a <script> in it never runs, here or once it is in the page.\n */\nexport function parse(html) {\n    var template = document.createElement('template');\n    template.innerHTML = html;\n    return Array.prototype.slice.call(template.content.childNodes);\n}\n\n/** The one element the html is, detached. */\nexport function create(html) {\n    var nodes = parse(html.trim());\n\n    for (var i = 0; i < nodes.length; i++) {\n        if (nodes[i].nodeType === 1) { return nodes[i]; }\n    }\n    return null;\n}\n\n/** An element of `tag`, with `attributes` and `text`. */\nexport function element(tag, attributes, text) {\n    var node = document.createElement(tag);\n\n    Object.keys(attributes || {}).forEach(function(name) {\n        var value = attributes[name];\n        if (value !== null && value !== undefined && value !== false) { node.setAttribute(name, value); }\n    });\n    if (text !== undefined && text !== null) { node.textContent = text; }\n\n    return node;\n}\n\n/** Replace what `node` holds with `html`. A <script> in it does not run. */\nexport function setHtml(node, html) {\n    node.innerHTML = html === undefined || html === null ? '' : String(html);\n    return node;\n}\n\n/** Add one or several space separated classes. */\nexport function addClass(node, names) {\n    split(names).forEach(function(name) { node.classList.add(name); });\n    return node;\n}\n\nexport function removeClass(node, names) {\n    split(names).forEach(function(name) { node.classList.remove(name); });\n    return node;\n}\n\n/** Each class on, or off, or flipped when `on` is not given. */\nexport function toggleClass(node, names, state) {\n    split(names).forEach(function(name) {\n        if (state === undefined) {\n            node.classList.toggle(name);\n        } else {\n            node.classList.toggle(name, !!state);\n        }\n    });\n    return node;\n}\n\nexport function hasClass(node, name) {\n    return !!node && node.nodeType === 1 && node.classList.contains(name);\n}\n\nfunction split(names) {\n    return String(names || '').split(/\\s+/).filter(Boolean);\n}\n\n/** Take the class attribute off when there is nothing left in it. */\nexport function dropEmptyClass(node) {\n    if (!node.getAttribute('class')) { node.removeAttribute('class'); }\n    return node;\n}\n\n/** Take the style attribute off when there is nothing left in it. */\nexport function dropEmptyStyle(node) {\n    if (!node.getAttribute('style')) { node.removeAttribute('style'); }\n    return node;\n}\n\n/** Set attributes; a null or undefined value takes the attribute off. */\nexport function attr(node, attributes) {\n    Object.keys(attributes).forEach(function(name) {\n        var value = attributes[name];\n\n        if (value === null || value === undefined) {\n            node.removeAttribute(name);\n        } else {\n            node.setAttribute(name, value);\n        }\n    });\n    return node;\n}\n\n/**\n * Inline styles, by css property name. A number is pixels for the properties\n * that take a length, as jQuery had it; an empty string takes one off.\n */\nexport function css(node, styles) {\n    Object.keys(styles).forEach(function(property) {\n        var value = styles[property];\n\n        if (typeof value === 'number' && !UNITLESS[property]) { value = value + 'px'; }\n        node.style.setProperty(property, value === null || value === undefined ? '' : String(value));\n    });\n    return node;\n}\n\nvar UNITLESS = { opacity: true, 'z-index': true, 'flex-grow': true, 'flex-shrink': true, order: true };\n\n/** What an element of this tag shows as when nothing hides it. */\nvar defaultDisplays = {};\n\nfunction defaultDisplay(node) {\n    var tag = node.nodeName;\n\n    if (!defaultDisplays[tag]) {\n        var probe = document.body.appendChild(document.createElement(tag));\n        defaultDisplays[tag] = getComputedStyle(probe).display;\n        probe.remove();\n        if (defaultDisplays[tag] === 'none') { defaultDisplays[tag] = 'block'; }\n    }\n    return defaultDisplays[tag];\n}\n\n/** Show a node: its inline display:none off, and a display of its own if a stylesheet hides it. */\nexport function show(node) {\n    node.style.removeProperty('display');\n    if (getComputedStyle(node).display === 'none') { node.style.display = defaultDisplay(node); }\n    return node;\n}\n\nexport function hide(node) {\n    node.style.display = 'none';\n    return node;\n}\n\n/** Show or hide; flip when `on` is not given. */\nexport function toggle(node, state) {\n    if (state === undefined) { state = !visible(node); }\n    return state ? show(node) : hide(node);\n}\n\n/** Whether a node takes up room: what jQuery's :visible meant. */\nexport function visible(node) {\n    return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length);\n}\n\n/** The border box's width, fractions included. */\nexport function outerWidth(node) {\n    return node.getBoundingClientRect().width;\n}\n\nexport function outerHeight(node) {\n    return node.getBoundingClientRect().height;\n}\n\n/** The content box's height, which is what jQuery's height() gave. */\nexport function contentHeight(node) {\n    var style = getComputedStyle(node);\n    return node.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);\n}\n\n/** Where a node is on the page, not in the window. */\nexport function offset(node) {\n    var box = node.getBoundingClientRect();\n    return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };\n}\n\n/** Its index among its parent's element children, those matching `selector` if given. */\nexport function indexIn(node, selector) {\n    return children(node.parentElement, selector).indexOf(node);\n}\n\n/** Put `node` right after `reference`. */\nexport function insertAfter(node, reference) {\n    reference.parentNode.insertBefore(node, reference.nextSibling);\n    return node;\n}\n\n/** Replace `node` with what it holds. */\nexport function unwrap(node) {\n    var parent = node.parentNode;\n\n    while (node.firstChild) { parent.insertBefore(node.firstChild, node); }\n    node.remove();\n}\n\n/** Put `node` inside `wrapper`, where `node` was. */\nexport function wrap(node, wrapper) {\n    node.parentNode.insertBefore(wrapper, node);\n    wrapper.appendChild(node);\n    return wrapper;\n}\n\n/**\n * Listen on `root` for `types` (space separated) on descendants that match\n * `selector`, with `this` the matched element, as jQuery's delegated\n * handlers had it. Hands back the listener, for removeEventListener; a\n * signal in `options` removes it too.\n */\nexport function delegate(root, types, selector, handler, options) {\n    var listener = function(event) {\n        var match = closest(event.target, selector, root);\n        if (match && root.contains(match)) { return handler.call(match, event); }\n        return undefined;\n    };\n\n    split(types).forEach(function(type) { root.addEventListener(type, listener, options); });\n    return listener;\n}\n\n/** Listen for several space separated event types with one handler. */\nexport function on(target, types, handler, options) {\n    split(types).forEach(function(type) { target.addEventListener(type, handler, options); });\n    return handler;\n}\n\nexport function off(target, types, handler, options) {\n    split(types).forEach(function(type) { target.removeEventListener(type, handler, options); });\n}\n\n/** A mouse event of `type` sent to `node`, the way a pointer would. */\nexport function fire(node, type) {\n    node.dispatchEvent(new MouseEvent(type, { bubbles: type !== 'mouseenter' && type !== 'mouseleave' }));\n}\n\n/* ------------------------------------------------------------------\n * Taking a node away, visibly.\n *\n * The durations are the ones 6.x had through jQuery: 400 ms unless the\n * caller says otherwise. `done` runs once the node is out of sight, which is\n * when the caller removes it; a node that is already out of sight is done at\n * once, on the next task, as jQuery had it.\n * ------------------------------------------------------------------ */\n\nvar DEFAULT_DURATION = 400;\n\nfunction animateAway(node, frames, duration, done) {\n    duration = duration === undefined ? DEFAULT_DURATION : duration;\n\n    var finish = function() {\n        hide(node);\n        if (done) { done(); }\n    };\n\n    if (!visible(node) || !node.animate || duration <= 0) {\n        window.setTimeout(finish, 0);\n        return;\n    }\n\n    var animation = node.animate(frames(getComputedStyle(node)), {\n        duration: duration,\n        easing: 'ease-in-out',\n    });\n    var called = false;\n    var once = function() {\n        if (called) { return; }\n        called = true;\n        finish();\n    };\n\n    animation.onfinish = once;\n    animation.oncancel = once;\n}\n\n/** Fold a node up to nothing, then hide it. */\nexport function slideUp(node, duration, done) {\n    if (typeof duration === 'function') {\n        done = duration;\n        duration = undefined;\n    }\n\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        return [\n            {\n                height: style.height,\n                paddingTop: style.paddingTop,\n                paddingBottom: style.paddingBottom,\n                marginTop: style.marginTop,\n                marginBottom: style.marginBottom,\n            },\n            { height: '0px', paddingTop: '0px', paddingBottom: '0px', marginTop: '0px', marginBottom: '0px' },\n        ];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n\n/** Fade a node out, then hide it. */\nexport function fadeOut(node, duration, done) {\n    animateAway(node, function(style) {\n        return [{ opacity: style.opacity }, { opacity: 0 }];\n    }, duration, done);\n}\n\n/** Fade and fold a node, in height and, with `width`, sideways too, then hide it. */\nexport function shrinkAway(node, duration, done, width) {\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        var from = { opacity: style.opacity, height: style.height };\n        var to = { opacity: 0, height: '0px' };\n\n        if (width) {\n            from.width = style.width;\n            to.width = '0px';\n        }\n        return [from, to];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n", "/**\n * Visibility for grid-editor.\n *\n * A utility plugin: load this file after the editor and every row, column,\n * element and container can be hidden at some breakpoints and shown at\n * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or\n * -flex, for a row, which is a flex container and stops being a grid as a\n * block). What it can ask the editor for is the handle its factory is called\n * with, described in docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.visibility.min.js\"></script>\n *\n * A hidden node is never hidden from the editor, which would leave nothing to\n * click to show it again. It stays on the canvas, faded and striped in a view\n * where it is hidden, and in the all view says at which breakpoints it is.\n *\n * utilities.visibility.drawer: false leaves the eye out of the drawers, and\n * the panel field is the only control.\n */\nimport { GridEditor } from '../grideditor.js';\nimport * as dom from '../dom.js';\n\nObject.assign(GridEditor.locales.en, {\n    'utility.visibility': 'Visibility',\n    'utility.visibility_hidden': 'Hidden',\n    'utility.visibility_shown': 'Shown',\n    'tool.hide_in_view': 'Hide in this view',\n    'tool.show_in_view': 'Show in this view',\n    'badge.hidden_in': 'Hidden at {breakpoints}',\n});\n\n/** A node that carries any class of the family, at any breakpoint. */\nvar CLASS_PATTERN = /(?:^|\\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\\s|$)/;\n\nvar NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';\n\nGridEditor.utilities.visibility = function(ge) {\n\n    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);\n\n    /** What \"shown\" is written as on this kind of node. */\n    function shown(kind) {\n        return kind === 'row' ? 'flex' : 'block';\n    }\n\n    function applies(node, kind) {\n        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||\n            dom.is(node, '[data-ge-container]');\n    }\n\n    function hiddenAt(node, view) {\n        return ge.getUtility(node, 'visibility', view) === 'none';\n    }\n\n    /** The breakpoints at which the node is hidden, smallest first. */\n    function hiddenTiers(node) {\n        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });\n    }\n\n    /**\n     * Whether the node is hidden in the view being edited. In the all view\n     * that means hidden at every breakpoint, since \"hidden at some\" is what\n     * the badge is for.\n     */\n    function hiddenHere(node) {\n        return ge.view() === 'all'\n            ? hiddenTiers(node).length === ge.breakpoints.length\n            : hiddenAt(node, ge.view());\n    }\n\n    /** What the breakpoint below the view shows, which an inherit falls back to. */\n    function hiddenBelow(node) {\n        var index = ge.breakpoints.indexOf(ge.view());\n\n        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);\n    }\n\n    /**\n     * Hide or show the node in the view being edited, with as few classes as\n     * that takes. In a breakpoint view that is often none at all: showing a\n     * node the breakpoint below shows removes this breakpoint's d-*-none\n     * rather than writing a d-*-block on top of it. In the all view a node\n     * is hidden everywhere or shown everywhere, and shown is no class.\n     */\n    function toggle(node, kind) {\n        var hide = !hiddenHere(node);\n        var value;\n\n        if (ge.view() === 'all') {\n            value = hide ? 'none' : null;\n        } else if (hide) {\n            value = hiddenBelow(node) ? null : 'none';\n        } else {\n            value = hiddenBelow(node) ? shown(kind) : null;\n        }\n\n        ge.setUtility(node, 'visibility', value, { source: 'tool' });\n    }\n\n    /**\n     * The canvas shows each node as the view sees it. ge-visibility keeps a\n     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,\n     * and data-ge-hidden-in carries the badge text for the all view.\n     */\n    function mark(scope) {\n        dom.selfAndAll(scope, NODES).forEach(function(node) {\n            var kind = ge.kindOf(node);\n            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');\n            var tiers = carries ? hiddenTiers(node) : [];\n            var here = carries && hiddenHere(node);\n            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;\n\n            dom.toggleClass(node, 'ge-visibility', carries);\n            dom.toggleClass(node, 'ge-hidden-in-view', here);\n\n            if (partly) {\n                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));\n            } else {\n                node.removeAttribute('data-ge-hidden-in');\n            }\n\n            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {\n                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {\n                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));\n                    dom.all(tool, 'i').forEach(function(icon) {\n                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');\n                    });\n                });\n            });\n        });\n    }\n\n    function unmark() {\n        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {\n            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');\n            node.removeAttribute('data-ge-hidden-in');\n            dom.dropEmptyClass(node);\n        });\n    }\n\n    return {\n        families: [{\n            name: 'visibility',\n            prefix: 'd',\n            values: ['none', 'block', 'flex'],\n            appliesTo: ['row', 'column', 'text', 'element', 'container'],\n            labelKey: 'utility.visibility',\n\n            /** Hidden, or shown the way this kind of node is shown. */\n            choices: function(node, kind) {\n                return ['none', shown(kind)];\n            },\n\n            label: function(value) {\n                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');\n            },\n        }],\n\n        drawerTools: function(drawer, node, kind) {\n            if (!options.drawer || !applies(node, kind)) { return; }\n\n            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {\n                toggle(node, kind);\n            });\n        },\n\n        onRefresh: mark,\n        onDeinit: unmark,\n    };\n};\n"],
-  "mappings": "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",
-  "names": ["GridEditor", "all", "root", "selector", "selfAndAll", "root", "selector", "found", "all", "children", "node", "each", "is", "node", "selector", "removeClass", "node", "names", "split", "name", "toggleClass", "state", "split", "names", "dropEmptyClass", "node", "GridEditor", "CLASS_PATTERN", "NODES", "ge", "options", "shown", "kind", "applies", "node", "is", "hiddenAt", "view", "hiddenTiers", "key", "hiddenHere", "hiddenBelow", "index", "toggle", "hide", "value", "mark", "scope", "selfAndAll", "carries", "tiers", "here", "partly", "toggleClass", "children", "drawer", "tool", "all", "icon", "unmark", "removeClass", "dropEmptyClass"]
-}

package/src/js/plugins/grideditor.visibility.js

@@ -1,171 +0,0 @@
-/**
- * Visibility for grid-editor.
- *
- * A utility plugin: load this file after the editor and every row, column,
- * element and container can be hidden at some breakpoints and shown at
- * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or
- * -flex, for a row, which is a flex container and stops being a grid as a
- * block). What it can ask the editor for is the handle its factory is called
- * with, described in docs/plugins.md.
- *
- *   <script src="dist/grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.visibility.min.js"></script>
- *
- * A hidden node is never hidden from the editor, which would leave nothing to
- * click to show it again. It stays on the canvas, faded and striped in a view
- * where it is hidden, and in the all view says at which breakpoints it is.
- *
- * utilities.visibility.drawer: false leaves the eye out of the drawers, and
- * the panel field is the only control.
- */
-import { GridEditor } from '../grideditor.js';
-import * as dom from '../dom.js';
-
-Object.assign(GridEditor.locales.en, {
-    'utility.visibility': 'Visibility',
-    'utility.visibility_hidden': 'Hidden',
-    'utility.visibility_shown': 'Shown',
-    'tool.hide_in_view': 'Hide in this view',
-    'tool.show_in_view': 'Show in this view',
-    'badge.hidden_in': 'Hidden at {breakpoints}',
-});
-
-/** A node that carries any class of the family, at any breakpoint. */
-var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
-
-var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
-
-GridEditor.utilities.visibility = function(ge) {
-
-    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
-
-    /** What "shown" is written as on this kind of node. */
-    function shown(kind) {
-        return kind === 'row' ? 'flex' : 'block';
-    }
-
-    function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
-            dom.is(node, '[data-ge-container]');
-    }
-
-    function hiddenAt(node, view) {
-        return ge.getUtility(node, 'visibility', view) === 'none';
-    }
-
-    /** The breakpoints at which the node is hidden, smallest first. */
-    function hiddenTiers(node) {
-        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });
-    }
-
-    /**
-     * Whether the node is hidden in the view being edited. In the all view
-     * that means hidden at every breakpoint, since "hidden at some" is what
-     * the badge is for.
-     */
-    function hiddenHere(node) {
-        return ge.view() === 'all'
-            ? hiddenTiers(node).length === ge.breakpoints.length
-            : hiddenAt(node, ge.view());
-    }
-
-    /** What the breakpoint below the view shows, which an inherit falls back to. */
-    function hiddenBelow(node) {
-        var index = ge.breakpoints.indexOf(ge.view());
-
-        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
-    }
-
-    /**
-     * Hide or show the node in the view being edited, with as few classes as
-     * that takes. In a breakpoint view that is often none at all: showing a
-     * node the breakpoint below shows removes this breakpoint's d-*-none
-     * rather than writing a d-*-block on top of it. In the all view a node
-     * is hidden everywhere or shown everywhere, and shown is no class.
-     */
-    function toggle(node, kind) {
-        var hide = !hiddenHere(node);
-        var value;
-
-        if (ge.view() === 'all') {
-            value = hide ? 'none' : null;
-        } else if (hide) {
-            value = hiddenBelow(node) ? null : 'none';
-        } else {
-            value = hiddenBelow(node) ? shown(kind) : null;
-        }
-
-        ge.setUtility(node, 'visibility', value, { source: 'tool' });
-    }
-
-    /**
-     * The canvas shows each node as the view sees it. ge-visibility keeps a
-     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,
-     * and data-ge-hidden-in carries the badge text for the all view.
-     */
-    function mark(scope) {
-        dom.selfAndAll(scope, NODES).forEach(function(node) {
-            var kind = ge.kindOf(node);
-            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');
-            var tiers = carries ? hiddenTiers(node) : [];
-            var here = carries && hiddenHere(node);
-            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
-
-            dom.toggleClass(node, 'ge-visibility', carries);
-            dom.toggleClass(node, 'ge-hidden-in-view', here);
-
-            if (partly) {
-                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
-            } else {
-                node.removeAttribute('data-ge-hidden-in');
-            }
-
-            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {
-                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {
-                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));
-                    dom.all(tool, 'i').forEach(function(icon) {
-                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
-                    });
-                });
-            });
-        });
-    }
-
-    function unmark() {
-        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {
-            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');
-            node.removeAttribute('data-ge-hidden-in');
-            dom.dropEmptyClass(node);
-        });
-    }
-
-    return {
-        families: [{
-            name: 'visibility',
-            prefix: 'd',
-            values: ['none', 'block', 'flex'],
-            appliesTo: ['row', 'column', 'text', 'element', 'container'],
-            labelKey: 'utility.visibility',
-
-            /** Hidden, or shown the way this kind of node is shown. */
-            choices: function(node, kind) {
-                return ['none', shown(kind)];
-            },
-
-            label: function(value) {
-                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');
-            },
-        }],
-
-        drawerTools: function(drawer, node, kind) {
-            if (!options.drawer || !applies(node, kind)) { return; }
-
-            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {
-                toggle(node, kind);
-            });
-        },
-
-        onRefresh: mark,
-        onDeinit: unmark,
-    };
-};