New release (#234)

* Updated the demo

* Update github actions

* Bump packages

Bump esbuild and esbuild-sass-plugin
Bump mini-css-extract-plugin from 2.7.7 to 2.8.0
Bump postcss from 8.4.33 to 8.4.35
Bump puppeteer from 21.9.0 to 22.0.0

Update demo slider images

Author: armino-dev

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
         jquery: true,
     },
     root: true,
-    extends: ['eslint:recommended'],
+    extends: ['jquery', 'eslint:recommended'],
     globals: {
         Atomics: 'readonly',
         SharedArrayBuffer: 'readonly',

.github/workflows/npm-publish-github-packages.yml

@@ -11,8 +11,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
         with:
           node-version: 20
       - run: npm ci
@@ -25,8 +25,8 @@ jobs:
       contents: read
       packages: write
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
         with:
           node-version: 20
           registry-url: https://npm.pkg.github.com/

.github/workflows/npm-publish.yml

@@ -8,8 +8,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
         with:
           node-version: 20
       - run: npm ci
@@ -20,8 +20,8 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/

demo/images/jquery-timed-dialog-ui-dark.png

@@ -24,73 +24,6 @@ p {
   margin-bottom: 20px;
 }
 
-#hero {
-    position: relative;
-    width: 100%;
-    min-height: 50vw;
-    overflow: hidden;
-}
-
-.layer {
-    position: absolute;
-    width: 100%;
-    min-height: 55vw;
-    overflow: hidden;
-}
-
-.layer .content-wrap {
-    position: absolute;
-    width: 100%;
-    min-height: 55vw;
-}
-
-.bottom {
-    z-index: 5;
-}
-
-.top {
-    z-index: 10;
-    width: 50%;
-}
-
-.layer img {
-    width: 100vw;
-    transform: translateX(-38px);
-}
-
-.handle {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    top: 0%;
-    transform: translateX(-50%);
-    width: 40px;
-    height: 100%;
-    z-index: 13;
-    cursor: pointer;
-}
-
-.handle .line {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 2px;
-    height: 100%;
-    background-color: rgba(25, 155, 187, 0.3);
-    transform: translate(-50%, -50%);
-}
-
-.handle .arrows {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 30px;
-    height: 30px;
-    transform: translate(-50%, -50%);
-    background-color: rgba(25, 155, 187, 0.3);
-    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-}
-
 div.footer {
   padding: 20px 0;
 }

demo/images/jquery-timed-dialog-ui-dark.webp

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>jQuery Timed Dialog UI - Default functionality</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" />
+    <link rel="stylesheet" href="https://esm.sh/@armino-dev/comparing-slider/dist/comparing-slider.min.css" />
     <link rel="stylesheet" href="index.css?v=4b9b7fec8e7e576e559d5203298a48ad">
 </head>
 
@@ -21,20 +22,7 @@ <h1>Demo for jQuery Timed Dialog Plugin</h1>
             It also supports <strong>light/dark</strong> theming based on your device settings.</p>
     </section>
     <section id="hero">
-        <div class="layer bottom">
-            <div class="content-wrap">
-                <img src="images/jquery-timed-dialog-ui-dark.png" alt="jQuery timed dialog dark" />
-            </div>
-        </div>
-        <div class="layer top">
-            <div class="content-wrap">
-                <img src="images/jquery-timed-dialog-ui-light.png" alt="jQuery timed dialog light" />
-            </div>
-        </div>
-        <div class="handle">
-            <div class="line"></div>
-            <div class="arrows"></div>
-        </div>
+        <div id="hero-container"></div>
     </section>
     <main>
         <div class="container">
@@ -134,7 +122,7 @@ <h3>2.3. Complex confirmation modal</h3>
     </main>
     <footer>
         <div class="footer">
-            Copyright &copy; 2019 - 2023 Armino.
+            Copyright &copy; 2019 - 2024 Armino.
         </div>
     </footer>
 </body>
@@ -144,7 +132,8 @@ <h3>2.3. Complex confirmation modal</h3>
   crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
-<script src="../src/timed-dialog.js?v=5638c4a78dc820db339e2b8026cf0472"></script>
+<script src="../dist/timed-dialog.min.js?v=5638c4a78dc820db339e2b8026cf0472"></script>
+<script type="module" src="https://esm.sh/@armino-dev/comparing-slider/dist/comparing-slider.min.js"></script>
 <script type="text/javascript">
     $(document).on('click', 'button[id^="my-button-"]', function(evt) {
         var options = {};
@@ -223,18 +212,19 @@ <h3>2.3. Complex confirmation modal</h3>
     });
 
     window.addEventListener('load', () => {
-        const hero = document.getElementById('hero');
-        const topLayer = hero.querySelector('.top');
-        const bottomLayer = hero.querySelector('.bottom');
-        const handle = hero.querySelector('.handle');
-        let delta = 0;
+        const options = {
+            containerId: 'hero-container',
+            left: {
+                image: 'images/jquery-timed-dialog-ui-light.webp',
+                alt: 'light theme ui'
+            },
+            right: {
+                image: 'images/jquery-timed-dialog-ui-dark.webp',
+                alt: 'dark theme ui'
+            }
+        };
 
-        hero.addEventListener('mousemove', (e) => {
-           delta = (e.clientX - window.innerWidth / 2) * 0.5;
-           handle.style.left = `${e.clientX + delta}px`;
-           topLayer.style.width = `${e.clientX + delta}px`;
-        });
+        createComparingSlider(options);
     });
 </script>
-
 </html>