Merge pull request #2 from federal-geospatial-platform/loading-indicator

Added loading indicator
federal-geospatial-platform · Jun 22, 2022 · 25748c4 · 25748c4
2 parents e15ccff + f25da93
commit 25748c4
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 27 deletions.
diff --git a/storymap-en.html b/storymap-en.html
@@ -46,18 +46,34 @@
 </script>
   <!-- End Google Analytics -->  
 
-    <style>
-#main-iframe-content {
-}
-#if-content {
-    width:100%;
-    height:750px;
-}
-.container {
-    width:95%;
-}
-</style>
-  </head> 
+  <style>
+    #main-iframe-content {
+    }
+    #if-content {
+        width:100%;
+        height:750px;
+        background-color: #E5E5E5;
+				-webkit-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
+				-moz-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
+				box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
+    }
+    .container {
+        width:95%;
+    }
+    #loadingIndicator {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1101;
+    }
+    .loadingIndicator {
+      margin-left: -17px;
+      margin-top: -20px;
+    }
+  </style>
+
+  </head>
+
   <body typeof="WebPage" vocab="http://schema.org/"> 
     <div id="def-top"> 
       <!-- Write closure fall-back static file --> 
@@ -158,8 +174,11 @@ <h2>You are here:</h2>
 		</script> 
     <main class="container" property="mainContentOfPage" role="main"> 
       <!-- <h1 property="name" id="wb-cont">Content page</h1> --> 
-	  <h5 property="name" id="wb-cont">Scroll down and click on the map items to find more about them</h5>
+	    <h5 property="name" id="wb-cont">Scroll down and click on the map items to find more about them</h5>
       <div id="wb-cont" class="main-iframe-content"> 
+        <div id="loadingIndicator" class="loadingIndicator">
+          <img src="resources/tpl/viewer/icons/loading-light.gif" />
+        </div>
         <iframe frameborder="0" scrolling="yes" src="about:blank" name="if-content" id="if-content" title="Map Journal"> iframes are not supported. </iframe> 
       </div> 
       <div id="def-preFooter"> 
@@ -244,8 +263,16 @@ <h2 class="wb-inv">About this site</h2>
 				cdnEnv: "prod"
 			}));
 		</script>  
+
     <script type="text/javascript">
 
+    $('#if-content').ready(function () {
+        $('#loadingIndicator').css('display', 'block');
+    });
+
+    $('#if-content').load(function () {
+        $('#loadingIndicator').css('display', 'none');
+    });
 
     // polyfill for IE 
     if (!String.prototype.endsWith) {

diff --git a/storymap-fr.html b/storymap-fr.html
@@ -45,18 +45,33 @@
   ga('send', 'pageview');
 </script>
   <!-- End Google Analytics -->
-
-    <style>
-		#main-iframe-content {
-		}
-		#if-content {
-			width:100%;
-			height:750px;
-		}
-		.container {
-			width:95%;
-		}
-	</style>
+
+  <style>
+    #main-iframe-content {
+    }
+    #if-content {
+        width:100%;
+        height:750px;
+        background-color: #E5E5E5;
+				-webkit-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
+				-moz-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
+				box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);
+    }
+    .container {
+        width:95%;
+    }
+    #loadingIndicator {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1101;
+    }
+    .loadingIndicator {
+      margin-left: -17px;
+      margin-top: -20px;
+    }
+  </style>
+
   </head> 
   <body typeof="WebPage" vocab="http://schema.org/"> 
     <div id="def-top"> 
@@ -158,9 +173,12 @@ <h2>Vous êtes ici :</h2>
 		</script> 
     <main class="container" property="mainContentOfPage" role="main"> 
       <!-- <h1 property="name" id="wb-cont">Content page</h1> -->
-	  <h5 property="name" id="wb-cont">Défiler vers le bas et cliquez sur les éléments de la carte pour en savoir plus</h5>
+      <h5 property="name" id="wb-cont">Défiler vers le bas et cliquez sur les éléments de la carte pour en savoir plus</h5>
+      <div id="loadingIndicator" class="loadingIndicator">
+        <img src="resources/tpl/viewer/icons/loading-light.gif" />
+      </div>
       <div id="wb-cont" class="main-iframe-content"> 
-        <iframe frameborder="0" scrolling="no" src="about:blank" name="if-content" id="if-content" title="Journal Cartographique"> iframes non pris en charge. </iframe> 
+        <iframe frameborder="0" scrolling="yes" src="about:blank" name="if-content" id="if-content" title="Journal Cartographique"> iframes non pris en charge. </iframe> 
       </div> 
       <div id="def-preFooter"> 
         <!-- Write closure fall-back static file --> 
@@ -246,7 +264,14 @@ <h2 class="wb-inv">À propos du site</h2>
 		</script>  
     <script type="text/javascript">
 
+    $('#if-content').ready(function () {
+        $('#loadingIndicator').css('display', 'block');
+    });
 
+    $('#if-content').load(function () {
+        $('#loadingIndicator').css('display', 'none');
+    });
+
     // polyfill for IE 
     if (!String.prototype.endsWith) {
       String.prototype.endsWith = function(searchString, position) {