Skip to content

Commit

Permalink
Merge pull request #32 from jdev-org/storymap_evolution
Browse files Browse the repository at this point in the history 
Evolutions et corrections de bugs
  • Loading branch information
@Agath21
Agath21 authored Feb 6, 2025
2 parents be8a0ad + db1009a commit 18a6824
Show file tree
Hide file tree
Showing 34 changed files with 365 additions and 482 deletions.
33 changes: 23 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,18 +61,28 @@ Exemple :

##### menu
* prototype
**menu.**`enabled`: "true" (boolean).
**menu.**`enabled`: "true" (boolean)(supprimé pour version > 1.0).
* prototype
**menu.**`shareenabled`: "true" (boolean). Ce paramètre active le bouton Partage permettant d'accéder à la fenêtre avec toutes les options de partage de la storymap
* prototype
**menu.**`creditenabled`: "true" (boolean). Ce paramètre active le bouton Crédits permettant d'accéder à la fenêtre avec les informations complémentaires
* 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"
"shareenabled":"true",
"creditenabled":"true",
"credit" : "Les données proviennent de <a href='https://geobretagne.fr/'>GéoBretagne</a>"
}
```

##### 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 :
```
Expand Down Expand Up @@ -106,7 +116,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.
Expand All @@ -118,7 +129,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 :
```
Expand Down Expand Up @@ -166,15 +177,17 @@ 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 %). 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 :
```
{
"template": "carousel"
}
"template": {
"name": "carousel",
"size": "20%"
},
```


Expand Down
75 changes: 73 additions & 2 deletions css/storymap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,14 @@ body {
z-index: 50;
}

#menu.no-visible {
.no-visible {
display: none;
}

img {
max-width: 100%;
}

.ol-zoom {
display: none;
}
Expand All @@ -44,7 +48,7 @@ body {
position: fixed;
z-index: 50;
width: 100%;
color: #ffffff;
background-color: #fffffff5;
height: 100%;
top: 0px;
left: 0px;
Expand Down Expand Up @@ -75,3 +79,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;
}
52 changes: 32 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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</title>
<title>Storymap</title>
<link rel="stylesheet" href="lib/bootstrap/5.3.3/bootstrap.min.css">
<link rel="stylesheet" href="lib/bootstrap_icons/1.11.3/bootstrap-icons.min.css">
<script src="lib/jquery/3.7.1/jquery-3.7.1.min.js"></script>
Expand All @@ -24,22 +24,16 @@
<button role="button" id="btn-zoomplus" href="#" onclick="ks.menuaction('zoomplus');" title="Zoomer" class="btn btn-light">
<i class="bi bi-plus-lg"></i>
</button>
<button role="button" id="btn-home" href="#" onclick="ks.menuaction('home');" title="Accueil" class="btn btn-light">
<i class="bi bi-house-door"></i>
<button role="button" id="btn-extent" href="#" onclick="ks.menuaction('extent');" title="Revenir à l'étendue initiale" class="btn btn-light">
<i class="bi bi-fullscreen"></i>
</button>
<button role="button" id="btn-zoommoins" href="#" onclick="ks.menuaction('zoommoins');" title="Dézoomer" class="btn btn-light">
<i class="bi bi-dash"></i>
</button>
</div>
<div id="menu" class="btn-group-vertical no-visible" role="group" aria-label="Vertical button group" >
<button role="button" id="btn-extent" href="#" onclick="ks.menuaction('extent');" title="Revenir à l'étendue initiale" class="btn btn-light">
<i class="bi bi-fullscreen"></i>
</button>
<button role="button" id="btn-infos" href="#" onclick="ks.menuaction('infos');" title="Crédits" class="btn btn-light">
<i class="bi bi-info-circle"></i>
</button>
<button role="button" id="btn-share" href="#" onclick="ks.menuaction('share');" title="Partager" class="btn btn-light">
<i class="bi bi-share"></i>
<div id="menu" class="btn-group-vertical " role="group" aria-label="Vertical button group" >
<button role="button" id="btn-home" href="#" onclick="ks.menuaction('home');" title="Accueil" class="btn btn-light no-visible">
<i class="bi bi-house-door"></i>
</button>
</div>
<div id="content-title" style="display: none;">
Expand All @@ -49,8 +43,8 @@ <h3></h3>
<div id="feature-info" class="" data-bs-toggle="tooltip" title=""></div>
<div id="template" ></div>
<div id="splash" style="display: none;">
<div class="story-btn story-btn-next" style="opacity: 1;">
<a class="btn btn-default" onclick="$('#splash').fadeOut();$('#content-title').show();">> </a>
<div class="story-btn story-btn-next container px-5" style="opacity: 1;">
<a class="btn btn-dark" onclick="$('#splash').fadeOut();$('#content-title').show();">Accéder</a>
</div>
</div>
<!-- Modal -->
Expand Down Expand Up @@ -107,11 +101,29 @@ <h5 class="modal-title"></h5>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Partager</h5>
<h5 class="modal-title">Partager cette storymap</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" >
<div class="row">
<div class="modal-body">
<div class="iconShare__list mb-3">
<a id="btnShareEmail"><i class="bi bi-envelope"></i><span>E-mail</span></a>
<a onclick="document.querySelector('#blockIframe').classList.toggle('is-hidden');"><i class="bi bi-code"></i><span>Intégrer</span></a>
<a id="btnShareWhatapp" target="_blank"><i class="bi bi-whatsapp"></i><span>WhatsApp</span></a>
<a id="btnShareFacebook" target="_blank"><i class="bi bi-facebook"></i><span>Facebook</span></a>
<a id="btnShareX" target="_blank"><i class="bi bi-twitter-x"></i><span>X</span></a>
</div>
<div id="blockIframe" class="is-hidden">
<div class="mb-2">
<h6>Code d'intégration en iframe</h6>
<button class="btn btn-dark btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('block__IframeUrl').textContent);">Copier</button>
</div>
<div class="textEdit" id="block__IframeUrl" contentEditable></div>
</div>
<hr>
<h6>Lien de partage</h6>
<div id="block__ShareLink">
<input id="urlShare__link" type="text" value=""></span>
<button type="button" class="btn btn-dark btn-sm" onclick="navigator.clipboard.writeText(document.getElementById('urlShare__link').value)">Copier</button>
</div>
</div>
</div>
Expand All @@ -125,9 +137,9 @@ <h5 class="modal-title">Partager</h5>
<h5 class="modal-title">Crédits</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" >
<div class="row">
</div>
<div class="modal-body">
<div id="panelInfos_content" class="mb-2"></div>
<p>Cette application a été réalisée à l'aide de la solution libre <a href="https://github.com/mviewer/storymap" target="_blank">storymap</a>.</p>
</div>
</div>
</div>
Expand Down
62 changes: 48 additions & 14 deletions js/storymap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,23 +108,45 @@ ks = (function() {

var _init = function(options) {
_options = options;
if (options.menu && options.menu.enabled === "true") {
$("#menu").removeClass("no-visible");
} else {
$("#menu").addClass("no-visible");
if (options.menu && options.menu.creditenabled === "true") {
var creditbtn = `<button role="button" id="btn-infos" href="#" onclick="ks.menuaction('infos');" title="Crédits" class="btn btn-light"><i class="bi bi-info-circle"></i></button>`;
$("#menu").append(creditbtn);
if (options.menu.credit) {
$("#panelInfos_content").html(options.menu.credit);
}
}
if (options.menu && options.menu.shareenabled === "true") {
var sharebtn = `<button role="button" id="btn-share" href="#" onclick="ks.menuaction('share');" title="Partager" class="btn btn-light"><i class="bi bi-share"></i></button>`;
$("#menu").append(sharebtn);
}
//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 = `<iframe width="800" height="500" style="border:none;" src="${currentUrlApp}"></iframe>`;
document.getElementById("block__IframeUrl").innerText = urlIframe;
//splash config
if (options.splash && !options.splash.iframe) {
$("#splash").prepend('<div class="col-md-4 col-md-offset-4"><h1></h1><p></p>');
$("#splash").css('background-color','rgba(12, 12, 12, .9)');
$("#splash").prepend('<div class="container p-5"><h1>'+ options.splash.title +'</h1><h5>'+ options.splash.text +'</h5>');
$("#splash").show();
$("#splash h1").text(options.splash.title);
$("#splash p").text(options.splash.text);
$("#btn-home").toggleClass("no-visible");
} else if (options.splash && options.splash.iframe) {
$("#splash .story-btn-next").remove();
$("#splash").prepend('<iframe src="'+options.splash.iframe+'" style="height:100%;border:none;width:100%;" scrolling="no"></iframe>');
$("#splash").css('background-color','#ffffff');
$("#splash").show();
$("#btn-home").toggleClass("no-visible");
} else {
$("#content-title").show();
}
Expand All @@ -142,14 +164,26 @@ ks = (function() {
if (options.theme && options.theme.css) {
var cssfile = [_conf, options.theme.css].join("");
$('head').append('<link rel="stylesheet" href="'+cssfile+'" type="text/css" />');
} 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);
}
// 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);
if(options.data.title){
document.title = options.data.title;
}

// templates config
_template = new templates[options.data.template.name](document, $("#template"));
// Config map features styles
Expand Down Expand Up @@ -439,7 +473,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});
}
};

Expand Down
Loading

0 comments on commit 18a6824

Please sign in to comment.