Grid Slider #1

massimo-cassandro · Jun 15, 2024 · a795114 · a795114
1 parent 08f6851
commit a795114
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 8 deletions.
diff --git a/2024-06-14-grid-slider-1/README.md b/2024-06-14-grid-slider-1/README.md
@@ -0,0 +1,7 @@
+# Grid Slider #1
+
+Jun 2024
+
+[View demo](https://massimo-cassandro.github.io/area-test/2024-06-14-grid-slider-1/index.html)
+
+[Codepen](https://codepen.io/massimo-cassandro/pen/RwmxoXG)
diff --git a/2024-06-14-grid-slider-1/index.css b/2024-06-14-grid-slider-1/index.css
@@ -0,0 +1,114 @@
+/* for demo */
+html {
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+.container {
+  padding: 2rem;
+}
+h1, h2, p {
+  text-align: center;
+}
+hr {
+  margin: 2rem 0;
+  border-top: .5px solid #666;
+}
+.slider-container {
+  container-type: inline-size;
+  container-name: slider-container;
+  z-index: 1;
+  margin: 0 auto;
+  border: 12px solid #999;
+  border-radius: .5rem;
+}
+/* end demo */
+
+
+.slider {
+  display: grid;
+  gap: 0;
+
+  /* disabled to show offset slides */
+  /* overflow: hidden; */
+
+  /* background */
+  background-color: transparent;
+  background-image: repeating-linear-gradient(45deg, #7074be 0, #7074be 1px, transparent 0, transparent 50%);
+  background-size: 10px 10px;
+  /* end background */
+
+  .slide {
+    display: grid;
+    place-content: center;
+
+    /* for demo */
+    height: 8rem;
+    font-size: 4rem;
+    line-height: 1;
+    /* end demo */
+
+    &:nth-child(odd) {
+      background-color: #87e054;
+    }
+    &:nth-child(even) {
+      background-color: #f5ae6c;
+    }
+  }
+
+  /* mobile slider  */
+  @container slider-container (max-width: 767px) {
+    grid-template-rows: 1fr;
+    grid-template-columns: 100%;
+
+    .slide {
+      z-index: -1;
+      grid-row: 1;
+      grid-column: 1;
+      filter: grayscale(100%); /* for demo */
+      transition: translate .6s ease-in-out;
+
+      &.on {
+        z-index: 0;
+        filter: none; /* for demo */
+        translate: 0;
+      }
+      &, &.next {
+        translate: 100%;
+      }
+      &.prev {
+        translate: -100%;
+      }
+    }
+  }
+
+  /* desktop */
+  @container slider-container (min-width: 768px) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: row dense;
+    gap: 1rem;
+    .slide {
+      translate: 0;
+    }
+  }
+}
+
+
+/* for demo */
+.mobile-slider-container, .slider-controls {
+  width: 360px;
+}
+.mobile-slider-container {
+  padding: 2rem 0;
+}
+.slider-controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem auto;
+}
+.desktop-slider-container {
+  width: calc(800px + 2rem);
+  padding: 1rem;
+}
diff --git a/2024-06-14-grid-slider-1/index.html b/2024-06-14-grid-slider-1/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Flex Slider on mobile</title>
+    <link rel="stylesheet" href="./index.css" type="text/css" media="all">
+  </head>
+  <body>
+    <div class="container">
+    <h1>Grid slider (v.1)</h1>
+    <p><em>NB: demo uses container queries</em></p>
+
+      <h2>Mobile</h2>
+      <div class="mobile-slider-container slider-container">
+        <div class="slider">
+          <div class="on slide">1</div>
+          <div class="slide">2</div>
+          <div class="slide">3</div>
+          <div class="slide">4</div>
+          <div class="slide">5</div>
+          <div class="slide">6</div>
+        </div>
+      </div>
+      <p class="slider-controls">
+        <button type="button" id="prev">Prev</button>
+        <button type="button" id="next">Next</button>
+      </p>
+
+      <hr>
+
+      <h2>Desktop</h2>
+      <div class="desktop-slider-container slider-container">
+        <div class="slider">
+          <div class="slide">1</div>
+          <div class="slide">2</div>
+          <div class="slide">3</div>
+          <div class="slide">4</div>
+          <div class="slide">5</div>
+          <div class="slide">6</div>
+        </div>
+      </div>
+
+    </div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/2024-06-14-grid-slider-1/index.js b/2024-06-14-grid-slider-1/index.js
@@ -0,0 +1,45 @@
+const mobile_slider_wrapper = document.querySelector('.mobile-slider-container .slider')
+  ,slides = mobile_slider_wrapper.querySelectorAll('div')
+  ,next_btn = document.getElementById('next')
+  ,prev_btn = document.getElementById('prev')
+;
+
+let idx = 0;
+
+const upd_btns = () => {
+  prev_btn.disabled = mobile_slider_wrapper.querySelectorAll('.slide.prev').length === 0;
+  next_btn.disabled = mobile_slider_wrapper.querySelectorAll('.slide:not(.prev):not(.on)').length === 0;
+};
+
+next_btn.addEventListener('click', () => {
+  mobile_slider_wrapper.querySelector('.on:not(.prev):not(.next)')?.classList.add('prev');
+  slides[++idx].classList.add('on');
+  slides[idx].classList.remove('prev', 'next');
+  upd_btns();
+}, false);
+
+prev_btn.addEventListener('click', () => {
+  mobile_slider_wrapper.querySelector('.on:not(.prev):not(.next)')?.classList.add('next');
+  slides[--idx].classList.add('on');
+  slides[idx].classList.remove('prev', 'next');
+  upd_btns();
+}, false);
+
+
+mobile_slider_wrapper.addEventListener('transitionstart', e => {
+  if(e.target.classList.contains('slide') ) {
+    e.target.classList.add('sliding');
+  }
+}, false);
+
+mobile_slider_wrapper.addEventListener('transitionend', e => {
+ if((e.target.classList.contains('prev') || e.target.classList.contains('next')) ) {
+    e.target.classList.remove('on');
+    upd_btns();
+  }
+  e.target.classList.remove('sliding');
+}, false);
+
+
+
+upd_btns();
diff --git a/area-test.code-workspace b/area-test.code-workspace
@@ -5,12 +5,6 @@
 		}
 	],
 	"settings": {
-		"liveServer.settings.host": "127.0.0.1",
-		"liveServer.settings.CustomBrowser": "chrome",
-    "liveServer.settings.AdvanceCustomBrowserCmdLine": "Firefox Developer Edition",
-    // "liveServer.settings.AdvanceCustomBrowserCmdLine": null,
-		"liveServer.settings.multiRootWorkspaceName": "_area-test",
-		"liveServer.settings.port": 5500
 
 	}
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,14 @@
+import eslint_config from '@massimo-cassandro/eslint-config';
+
+export default [
+ ...eslint_config,
+ // {
+ // files: ['src//*.js'],
+ // ignores: [
+ // 'dist/',
+ // 'build/',
+ // '/vendor/'
+ // ],
+ // }
+];
+
diff --git a/package.json b/package.json
@@ -11,6 +11,16 @@
   "bugs": {
     "url": "https://github.com/massimo-cassandro/area-test/issues"
   },
-  "homepage": "https://github.com/area-test#readme"
-
+  "homepage": "https://github.com/area-test#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.5.0",
+    "@massimo-cassandro/eslint-config": "^2.0.4",
+    "@massimo-cassandro/stylelint-config": "^1.1.3",
+    "@stylistic/stylelint-plugin": "^2.1.2",
+    "eslint": "^9.5.0",
+    "globals": "^15.4.0",
+    "stylelint": "^16.6.1",
+    "stylelint-config-css-modules": "^4.4.0",
+    "stylelint-config-twbs-bootstrap": "^14.1.0"
+  }
 }
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
@@ -0,0 +1,7 @@
+/* eslint-env node */
+
+module.exports = {
+ extends: ['@massimo-cassandro/stylelint-config'],
+ ignoreFiles: []
+};
+