From 8c27075aea4c6e1d4f81d77f9e833c24e37eeb54 Mon Sep 17 00:00:00 2001
From: Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr>
Date: Mon, 25 Nov 2024 19:44:14 +0200
Subject: impelement requirejs demo; introduce esm demo

---
 esm/scripts/slidetray.js | 155 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 esm/scripts/slidetray.js

(limited to 'esm/scripts/slidetray.js')

diff --git a/esm/scripts/slidetray.js b/esm/scripts/slidetray.js
new file mode 100644
index 0000000..9091ec1
--- /dev/null
+++ b/esm/scripts/slidetray.js
@@ -0,0 +1,155 @@
+import Swiper from 'https://unpkg.com/swiper@11.1.15/swiper.mjs?module'
+
+
+// import { Navigation, Pagination } from 'swiper/modules';
+
+// using Swiper as global
+// TODO: load Swiper via requireJS async mode
+
+const slidetray = (setup) => {
+    
+    let factory = {
+        setup: { /** @object : slidetray paramaters */ },
+
+        features: [],
+
+        defaults: {
+            selector: '.slidetray',
+            source_url: '',
+            effect: 'flip',
+            theme: 'light',
+            navigation: true,
+            pagination: 'classsic',
+            keyboard: false,
+            touch: true
+        },
+
+        presentation: {
+            html: '',
+            css: '',
+            initer: { /** @object : swiper paremetres */  }
+        },
+
+        swiper: null,
+
+
+        init: function(json) {         
+            for (let prop in this.defaults) {
+                if (!json.hasOwnProperty(prop)) json[prop] = this.defaults[prop];
+            }
+            this.setup = json;
+            this.presentation.initer = this.define_engine_args(json);
+            return this;
+        },
+
+        define_engine_args: function(json) {
+            let args = {
+                spaceBetween: 30,
+            }
+
+            if (json.effect != 'none') {
+                args.effect = json.effect;
+            }
+
+            if (json.navigation) {
+                this.features.push('<div class="swiper-button-next"></div>');
+                this.features.push('<div class="swiper-button-prev"></div>');
+                args.navigation = {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                }
+            }
+            if (json.pagination != 'none') {
+                this.features.push('<div class="swiper-pagination"></div>');
+
+                let pagi = { el: ".swiper-pagination" };
+                switch (json.pagination) {
+                    case 'dynamic':     pagi.dynamicBullets = true; break;
+                    case 'progress':    pagi.type = 'progressbar';  break;
+                    case 'fraction':    pagi.type = 'fraction';     break;                  
+                    default:    pagi.clickable = true
+                }
+                args.pagination = pagi;
+            }
+            return args;
+
+        },
+
+        prepare: function() {   // prepare slides and css
+            let html = [];
+            let css = [];
+
+            if (this.setup.hasOwnProperty('css')) {
+                css.push(this.setup.css);
+            }
+
+            this.setup.slides.forEach( (slide, i) => { 
+                let slideHtml = `
+                    <div class="swiper-slide" data-id="${i}">
+                        <img src="${slide.image}" />
+                    `;
+                if (slide.poi && Array.isArray(slide.poi)) {
+                    let slideClass = `f-${i}-${j}`;
+                    slide.poi.forEach( (poi, j) => {
+
+                        if (poi.link) {
+                            slideHtml += `<div class="${slideClass}">
+                                <a href="${poi.link}">${poi.text}</a>
+                            </div>`;
+
+                        } else {
+                            slideHtml += `<div class="f-${i}-${j}">
+                                ${poi.text}
+                            </div>`;
+                        }
+
+                        if (poi.style) {
+                            poi.style.forEach( rs => {  // ruleset
+                                css.push(`.${slideClass} ${rs}`);
+                            });
+                        }
+                    })
+                }
+                slideHtml += '</div>';
+                html.push(slideHtml);
+            });
+            this.presentation.html = html.join('\n');
+            this.presentation.css = css.join('\n');
+
+            return this;
+        },
+
+        apply: function() {
+            if (this.setup.title) document.title = this.setup.title;    // set document title
+
+            // apply css
+            let styleSheet = document.createElement('style')
+            styleSheet.textContent = this.presentation.css;
+            document.head.appendChild(styleSheet);
+
+            // append feature elemets
+            if (this.features.length) {
+                this.features.forEach( fea => {
+                    document.querySelector(this.setup.selector).insertAdjacentHTML('beforeend', fea);
+                })
+            }
+
+            // append slides
+            document.querySelector(`${setup.selector} .swiper-wrapper`).innerHTML = this.presentation.html;
+
+            return this;
+        },
+
+        show: function() {
+            SwiperCore.use([Navigation, Pagination, Scrollbar]);
+            var swp = new Swiper(this.setup.selector, this.presentation.initer);      
+            this.swiper = swp;
+            return this;
+        }
+    }
+
+    return factory.init(setup);
+}
+
+
+export default slidetray;
-- 
cgit v1.2.3