impelement requirejs demo; introduce esm demo

1 files changed, 156 insertions, 0 deletions

diff --git a/demos/scripts/slidetray.js b/demos/scripts/slidetray.js
new file mode 100644
index 0000000..7c32f5b
--- /dev/null
+++ b/demos/scripts/slidetray.js
@@ -0,0 +1,156 @@
+define([
+    // 'swiper'
+],  function() {    // Swiper) {
+
+    // using Swiper as global
+    // TODO: load Swiper via requireJS async mode
+
+    const presentation = (setup) => {
+        
+        let factory = {
+            setup: { /** @object : slidetray paramaters */ },
+
+            features: [],
+
+            defaults: {
+                selector: '.slidetray',
+                source_url: '',
+                effect: 'none',
+                theme: 'light',
+                navigation: true,
+                pagination: 'classsic',
+                keyboard: false,
+                touch: true,
+            },
+
+            presentation: {
+                html: '',
+                css: '',
+                initer: { /** @object : swiper paremetres */  }
+            },
+
+            swiper: null,
+
+
+            init: function(json) {         
+                for(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) => { 
+                    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() {
+                var swp = new Swiper(this.setup.selector, this.presentation.initer);      
+                this.swiper = swp;
+                return this;
+            }
+        }
+
+        return factory.init(setup);
+    }
+
+
+    return {
+        presentation
+    }
+
+});
\ No newline at end of file