impelement requirejs demo; introduce esm demo

3 files changed, 210 insertions, 0 deletions

diff --git a/esm/scripts/app.js b/esm/scripts/app.js
new file mode 100644
index 0000000..78f1790
--- /dev/null
+++ b/esm/scripts/app.js
@@ -0,0 +1,6 @@
+import config from './presentation.js'
+
+import slidetray from './slidetray.js'
+
+let presentation = slidetray(config);
+presentation.prepare().apply().show();
diff --git a/esm/scripts/presentation.js b/esm/scripts/presentation.js
new file mode 100644
index 0000000..9f33be2
--- /dev/null
+++ b/esm/scripts/presentation.js
@@ -0,0 +1,49 @@
+export default {
+
+    name: 'test',
+    title: 'some presentation title',
+
+    effect: 'none',
+    pagination: 'classic',
+
+    css: `
+        html,
+        body {
+            position: relative;
+            height: 100%;
+        }
+
+        body {
+            background: #abc;
+            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            color: #000;
+            margin: 0;
+            padding: 0;
+        }
+
+        .swiper {
+            width: 80vw;
+            height: 80vh;
+            margin: 0 auto;
+            padding-top: 2em;
+        }
+
+        .swiper-slide {
+            background-position: center;
+            background-size: cover;
+        }
+
+        .swiper-slide img {
+            display: block;
+            width: 100%;
+        }
+    `,
+    slides: [
+        { image: 'https://swiperjs.com/demos/images/nature-1.jpg' },
+        { image: 'https://swiperjs.com/demos/images/nature-2.jpg' },
+        { image: 'https://swiperjs.com/demos/images/nature-3.jpg' },
+        { image: 'https://swiperjs.com/demos/images/nature-4.jpg' },
+    ]
+
+}
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;