Swiper demo

From ac57b98df77219c8529c4547b13366df3e998b2c Mon Sep 17 00:00:00 2001 From: George Halkiadakis Date: Tue, 26 Nov 2024 04:33:40 +0200 Subject: implement esm version --- README.md | 241 ++++---------------------------------------- esm/index.html | 2 +- esm/scripts/presentation.js | 4 +- esm/scripts/slidetray.js | 12 +-- 4 files changed, 26 insertions(+), 233 deletions(-) diff --git a/README.md b/README.md index 510afbc..f8eb8b7 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ## presentation json template -js (json) +js (var as json) ```js let presentation = { @@ -25,19 +25,20 @@ let presentation = { css: `text.css`, slides: [ /// MANDATORY - { description: `str.utf8`, - image: `str.url`, /// MANDATORY - poi: [ // points of interest - { - text: `utf8 str` - style: `text.css_block, position absolute%, scoped`, - link: [ `array.css_blocks` ] /**/ - hover: - }, - /* - ... */ - ] - }, + { + description: `str.utf8`, + image: `str.url`, /// MANDATORY + poi: [ // points of interest + { + text: `utf8 str` + style: `text.css_block, position absolute%, scoped`, + link: [ `array.css_blocks` ] /**/ + hover: + }, + /* + ... */ + ] + }, /* ... */ ] @@ -53,130 +54,6 @@ let presentation = { ``` -## setup several settings (code template) - -```javascript -if (!presentation.Property) presentation.Property = default_value; -if (presentation.css) { - let styleSheet = document.createElement('style') - styleSheet.textContent = presentation.css - document.head.appendChild(styleSheet) -} -``` - - -## HTML (a blueprint) - -```html - - - - - Swiper demo - - - - - - - - - - -

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

- - - - - - - - -``` - - ## HTML minimal template @@ -218,52 +95,8 @@ if (presentation.css) { ``` -## presentation-factory.js - -```javascript -const presentation_factory = (setup) => { - return { - // init.. - this.setup = setup; - this.html = '', - this.css = '', - - // defaults - if (setup.property) { /* .. */ } - /* ... */ - - // methods - this.prepareCss = () => { - // calculate... - // attach to head - return this; - } - this.prepareHtml = () => { - // ... - return this; - } - this.render = () => { - - } - - } -} -``` - - - - - - - - - - - - - -### check if url is not broken +## TODO: check if url is not broken https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links @@ -273,44 +106,8 @@ https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links -### simple object - -```javascript -// Constructor function for Person objects -function Person(first, last, age, eye) { - this.firstName = first; - this.lastName = last; - this.age = age; - this.eyeColor = eye; - this.age = this.age * 2; - this.name = ''; - this.born = ''; - this.calculateName = () => { - this.name = this.firstName + ' ' + this.lastName; - return this; - }, - this.calculateBorn = () => { - this.born = 2024 - this.age; - return this; - }, - this.fullName = () => { return this.firstName + ' ' + this.lastName }; - this.card = () => { return['[', this.name, 'born @', this.born, ']' ].join(" "); } - this.sEnd = () => { return "Regards, "+ name; } - this.ca -} - -// Create two Person objects -const ego = new Person("Geo", "Media", 24, "blue"); -const myFather = new Person("John", "Doe", 50, "blue"); -const myMother = new Person("Sally", "Rally", 48, "green"); +## TODO: custom effects -alert(ego.calculateBorn().calculateName().card()) - - -// Display age -document.getElementById("demo").innerHTML = -"I am "+ ego.fullName() + -".
My father is "+ myFather.age +". My mother is "+ myMother.age + -".
"+ ego.sEnd(); -``` +brainstorming: +* https://codepen.io/paralleluniv3rse/pen/yGQjMv \ No newline at end of file diff --git a/esm/index.html b/esm/index.html index 6790705..5d10980 100644 --- a/esm/index.html +++ b/esm/index.html @@ -7,7 +7,7 @@ - +

diff --git a/esm/scripts/presentation.js b/esm/scripts/presentation.js index 9f33be2..61e6afc 100644 --- a/esm/scripts/presentation.js +++ b/esm/scripts/presentation.js @@ -3,8 +3,8 @@ export default { name: 'test', title: 'some presentation title', - effect: 'none', - pagination: 'classic', + effect: 'flip', + pagination: 'dynamic', css: ` html, diff --git a/esm/scripts/slidetray.js b/esm/scripts/slidetray.js index 9091ec1..bb21aa8 100644 --- a/esm/scripts/slidetray.js +++ b/esm/scripts/slidetray.js @@ -1,10 +1,6 @@ -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 +/// 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) => { @@ -141,7 +137,7 @@ const slidetray = (setup) => { }, show: function() { - SwiperCore.use([Navigation, Pagination, Scrollbar]); + console.log('initer', this.presentation.initer); var swp = new Swiper(this.setup.selector, this.presentation.initer); this.swiper = swp; return this; -- cgit v1.2.3