impelement base_url and points of interest feature

2 files changed, 43 insertions, 13 deletions

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}`);
                             });
                         }
                     })