diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | demos/scripts/slidetray.js | 33 | ||||
| -rw-r--r-- | esm/scripts/presentation.js | 36 | ||||
| -rw-r--r-- | esm/scripts/slidetray.js | 20 |
4 files changed, 61 insertions, 30 deletions
@@ -15,7 +15,7 @@ let presentation = { description: `txt.utf8`, selector: `str.selector`, /// MANDATORY - source_url: `str.url, default='./'`, + base_url: `str.url, default='./'`, effect: `none(=default) | cards | flip | fade | cube`, theme: `light(=default) | dark`, navigation: `boolean, default=true`, diff --git a/demos/scripts/slidetray.js b/demos/scripts/slidetray.js index 7c32f5b..ffe5847 100644 --- a/demos/scripts/slidetray.js +++ b/demos/scripts/slidetray.js @@ -8,13 +8,13 @@ define([ const presentation = (setup) => { let factory = { - setup: { /** @object : slidetray paramaters */ }, + setup: { /** @object : slidetray parameters */ }, features: [], defaults: { selector: '.slidetray', - source_url: '', + base_url: '', effect: 'none', theme: 'light', navigation: true, @@ -77,34 +77,35 @@ define([ 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 = ` + let slideHtml = ` <div class="swiper-slide" data-id="${i}"> - <img src="${slide.image}" /> + <img src="${this.setup.base_url}/${slide.image}" /> `; if (slide.poi && Array.isArray(slide.poi)) { - let slideClass = `f-${i}-${j}`; + slide.poi.forEach( (poi, j) => { - - if (poi.link) { + let slideClass = `f-${i}-${j}`; + + if (poi.link) { // link html slideHtml += `<div class="${slideClass}"> - <a href="${poi.link}">${poi.text}</a> + <a href="${poi.link}" target="_blank">${poi.text}</a> </div>`; - + } else { - slideHtml += `<div class="f-${i}-${j}"> + slideHtml += `<div class="${slideClass}"> ${poi.text} </div>`; } - - if (poi.style) { + + if (poi.style) { // link css poi.style.forEach( rs => { // ruleset - css.push(`.${slideClass} ${rs}`); + css.push(`.${slideClass}${rs}`); }); } }) @@ -114,7 +115,7 @@ define([ }); this.presentation.html = html.join('\n'); this.presentation.css = css.join('\n'); - + return this; }, diff --git a/esm/scripts/presentation.js b/esm/scripts/presentation.js index 61e6afc..42d8c05 100644 --- a/esm/scripts/presentation.js +++ b/esm/scripts/presentation.js @@ -2,6 +2,7 @@ export default { name: 'test', title: 'some presentation title', + base_url: 'https://swiperjs.com/demos/images', effect: 'flip', pagination: 'dynamic', @@ -40,10 +41,37 @@ export default { } `, slides: [ - { image: 'https://swiperjs.com/demos/images/nature-1.jpg' }, - { image: 'https://swiperjs.com/demos/images/nature-2.jpg' }, - { image: 'https://swiperjs.com/demos/images/nature-3.jpg' }, - { image: 'https://swiperjs.com/demos/images/nature-4.jpg' }, + { image: 'nature-1.jpg' }, + { + image: 'nature-2.jpg', + poi: [ + { + text: 'some label', + style: [ + `{ position: absolute; top: 75%; left: 25%; + font-size: 3em; font-family:Arial; font-weight:bold; + color:#fff; background:#3337; + border-radius: 6px; padding: 4px 8px; }`, + ':hover { color:red; background: #222; }' + ] + }, + { + text: 'some link', + link: 'https://www.sklavenitis.gr', + style: [ + ` a { position: absolute; top: 80%; left: 25%; + font-size: 3em; font-family:Arial; font-weight:bold; + color:#fff; background:#3337; + border-radius: 6px; padding: 4px 8px; }`, + ' a:hover { color:red; background: #222; }' + ] + + } + ] + }, + { image: 'nature-3.jpg' }, + { image: 'nature-4.jpg' }, + { image: 'nature-5.jpg' } ] } diff --git a/esm/scripts/slidetray.js b/esm/scripts/slidetray.js index bb21aa8..b34737c 100644 --- a/esm/scripts/slidetray.js +++ b/esm/scripts/slidetray.js @@ -5,13 +5,13 @@ import Swiper from 'https://unpkg.com/swiper@11.1.15/swiper-bundle.mjs?module'; const slidetray = (setup) => { let factory = { - setup: { /** @object : slidetray paramaters */ }, + setup: { /** @object : slidetray parameters */ }, features: [], defaults: { selector: '.slidetray', - source_url: '', + base_url: '', effect: 'flip', theme: 'light', navigation: true, @@ -35,6 +35,7 @@ const slidetray = (setup) => { } this.setup = json; this.presentation.initer = this.define_engine_args(json); + return this; }, @@ -82,26 +83,27 @@ const slidetray = (setup) => { this.setup.slides.forEach( (slide, i) => { let slideHtml = ` <div class="swiper-slide" data-id="${i}"> - <img src="${slide.image}" /> + <img src="${this.setup.base_url}/${slide.image}" /> `; if (slide.poi && Array.isArray(slide.poi)) { - let slideClass = `f-${i}-${j}`; + slide.poi.forEach( (poi, j) => { + let slideClass = `f-${i}-${j}`; - if (poi.link) { + if (poi.link) { // link html slideHtml += `<div class="${slideClass}"> - <a href="${poi.link}">${poi.text}</a> + <a href="${poi.link}" target="_blank">${poi.text}</a> </div>`; } else { - slideHtml += `<div class="f-${i}-${j}"> + slideHtml += `<div class="${slideClass}"> ${poi.text} </div>`; } - if (poi.style) { + if (poi.style) { // link css poi.style.forEach( rs => { // ruleset - css.push(`.${slideClass} ${rs}`); + css.push(`.${slideClass}${rs}`); }); } }) |