-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Creation de la route /embed * Lire / charger un permalink * Creer un permalien de partage * Interface de partage * Ajout des informations de contact dans l'edito * TODO : prendre en compte la modification de position d'une couche
- Loading branch information
1 parent
2df0b96
commit dc2d059
Showing
14 changed files
with
471 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,13 @@ | ||
| { | ||
| "contacts": { | ||
| "mail": "[email protected]", | ||
| "networks": { | ||
| "facebook": "https://www.facebook.com/ignfr", | ||
| "twitter": "https://twitter.com/IGNFrance", | ||
| "linkedin": "https://fr.linkedin.com/company/ignfrance", | ||
| "instagram": "https://www.instagram.com/ign_france/?hl=fr" | ||
| } | ||
| }, | ||
| "thematics": [ | ||
| "Administratif", | ||
| "Foncier", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -67,6 +67,8 @@ mapStore.setMap(map) | |
|
|
||
| <style> | ||
| #map { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: inherit; | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| <script lang="js"> | ||
| /** | ||
| * @description | ||
| * Panneau de partage de carte | ||
| * | ||
| * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrButton} | ||
| * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrModal} | ||
| * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrShare} | ||
| */ | ||
| export default {}; | ||
| </script> | ||
|
|
||
| <script lang="js" setup> | ||
| import { useDataStore } from '@/stores/dataStore'; | ||
| import { useMapStore } from '@/stores/mapStore'; | ||
| const dataStore = useDataStore(); | ||
| const mapStore = useMapStore(); | ||
| const props = defineProps({ | ||
| visibility: Boolean, | ||
| shareOptions: Object | ||
| }); | ||
| // paramètres du composant bouton | ||
| const btnTitle = "Ouvrir le panneau de partage de carte"; | ||
| const btnIcon = "fr-icon-link"; // FIXME icone de partage dsfr !? | ||
| const btnLabel = ""; | ||
| // paramètres du composant de la modale | ||
| const title = "Partager une carte"; | ||
| const size = "lg"; | ||
| const shareModalOpened = ref(false); | ||
| const onModalShareOpen = () => { | ||
| shareModalOpened.value = true; | ||
| }; | ||
| const onModalShareClose = () => { | ||
| shareModalOpened.value = false; | ||
| }; | ||
| // les paramètres du composant de partage | ||
| const contacts = dataStore.getContacts(); | ||
| var mail = { | ||
| address : contacts.mail, | ||
| subject : "Sujet", | ||
| body : "Corps du courriel" | ||
| }; | ||
| const shareMail = { | ||
| "to" : `mailto:${mail.address}?subject=${mail.subject}&body=${mail.body}`, | ||
| "label" : "Envoyer un mail" | ||
| }; | ||
| const shareNetworks = [ | ||
| { | ||
| "name": "facebook", | ||
| "label": "Partager sur Facebook", | ||
| "url": contacts.networks.facebook | ||
| }, | ||
| { | ||
| "name": "twitter-x", | ||
| "label": "Partager sur X (anciennement Twitter)", | ||
| "url": contacts.networks.twitter | ||
| }, | ||
| { | ||
| "name": "linkedin", | ||
| "label": "Partager sur LinkedIn", | ||
| "url": contacts.networks.linkedin | ||
| }, | ||
| { | ||
| "name": "instagram", | ||
| "label": "Partager sur Instagram", | ||
| "url": contacts.networks.instagram | ||
| } | ||
| ]; | ||
| // creation de l'iframe de partage | ||
| const iframe = computed(() => { | ||
| return `<iframe | ||
| width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" | ||
| sandbox="allow-forms allow-scripts allow-same-origin" | ||
| src="${mapStore.permalinkShare}" | ||
| allowfullscreen> | ||
| </iframe>`; | ||
| }); | ||
| const target = ref(null); | ||
| onMounted(() => { | ||
| nextTick(function () { | ||
| //code here | ||
| }) | ||
| }); | ||
| onBeforeMount(() => { | ||
| nextTick(function () { | ||
| //code here | ||
| }) | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div id="share-container" ref="target"> | ||
| <DsfrButton | ||
| v-if="props.visibility" | ||
| id="share-button-position" | ||
| class="fr-btn fr-btn--md inline-flex justify-center share-button-size" | ||
| :label="btnLabel" | ||
| :title="btnTitle" | ||
| :icon="btnIcon" | ||
| icon-only | ||
| no-outline | ||
| @click="onModalShareOpen" | ||
| /> | ||
| <DsfrModal | ||
| :opened="shareModalOpened" | ||
| :title="title" | ||
| :size="size" | ||
| @close="onModalShareClose"> | ||
| <!-- slot : c'est ici que l'on customise le contenu ! --> | ||
| <div> | ||
| <p> | ||
| <DsfrShare | ||
| copyLabel="Copier dans le presse-papier" | ||
| :mail="shareMail" | ||
| :networks="shareNetworks" | ||
| title="Partages" | ||
| /> | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| <DsfrInput | ||
| v-model="mapStore.permalink" | ||
| label="Lien permanent vers la carte" | ||
| placeholder="" | ||
| label-visible | ||
| readonly | ||
| descriptionId="" | ||
| /> | ||
| </p> | ||
| <p> | ||
| <DsfrInput | ||
| v-model="iframe" | ||
| label="Copiez le code HTML pour intégrer la carte dans un site" | ||
| placeholder="" | ||
| isTextarea="true" | ||
| label-visible | ||
| readonly | ||
| descriptionId="" | ||
| style="height: 200px;" | ||
| /> | ||
| </p> | ||
| </div> | ||
| </DsfrModal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .fr-btn--instagram::before { | ||
| -webkit-mask-image: url("../../../../node_modules/@gouvfr/dsfr/dist/icons/logo/instagram-line.svg"); | ||
| mask-image: url("../../../../node_modules/@gouvfr/dsfr/dist/icons/logo/instagram-line.svg"); | ||
| } | ||
| </style> | ||
|
|
||
| <style scoped> | ||
| #share-container {} | ||
| #share-button-position { | ||
| position: absolute; | ||
| left: 10px; | ||
| top: 225px; | ||
| z-index: 1000; | ||
| } | ||
| .share-button-size { | ||
| width: 40px; | ||
| height: 40px; | ||
| color: white; | ||
| } | ||
| .share-iframe-input { | ||
| height: 200px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { useUrlSearchParams } from '@vueuse/core'; | ||
|
|
||
| /** | ||
| * Lecture du permalink pour y extraire les informations. | ||
| * La structure est identique au permalien de la carte | ||
| * avec quelques paramètres supplementaires : | ||
| * - centre : ... | ||
| * - x / y : ... | ||
| * - lon / lat : ... | ||
| * - layers : ... | ||
| * - zoom : ... | ||
| * - commentaire : "m" string avec contenu encodé | ||
| * - titre : "t" string avec contenu encodé | ||
| * - localisation : "g" boolean, ajout d'un icone | ||
| * - informations : "i" boolean, ajout d'informations prédéfinies | ||
| * | ||
| * @example | ||
| * http://localhost:5173/cartes.gouv.fr-entree-carto/embed? | ||
| * &c=417070.66959457495,5975301.705064449 | ||
| * &z=10 | ||
| * &l=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS(1;1;0),ACCES.BIOMETHANE$GEOPORTAIL:OGC:WMTS(0.47;1;0) | ||
| * &permalink=yes | ||
| * | ||
| * @see mapStore | ||
| */ | ||
| export function useUrlParams() { | ||
| var params = {}; | ||
| const urlParams = useUrlSearchParams("history"); | ||
| if (urlParams) { | ||
| const keys = Object.keys(urlParams); | ||
| for (let index = 0; index < keys.length; index++) { | ||
| const key = keys[index]; | ||
| switch (key) { | ||
| case "c": | ||
| var xy = urlParams[key].split(","); | ||
| params.x = xy[0]; | ||
| params.y = xy[1]; | ||
| params.lon = 0; // on ne fait pas la conversion... | ||
| params.lat = 0; | ||
| params.center = [params.x, params.y]; | ||
| break; | ||
| case "l": | ||
| params.layers = urlParams[key]; | ||
| break; | ||
| case "w": | ||
| // FIXME utile ? la liste devrait être fixe... | ||
| params.controls = urlParams[key]; | ||
| break; | ||
| case "m": | ||
| console.debug("not yet implemented !"); | ||
| break; | ||
| case "t": | ||
| console.debug("not yet implemented !"); | ||
| break; | ||
| case "i": | ||
| console.debug("not yet implemented !"); | ||
| break; | ||
| case "z": | ||
| params.zoom = parseInt(urlParams[key], 10); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| return params; | ||
| }; |
Oops, something went wrong.