Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Evolutions et corrections de bugs #32

Merged
merged 18 commits into from
Feb 6, 2025
Merged

Evolutions et corrections de bugs #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
667b5e2
Change btn system for carousel #26
Agath21 Jan 20, 2025
b89b9d7
Fix <i>
Agath21 Jan 20, 2025
7b62962
Add new param to to define a style color for story #21
Agath21 Jan 20, 2025
84b29d2
Create new param to panel size #27, fix map center #23 and delete map…
Agath21 Jan 20, 2025
d351479
Fix doc
Agath21 Jan 20, 2025
cb4e09a
Add dynamic <title> and change title default #28
Agath21 Jan 20, 2025
92f4be7
Add new param for writing content in modal credit #25
Agath21 Jan 20, 2025
4cf6afa
Add credit param to doc #25
Agath21 Jan 20, 2025
ab88c0f
Add options to share app in modal #24
Agath21 Jan 20, 2025
685b282
Fix default style for splash #30
Agath21 Jan 20, 2025
5254bcf
Add new param to manage btn menu #29
Agath21 Jan 20, 2025
3c7b092
Change features color demo
Agath21 Jan 20, 2025
de51999
Fix btn carousel
Agath21 Jan 20, 2025
3a4a2ad
Fix btn carousel
Agath21 Jan 20, 2025
dd8d76a
Fix carousel mode
Agath21 Jan 20, 2025
d6e3268
Fix demos with evol
Agath21 Jan 21, 2025
c242a23
Fix mode list with renderFeatures #31 and update default style for al…
Agath21 Jan 21, 2025
db1009a
Delete ks-space to carousel
Agath21 Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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