diff --git a/.config/silicon.cfg b/.config/silicon.cfg
deleted file mode 100644
index 958e1c65d11cfea7377a27fe54c384317eecbd3a..0000000000000000000000000000000000000000
--- a/.config/silicon.cfg
+++ /dev/null
@@ -1,4 +0,0 @@
---shadow-color '#555'
---background '#fff'
---shadow-blur-radius 30
---no-window-controls
\ No newline at end of file
diff --git a/flake.nix b/flake.nix
index 732374728badae59fbd393be45d5e6f83e7c8acd..5406bbc1fd34086d485ed5b621b9388cfed8452a 100644
--- a/flake.nix
+++ b/flake.nix
@@ -14,12 +14,11 @@
url = "git+https://gitlab.schukai.com/oss/utilities/version.git";
flake = true;
};
-
+
certificatesFlake = {
url = "git+https://gitlab.schukai.com/alvine/certificates.git";
flake = true;
- };
-
+ };
};
outputs = {
@@ -42,10 +41,10 @@
(final: prev: {
common = commonPck;
})
-
+
(final: prev: {
alvineDevCerts = certificatesFlake;
- })
+ })
(final: prev: {
version = versionPck;
diff --git a/source/components/form/select.mjs b/source/components/form/select.mjs
index 3f6d5ded790b2f37683a6c5a0e9bdaab8b81d6ea..6f890bd92d108d045c0343ef57a60efaee18b6ad 100644
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -455,6 +455,10 @@ class Select extends CustomControl {
defaultValue: "*",
mode: FILTER_MODE_DISABLED,
position: FILTER_POSITION_INLINE,
+ marker: {
+ open: "{",
+ close: "}",
+ },
},
classes: {
badge: "monster-badge-primary",
@@ -1469,7 +1473,18 @@ function filterFromRemote() {
);
let url = optionUrl;
if (filterValue.length > 0) {
- url = new Formatter({ filter: filterValue }).format(optionUrl);
+ const formatter = new Formatter({ filter: filterValue });
+ const openMarker = this.getOption("formatter.marker.open");
+ let closeMarker = this.getOption("formatter.marker.close");
+ if (!closeMarker) {
+ closeMarker = openMarker;
+ }
+
+ if (openMarker && closeMarker) {
+ formatter.setMarker(openMarker, closeMarker);
+ }
+
+ url = formatter.format(optionUrl);
}
this.fetch(url)
diff --git a/source/components/layout/slider.mjs b/source/components/layout/slider.mjs
index 6a02b3cd713716883c642c8c9c72ad6c3d11bb87..96b909fae9c80891d56283b58c6526f331d1bf08 100644
--- a/source/components/layout/slider.mjs
+++ b/source/components/layout/slider.mjs
@@ -10,19 +10,19 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {instanceSymbol} from "../../constants.mjs";
-import {ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
-import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement, getSlottedElements } from "../../dom/customelement.mjs";
import {
- assembleMethodSymbol,
- registerCustomElement,
+ assembleMethodSymbol,
+ registerCustomElement,
} from "../../dom/customelement.mjs";
-import {SliderStyleSheet} from "./stylesheet/slider.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { SliderStyleSheet } from "./stylesheet/slider.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
-import {getWindow} from "../../dom/util.mjs";
+import { getWindow } from "../../dom/util.mjs";
-export {Slider};
+export { Slider };
/**
* @private
@@ -72,148 +72,147 @@ const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from";
* @summary A beautiful Slider that can make your life easier and also looks good.
*/
class Slider extends CustomElement {
- /**
- * This method is called by the `instanceof` operator.
- * @returns {symbol}
- */
- static get [instanceSymbol]() {
- return Symbol.for("@schukai/monster/components/layout/slider@@instance");
- }
-
- /**
- *
- * @return {Components.Layout.Slider
- */
- [assembleMethodSymbol]() {
- super[assembleMethodSymbol]();
-
- this[configSymbol] = {
- currentIndex: 0,
-
- isDragging: false,
- draggingPos: 0,
- startPos: 0,
- autoPlayInterval: null,
- };
-
- initControlReferences.call(this);
- initEventHandler.call(this);
- initStructure.call(this);
-
- return this;
- }
-
- /**
- * To set the options via the html tag the attribute `data-monster-options` must be used.
- * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
- *
- * The individual configuration values can be found in the table.
- *
- * @property {Object} templates Template definitions
- * @property {string} templates.main Main template
- * @property {string} actions.click="throw Error" Callback when clicked
- * @property {Object} features Features
- * @property {boolean} features.carousel=true Carousel feature
- * @property {boolean} features.autoPlay=true Auto play feature
- * @property {boolean} features.thumbnails=true Thumbnails feature
- * @property {boolean} features.drag=true Drag feature
- * @property {Object} autoPlay Auto play configuration
- * @property {number} autoPlay.delay=1500 Delay between slides
- * @property {number} autoPlay.startDelay=1000 Start delay
- * @property {string} autoPlay.direction="next" Direction of the auto play
- * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
- * @property {boolean} autoPlay.touchPause=true Pause on touch
- * @property {Object} classes CSS classes
- * @property {boolean} disabled=false Disabled state
- */
- get defaults() {
- return Object.assign({}, super.defaults, {
- templates: {
- main: getTemplate(),
- },
-
- classes: {},
- disabled: false,
-
- features: {
- carousel: true,
- autoPlay: true,
- thumbnails: true,
- drag: true,
- },
-
- autoPlay: {
- delay: 1500,
- startDelay: 1000,
- direction: "next",
- mouseOverPause: true,
- touchPause: true,
- },
-
- });
- }
-
- /**
- * @return {string}
- */
- static getTag() {
- return "monster-slider";
- }
-
- /**
- * @return {CSSStyleSheet[]}
- */
- static getCSSStyleSheet() {
- return [SliderStyleSheet];
- }
-
- /**
- * moves the slider to the given index
- *
- * @param index
- * @returns {void}
- */
- moveTo(index) {
- return moveTo.call(this, index);
- }
-
- /**
- * shows the previous slide
- *
- * @return {void}
- */
- previous() {
- return prev.call(this);
- }
-
- /**
- * shows the next slide
- *
- * @return {void}
- */
- next() {
- return next.call(this);
- }
-
- /**
- * stops the auto play
- *
- * @return {void}
- */
- stopAutoPlay() {
- if (this[configSymbol].autoPlayInterval) {
- clearInterval(this[configSymbol].autoPlayInterval);
- }
- }
-
- /**
- * starts the auto play
- *
- * @return {void}
- */
- startAutoPlay() {
- initAutoPlay.call(this);
- }
+ /**
+ * This method is called by the `instanceof` operator.
+ * @returns {symbol}
+ */
+ static get [instanceSymbol]() {
+ return Symbol.for("@schukai/monster/components/layout/slider@@instance");
+ }
+
+ /**
+ *
+ * @return {Components.Layout.Slider
+ */
+ [assembleMethodSymbol]() {
+ super[assembleMethodSymbol]();
+
+ this[configSymbol] = {
+ currentIndex: 0,
+
+ isDragging: false,
+ draggingPos: 0,
+ startPos: 0,
+ autoPlayInterval: null,
+ };
+
+ initControlReferences.call(this);
+ initEventHandler.call(this);
+ initStructure.call(this);
+
+ return this;
+ }
+
+ /**
+ * To set the options via the html tag the attribute `data-monster-options` must be used.
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+ *
+ * The individual configuration values can be found in the table.
+ *
+ * @property {Object} templates Template definitions
+ * @property {string} templates.main Main template
+ * @property {string} actions.click="throw Error" Callback when clicked
+ * @property {Object} features Features
+ * @property {boolean} features.carousel=true Carousel feature
+ * @property {boolean} features.autoPlay=true Auto play feature
+ * @property {boolean} features.thumbnails=true Thumbnails feature
+ * @property {boolean} features.drag=true Drag feature
+ * @property {Object} autoPlay Auto play configuration
+ * @property {number} autoPlay.delay=1500 Delay between slides
+ * @property {number} autoPlay.startDelay=1000 Start delay
+ * @property {string} autoPlay.direction="next" Direction of the auto play
+ * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
+ * @property {boolean} autoPlay.touchPause=true Pause on touch
+ * @property {Object} classes CSS classes
+ * @property {boolean} disabled=false Disabled state
+ */
+ get defaults() {
+ return Object.assign({}, super.defaults, {
+ templates: {
+ main: getTemplate(),
+ },
+
+ classes: {},
+ disabled: false,
+
+ features: {
+ carousel: true,
+ autoPlay: true,
+ thumbnails: true,
+ drag: true,
+ },
+
+ autoPlay: {
+ delay: 1500,
+ startDelay: 1000,
+ direction: "next",
+ mouseOverPause: true,
+ touchPause: true,
+ },
+ });
+ }
+
+ /**
+ * @return {string}
+ */
+ static getTag() {
+ return "monster-slider";
+ }
+
+ /**
+ * @return {CSSStyleSheet[]}
+ */
+ static getCSSStyleSheet() {
+ return [SliderStyleSheet];
+ }
+
+ /**
+ * moves the slider to the given index
+ *
+ * @param index
+ * @returns {void}
+ */
+ moveTo(index) {
+ return moveTo.call(this, index);
+ }
+
+ /**
+ * shows the previous slide
+ *
+ * @return {void}
+ */
+ previous() {
+ return prev.call(this);
+ }
+
+ /**
+ * shows the next slide
+ *
+ * @return {void}
+ */
+ next() {
+ return next.call(this);
+ }
+
+ /**
+ * stops the auto play
+ *
+ * @return {void}
+ */
+ stopAutoPlay() {
+ if (this[configSymbol].autoPlayInterval) {
+ clearInterval(this[configSymbol].autoPlayInterval);
+ }
+ }
+
+ /**
+ * starts the auto play
+ *
+ * @return {void}
+ */
+ startAutoPlay() {
+ initAutoPlay.call(this);
+ }
}
/**
@@ -221,148 +220,148 @@ class Slider extends CustomElement {
* @param name
*/
function initNavigation(name) {
- const element = this.shadowRoot.querySelector("." + name + "");
- const elementHeight = element.offsetHeight;
- element.style.top = `calc(50% - ${elementHeight / 2}px)`;
+ const element = this.shadowRoot.querySelector("." + name + "");
+ const elementHeight = element.offsetHeight;
+ element.style.top = `calc(50% - ${elementHeight / 2}px)`;
}
/**
* @private
*/
function initStructure() {
- initNavigation.call(this, "next");
- initNavigation.call(this, "prev");
+ initNavigation.call(this, "next");
+ initNavigation.call(this, "prev");
- if (this.getOption("features.thumbnails")) {
- initThumbnails.call(this);
- }
+ if (this.getOption("features.thumbnails")) {
+ initThumbnails.call(this);
+ }
- if (this.getOption("features.carousel")) {
- initCarousel.call(this);
- }
+ if (this.getOption("features.carousel")) {
+ initCarousel.call(this);
+ }
- if (this.getOption("features.autoPlay")) {
- initAutoPlay.call(this);
- }
+ if (this.getOption("features.autoPlay")) {
+ initAutoPlay.call(this);
+ }
}
/**
* @private
*/
function initThumbnails() {
- const self = this;
- const thumbnails = this.shadowRoot.querySelector(
- "[data-monster-role='thumbnails']",
- );
- const slides = Array.from(getSlottedElements.call(this, ":scope", null));
-
- slides.forEach((slide, index) => {
- const thumbnail = document.createElement("div");
- thumbnail.classList.add("thumbnail");
- thumbnail.addEventListener("click", () => {
- if (self.getOption("features.carousel")) {
- this.moveTo(index + 1);
- } else {
- this.moveTo(index);
- }
- });
-
- thumbnails.appendChild(thumbnail);
- });
-
- this.addEventListener("monster-slider-moved", (e) => {
- const index = e.detail.index;
- const thumbnail = thumbnails.children[index];
-
- if (!thumbnail) {
- return;
- }
-
- Array.from(thumbnails.children).forEach((thumb) => {
- thumb.classList.remove("current");
- });
-
- thumbnail.classList.add("current");
- });
+ const self = this;
+ const thumbnails = this.shadowRoot.querySelector(
+ "[data-monster-role='thumbnails']",
+ );
+ const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+
+ slides.forEach((slide, index) => {
+ const thumbnail = document.createElement("div");
+ thumbnail.classList.add("thumbnail");
+ thumbnail.addEventListener("click", () => {
+ if (self.getOption("features.carousel")) {
+ this.moveTo(index + 1);
+ } else {
+ this.moveTo(index);
+ }
+ });
+
+ thumbnails.appendChild(thumbnail);
+ });
+
+ this.addEventListener("monster-slider-moved", (e) => {
+ const index = e.detail.index;
+ const thumbnail = thumbnails.children[index];
+
+ if (!thumbnail) {
+ return;
+ }
+
+ Array.from(thumbnails.children).forEach((thumb) => {
+ thumb.classList.remove("current");
+ });
+
+ thumbnail.classList.add("current");
+ });
}
/**
* @private
*/
function initAutoPlay() {
- const self = this;
- const autoPlay = this.getOption("autoPlay");
- const delay = autoPlay.delay;
- const startDelay = autoPlay.startDelay;
- const direction = autoPlay.direction;
-
- function start() {
- if (self[configSymbol].autoPlayInterval) {
- clearInterval(self[configSymbol].autoPlayInterval);
- }
-
- self[configSymbol].autoPlayInterval = setInterval(() => {
- if (direction === "next") {
- if (self.next() === -1) {
- if (self.getOption("features.carousel")) {
- clearInterval(self[configSymbol].autoPlayInterval);
- }
- }
- } else {
- if (self.previous() === -1) {
- if (self.getOption("features.carousel")) {
- clearInterval(self[configSymbol].autoPlayInterval);
- }
- }
- }
- }, delay);
- }
-
- setTimeout(() => {
- start();
- }, startDelay);
-
- if (autoPlay.mouseOverPause) {
- this.addEventListener("mouseover", () => {
- clearInterval(this[configSymbol].autoPlayInterval);
- });
-
- this.addEventListener("mouseout", () => {
- if (this[configSymbol].isDragging) {
- return;
- }
- start();
- });
- }
-
- if (autoPlay.touchPause) {
- this.addEventListener("touchstart", () => {
- clearInterval(this[configSymbol].autoPlayInterval);
- });
-
- this.addEventListener("touchend", () => {
- start();
- });
- }
+ const self = this;
+ const autoPlay = this.getOption("autoPlay");
+ const delay = autoPlay.delay;
+ const startDelay = autoPlay.startDelay;
+ const direction = autoPlay.direction;
+
+ function start() {
+ if (self[configSymbol].autoPlayInterval) {
+ clearInterval(self[configSymbol].autoPlayInterval);
+ }
+
+ self[configSymbol].autoPlayInterval = setInterval(() => {
+ if (direction === "next") {
+ if (self.next() === -1) {
+ if (self.getOption("features.carousel")) {
+ clearInterval(self[configSymbol].autoPlayInterval);
+ }
+ }
+ } else {
+ if (self.previous() === -1) {
+ if (self.getOption("features.carousel")) {
+ clearInterval(self[configSymbol].autoPlayInterval);
+ }
+ }
+ }
+ }, delay);
+ }
+
+ setTimeout(() => {
+ start();
+ }, startDelay);
+
+ if (autoPlay.mouseOverPause) {
+ this.addEventListener("mouseover", () => {
+ clearInterval(this[configSymbol].autoPlayInterval);
+ });
+
+ this.addEventListener("mouseout", () => {
+ if (this[configSymbol].isDragging) {
+ return;
+ }
+ start();
+ });
+ }
+
+ if (autoPlay.touchPause) {
+ this.addEventListener("touchstart", () => {
+ clearInterval(this[configSymbol].autoPlayInterval);
+ });
+
+ this.addEventListener("touchend", () => {
+ start();
+ });
+ }
}
/**
* @private
*/
function initCarousel() {
- const {slides, totalSlides} = getSlidesAndTotal.call(this);
- if (this.getOption("features.carousel") && totalSlides > 2) {
- const firstElement = slides[0].cloneNode(true);
- firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
+ const { slides, totalSlides } = getSlidesAndTotal.call(this);
+ if (this.getOption("features.carousel") && totalSlides > 2) {
+ const firstElement = slides[0].cloneNode(true);
+ firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
- const lastElement = slides[totalSlides - 1].cloneNode(true);
- lastElement.setAttribute(ATTRIBUTE_CLON_FROM, totalSlides);
- slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
+ const lastElement = slides[totalSlides - 1].cloneNode(true);
+ lastElement.setAttribute(ATTRIBUTE_CLON_FROM, totalSlides);
+ slides[totalSlides - 1].insertAdjacentElement("afterend", firstElement);
- slides[0].insertAdjacentElement("beforebegin", lastElement);
+ slides[0].insertAdjacentElement("beforebegin", lastElement);
- moveTo.call(this, 1);
- }
+ moveTo.call(this, 1);
+ }
}
/**
@@ -370,9 +369,9 @@ function initCarousel() {
* @returns {{slides: unknown[], totalSlides: number}}
*/
function getSlidesAndTotal() {
- const slides = Array.from(getSlottedElements.call(this, ":scope", null));
- const totalSlides = slides.length;
- return {slides, totalSlides};
+ const slides = Array.from(getSlottedElements.call(this, ":scope", null));
+ const totalSlides = slides.length;
+ return { slides, totalSlides };
}
/**
@@ -380,22 +379,22 @@ function getSlidesAndTotal() {
* @returns {number}
*/
function next() {
- const {slides, totalSlides} = getSlidesAndTotal.call(this);
- const nextIndex = this[configSymbol].currentIndex + 1;
-
- if (nextIndex >= totalSlides) {
- return -1;
- }
-
- queueMicrotask(() => {
- getWindow().requestAnimationFrame(() => {
- getWindow().requestAnimationFrame(() => {
- moveTo.call(this, nextIndex);
- });
- });
- });
-
- return 0;
+ const { slides, totalSlides } = getSlidesAndTotal.call(this);
+ const nextIndex = this[configSymbol].currentIndex + 1;
+
+ if (nextIndex >= totalSlides) {
+ return -1;
+ }
+
+ queueMicrotask(() => {
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ moveTo.call(this, nextIndex);
+ });
+ });
+ });
+
+ return 0;
}
/**
@@ -403,14 +402,14 @@ function next() {
* @returns {number}
*/
function prev() {
- const prevIndex = this[configSymbol].currentIndex - 1;
+ const prevIndex = this[configSymbol].currentIndex - 1;
- if (prevIndex < 0) {
- return -1;
- }
+ if (prevIndex < 0) {
+ return -1;
+ }
- moveTo.call(this, prevIndex);
- return 0;
+ moveTo.call(this, prevIndex);
+ return 0;
}
/**
@@ -419,20 +418,20 @@ function prev() {
* @param index
*/
function setMoveProperties(slides, index) {
- this[configSymbol].currentIndex = index;
+ this[configSymbol].currentIndex = index;
- slides.forEach((slide) => {
- slide.classList.remove("current");
- });
+ slides.forEach((slide) => {
+ slide.classList.remove("current");
+ });
- let offset = -(index * 100);
- if (offset !== 0) {
- offset += "%";
- }
+ let offset = -(index * 100);
+ if (offset !== 0) {
+ offset += "%";
+ }
- this[sliderElementSymbol].style.transform =
- `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
- slides[index].classList.add("current");
+ this[sliderElementSymbol].style.transform =
+ `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+ slides[index].classList.add("current");
}
/**
@@ -441,61 +440,61 @@ function setMoveProperties(slides, index) {
* @fires monster-slider-moved
*/
function moveTo(index) {
- const {slides, totalSlides} = getSlidesAndTotal.call(this);
+ const { slides, totalSlides } = getSlidesAndTotal.call(this);
- if (index < 0) {
- index = totalSlides - 1;
- } else if (index >= totalSlides) {
- index = 0;
- }
+ if (index < 0) {
+ index = totalSlides - 1;
+ } else if (index >= totalSlides) {
+ index = 0;
+ }
- const slider = this[sliderElementSymbol];
+ const slider = this[sliderElementSymbol];
- setMoveProperties.call(this, slides, index);
+ setMoveProperties.call(this, slides, index);
- const style = getComputedStyle(this[sliderElementSymbol]);
- const duration = style.transitionDuration;
- const durationMilis = parseFloat(duration) * 1000;
+ const style = getComputedStyle(this[sliderElementSymbol]);
+ const duration = style.transitionDuration;
+ const durationMilis = parseFloat(duration) * 1000;
- let slideIndex = index;
- let eventFired = false;
+ let slideIndex = index;
+ let eventFired = false;
- if (this.getOption("features.carousel")) {
- slideIndex = index - 1;
+ if (this.getOption("features.carousel")) {
+ slideIndex = index - 1;
- if (slides[index].hasAttribute(ATTRIBUTE_CLON_FROM)) {
- const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLON_FROM));
+ if (slides[index].hasAttribute(ATTRIBUTE_CLON_FROM)) {
+ const from = parseInt(slides[index].getAttribute(ATTRIBUTE_CLON_FROM));
- getWindow().requestAnimationFrame(() => {
- getWindow().requestAnimationFrame(() => {
- setTimeout(() => {
- slider.style.transitionProperty = "none";
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ setTimeout(() => {
+ slider.style.transitionProperty = "none";
- setMoveProperties.call(this, slides, from);
- slideIndex = from - 1;
+ setMoveProperties.call(this, slides, from);
+ slideIndex = from - 1;
- getWindow().requestAnimationFrame(() => {
- getWindow().requestAnimationFrame(() => {
- slider.style.transitionProperty = "";
+ getWindow().requestAnimationFrame(() => {
+ getWindow().requestAnimationFrame(() => {
+ slider.style.transitionProperty = "";
- fireCustomEvent(this, "monster-slider-moved", {
- index: slideIndex,
- });
+ fireCustomEvent(this, "monster-slider-moved", {
+ index: slideIndex,
+ });
- eventFired = true;
- });
- });
- }, durationMilis);
- });
- });
- }
- }
+ eventFired = true;
+ });
+ });
+ }, durationMilis);
+ });
+ });
+ }
+ }
- if (!eventFired) {
- fireCustomEvent(this, "monster-slider-moved", {
- index: slideIndex,
- });
- }
+ if (!eventFired) {
+ fireCustomEvent(this, "monster-slider-moved", {
+ index: slideIndex,
+ });
+ }
}
/**
@@ -503,36 +502,35 @@ function moveTo(index) {
* @return {initEventHandler}
*/
function initEventHandler() {
- const self = this;
+ const self = this;
- const nextElements = this[nextElementSymbol];
+ const nextElements = this[nextElementSymbol];
- if (nextElements) {
- nextElements.addEventListener("click", () => {
- self.next();
- });
- }
+ if (nextElements) {
+ nextElements.addEventListener("click", () => {
+ self.next();
+ });
+ }
- const prevElements = this[prevElementSymbol];
+ const prevElements = this[prevElementSymbol];
- if (prevElements) {
- prevElements.addEventListener("click", () => {
- self.previous();
- });
- }
+ if (prevElements) {
+ prevElements.addEventListener("click", () => {
+ self.previous();
+ });
+ }
- if (this.getOption("features.drag")) {
+ if (this.getOption("features.drag")) {
+ this[sliderElementSymbol].addEventListener("mousedown", (e) =>
+ startDragging.call(this, e, "mouse"),
+ );
- this[sliderElementSymbol].addEventListener("mousedown", (e) =>
- startDragging.call(this, e, "mouse"),
- );
+ this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+ startDragging.call(this, e, "touch"),
+ );
+ }
- this[sliderElementSymbol].addEventListener("touchstart", (e) =>
- startDragging.call(this, e, "touch"),
- );
- }
-
- return this;
+ return this;
}
/**
@@ -541,45 +539,45 @@ function initEventHandler() {
* @param type
*/
function startDragging(e, type) {
- this[configSymbol].isDragging = true;
- this[configSymbol].startPos = getPositionX(e, type);
- this[sliderElementSymbol].classList.add("grabbing");
- this[sliderElementSymbol].style.transitionProperty = "none";
+ this[configSymbol].isDragging = true;
+ this[configSymbol].startPos = getPositionX(e, type);
+ this[sliderElementSymbol].classList.add("grabbing");
+ this[sliderElementSymbol].style.transitionProperty = "none";
- const callbackMousemove = (x) => {
- dragging.call(this, x, type);
- };
+ const callbackMousemove = (x) => {
+ dragging.call(this, x, type);
+ };
- const callbackMouseUp = () => {
- const endEvent = type === "mouse" ? "mouseup" : "touchend";
- const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
+ const callbackMouseUp = () => {
+ const endEvent = type === "mouse" ? "mouseup" : "touchend";
+ const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
- document.body.removeEventListener(endEvent, callbackMouseUp);
- document.body.removeEventListener(moveEvent, callbackMousemove);
+ document.body.removeEventListener(endEvent, callbackMouseUp);
+ document.body.removeEventListener(moveEvent, callbackMousemove);
- this[configSymbol].isDragging = false;
- this[configSymbol].startPos = 0;
- this[sliderElementSymbol].classList.remove("grabbing");
- this[sliderElementSymbol].style.transitionProperty = "";
+ this[configSymbol].isDragging = false;
+ this[configSymbol].startPos = 0;
+ this[sliderElementSymbol].classList.remove("grabbing");
+ this[sliderElementSymbol].style.transitionProperty = "";
- const lastPos = this[configSymbol].draggingPos;
- const widthOfSlider = this[sliderElementSymbol].offsetWidth;
- this[configSymbol].draggingPos = 0;
+ const lastPos = this[configSymbol].draggingPos;
+ const widthOfSlider = this[sliderElementSymbol].offsetWidth;
+ this[configSymbol].draggingPos = 0;
- let newIndex = this[configSymbol].currentIndex;
+ let newIndex = this[configSymbol].currentIndex;
- const x = lastPos / widthOfSlider;
- if (x > 0.5) {
- newIndex--;
- } else if (x < -0.5) {
- newIndex++;
- }
+ const x = lastPos / widthOfSlider;
+ if (x > 0.5) {
+ newIndex--;
+ } else if (x < -0.5) {
+ newIndex++;
+ }
- this.moveTo(newIndex);
- };
+ this.moveTo(newIndex);
+ };
- document.body.addEventListener("mouseup", callbackMouseUp);
- document.body.addEventListener("mousemove", callbackMousemove);
+ document.body.addEventListener("mouseup", callbackMouseUp);
+ document.body.addEventListener("mousemove", callbackMousemove);
}
/**
@@ -589,7 +587,7 @@ function startDragging(e, type) {
* @returns {*|number|number}
*/
function getPositionX(e, type) {
- return type === "mouse" ? e.pageX : e.touches[0].clientX;
+ return type === "mouse" ? e.pageX : e.touches[0].clientX;
}
/**
@@ -598,11 +596,11 @@ function getPositionX(e, type) {
* @param type
*/
function dragging(e, type) {
- if (!this[configSymbol].isDragging) return;
- this[configSymbol].draggingPos =
- getPositionX(e, type) - this[configSymbol].startPos;
- const {slides, totalSlides} = getSlidesAndTotal.call(this);
- setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
+ if (!this[configSymbol].isDragging) return;
+ this[configSymbol].draggingPos =
+ getPositionX(e, type) - this[configSymbol].startPos;
+ const { slides, totalSlides } = getSlidesAndTotal.call(this);
+ setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
}
/**
@@ -610,21 +608,21 @@ function dragging(e, type) {
* @return {void}
*/
function initControlReferences() {
- this[controlElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="control"]`,
- );
+ this[controlElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="control"]`,
+ );
- this[sliderElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="slider"]`,
- );
+ this[sliderElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="slider"]`,
+ );
- this[prevElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="prev"]`,
- );
+ this[prevElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="prev"]`,
+ );
- this[nextElementSymbol] = this.shadowRoot.querySelector(
- `[${ATTRIBUTE_ROLE}="next"]`,
- );
+ this[nextElementSymbol] = this.shadowRoot.querySelector(
+ `[${ATTRIBUTE_ROLE}="next"]`,
+ );
}
/**
@@ -632,8 +630,8 @@ function initControlReferences() {
* @return {string}
*/
function getTemplate() {
- // language=HTML
- return `
+ // language=HTML
+ return `
<div data-monster-role="control" part="control">
<div class="prev" data-monster-role="prev" part="prev">
<slot name="prev"></slot>
diff --git a/source/monster.mjs b/source/monster.mjs
index 4b570c95242fd32dca39cc6acfba9d2ccade15a0..823f890b218fe52cf5e0de29a03bd4c3184a6af6 100644
--- a/source/monster.mjs
+++ b/source/monster.mjs
@@ -54,6 +54,7 @@ export * from "./components/form/constants.mjs";
export * from "./components/notify/message.mjs";
export * from "./components/notify/notify.mjs";
export * from "./components/notify/constants.mjs";
+export * from "./components/tree-menu/dragable-tree-menu.mjs";
export * from "./components/tree-menu/tree-menu.mjs";
export * from "./components/host/collapse.mjs";
export * from "./components/host/config-manager.mjs";