From 667b5e237fda3c09c90bd378e3a6442e9624bf59 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 10:52:55 +0100 Subject: [PATCH 01/18] Change btn system for carousel #26 --- templates/carousel.css | 72 +++++++++++++++++++++--------------------- templates/carousel.js | 4 +-- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/templates/carousel.css b/templates/carousel.css index 72f90b4..cfc8a8e 100644 --- a/templates/carousel.css +++ b/templates/carousel.css @@ -28,6 +28,16 @@ left: 47%; top: 135px; } + + .nextButton { + bottom: 45%; + right: 2%; + } + + .precButton { + bottom: 45%; + left: 2%; + } } @media (max-width: 768px) { @@ -61,6 +71,16 @@ top: 135px; left: 88%; } + + .nextButton { + bottom: 53%; + right:35%; + } + + .precButton { + bottom: 53%; + left: 35%; + } } /* PC Screen */ @@ -68,8 +88,6 @@ bottom: 1em; } - - #panel-story { background-color: white; padding: 1em; @@ -108,42 +126,24 @@ margin: 0; } -.nextButton { - position: fixed; - bottom: 45%; - right: 2%; +.carButton { + position: fixed; z-index: 10; - border-radius: 50px; -} - -.precButton { - position: fixed; - bottom: 45%; - left: 2%; - z-index: 10; - border-radius: 52px; -} - -.nextButton a { - display: block; - width: 50px; - height: 50px; - background: url(../img/nextButton.png) 0 0 no-repeat; cursor: pointer; + background-color: #212529; + color: white; + height: 45px; + width: 45px; + display: flex; + justify-content: center; + align-items: center; + font-size: xx-large; + border-radius: 1em; + opacity: 1; + transition: 0.3s; + line-height: 0; } -.nextButton a:hover { - background: url(../img/nextButton.png) 0 -50px no-repeat; +.carButton:hover { + opacity: .7; } - -.precButton a { - display: block; - width: 50px; - height: 50px; - background: url(../img/precButton.png) 0 0 no-repeat; - cursor: pointer; -} - -.precButton a:hover { - background: url(../img/precButton.png) 0 -50px no-repeat; -} \ No newline at end of file diff --git a/templates/carousel.js b/templates/carousel.js index af2ae97..8e1b99d 100644 --- a/templates/carousel.js +++ b/templates/carousel.js @@ -45,10 +45,10 @@ templates.carousel = function(dom, div) { $("#panel-story").append(tpl); _div.append([ '
', - ' ', + '', '
', '
', - '
', + '', '
', '
', '', From b89b9d70976902e6ee753f50f050f7f220962b25 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 10:55:06 +0100 Subject: [PATCH 02/18] Fix --- templates/carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/carousel.js b/templates/carousel.js index 8e1b99d..a64df8d 100644 --- a/templates/carousel.js +++ b/templates/carousel.js @@ -48,7 +48,7 @@ templates.carousel = function(dom, div) { '', '
', '
', - '
', + '
', '
', '
', '', From 7b6296279c2d66af4cadb8017aa6672738c34549 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 11:22:49 +0100 Subject: [PATCH 03/18] Add new param to to define a style color for story #21 --- README.md | 2 ++ js/storymap.js | 13 +++++++++---- stories/demo_carousel/config.json | 2 +- templates/carousel.css | 6 +++++- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index afdfdc7..bdc9283 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,8 @@ Exemple : ##### theme * prototype **theme.**`css`: "url vers le fichier css à utliser pour personnaliser la storymap" (str). + * prototype + **theme.**`color`: "paramètre permettant de définir le code couleur de la storie (couleur des boutons et de la barre de progression pour le mode carousel. Si non définie, la couleur par défaut est #212529)" (str). Exemple : ``` diff --git a/js/storymap.js b/js/storymap.js index e051dca..44a7138 100755 --- a/js/storymap.js +++ b/js/storymap.js @@ -142,14 +142,19 @@ ks = (function() { if (options.theme && options.theme.css) { var cssfile = [_conf, options.theme.css].join(""); $('head').append(''); - } else if (options.theme && options.theme.color) { - $("#content-title").css("color", options.theme.color); - } + } + //Add style variables + var styleNode = document.createElement('style'); + document.getElementsByTagName('head')[0].appendChild(styleNode); + if(options.theme && options.theme.color){ + var styleColorStorie = document.createTextNode(':root {--colorStorie :'+ options.theme.color +';}'); + styleNode.appendChild(styleColorStorie); + } //Map title $("#content-title h1").text(options.data.title); $("#content-title h3").text(options.data.subtitle); //Map width - $("#map").css("width", options.map.width); + $("#map").css("width", options.map.width); // templates config _template = new templates[options.data.template.name](document, $("#template")); // Config map features styles diff --git a/stories/demo_carousel/config.json b/stories/demo_carousel/config.json index 8a56126..f9bd441 100644 --- a/stories/demo_carousel/config.json +++ b/stories/demo_carousel/config.json @@ -6,7 +6,7 @@ "enabled":"true" }, "theme": { - "css": "demo.css" + "color" : "#009688" }, "tooltip": { "fields": [ diff --git a/templates/carousel.css b/templates/carousel.css index cfc8a8e..fb19570 100644 --- a/templates/carousel.css +++ b/templates/carousel.css @@ -126,11 +126,15 @@ margin: 0; } +.progress-bar{ + background-color: var(--colorStorie, #212529); +} + .carButton { position: fixed; z-index: 10; cursor: pointer; - background-color: #212529; + background-color: var(--colorStorie, #212529); color: white; height: 45px; width: 45px; From 84b29d214c0dc7cc2e7ab76ab9f46ad4e3174c43 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 11:49:39 +0100 Subject: [PATCH 04/18] Create new param to panel size #27, fix map center #23 and delete map.width --- README.md | 16 +++++++++------- js/storymap.js | 13 ++++++++----- stories/demo_carousel/config.json | 2 +- stories/demo_list/config.json | 3 +-- templates/carousel.css | 8 ++++---- templates/list.css | 8 ++++---- 6 files changed, 27 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index bdc9283..57e2783 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,8 @@ Exemple : "center": [-227028,6182514] } ``` - + * prototype + **map.**`width`: "taille de la carte. (supprimé pour les version >1.0. La taille de la carte est calculée automatiquement selon le paramètre data.template.size)" * prototype **map.**`zoom`: "zoom (1 à 20)" (str) * descriptif : zoom utilisé lors de l'initialisation de la carte et du zoom sur les entités géographiques. @@ -168,15 +169,16 @@ Exemple : ``` * prototype - **data.**`template`: {`name`: ""} - - * descriptif : Template utilisé par la storymap au choix entre carousel et list. + **data.**`template`: {`name`: ""}: Template utilisé par la storymap au choix entre carousel et list. + * prototype + **data.**`template`: {`size`: ""}: Taille de la fenêtre avec les informations attributaires (exprimée en %). Sin non définie, la taille par défaut est 50% en mode carousel et 30% en mode list. En mode mobile, cette valeur n'est pas prise en compte car l'affichage est adapté. Exemple : ``` - { - "template": "carousel" - } + "template": { + "name": "carousel", + "size": "20%" + }, ``` diff --git a/js/storymap.js b/js/storymap.js index 44a7138..2ca112f 100755 --- a/js/storymap.js +++ b/js/storymap.js @@ -149,12 +149,15 @@ ks = (function() { if(options.theme && options.theme.color){ var styleColorStorie = document.createTextNode(':root {--colorStorie :'+ options.theme.color +';}'); styleNode.appendChild(styleColorStorie); - } + } + // Panel size + if(options.data.template && options.data.template.size){ + var stylePanelSize = document.createTextNode(':root {--panelStorieSize :'+ options.data.template.size +';}'); + styleNode.appendChild(stylePanelSize); + } //Map title $("#content-title h1").text(options.data.title); - $("#content-title h3").text(options.data.subtitle); - //Map width - $("#map").css("width", options.map.width); + $("#content-title h3").text(options.data.subtitle); // templates config _template = new templates[options.data.template.name](document, $("#template")); // Config map features styles @@ -444,7 +447,7 @@ ks = (function() { //Todo center with offset } else { - _map.getView().fit(feat.getGeometry(), { size: _map.getSize(), padding: [0, offset, 0, 0], nearest: false, maxZoom: _options.map.zoom}); + _map.getView().fit(feat.getGeometry(), { size: _map.getSize(), padding: [0, 0, 0, 0], nearest: false, maxZoom: _options.map.zoom}); } }; diff --git a/stories/demo_carousel/config.json b/stories/demo_carousel/config.json index f9bd441..e26aefc 100644 --- a/stories/demo_carousel/config.json +++ b/stories/demo_carousel/config.json @@ -27,7 +27,7 @@ "subtitle": "Mode carousel", "template": { "name": "carousel", - "options": {} + "size": "40%" }, "url": "stories/demo_carousel/rnr.geojson", "orderby": "ordre", diff --git a/stories/demo_list/config.json b/stories/demo_list/config.json index 9643257..a711962 100644 --- a/stories/demo_list/config.json +++ b/stories/demo_list/config.json @@ -26,8 +26,7 @@ "title": "StoryMap de démo", "subtitle": "Mode list", "template": { - "name": "list", - "options": {} + "name": "list" }, "url": "stories/demo_list/rnr.geojson", "orderby": "ordre", diff --git a/templates/carousel.css b/templates/carousel.css index fb19570..21288d4 100644 --- a/templates/carousel.css +++ b/templates/carousel.css @@ -3,7 +3,7 @@ @media (min-width: 768px) { #map { position: fixed; - width: 100vw; + width: calc(100% - (var(--panelStorieSize, 50%))); height: 100vh; margin: 0; } @@ -14,18 +14,18 @@ #panel-story { position: fixed; - width: 50%; + width: var(--panelStorieSize, 50%); right: 0px; overflow-y: auto; } #tools { top: 10px; - left: 47%; + left: calc(100% - (var(--panelStorieSize, 50%) + 4em)); } #menu { - left: 47%; + left: calc(100% - (var(--panelStorieSize, 50%) + 4em)); top: 135px; } diff --git a/templates/list.css b/templates/list.css index 764dda8..753efaa 100644 --- a/templates/list.css +++ b/templates/list.css @@ -60,24 +60,24 @@ @media (min-width: 768px) { #map { position: fixed; - width: 100vw; + width: calc(100% - (var(--panelStorieSize, 30%))); height: 100vh; margin: 0; } #panel-story { position: fixed; - width: 30vw; + width: var(--panelStorieSize, 30%); right: 0px; } #tools { top: 10px; - left: 67%; + left: calc(100% - (var(--panelStorieSize, 30%) + 4em)); } #menu { - left: 67%; + left: calc(100% - (var(--panelStorieSize, 30%) + 4em)); top: 135px; } } \ No newline at end of file From d351479dd6ed000e4eeb96f3c764714cdab2f242 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 11:51:01 +0100 Subject: [PATCH 05/18] Fix doc --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 57e2783..9c45615 100644 --- a/README.md +++ b/README.md @@ -170,8 +170,9 @@ Exemple : * prototype **data.**`template`: {`name`: ""}: Template utilisé par la storymap au choix entre carousel et list. - * prototype - **data.**`template`: {`size`: ""}: Taille de la fenêtre avec les informations attributaires (exprimée en %). Sin non définie, la taille par défaut est 50% en mode carousel et 30% en mode list. En mode mobile, cette valeur n'est pas prise en compte car l'affichage est adapté. + + * prototype + **data.**`template`: {`size`: ""}: Taille de la fenêtre avec les informations attributaires (exprimée en %). Si non définie, la taille par défaut est 50% en mode carousel et 30% en mode list. En mode mobile, cette valeur n'est pas prise en compte car l'affichage est adapté. Exemple : ``` From cb4e09a93f310dd6be91ba49ff95ccea1d5bdd93 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 12:11:44 +0100 Subject: [PATCH 06/18] Add dynamic and change title default #28 --- index.html | 2 +- js/storymap.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4f7e34e..8e02598 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <base href="/storymap/"></base> - <title>Kartenn story + Storymap diff --git a/js/storymap.js b/js/storymap.js index 2ca112f..b79358c 100755 --- a/js/storymap.js +++ b/js/storymap.js @@ -157,7 +157,11 @@ ks = (function() { } //Map title $("#content-title h1").text(options.data.title); - $("#content-title h3").text(options.data.subtitle); + $("#content-title h3").text(options.data.subtitle); + if(options.data.title){ + document.title = options.data.title; + } + // templates config _template = new templates[options.data.template.name](document, $("#template")); // Config map features styles From 92f4be7c088fc1de167bc1c9f75cc5208cc5be1c Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 12:36:19 +0100 Subject: [PATCH 07/18] Add new param for writing content in modal credit #25 --- index.html | 10 ++++------ js/storymap.js | 3 +++ stories/demo_list/config.json | 3 ++- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 8e02598..40fb817 100755 --- a/index.html +++ b/index.html @@ -110,9 +110,7 @@
Partager
-
-
-
+
@@ -125,9 +123,9 @@
Partager
Crédits
-
-
-
+
+
+

Cette application a été réalisée à l'aide de la solution libre storymap.

diff --git a/js/storymap.js b/js/storymap.js index b79358c..c4d1b10 100755 --- a/js/storymap.js +++ b/js/storymap.js @@ -110,6 +110,9 @@ ks = (function() { _options = options; if (options.menu && options.menu.enabled === "true") { $("#menu").removeClass("no-visible"); + if (options.menu.credit) { + $("#panelInfos_content").html(options.menu.credit); + } } else { $("#menu").addClass("no-visible"); } diff --git a/stories/demo_list/config.json b/stories/demo_list/config.json index a711962..e32f4be 100644 --- a/stories/demo_list/config.json +++ b/stories/demo_list/config.json @@ -3,7 +3,8 @@ "iframe": "stories/demo_list/splash.html" }, "menu" : { - "enabled":"true" + "enabled":"true", + "credit":"
Sources :
Les données proviennent de GéoBretagne Consulter les métadonnées" }, "theme": { "css": "demo.css" From 4cf6afa18c0ed04ede924313b5654db54edf9eb2 Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 12:40:28 +0100 Subject: [PATCH 08/18] Add credit param to doc #25 --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9c45615..b7ca6b8 100644 --- a/README.md +++ b/README.md @@ -62,11 +62,14 @@ Exemple : ##### menu * prototype **menu.**`enabled`: "true" (boolean). + * prototype + **menu.**`credit`: "Ce paramètre permet de saisir des informations affichées dans la fenêtre modale Crédits. Il est possible de saisir du html pour une personnalisation avancée. Attention, ce paramètre est valable seulement si le menu est actif `enabled:true` " Exemple : ``` { - "enabled":"true" + "enabled":"true", + "credit" : "Les données proviennent de GéoBretagne" } ``` @@ -121,7 +124,7 @@ Exemple : * prototype **map.**`overview`: "true" (booleen) - * descriptif : Parmet d'afficher ou de masquer la mini carte de localisation. + * descriptif : Permet d'afficher ou de masquer la mini carte de localisation. Exemple : ``` From ab88c0fc6cf8aa32fc52980da89fabe33910866f Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 15:05:41 +0100 Subject: [PATCH 09/18] Add options to share app in modal #24 --- css/storymap.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 22 +++++++++++++++- js/storymap.js | 17 ++++++++++++ 3 files changed, 105 insertions(+), 1 deletion(-) diff --git a/css/storymap.css b/css/storymap.css index 5ab221a..cf7c204 100644 --- a/css/storymap.css +++ b/css/storymap.css @@ -75,3 +75,70 @@ audio { } } +/* Share panel */ +.is-hidden { + display: none; +} + +.iconShare__list > a { + display: flex; + flex-direction: column; + align-items: center; + margin-right: 2em; + font-size: small; + text-decoration: none; + color: currentColor; + transition: 0.3s; +} + +.iconShare__list > a:hover { + cursor: pointer; + opacity: .8; +} + +.iconShare__list { + display: flex; +} + +.iconShare__list > a > i { + font-size: large; + background-color: #212529; + color: white; + border-radius: 2em; + width: 45px; + height: 45px; + display: flex; + justify-content: center; + align-items: center; +} + +#block__ShareLink { + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + justify-content: flex-start; + border: 1px solid #d1d1d1; + padding: 0.5em .5em; + border-radius: .7em; +} + +#urlShare__link { + border: none; + width: 100%; +} + +#blockIframe > div { + display: flex; + align-items: center; + align-content: center; + justify-content: space-between; +} + +#blockIframe > .textEdit { + border: 1px solid #d1d1d1; + padding: 0.5em .5em; + border-radius: .7em; + font-family: monospace; + font-size: smaller; +} diff --git a/index.html b/index.html index 40fb817..af92304 100755 --- a/index.html +++ b/index.html @@ -107,10 +107,30 @@
-
Partager
+
Partager cette storymap
+
+ E-mail + Intégrer + WhatsApp + Facebook + X +
+ +
+
Lien de partage
+
+ + +
diff --git a/js/storymap.js b/js/storymap.js index c4d1b10..7e3fee0 100755 --- a/js/storymap.js +++ b/js/storymap.js @@ -116,6 +116,23 @@ ks = (function() { } else { $("#menu").addClass("no-visible"); } + //Url to panel share + const currentUrlApp = window.location.href; + $("#urlShare__link").val(currentUrlApp); + let urlEmail = `mailto:?&body=` + encodeURIComponent(currentUrlApp); + let urlFacebook = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(currentUrlApp); + let urlX = "https://twitter.com/intent/post?url=" + encodeURIComponent(currentUrlApp); + let urlWhatapp = "https://wa.me/?text=" + encodeURIComponent(currentUrlApp); + const btnEmail = document.getElementById('btnShareEmail'); + const btnFacebook = document.getElementById('btnShareFacebook'); + const btnX = document.getElementById('btnShareX'); + const btnWhatapp = document.getElementById('btnShareWhatapp'); + btnFacebook.setAttribute("href", urlFacebook); + btnX.setAttribute("href", urlX); + btnWhatapp.setAttribute("href", urlWhatapp); + btnEmail.setAttribute("href", urlEmail); + let urlIframe = ``; + document.getElementById("block__IframeUrl").innerText = urlIframe; //splash config if (options.splash && !options.splash.iframe) { $("#splash").prepend('

'); From 685b28298bc5131dfd59bd916c331df4e9ac267b Mon Sep 17 00:00:00 2001 From: Agath21 Date: Mon, 20 Jan 2025 15:35:25 +0100 Subject: [PATCH 10/18] Fix default style for splash #30 --- css/storymap.css | 2 +- index.html | 4 ++-- js/storymap.js | 5 +---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/css/storymap.css b/css/storymap.css index cf7c204..ec44bcb 100644 --- a/css/storymap.css +++ b/css/storymap.css @@ -44,7 +44,7 @@ body { position: fixed; z-index: 50; width: 100%; - color: #ffffff; + background-color: #fffffff5; height: 100%; top: 0px; left: 0px; diff --git a/index.html b/index.html index af92304..9670c3e 100755 --- a/index.html +++ b/index.html @@ -49,8 +49,8 @@