rename extention to .mjs for the esm modulesHEADmasterdevelopment

1 files changed, 156 insertions, 0 deletions

diff --git a/esm/scripts/slidetray.mjs b/esm/scripts/slidetray.mjs
new file mode 100644
index 0000000..f1ef2f7
--- /dev/null
+++ b/esm/scripts/slidetray.mjs
@@ -0,0 +1,156 @@
+/// import Swiper from 'https://unpkg.com/swiper@11.1.15/swiper.mjs?module'
+/// import { Navigation, Pagination } from  'https://unpkg.com/swiper@11.1.15/swiper-bundle.mjs?module';
+import Swiper from  'https://unpkg.com/swiper@11.1.15/swiper-bundle.mjs?module';
+
+const slidetray = (setup) => {
+    
+    let factory = {
+        setup: { /** @object : slidetray parameters */ },
+
+        features: [],
+
+        defaults: {
+            selector: '.slidetray',
+            base_url: '',
+            effect: 'flip',
+            theme: 'light',
+            navigation: true,
+            pagination: 'classsic',
+            keyboard: true,
+            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;
+            }
+            if (json.keyboard) {
+                args.keyboard = { enabled: true }
+            }
+            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="${this.setup.base_url}/${slide.image}" />
+                    `;
+                if (slide.poi && Array.isArray(slide.poi)) {
+                    
+                    slide.poi.forEach( (poi, j) => {
+                        let slideClass = `f-${i}-${j}`;
+
+                        if (poi.link) {     // link html
+                            slideHtml += `<div class="${slideClass}">
+                                <a href="${poi.link}" target="_blank">${poi.text}</a>
+                            </div>`;
+
+                        } else {
+                            slideHtml += `<div class="${slideClass}">
+                                ${poi.text}
+                            </div>`;
+                        }
+
+                        if (poi.style) {    // link css
+                            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() {
+            console.log('initer', this.presentation.initer);
+            var swp = new Swiper(this.setup.selector, this.presentation.initer);      
+            this.swiper = swp;
+            return this;
+        }
+    }
+
+    return factory.init(setup);
+}
+
+
+export default slidetray;