From 943f66c1c60c41c56b8ef0066478b69251f9048f Mon Sep 17 00:00:00 2001
From: Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr>
Date: Tue, 26 Nov 2024 11:57:19 +0200
Subject: impelement base_url and points of interest feature

---
 README.md                   |  2 +-
 demos/scripts/slidetray.js  | 33 +++++++++++++++++----------------
 esm/scripts/presentation.js | 36 ++++++++++++++++++++++++++++++++----
 esm/scripts/slidetray.js    | 20 +++++++++++---------
 4 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index f8eb8b7..58da595 100644
--- a/README.md
+++ b/README.md
@@ -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}`);
                             });
                         }
                     })
-- 
cgit v1.2.3