diff options
| author | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2024-11-26 17:01:07 +0200 |
|---|---|---|
| committer | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2024-11-26 17:01:07 +0200 |
| commit | 5c42b94698eb7be04a492edbda87466804615b79 (patch) | |
| tree | 12201872e9fe1b8dcc146a696fc84c57eb916284 /esm/scripts/slidetray.js | |
| parent | 8d308fe5f7a83d635ef14e95c8e9abc171f76c7e (diff) | |
| download | slidetray-development.tar.gz slidetray-development.tar.bz2 slidetray-development.zip | |
rename extention to .mjs for the esm modulesHEADmasterdevelopment
Diffstat (limited to 'esm/scripts/slidetray.js')
| -rw-r--r-- | esm/scripts/slidetray.js | 156 |
1 files changed, 0 insertions, 156 deletions
diff --git a/esm/scripts/slidetray.js b/esm/scripts/slidetray.js deleted file mode 100644 index f1ef2f7..0000000 --- a/esm/scripts/slidetray.js +++ /dev/null @@ -1,156 +0,0 @@ -/// 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; |
