@themarioga/grid-editor 8.7.0 → 8.8.0

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

@@ -0,0 +1,775 @@
+// src/js/plugins/grideditor.carousel.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 children(node, selector) {
+  if (!node) {
+    return [];
+  }
+  return Array.prototype.filter.call(node.children, function(each) {
+    return !selector || each.matches(selector);
+  });
+}
+function child(node, selector) {
+  return children(node, selector)[0] || null;
+}
+function element(tag, attributes, text) {
+  var node = document.createElement(tag);
+  Object.keys(attributes || {}).forEach(function(name) {
+    var value = attributes[name];
+    if (value !== null && value !== void 0 && value !== false) {
+      node.setAttribute(name, value);
+    }
+  });
+  if (text !== void 0 && text !== null) {
+    node.textContent = text;
+  }
+  return node;
+}
+function addClass(node, names) {
+  split(names).forEach(function(name) {
+    node.classList.add(name);
+  });
+  return node;
+}
+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 hasClass(node, name) {
+  return !!node && node.nodeType === 1 && node.classList.contains(name);
+}
+function split(names) {
+  return String(names || "").split(/\s+/).filter(Boolean);
+}
+function dropEmptyClass(node) {
+  if (!node.getAttribute("class")) {
+    node.removeAttribute("class");
+  }
+  return node;
+}
+function hide(node) {
+  node.style.display = "none";
+  return node;
+}
+function visible(node) {
+  return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length);
+}
+var DEFAULT_DURATION = 400;
+function animateAway(node, frames, duration, done) {
+  duration = duration === void 0 ? DEFAULT_DURATION : duration;
+  var finish = function() {
+    hide(node);
+    if (done) {
+      done();
+    }
+  };
+  if (!visible(node) || !node.animate || duration <= 0) {
+    window.setTimeout(finish, 0);
+    return;
+  }
+  var animation = node.animate(frames(getComputedStyle(node)), {
+    duration,
+    easing: "ease-in-out"
+  });
+  var called = false;
+  var once = function() {
+    if (called) {
+      return;
+    }
+    called = true;
+    finish();
+  };
+  animation.onfinish = once;
+  animation.oncancel = once;
+}
+function fadeOut(node, duration, done) {
+  animateAway(node, function(style) {
+    return [{ opacity: style.opacity }, { opacity: 0 }];
+  }, duration, done);
+}
+
+// src/js/plugins/grideditor.carousel.js
+Object.assign(GridEditor.locales.en, {
+  "container.add_carousel": "Carousel",
+  "container.add_carousel_item": "Add slide",
+  "confirm.delete_carousel_item": "Delete this slide and everything in it?",
+  "panel.kind_carousel_item": "Slide",
+  "container.carousel_previous": "Previous",
+  "container.carousel_next": "Next",
+  "container.carousel_slide_label": "Slide {number}",
+  "container.carousel_counter": "{current} / {total}",
+  "tool.carousel_show_previous": "Previous slide",
+  "tool.carousel_show_next": "Next slide",
+  "tool.carousel_move_back": "Move back",
+  "tool.carousel_move_forward": "Move forward",
+  "container.carousel_section": "Carousel",
+  "container.carousel_controls": "Arrows",
+  "container.carousel_indicators": "Indicators",
+  "container.carousel_fade": "Fade",
+  "container.carousel_dark": "Dark theme",
+  "container.carousel_ride": "Autoplay",
+  "container.carousel_ride_no": "No",
+  "container.carousel_ride_load": "On load",
+  "container.carousel_ride_interaction": "After first interaction",
+  "container.carousel_interval": "Interval (s)",
+  "container.carousel_pause": "Pause on hover",
+  "container.carousel_wrap": "Wrap around",
+  "container.carousel_keyboard": "Keyboard",
+  "container.carousel_touch": "Touch swipe",
+  "container.carousel_item_section": "Slide"
+});
+var DEFAULTS = {
+  controls: true,
+  indicators: true,
+  fade: false,
+  dark: false,
+  ride: false,
+  interval: null,
+  pause: true,
+  wrap: true,
+  keyboard: true,
+  touch: true,
+  slides: 2
+};
+var CHECKBOXES = ["controls", "indicators", "fade", "dark"];
+var BEHAVIOURS = ["pause", "wrap", "keyboard", "touch"];
+var LABELS = {
+  controls: { labelKey: "container.carousel_controls" },
+  indicators: { labelKey: "container.carousel_indicators" },
+  fade: { labelKey: "container.carousel_fade" },
+  dark: { labelKey: "container.carousel_dark" },
+  pause: { labelKey: "container.carousel_pause" },
+  wrap: { labelKey: "container.carousel_wrap" },
+  keyboard: { labelKey: "container.carousel_keyboard" },
+  touch: { labelKey: "container.carousel_touch" }
+};
+var RIDE_LABEL = { labelKey: "container.carousel_ride" };
+var INTERVAL_LABEL = { labelKey: "container.carousel_interval" };
+var RIDES = [false, "carousel", "true"];
+var MIN_INTERVAL = 1e3;
+var TRANSITION = "carousel-item-next carousel-item-prev carousel-item-start carousel-item-end";
+function validInterval(value) {
+  return typeof value === "number" && isFinite(value) && Math.floor(value) === value && value >= MIN_INTERVAL;
+}
+var CHECKS = {
+  ride: function(value) {
+    return RIDES.indexOf(value) !== -1;
+  },
+  interval: function(value) {
+    return value === null || validInterval(value);
+  },
+  slides: function(value) {
+    return typeof value === "number" && Math.floor(value) === value && value >= 1;
+  }
+};
+function takes(key) {
+  if (key === "ride") {
+    return JSON.stringify(RIDES);
+  }
+  if (key === "interval") {
+    return "null or an integer of " + MIN_INTERVAL + " or more";
+  }
+  if (key === "slides") {
+    return "an integer of 1 or more";
+  }
+  return "[true,false]";
+}
+function isValid(key, value) {
+  return CHECKS[key] ? CHECKS[key](value) : typeof value === "boolean";
+}
+var fieldCounter = 0;
+GridEditor.containers.carousel = function(ge) {
+  var shown = /* @__PURE__ */ new WeakMap();
+  var sections = [];
+  function carouselOf(container) {
+    return child(container, ".carousel");
+  }
+  function innerOf(container) {
+    return child(carouselOf(container), ".carousel-inner");
+  }
+  function usable(container) {
+    return !!innerOf(container);
+  }
+  function itemsOf(container) {
+    return children(innerOf(container), ".carousel-item");
+  }
+  function idOf(carousel) {
+    if (!carousel.getAttribute("id")) {
+      carousel.setAttribute("id", ge.containerId("carousel"));
+    }
+    return carousel.getAttribute("id");
+  }
+  function bsAttribute(node, name) {
+    var value = node.getAttribute("data-bs-" + name);
+    return value === null ? node.getAttribute("data-ge-bs-" + name) : value;
+  }
+  function intervalOf(node) {
+    var value = parseInt(node.getAttribute("data-bs-interval"), 10);
+    return isFinite(value) && value > 0 ? value : null;
+  }
+  function writeInterval(node, value) {
+    if (value === null) {
+      node.removeAttribute("data-bs-interval");
+    } else {
+      node.setAttribute("data-bs-interval", String(value));
+    }
+  }
+  function read(container) {
+    var carousel = carouselOf(container);
+    var ride = bsAttribute(carousel, "ride");
+    var off = function(name) {
+      return carousel.getAttribute("data-bs-" + name) !== "false";
+    };
+    return {
+      controls: !!child(carousel, ".carousel-control-prev, .carousel-control-next"),
+      indicators: !!child(carousel, ".carousel-indicators"),
+      fade: hasClass(carousel, "carousel-fade"),
+      dark: carousel.getAttribute("data-bs-theme") === "dark",
+      ride: ride === "carousel" || ride === "true" ? ride : false,
+      interval: intervalOf(carousel),
+      pause: off("pause"),
+      wrap: off("wrap"),
+      keyboard: off("keyboard"),
+      touch: off("touch")
+    };
+  }
+  function controlButton(carousel, direction) {
+    var button = element("button", {
+      "class": "carousel-control-" + direction,
+      type: "button",
+      "data-bs-target": "#" + idOf(carousel),
+      "data-bs-slide": direction
+    });
+    button.appendChild(element("span", { "class": "carousel-control-" + direction + "-icon", "aria-hidden": "true" }));
+    button.appendChild(element(
+      "span",
+      { "class": "visually-hidden" },
+      direction === "prev" ? ge.t("container.carousel_previous") : ge.t("container.carousel_next")
+    ));
+    return button;
+  }
+  function setControls(container, on) {
+    var carousel = carouselOf(container);
+    children(carousel, ".carousel-control-prev, .carousel-control-next").forEach(function(button) {
+      button.remove();
+    });
+    if (on) {
+      carousel.appendChild(controlButton(carousel, "prev"));
+      carousel.appendChild(controlButton(carousel, "next"));
+    }
+  }
+  function setIndicators(container, on) {
+    var carousel = carouselOf(container);
+    var bar = child(carousel, ".carousel-indicators");
+    if (!on) {
+      if (bar) {
+        bar.remove();
+      }
+      return;
+    }
+    if (!bar) {
+      bar = carousel.insertBefore(element("div", { "class": "carousel-indicators" }), carousel.firstChild);
+    }
+    rebuildIndicators(container);
+  }
+  function rebuildIndicators(container, list) {
+    var carousel = carouselOf(container);
+    var bar = child(carousel, ".carousel-indicators");
+    if (!bar) {
+      return;
+    }
+    list = list || itemsOf(container);
+    var id = idOf(carousel);
+    var active = 0;
+    list.forEach(function(item, index) {
+      if (hasClass(item, "active")) {
+        active = index;
+      }
+    });
+    bar.textContent = "";
+    list.forEach(function(item, index) {
+      bar.appendChild(element("button", {
+        type: "button",
+        "data-bs-target": "#" + id,
+        "data-bs-slide-to": String(index),
+        "aria-label": ge.t("container.carousel_slide_label", { number: index + 1 })
+      }));
+    });
+    syncIndicators(container, list.length ? active : -1);
+  }
+  function syncIndicators(container, index) {
+    var bar = child(carouselOf(container), ".carousel-indicators");
+    children(bar).forEach(function(indicator, position) {
+      toggleClass(indicator, "active", position === index);
+      if (position === index) {
+        indicator.setAttribute("aria-current", "true");
+      } else {
+        indicator.removeAttribute("aria-current");
+      }
+    });
+  }
+  function write(container, key, value) {
+    var carousel = carouselOf(container);
+    if (key === "controls") {
+      setControls(container, value);
+    }
+    if (key === "indicators") {
+      setIndicators(container, value);
+    }
+    if (key === "fade") {
+      toggleClass(carousel, "carousel-fade", value);
+    }
+    if (key === "dark") {
+      if (value) {
+        carousel.setAttribute("data-bs-theme", "dark");
+      } else if (carousel.getAttribute("data-bs-theme") === "dark") {
+        carousel.removeAttribute("data-bs-theme");
+      }
+    }
+    if (key === "ride") {
+      carousel.removeAttribute("data-bs-ride");
+      carousel.removeAttribute("data-ge-bs-ride");
+      if (value) {
+        carousel.setAttribute("data-bs-ride", value);
+      }
+    }
+    if (key === "interval") {
+      writeInterval(carousel, value);
+    }
+    if (BEHAVIOURS.indexOf(key) !== -1) {
+      if (value) {
+        carousel.removeAttribute("data-bs-" + key);
+      } else {
+        carousel.setAttribute("data-bs-" + key, "false");
+      }
+    }
+    dropEmptyClass(carousel);
+  }
+  function chosen(options, key) {
+    var setting = ge.settings.carousel || {};
+    var value = options[key] !== void 0 ? options[key] : setting[key];
+    if (value === void 0) {
+      return DEFAULTS[key];
+    }
+    if (isValid(key, value)) {
+      return value;
+    }
+    ge.warn("carousel: " + JSON.stringify(value) + " is not a " + key + ", which takes " + takes(key) + ": " + JSON.stringify(DEFAULTS[key]) + " is used");
+    return DEFAULTS[key];
+  }
+  function suspend(container) {
+    var carousel = carouselOf(container);
+    children(carousel, ".carousel-control-prev, .carousel-control-next").forEach(ge.suspendToggles);
+    children(child(carousel, ".carousel-indicators")).forEach(ge.suspendToggles);
+    var ride = carousel.getAttribute("data-bs-ride");
+    if (ride !== null) {
+      carousel.setAttribute("data-ge-bs-ride", ride);
+      carousel.removeAttribute("data-bs-ride");
+    }
+  }
+  function stopBootstrap(carousel) {
+    var library = GridEditor.bootstrap || window.bootstrap;
+    var instance = library && library.Carousel ? library.Carousel.getInstance(carousel) : null;
+    if (instance) {
+      instance.pause();
+      instance.dispose();
+    }
+  }
+  function buildItem(container, active, interval) {
+    var item = innerOf(container).appendChild(element("div", { "class": active ? "carousel-item active" : "carousel-item" }));
+    item.appendChild(ge.defaultRegion());
+    if (interval !== null && interval !== void 0) {
+      writeInterval(item, interval);
+    }
+    return item;
+  }
+  function currentOf(container) {
+    var list = itemsOf(container);
+    var kept = shown.get(container);
+    if (kept && list.indexOf(kept) !== -1) {
+      return kept;
+    }
+    return list.filter(function(item) {
+      return hasClass(item, "active");
+    })[0] || list[0] || null;
+  }
+  function show(container, item, list) {
+    list = list || itemsOf(container);
+    list.forEach(function(each) {
+      toggleClass(each, "active", each === item);
+    });
+    if (item) {
+      shown.set(container, item);
+    } else {
+      shown.delete(container);
+    }
+    syncIndicators(container, list.indexOf(item));
+    refreshNavigation(container);
+  }
+  function step(container, offset) {
+    var list = itemsOf(container);
+    if (list.length < 2) {
+      return;
+    }
+    var index = list.indexOf(currentOf(container));
+    show(container, list[(index + offset + list.length) % list.length]);
+  }
+  function disable(tool, state) {
+    if (!tool) {
+      return;
+    }
+    toggleClass(tool, "disabled", state);
+    if (state) {
+      tool.setAttribute("aria-disabled", "true");
+    } else {
+      tool.removeAttribute("aria-disabled");
+    }
+  }
+  function disabled(tool) {
+    return tool.getAttribute("aria-disabled") === "true";
+  }
+  function refreshNavigation(container) {
+    var list = itemsOf(container);
+    var drawer = child(container, ".ge-container-drawer");
+    var index = list.indexOf(currentOf(container));
+    if (drawer) {
+      var counter = child(drawer, ".ge-carousel-counter");
+      if (counter) {
+        counter.textContent = ge.t("container.carousel_counter", {
+          current: list.length ? index + 1 : 0,
+          total: list.length
+        });
+      }
+      disable(child(drawer, ".ge-carousel-previous"), list.length < 2);
+      disable(child(drawer, ".ge-carousel-next"), list.length < 2);
+    }
+    list.forEach(function(item, position) {
+      var tools = child(item, ".ge-pane-drawer");
+      disable(child(tools, ".ge-carousel-move-back"), position === 0);
+      disable(child(tools, ".ge-carousel-move-forward"), position === list.length - 1);
+    });
+  }
+  function moveItem(container, item, offset) {
+    var inner = innerOf(container);
+    var list = itemsOf(container);
+    var index = list.indexOf(item);
+    var target = index + offset;
+    if (target < 0 || target >= list.length) {
+      return;
+    }
+    var from = { parent: inner, index };
+    ge.operate(function() {
+      if (!ge.emit("before-move", ge.payloadFor("carousel-item", item, {
+        parent: inner,
+        source: "tool",
+        from
+      }))) {
+        return;
+      }
+      inner.insertBefore(item, offset < 0 ? list[target] : list[target].nextSibling);
+      show(container, currentOf(container));
+      rebuildIndicators(container);
+      suspend(container);
+      ge.emit("after-move", ge.payloadFor("carousel-item", item, {
+        parent: inner,
+        source: "tool",
+        from,
+        to: { parent: inner, index: target },
+        container
+      }));
+    });
+  }
+  function afterRemoving(container, item, removed) {
+    fadeOut(item, 200, function() {
+      var list = itemsOf(container);
+      var rest = list.filter(function(each) {
+        return each !== item;
+      });
+      if (currentOf(container) === item) {
+        show(container, rest[Math.min(list.indexOf(item), rest.length - 1)] || null, rest);
+      }
+      rebuildIndicators(container, rest);
+      removed();
+    });
+  }
+  function createItemControls(container, item) {
+    var drawer = ge.createPaneControls(
+      item,
+      "carousel-item",
+      ge.settings.carousel_tools,
+      ge.t("confirm.delete_carousel_item"),
+      function(removed) {
+        afterRemoving(container, item, removed);
+      }
+    );
+    var handle = child(drawer, ".ge-move");
+    if (handle) {
+      handle.remove();
+    }
+    var back = ge.createTool(drawer, ge.t("tool.carousel_move_back"), "ge-carousel-move-back", "bi bi-arrow-left", function() {
+      if (!disabled(this)) {
+        moveItem(container, item, -1);
+      }
+    });
+    var forward = ge.createTool(drawer, ge.t("tool.carousel_move_forward"), "ge-carousel-move-forward", "bi bi-arrow-right", function() {
+      if (!disabled(this)) {
+        moveItem(container, item, 1);
+      }
+    });
+    drawer.insertBefore(forward, drawer.firstChild);
+    drawer.insertBefore(back, forward);
+  }
+  function addSlideTo(container, options) {
+    options = options || {};
+    if (!usable(container)) {
+      ge.warn("carousel: there is no .carousel-inner to add a slide to");
+      return null;
+    }
+    var interval = null;
+    if (options.interval !== void 0 && options.interval !== null) {
+      if (validInterval(options.interval)) {
+        interval = options.interval;
+      } else {
+        ge.warn("carousel: " + JSON.stringify(options.interval) + " is not a interval, which takes " + takes("interval") + ": null is used");
+      }
+    }
+    var item = buildItem(container, false, interval);
+    show(container, item);
+    rebuildIndicators(container);
+    return item;
+  }
+  function field(labelKey, control, id) {
+    var box = element("div", { "class": "ge-carousel-option mb-2" });
+    box.appendChild(element("label", { "class": "form-label", "for": id }, ge.t(labelKey)));
+    box.appendChild(control);
+    return box;
+  }
+  function nextId() {
+    return "ge-carousel-option-" + ++fieldCounter;
+  }
+  function intervalField(node, onWrite) {
+    var id = nextId();
+    var input = element("input", {
+      "class": "form-control form-control-sm",
+      id,
+      type: "number",
+      step: "0.1",
+      min: String(MIN_INTERVAL / 1e3)
+    });
+    input.addEventListener("change", function() {
+      var text = input.value.trim();
+      var seconds = parseFloat(text);
+      if (text === "") {
+        removeClass(input, "is-invalid");
+        writeInterval(node, null);
+      } else if (!isFinite(seconds) || Math.round(seconds * 1e3) < MIN_INTERVAL) {
+        addClass(input, "is-invalid");
+        return;
+      } else {
+        removeClass(input, "is-invalid");
+        writeInterval(node, Math.round(seconds * 1e3));
+      }
+      if (onWrite) {
+        onWrite();
+      }
+    });
+    return {
+      id,
+      input,
+      render: function() {
+        var interval = intervalOf(node);
+        removeClass(input, "is-invalid");
+        input.value = interval === null ? "" : String(interval / 1e3);
+      }
+    };
+  }
+  function checkbox(labelKey, onChange) {
+    var id = nextId();
+    var box = element("div", { "class": "form-check" });
+    var input = box.appendChild(element("input", { "class": "form-check-input", type: "checkbox", id }));
+    box.appendChild(element("label", { "class": "form-check-label", "for": id }, ge.t(labelKey)));
+    input.addEventListener("change", function() {
+      onChange(input.checked);
+    });
+    return { box, input };
+  }
+  function createSection(container) {
+    var body = element("div", { "class": "ge-carousel-options" });
+    var inputs = {};
+    function change(key, value) {
+      write(container, key, value);
+      suspend(container);
+      render();
+    }
+    var rideId = nextId();
+    var ride = element("select", { "class": "form-select form-select-sm", id: rideId });
+    [
+      { value: "false", labelKey: "container.carousel_ride_no" },
+      { value: "carousel", labelKey: "container.carousel_ride_load" },
+      { value: "true", labelKey: "container.carousel_ride_interaction" }
+    ].forEach(function(choice) {
+      ride.appendChild(element("option", { value: choice.value }, ge.t(choice.labelKey)));
+    });
+    ride.addEventListener("change", function() {
+      change("ride", ride.value === "false" ? false : ride.value);
+    });
+    body.appendChild(field(RIDE_LABEL.labelKey, ride, rideId));
+    var interval = intervalField(carouselOf(container), function() {
+      render();
+    });
+    body.appendChild(field(INTERVAL_LABEL.labelKey, interval.input, interval.id));
+    CHECKBOXES.concat(BEHAVIOURS).forEach(function(key) {
+      var each = checkbox(LABELS[key].labelKey, function(on) {
+        change(key, on);
+      });
+      inputs[key] = each.input;
+      each.box.setAttribute("data-ge-carousel-option", key);
+      body.appendChild(each.box);
+    });
+    function render() {
+      var values = read(container);
+      ride.value = String(values.ride);
+      interval.render();
+      Object.keys(inputs).forEach(function(key) {
+        inputs[key].checked = values[key];
+      });
+      interval.input.disabled = values.ride === false;
+      inputs.pause.disabled = values.ride === false;
+    }
+    render();
+    sections.push({ node: container, element: body, render });
+    return body;
+  }
+  function createItemSection(item) {
+    var body = element("div", { "class": "ge-carousel-options" });
+    var interval = intervalField(item);
+    body.appendChild(field(INTERVAL_LABEL.labelKey, interval.input, interval.id));
+    interval.render();
+    sections.push({ node: item, element: body, render: interval.render });
+    return body;
+  }
+  return {
+    labelKey: "container.add_carousel",
+    addPaneKey: "container.add_carousel_item",
+    paneKind: "carousel-item",
+    paneClass: "ge-carousel-item",
+    paneLabelKey: "panel.kind_carousel_item",
+    /**
+     * `slides` slides, each a region, and the options of DEFAULTS as the
+     * call, the carousel setting or the defaults give them.
+     */
+    create: function(options) {
+      options = options || {};
+      var container = element("div", { "data-ge-container": "carousel" });
+      var carousel = container.appendChild(element("div", { "class": "carousel slide", id: ge.containerId("carousel") }));
+      var slides = chosen(options, "slides");
+      carousel.appendChild(element("div", { "class": "carousel-inner" }));
+      for (var i = 0; i < slides; i++) {
+        buildItem(container, i === 0);
+      }
+      Object.keys(DEFAULTS).filter(function(key) {
+        return key !== "slides";
+      }).forEach(function(key) {
+        write(container, key, chosen(options, key));
+      });
+      return container;
+    },
+    addPane: addSlideTo,
+    mark: function(container) {
+      var carousel = carouselOf(container);
+      if (!carousel || !usable(container)) {
+        return;
+      }
+      stopBootstrap(carousel);
+      suspend(container);
+      var current = currentOf(container);
+      itemsOf(container).forEach(function(item) {
+        addClass(item, "ge-carousel-item");
+        removeClass(item, TRANSITION);
+        if (!child(item, ".ge-tools-drawer")) {
+          createItemControls(container, item);
+        }
+      });
+      show(container, current);
+    },
+    unmark: function(container) {
+      ge.resumeToggles(container);
+      if (!usable(container)) {
+        return;
+      }
+      itemsOf(container).forEach(function(item, index) {
+        removeClass(item, "ge-carousel-item " + TRANSITION);
+        toggleClass(item, "active", index === 0);
+        dropEmptyClass(item);
+      });
+      syncIndicators(container, itemsOf(container).length ? 0 : -1);
+    },
+    // The same, on a copy of the canvas: unmark only touches markup
+    cleanMarkup: function(root) {
+      var definition = this;
+      all(root, '[data-ge-container="carousel"]').forEach(function(container) {
+        definition.unmark(container);
+      });
+    },
+    // The arrows, the counter and the arrow's other side: what moves the
+    // carousel from slide to slide while it is edited
+    tools: function(drawer, container) {
+      if (!usable(container)) {
+        return;
+      }
+      ge.createTool(drawer, ge.t("tool.carousel_show_previous"), "ge-carousel-previous", "bi bi-chevron-left", function() {
+        if (!disabled(this)) {
+          step(container, -1);
+        }
+      });
+      var counter = ge.createTool(drawer, "", "ge-carousel-counter", "", null);
+      counter.textContent = "";
+      counter.removeAttribute("title");
+      ge.createTool(drawer, ge.t("tool.carousel_show_next"), "ge-carousel-next", "bi bi-chevron-right", function() {
+        if (!disabled(this)) {
+          step(container, 1);
+        }
+      });
+      refreshNavigation(container);
+    },
+    panelSection: function(node, kind) {
+      if (kind === "carousel" && usable(node)) {
+        return { labelKey: "container.carousel_section", body: createSection(node) };
+      }
+      if (kind === "carousel-item") {
+        return { labelKey: "container.carousel_item_section", body: createItemSection(node) };
+      }
+      return null;
+    },
+    // After a view change or a change of classes: the sections follow
+    onRefresh: function(scope) {
+      sections = sections.filter(function(entry) {
+        return entry.element.isConnected;
+      });
+      sections.forEach(function(entry) {
+        if (entry.node === scope || scope.contains(entry.node)) {
+          entry.render();
+        }
+      });
+    },
+    onDeinit: function() {
+      sections = [];
+    }
+  };
+};