From aa66a977a2dd63bb3b6255a018bbfe720b4ce2b4 Mon Sep 17 00:00:00 2001 From: George Halkiadakis Date: Sun, 24 Nov 2024 23:45:38 +0200 Subject: implement badic presentation builder function --- README.md | 12 ++++++-- demos/css/easy-presentation.css | 30 ++++++++++++++++++ demos/simple-presentation.html | 34 +++++++++++++++++++++ scripts/presentation-factory.js | 67 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 demos/css/easy-presentation.css create mode 100644 demos/simple-presentation.html create mode 100644 scripts/presentation-factory.js diff --git a/README.md b/README.md index fde33fc..1253156 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,8 @@ let presentation = { { text: `utf8 str` style: `text.css_block, position absolute%`, - link: `str.url`, - hover: `text.css_block` + link: [ `array.css_blocks` ] /**/ + hover: }, /* ... */ @@ -42,6 +42,14 @@ let presentation = { ... */ ] } + + +// ** example +// style: [ +// '{ top: 15px; background: #333; }', +// 'a { color: #fff; } +// 'a:hover { color: red; } +// ] ``` diff --git a/demos/css/easy-presentation.css b/demos/css/easy-presentation.css new file mode 100644 index 0000000..bda2424 --- /dev/null +++ b/demos/css/easy-presentation.css @@ -0,0 +1,30 @@ +html, +body { + position: relative; + height: 100%; +} + +body { + background: #222; + 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; +} + +.swiper-slide { + background-position: center; + background-size: cover; +} + +.swiper-slide img { + display: block; + width: 100%; +} diff --git a/demos/simple-presentation.html b/demos/simple-presentation.html new file mode 100644 index 0000000..8ddfcfb --- /dev/null +++ b/demos/simple-presentation.html @@ -0,0 +1,34 @@ + + + + + Swiper demo + + + + + + + +
+
+ +
+ + + + + + + + diff --git a/scripts/presentation-factory.js b/scripts/presentation-factory.js new file mode 100644 index 0000000..0a36ad1 --- /dev/null +++ b/scripts/presentation-factory.js @@ -0,0 +1,67 @@ + +const presentationFactory = (setup) => { + + return { + setup : {}, + presentation: { + html: '', + css: '', + swiper: {} + }, + + init: function (s) { + this.setup = s; + }, + + prepare: function() { + let html = []; + let css = []; + + this.setup.forEach( (slide, i) => { + slideHtml = ` +
+ + `; + if (slide.poi && Array.isArray(slide.poi)) { + let slideClass = `f-${i}-${j}`; + slide.poi.forEach( (poi, j) => { + + if (poi.link) { + slideHtml += `
+ ${poi.text} +
`; + + } else { + slideHtml += `
+ ${poi.text} +
`; + } + + if (poi.style) { + poi.style.forEach( rs => { // ruleset + css.push(`.${slideClass} ${rs}`); + }); + } + }) + } + slideHtml += '
'; + html.push(slideHtml); + }); + this.presentation.html = html.join('\n'); + this.css = css.join('\n'); + + return this; + }, + + apply: function() { + document.querySelector(setup.selector).innerHTML = this.presentation.html; + let swiper = new Swiper(this.presentation.swiper); + + console.info('presentation is ready!'); + return this; + } + + + + } +} \ No newline at end of file -- cgit v1.2.3