Skip to content

Commit

Permalink
Ajout d'une url pour l'intégration d'une application mviewer en iframe …
Browse files Browse the repository at this point in the history 
…mviewer#858 (mviewer#860)

* Add url iframe share into sharepanel mviewer#858

* Prettier for js

* Prettier for html

* Prettier html

* Prettier html

* Change method to copy mviewer#858

* prettier html
  • Loading branch information
@Agath21
Agath21 authored Jan 4, 2024
1 parent 11a3a53 commit e0aba24
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 80 deletions.
53 changes: 31 additions & 22 deletions css/mviewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,28 +442,6 @@ p.bjqs-caption{
margin: 0;
}

/* CSS scroll bar style for chrome */

::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
border: skinny plain red;
box-shadow: 0px 0px 3px #blue inset;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border: skinny plain black;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background: #5393c5;
}

img.mv-logo {
max-height: 35px;
padding-top: 0px;
Expand Down Expand Up @@ -2019,3 +1997,34 @@ div#login-box {
.caret-toggle.collapsed h4 .state-icon.notFirstLayer:after {
content: "\2b";/*plus*/
}

/* Sharepanel Iframe */

#urlIframeShare {
font-family: monospace;
width: 100%;
height: 15vh;
background-color: #eaeaea;
border: none;
resize: none;
word-break: break-all;
}

#IframeShare>div {
background-color: #8080802b;
padding: 0.5em;
border-radius: 3px;
}

#IframeShare h5 {
display: flex;
justify-content: space-between;
align-items: center;
}

#IframeShare h5 button{
background: none;
border: none;
}


143 changes: 85 additions & 58 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,9 @@ <h1></h1>
class="navbar-brand menu-toggle"
href="#"
title="Afficher/masquer les thématiques"
i18n="navbar.toggle"
><span class="glyphicon glyphicon-menu-hamburger"></span
></a>
i18n="navbar.toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand" href="#">
<img alt="Logo" src="img/logo/earth-globe.svg" class="mv-logo" />
</a>
Expand All @@ -129,27 +129,27 @@ <h1></h1>
href="#"
data-toggle="modal"
data-target="#thematic-modal"
i18n="nav.responsive.topics"
>Thématiques</a
>
i18n="nav.responsive.topics">
Thématiques
</a>
</li>
<li class="hidden-lg hidden-md">
<a
href="#"
data-toggle="modal"
data-target="#legend-modal"
i18n="nav.responsive.legend"
>Légende</a
>
i18n="nav.responsive.legend">
Légende
</a>
</li>
<li class="hidden-lg hidden-md">
<a
href="#"
data-toggle="modal"
data-target="#help"
i18n="nav.responsive.about"
>A propos</a
>
i18n="nav.responsive.about">
A propos
</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<div class="navbar-form navbar-left" id="coordinates">
Expand All @@ -162,9 +162,9 @@ <h1></h1>
href="#"
data-toggle="modal"
data-target="#lang-popup"
i18n="nav.down.lang"
>Langues</a
>
i18n="nav.down.lang">
Langues
</a>
</li>
<li id="lang-selector" class="dropdown hidden-xs hidden-sm">
<a
Expand Down Expand Up @@ -245,14 +245,14 @@ <h1></h1>
</div>
<a
i18n="search.result.locations"
class="search-header list-group-item disabled hidden"
>Localités</a
>
class="search-header list-group-item disabled hidden">
Localités
</a>
<a
i18n="search.result.entities"
class="search-header list-group-item disabled hidden"
>Entités</a
>
class="search-header list-group-item disabled hidden">
Entités
</a>
</div>
</ul>
</div>
Expand Down Expand Up @@ -314,9 +314,9 @@ <h5 i18n="right.panel.title">Informations</h5>
aria-label="close"
onclick="$('#right-panel').toggleClass('active')"
title="Fermer"
i18n="right.panel.close"
>×</a
>
i18n="right.panel.close">
×
</a>
</div>
<div class="popup-content"></div>
</div>
Expand Down Expand Up @@ -365,14 +365,14 @@ <h5 i18n="right.panel.title">Informations</h5>
</div>
<a
i18n="search.result.locations"
class="search-header list-group-item disabled hidden"
>Localités</a
>
class="search-header list-group-item disabled hidden">
Localités
</a>
<a
i18n="search.result.entities"
class="search-header list-group-item disabled hidden"
>Entités</a
>
class="search-header list-group-item disabled hidden">
Entités
</a>
</div>
<!-- BACKGROUND LAYERS -->
<div id="backgroundlayerstoolbar-gallery">
Expand All @@ -381,10 +381,13 @@ <h5 i18n="right.panel.title">Informations</h5>
</div>
<!-- MVIEWER INFO AND VERSION -->
<div id="mviewerinfosbar" class="hidden-xs">
<span id="powered" i18n="infos.powered">Propulsé par </span>
<a class="mviewer-link" href="https://mviewer.netlify.app/fr/" target="_blank"
>mviewer</a
>
<span id="powered" i18n="infos.powered">Propulsé par</span>
<a
class="mviewer-link"
href="https://mviewer.netlify.app/fr/"
target="_blank">
mviewer
</a>
</div>
<!-- SECOND VERTICAL RIGHT TOOLBAR -->
<div
Expand Down Expand Up @@ -548,9 +551,9 @@ <h5 class="modal-title" i18n="search.panel.title">
<h5 class="modal-title" id="login-panel-title" i18n="layer.authent.title">
Configurer l'accès au service
</h5>
<span id="login-panel-service-url"
><small><i i18n="layer.authent.title">URL du service</i></small></span
>
<span id="login-panel-service-url">
<small><i i18n="layer.authent.title">URL du service</i></small>
</span>
</div>
<div class="modal-body">
<div class="loginmodal-container">
Expand Down Expand Up @@ -598,19 +601,19 @@ <h4 class="modal-title" i18n="addlayers.modal.title">
aria-controls="profile"
role="tab"
data-toggle="tab"
i18n="addlayers.modal.ogc"
>OGC</a
>
i18n="addlayers.modal.ogc">
OGC
</a>
</li>
<li role="presentation">
<a
href="#add_csw"
aria-controls="messages"
role="tab"
data-toggle="tab"
i18n="addlayers.modal.csw"
>CSW</a
>
i18n="addlayers.modal.csw">
CSW
</a>
</li>
</ul>
<!-- Tab panes -->
Expand All @@ -626,15 +629,16 @@ <h4 i18n="addlayers.modal.ogc">
<select
id="addLayers_service_url_select"
class="form-control form-control-sm addLayers_service_url_select">
<option value=""></option></select
><br />
<option value=""></option>
</select>
<br />
...ou saisissez l'url du service :
<input type="text" id="addLayers_service_url" value="" />
<button
onclick="mviewer.tools.addlayers.connect();"
type="button">
Connexion&nbsp;<span
class="glyphicon glyphicon-chevron-right"></span>
Connexion&nbsp;
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
Expand All @@ -648,22 +652,26 @@ <h4 i18n="addlayers.modal.csw">
<select
id="addLayers_service_url_csw_select"
class="form-control form-control-sm addLayers_service_url_select">
<option value=""></option></select
><br />
<option value=""></option>
</select>
<br />
...ou saisissez l'url du service :
<input
type="text"
id="addLayers_service_url_csw"
class="form-control"
value="" /><br />
Filter:<input
value="" />
<br />
Filter:
<input
type="text"
id="addLayers_service_filter_csw"
class="form-control csw_search"
placeholder="Rechercher..." />

<button onclick="mviewer.tools.addlayers.connectCsw();" type="button">
Connexion&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
Connexion&nbsp;
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
Expand Down Expand Up @@ -696,13 +704,13 @@ <h4 i18n="addlayers.modal.csw">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">
<center i18n="share.panel.title">Partager cette carte</center>
<span i18n="share.panel.title">Partager cette carte</span>
</h4>
</div>
<div class="modal-body">
<h6 class="modal-share-title">
<h5 class="modal-share-title">
<strong i18n="share.modal.title">Mode d'affichage</strong>
</h6>
</h5>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group" id="mv-display-mode">
Expand Down Expand Up @@ -730,6 +738,9 @@ <h6 class="modal-share-title">
</div>
</div>
</div>
<h5 class="modal-share-title">
<strong i18n="share.modal.type">Mode de partage</strong>
</h5>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<a
Expand All @@ -738,9 +749,9 @@ <h6 class="modal-share-title">
id="permalinklink"
href="#"
title="Lien permanent vers la carte"
i18n="share.picture.permalink"
><img src="img/share/share_link.png" height="100px"
/></a>
i18n="share.picture.permalink">
<img src="img/share/share_link.png" height="100px" />
</a>
</div>
<div id="share" class="col-md-6 col-sm-6 col-xs-6">
<img
Expand Down Expand Up @@ -778,6 +789,22 @@ <h6 class="modal-share-title">
</form>
</div>
</div>
<div id="IframeShare">
<h5 class="modal-share-title">
<strong i18n="share.title.iframe">
Code d'intégration de la carte en iframe
</strong>
<button
onclick="mviewer.copyToClipboard('urlIframeShare');"
title="Copier le lien"
i18n="share.btn.iframe">
<i class="far fa-copy"></i>
</button>
</h5>
<div>
<span id="urlIframeShare"></span>
</div>
</div>
</div>
</div>
</div>
Expand Down
12 changes: 12 additions & 0 deletions js/mviewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2371,9 +2371,21 @@ mviewer = (function () {
"http://chart.apis.google.com/chart?cht=qr&chs=140x140&chl=" +
encodeURIComponent(url)
);
var urlIframe = `<iframe width="800" height="500" style="border:none;" src="${url}"></iframe>`;
document.getElementById("urlIframeShare").innerText = urlIframe;
return url;
},

/**
* Public Method: copyToClipBoard
*
*/

copyToClipboard: function (divID) {
let textContent = document.getElementById(divID).innerText;
navigator.clipboard.writeText(textContent);
},

/**
* Public Method: getMap
*
Expand Down
Loading

0 comments on commit e0aba24

Please sign in to comment.