splash screen added

m-lmi · Dec 6, 2023 · 5c5052e · 5c5052e
1 parent b017eb3
commit 5c5052e
Show file tree

Hide file tree

Showing 8 changed files with 494 additions and 70 deletions.
diff --git a/obyggdanefnd/index.html b/obyggdanefnd/index.html
@@ -38,6 +38,61 @@
 </head>
 
 <body>
+   <!-- splash screen--> 
+   <modal id="splashModal" class="modal drag-area">
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <h2 class="modal-title ">Óbyggðanefnd þrívíddarkort</h2>
+      <!-- ... -->
+      <h4 class="modal-disclaimer-title">Fyrirvari</h4>
+      <p class="modal-disclaimer">Þetta þrívíddarkort, sem ber heitið "Óbyggðanefnd þrívíddarkort," sýnir gögn sem tengjast umræðufundum óbyggðanefndar á Vestfjörðum.
+
+        Þrívíddarkortið býður upp á mörg verkfæri til að einfalda ákvarðanatöku og hafa sjónrænt samhengi af svæðum á Íslandi sem erfitt og kostnaðarsamt er að nálgast.
+
+        Þótt við leggjum áherslu á nákvæmni gagnanna ábyrgjumst við ekki réttmæti þeirra upplýsinga sem birtast 
+        á kortinu. <br /><br />
+        Tiltæk verkfæri leyfa, mælingar í þrívídd, veður- og dagsbirtuhermi, marga möguleika til að sýna lög til að skilgreina mörk eins og ár, vötn og sveitarfélagsmörk, verkfæri til að breyta lagi í beinni og háþróuð leitartæki fyrir örnefni. Smá vísir neðst til hægri á kortinu sýnir hæðina á músarstaðnum.
+        Mikið úrval grunnkorta gerir notandanum kleift að finna það sem hentar best fyrir notkun þeirra.<br /><br />
+        Notkun þessa korts er á ábyrgð notanda.<br /><br />
+        Við óskum þér ánægjulegrar upplifunar og góðrar vinnu með þetta þrívíddarkort.
+        </p>
+      <!-- ... -->
+      <h4 class="modal-guide-title">Leiðbeiningar</h4>
+      <p class="modal-guide">
+        Leiðbeiningar: <a href="https://leidbeiningar.lmi.is/files/Kortasj%C3%A1-user%20guide%20-%203D_IS.pdf" class="modal-link" target="_blank">Ýttu hér</a><br />
+      </p>  
+      <!-- ... -->     
+      <h4 class="modal-guide-title">Viðbótarupplýsingar:</h4>
+      <ul class="modal-info-list">
+        <li><strong>Gagnagrunnur:</strong> Gögnin eru veitt af Óbyggðanefnd og Landmælingum Ísland./li>
+        <li><strong>Uppfærslur:</strong> Kortið er endurnýjað ársfjórðungslega.</li>
+        <li><strong>Takmörkun á notkun: </strong> Vinsamlegast sjáið fyrirvarann um notkunartakmarkanir.</li>
+        <li><strong>Eiginleikar:</strong> Kortið býður upp á mælitól, veðurhermi, dagsbirtuhermi, og breytingartól.</li>
+        <li><strong>Aðrar upplýsingar:</strong> Nánari upplýsingar um verkefni frá óbyggðanefnd má finna á 
+          <a class= "modal-link" href="https://www.obyggdanefnd.is/" target="_blank">Óbyggðanefnd vefsíðunni</a></li>
+      </ul>
+      <!-- ... -->
+      <!-- Trigger text/icon -->
+      <span class="modal-tooltip-trigger">Músarstjórn 🖱️</span>
+      <!-- Tooltip container -->
+      <div class="modal-tooltip">
+        <img src="https://ftp.lmi.is/.stm/michaela/Thumbs/mpuse.png" alt="Mouse Navigation Guide"> 
+        <script>
+          // Get the tooltip and its trigger
+          const tooltip = document.querySelector('.modal-tooltip');
+          const trigger = document.querySelector('.modal-tooltip-trigger');
+          // Show tooltip on hover
+          trigger.addEventListener('mouseover', function() {
+            tooltip.style.display = 'block';
+          });
+          // Hide tooltip when mouse leaves
+          trigger.addEventListener('mouseout', function() {
+            tooltip.style.display = 'none';
+          });
+        </script>
+      </div>
+    </div>
+  </modal>
     <!-- Map with header, actiona bars and widgets-->
     <calcite-shell content-behind>
       <!-- header: project logo, map title and nav-button-->

diff --git a/obyggdanefnd/js/modules/splashScreen.js b/obyggdanefnd/js/modules/splashScreen.js
@@ -0,0 +1,49 @@
+/****************************************************
+* run splash screen and it as info into action bar
+*******************************************************/
+// author:LMI
+
+define([], function() {
+    return {
+        showSplashScreen: function(mapView) {  // <-- Add mapView as an argument here
+        // Code for showing the splash screen
+        // run splash screen function 
+        function showSplashScreen() {
+            var modal = document.getElementById("splashModal");
+            var modalContent = document.querySelector(".modal-content");
+            var span = document.getElementsByClassName("close")[0];
+           // var offsetX, offsetY, isDragging = false; //prepared for future adjustment, i.e. window draging
+
+            // Center the modal initially
+            modalContent.style.left = "50%";
+            modalContent.style.top = "50%";
+            modalContent.style.transform = "translate(-50%, -50%)";
+
+            modal.style.display = "block";
+
+            // Close modal when 'x' is clicked
+            span.onclick = function() {
+            modal.style.display = "none";
+            };
+
+            // Close modal when clicking outside of it
+            window.onclick = function(event) {
+            if (event.target === modal) {
+                modal.style.display = "none";
+            }
+            };
+        }
+
+        // Run the function
+          mapView.when(() => {
+            showSplashScreen();
+            // the function run splash screen
+        });
+
+
+        // Call the modal from info-button
+        //document.getElementById('infoButton').addEventListener('click', showSplashScreen);
+        }
+    };
+  });
+
diff --git a/obyggdanefnd/js/script.js b/obyggdanefnd/js/script.js
@@ -7,6 +7,7 @@ require([
   "modules/layerEditor",
   "modules/searchWidget",
   "modules/mouseElevation",
+  "modules/splashScreen",
   "esri/config",
   "esri/WebMap",
   "esri/views/SceneView",
@@ -38,6 +39,7 @@ require([
   LayerEditor,
   SearchWidget,
   MouseElevation,
+  SplashScreen,
   esriConfig,
   WebMap,
   SceneView,
@@ -71,6 +73,7 @@ require([
   BasicWidgets.setupBasicWidgets(mapView);  
   LayerEditor.editLayer(map, mapView);     
   MouseElevation.setupMouseElevation(mapView);
+  SplashScreen.showSplashScreen(mapView);
 
 
   /////////////// IDEAS TO ADD ///////////////

diff --git a/obyggdanefnd/style.css b/obyggdanefnd/style.css
@@ -1,6 +1,5 @@
 html, body, 
 
-
 #viewDiv {
   width: 100%;
   height:100%;
@@ -9,7 +8,6 @@ html, body,
   position: relative;
 }
 
-
 body {
   display: flex;
 }
@@ -19,7 +17,6 @@ calcite-loader {
   justify-self: center;
 }
 
-
 /* Responsive stylling for smaller screen */
 @media (max-width: 760px) {
   .header-right {
@@ -52,9 +49,9 @@ calcite-loader {
     width: 20px;
   }
 }
+  /*//////////////////////////////*/
+ /*           HEADER             */
 /*//////////////////////////////*/
-/*HEADER*/
-/*/////////////////////////////*/
 .header {
     background-color: #ffffff;
     padding: 0;
@@ -89,6 +86,9 @@ calcite-loader {
     margin-right: 2rem;
   }
 
+  /*///////////////////////*/
+ /*         WIDGETS       */
+/*///////////////////////*/
   /*Style for panels with widgets*/ 
 .floating-panel { /*Basemaps*/
     position: absolute;
@@ -102,6 +102,27 @@ calcite-loader {
     display: none; /* Initially hidden */
     overflow: auto;
   }
+
+  /* Styling for the basemap items */
+.basemap-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.basemap-thumbnail {
+  width: 80px; /* Set the width of the thumbnail */
+  height: 80px; /* Set the height of the thumbnail */
+  margin-right: 10px; /* Add some space between the thumbnail and text */
+}
+
+.basemap-title {
+  flex: 1; /* Let the title take the remaining space */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
   .floating-list { /*Layer list*/
     position: absolute;
@@ -196,4 +217,128 @@ calcite-loader {
     border: 1px solid #ccc;
     display: none; /* Initially hidden */
     overflow: auto;
-  }
+  }
+
+   /*///////////////////////*/
+  /*     SPLASH SCREEN     */
+ /*///////////////////////*/
+
+/* Modal container */
+.modal {
+  display: none;
+  position: absolute;  /* Changed from absolute to fixed */
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.4);
+}
+
+/* Modal content*/
+.modal-content {
+  max-height: 90vh; /* Limit the height of the modal content */
+  position: relative; /*should change to fixed?*/
+  background-color: #fefefe;
+  margin-top: 5px;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  z-index: 9999;
+  border-radius: 12px; /* Rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 3D effect */
+  overflow-y: auto;
+}
+
+/* Close button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  margin-top: -10px; /* Adjust the position slightly upwards */
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* Header */
+.modal-content h2 {
+  border-bottom: 1px solid #b9b7b7; /* Light grey border */
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+/* Styles for text */
+.modal-title {
+  font-size: 24px;
+  margin-bottom: 16px;
+  color: #2e2d2d;
+  font-weight: bold;
+}
+
+.modal-disclaimer-title,
+.modal-guide-title {
+  font-weight: bold; /* or text-decoration: underline; based on the preference */
+  font-size: 17px;
+}
+
+.modal-disclaimer,
+.modal-guide, 
+.modal-info-list {
+  font-size: 14px;
+  line-height: 1.5;
+  list-style-type: disc;
+  padding-left: 20px;
+  margin-bottom: 12px;
+  color: #393838;
+}
+
+.modal-link {
+  color: #0079c1;
+  font-size: 14px;
+  text-decoration: underline;
+}
+
+.modal-info-list li {
+  margin-bottom: 8px;
+}
+
+.modal-info-list li strong {
+  font-weight: bold;
+}
+
+/* Tooltip Trigger */
+.modal-tooltip-trigger {
+  cursor: pointer;
+  text-decoration: underline;
+  color: #0079c1;
+}
+
+/* Tooltip Container */
+.modal-tooltip {
+  display: none;
+  position: fixed; /*fixed vs. absolute position*/
+  top: 70%; /* Center it vertically */
+  left: 20%; /* Center it horizontally */
+  transform: translate(-50%, -50%); /* Fine-tune the position, for example -50%, -10px */
+  z-index: 2;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Tooltip Image */
+.modal-tooltip img {
+  position: relative;
+  width: auto;
+  max-height: 150px;
+}
+