From 5c42b94698eb7be04a492edbda87466804615b79 Mon Sep 17 00:00:00 2001 From: Geo Halkiadakis Date: Tue, 26 Nov 2024 17:01:07 +0200 Subject: rename extention to .mjs for the esm modules --- esm/index.html | 2 +- esm/scripts/app.js | 6 -- esm/scripts/app.mjs | 6 ++ esm/scripts/presentation.js | 70 ------------------- esm/scripts/presentation.mjs | 70 +++++++++++++++++++ esm/scripts/slidetray.js | 156 ------------------------------------------- esm/scripts/slidetray.mjs | 156 +++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 233 insertions(+), 233 deletions(-) delete mode 100644 esm/scripts/app.js create mode 100644 esm/scripts/app.mjs delete mode 100644 esm/scripts/presentation.js create mode 100644 esm/scripts/presentation.mjs delete mode 100644 esm/scripts/slidetray.js create mode 100644 esm/scripts/slidetray.mjs (limited to 'esm') diff --git a/esm/index.html b/esm/index.html index 08791eb..2d320a2 100644 --- a/esm/index.html +++ b/esm/index.html @@ -13,6 +13,6 @@ - + diff --git a/esm/scripts/app.js b/esm/scripts/app.js deleted file mode 100644 index 78f1790..0000000 --- a/esm/scripts/app.js +++ /dev/null @@ -1,6 +0,0 @@ -import config from './presentation.js' - -import slidetray from './slidetray.js' - -let presentation = slidetray(config); -presentation.prepare().apply().show(); diff --git a/esm/scripts/app.mjs b/esm/scripts/app.mjs new file mode 100644 index 0000000..1aacdf5 --- /dev/null +++ b/esm/scripts/app.mjs @@ -0,0 +1,6 @@ +import config from './presentation.mjs' + +import slidetray from './slidetray.mjs' + +let presentation = slidetray(config); +presentation.prepare().apply().show(); diff --git a/esm/scripts/presentation.js b/esm/scripts/presentation.js deleted file mode 100644 index 47f174d..0000000 --- a/esm/scripts/presentation.js +++ /dev/null @@ -1,70 +0,0 @@ -export default { - - name: 'Pitsos', - title: 'Pitsos', - base_url: 'images', - - effect: 'flip', - pagination: 'dynamic', - - css: ` - html, - body { - position: relative; - } - - body { - background-color: rgb(153, 153, 153); - font-family: Helvetica Neue, Helvetica, Arial, sans-serif; - font-size: 14px; - color: #000; - margin: 0; - padding: 0; - display: flex; - height: 100vh; - overflow: hidden; - align-content: center; - align-items: center; - } - - .swiper { - width: 90vw; - height: 50.62vw; - } - - @media (min-aspect-ratio: 3.5/2) { - .swiper { - width: 150vh; - height: 90vh; - } - } - - .swiper-slide { - background-position: center; - background-size: cover; - } - - .swiper-slide img { - display: block; - width: 100%; - } - .swiper-pagination { - margin-top: 50px; - } - - .swiper-pagination-bullet-active { - background: #ed8119; - } - - .swiper-button-prev, .swiper-button-next { - color: #ed8119; - } - `, - slides: [ - { image: '01.jpg' }, - { image: '02.jpg' }, - { image: '03.jpg' }, - { image: '04.jpg' }, - ] - -} diff --git a/esm/scripts/presentation.mjs b/esm/scripts/presentation.mjs new file mode 100644 index 0000000..47f174d --- /dev/null +++ b/esm/scripts/presentation.mjs @@ -0,0 +1,70 @@ +export default { + + name: 'Pitsos', + title: 'Pitsos', + base_url: 'images', + + effect: 'flip', + pagination: 'dynamic', + + css: ` + html, + body { + position: relative; + } + + body { + background-color: rgb(153, 153, 153); + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 14px; + color: #000; + margin: 0; + padding: 0; + display: flex; + height: 100vh; + overflow: hidden; + align-content: center; + align-items: center; + } + + .swiper { + width: 90vw; + height: 50.62vw; + } + + @media (min-aspect-ratio: 3.5/2) { + .swiper { + width: 150vh; + height: 90vh; + } + } + + .swiper-slide { + background-position: center; + background-size: cover; + } + + .swiper-slide img { + display: block; + width: 100%; + } + .swiper-pagination { + margin-top: 50px; + } + + .swiper-pagination-bullet-active { + background: #ed8119; + } + + .swiper-button-prev, .swiper-button-next { + color: #ed8119; + } + `, + slides: [ + { image: '01.jpg' }, + { image: '02.jpg' }, + { image: '03.jpg' }, + { image: '04.jpg' }, + ] + +} 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('
'); - this.features.push('
'); - args.navigation = { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - } - } - if (json.pagination != 'none') { - this.features.push('
'); - - 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 = ` -
- - `; - if (slide.poi && Array.isArray(slide.poi)) { - - slide.poi.forEach( (poi, j) => { - let slideClass = `f-${i}-${j}`; - - if (poi.link) { // link html - slideHtml += `
- ${poi.text} -
`; - - } else { - slideHtml += `
- ${poi.text} -
`; - } - - if (poi.style) { // link css - poi.style.forEach( rs => { // ruleset - css.push(`.${slideClass}${rs}`); - }); - } - }) - } - slideHtml += '
'; - 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; 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('
'); + this.features.push('
'); + args.navigation = { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + } + } + if (json.pagination != 'none') { + this.features.push('
'); + + 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 = ` +
+ + `; + if (slide.poi && Array.isArray(slide.poi)) { + + slide.poi.forEach( (poi, j) => { + let slideClass = `f-${i}-${j}`; + + if (poi.link) { // link html + slideHtml += `
+ ${poi.text} +
`; + + } else { + slideHtml += `
+ ${poi.text} +
`; + } + + if (poi.style) { // link css + poi.style.forEach( rs => { // ruleset + css.push(`.${slideClass}${rs}`); + }); + } + }) + } + slideHtml += '
'; + 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; -- cgit v1.2.3