Skip to content
Snippets Groups Projects
Verified Commit 59b3e7b5 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: new resizeobserver for slider #301

parent cf8eae7e
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
.idea/misc.xml
+ 3
− 0
View file @ 59b3e7b5
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="FLOW" />
</component>
<component name="ProjectRootManager" version="2" languageLevel="JDK_22" project-jdk-name="17 (2)" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/out" />
</component>
......
development/config/import.mjs
+ 3
− 3
View file @ 59b3e7b5
export const projectRoot = "/home/md/projekte/workspaces/libraries/monster";
export const sourcePath = "/home/md/projekte/workspaces/libraries/monster/source";
export const developmentPath = "/home/md/projekte/workspaces/libraries/monster/development";
export const projectRoot = "/tmp/monster";
export const sourcePath = "/tmp/monster/source";
export const developmentPath = "/tmp/monster/development";
export const pnpxBin = "/nix/store/sxw7i3pyw8v1ycw2sph0zq2byh1prrwm-nodejs-20.18.1/bin/npx";
export const nodeBin = "/nix/store/057dsl3wh2q8syy5sis0x9y5dksl63mv-nodejs-23.8.0/bin/node";
export const license = "/**" + "\n" +
......
development/issues/open/301.html → development/issues/closed/301.html
+ 7
− 3
View file @ 59b3e7b5
......@@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Slider doesn't react to all defined breakpoints #301</title>
<script src="./301.mjs" type="module"></script>
</head>
......@@ -12,10 +13,10 @@
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/301">Issue #301</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main style="width: 1200px">
<main style="">
<div class="container">
<monster-slider style="height:360px"
<monster-slider style="height:360px; width: 100%;"
data-monster-option-slides-0="1"
data-monster-option-slides-600="2"
......@@ -45,6 +46,9 @@
<div class="slide" style="background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
</div>
<div class="slide" style="background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 4</div>
</div>
</monster-slider>
</div>
......
development/issues/open/301.mjs → development/issues/closed/301.mjs
+ 0
− 0
View file @ 59b3e7b5
File moved
flake.lock
+ 3
− 3
View file @ 59b3e7b5
......@@ -164,11 +164,11 @@
},
"nixpkgs_3": {
"locked": {
"lastModified": 1740865531,
"narHash": "sha256-h00vGIh/jxcGl8aWdfnVRD74KuLpyY3mZgMFMy7iKIc=",
"lastModified": 1742388435,
"narHash": "sha256-GheQGRNYAhHsvPxWVOhAmg9lZKkis22UPbEHlmZMthg=",
"owner": "nixos",
"repo": "nixpkgs",
"rev": "5ef6c425980847c78a80d759abc476e941a9bf42",
"rev": "b75693fb46bfaf09e662d09ec076c5a162efa9f6",
"type": "github"
},
"original": {
......
nix/scripts/create-issue.nix
+ 1
− 1
View file @ 59b3e7b5
......@@ -61,7 +61,7 @@ in
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>''${escaped_issue_text} #''${issue_id}</title>
<script src="./''${issue_id}.mjs" type="module"></script>
</head>
......
package-lock.json
+ 162
− 162
View file @ 59b3e7b5
This diff is collapsed.
source/components/layout/slider.mjs
+ 93
− 14
View file @ 59b3e7b5
......@@ -73,6 +73,8 @@ const configSymbol = Symbol("config");
* @since 3.74.0
* @copyright schukai GmbH
* @summary A beautiful Slider that can make your life easier and also looks good.
* @fires monster-slider-resized
* @fires monster-slider-moved
*/
class Slider extends CustomElement {
/**
......@@ -97,12 +99,21 @@ class Slider extends CustomElement {
draggingPos: 0,
startPos: 0,
autoPlayInterval: null,
eventHandler: {
mouseOverPause: null,
mouseout: null,
touchstart : null,
touchend: null
}
};
// set --monster-slides-width
const slides = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="slider"]`,
);
const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
slides.style.setProperty(
"--monster-slides-width",
......@@ -283,6 +294,11 @@ function initThumbnails() {
"[data-monster-role='thumbnails']",
);
// remove all thumbnails
while (thumbnails.firstChild) {
thumbnails.removeChild(thumbnails.firstChild);
}
const { originSlides } = getSlidesAndTotal.call(this);
originSlides.forEach((x, index) => {
......@@ -354,26 +370,49 @@ function initAutoPlay() {
}, startDelay);
if (autoPlay.mouseOverPause) {
this.addEventListener("mouseover", () => {
if(this[configSymbol].eventHandler.mouseOverPause===null) {
this[configSymbol].eventHandler.mouseOverPause = () => {
clearInterval(this[configSymbol].autoPlayInterval);
});
}
this.addEventListener("mouseout", () => {
this.addEventListener("mouseover",this[configSymbol].eventHandler.mouseOverPause);
}
if(this[configSymbol].eventHandler.mouseout===null) {
this[configSymbol].eventHandler.mouseout = () => {
if (this[configSymbol].isDragging) {
return;
}
start();
});
}
this.addEventListener("mouseout", this[configSymbol].eventHandler.mouseout);
}
}
if (autoPlay.touchPause) {
this.addEventListener("touchstart", () => {
if(this[configSymbol].eventHandler.touchstart===null) {
this[configSymbol].eventHandler.touchstart = () => {
clearInterval(this[configSymbol].autoPlayInterval);
});
}
this.addEventListener("touchend", () => {
this.addEventListener("touchstart",this[configSymbol].eventHandler.touchstart);
}
if(this[configSymbol].eventHandler.touchend===null) {
this[configSymbol].eventHandler.touchend = () => {
if (this[configSymbol].isDragging) {
return;
}
start();
});
}
this.addEventListener("touchend", this[configSymbol].eventHandler.touchend);
}
}
}
......@@ -602,6 +641,7 @@ function moveTo(index, animation) {
/**
* @private
* @return {initEventHandler}
* @fires monster-slider-resized
*/
function initEventHandler() {
const self = this;
......@@ -632,6 +672,44 @@ function initEventHandler() {
);
}
const initialSize = {
width: this[sliderElementSymbol]?.offsetWidth || 0,
height: this[sliderElementSymbol]?.offsetHeight || 0
};
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const {width, height} = entry.contentRect;
if (width !== initialSize.width || height !== initialSize.height) {
self.stopAutoPlay();
if (this.getOption("features.thumbnails")) {
initThumbnails.call(this);
}
const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
this[sliderElementSymbol].style.setProperty(
"--monster-slides-width",
`${100 / slidesVisible}%`,
);
moveTo.call(self,0,false)
self.startAutoPlay();
fireCustomEvent(self, "monster-slider-resized", {
width: width,
height: height
});
}
}
});
resizeObserver.observe(this[sliderElementSymbol]);
return this;
}
......@@ -729,6 +807,7 @@ function initControlReferences() {
this[thumbnailElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="thumbnails"]`,
);
}
/**
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment