Add options to share app in modal mviewer#24

jdev-org · Jan 20, 2025 · ab88c0f · ab88c0f
1 parent 4cf6afa
commit ab88c0f
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 1 deletion.
diff --git 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
@@ -107,10 +107,30 @@ <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="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>
         </div>

diff --git 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 = `<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>');