Add Git insert to go to git project

components/addComponents.js

@@ -0,0 +1,3 @@
+import {GitInsert} from "./gitInsert";
+
+document.querySelector("body").append(new GitInsert());

components/gitInsert.js

@@ -0,0 +1,28 @@
+/**
+ * Class used to create an insert to redirect to git project
+ * @extends HTMLAnchorElement
+ */
+export class GitInsert extends HTMLAnchorElement {
+  constructor() {
+    super();
+
+    this.className = "git-insert";
+    this.href = "https://github.com/3liz/proj4rs";
+    this.innerHTML = `
+      <div class="md-icon">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 480 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.-->
+          <path
+            d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
+            style="color: aqua"></path>
+        </svg>
+      </div>
+      <div class="git-insert-text">
+        <span class="git-insert-title">Proj4RS v0.1.5</span>
+        <span class="git-insert-desc">Go to repository</span>
+      </div>
+      `;
+  }
+}
+
+customElements.define("git-insert", GitInsert, {extends: "a"});

demo-pages/bundeslander-3044.html

@@ -57,6 +57,7 @@ <h3>proj4rs</h3>
 
 <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
+<script type="module" src="../components/addComponents.js"></script>
 <script type="module" src="../bundeslander-3044.js"></script>
 </body>
 </html>

demo-pages/reprojection-image.html

@@ -69,6 +69,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../reprojection-image.js"></script>
   </body>
 </html>

demo-pages/reprojection.html

@@ -96,6 +96,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../reprojection.js"></script>
   </body>
 </html>

demo-pages/sphere-mollweide.html

@@ -65,6 +65,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../sphere-mollweide.js"></script>
   </body>
 </html>

demo-pages/vector-projections.html

@@ -77,6 +77,7 @@ <h3>proj4rs</h3>
 
 <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
+<script type="module" src="../components/addComponents.js"></script>
 <script type="module" src="../vector-projections.js"></script>
 </body>
 </html>

demo-pages/wms-image-custom-proj.html

@@ -59,6 +59,7 @@ <h3>proj4rs</h3>
 
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
+    <script type="module" src="../components/addComponents.js"></script>
     <script type="module" src="../wms-image-custom-proj.js"></script>
   </body>
 </html>

index.html

@@ -52,5 +52,8 @@ <h4 id="title">Image Reprojection</h4>
           </a>
         </div>
       </container>
+
+
+    <script type="module" src="components/addComponents.js"></script>
     </body>
   </html>

ressources/css/style.css

@@ -228,3 +228,77 @@ nav:hover {
 #navLabelActive:hover {
   background-color: rgb(237, 237, 237);
 }
+
+/* GitInsert Style */
+
+.git-insert {
+  position: absolute;
+  top: 25px;
+  right: 25px;
+  text-decoration: none;
+  color: #303030;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  border-radius: 10px;
+  font-family: Arial, serif;
+  transition: ease 200ms;
+}
+
+.git-insert:hover {
+  box-shadow: inset 0px 0px 22px -9px rgba(0,0,0,0.4);
+  transition: ease 150ms;
+
+  .git-insert-tooltip {
+    visibility: visible;
+  }
+
+}
+
+.git-insert:active {
+  box-shadow: inset 0px 0px 22px -9px rgba(0,0,0,0.6);
+}
+
+.md-icon {
+  width: 37px;
+  height: 37px;
+}
+
+.git-insert-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.git-insert-title {
+  padding: 0 10px;
+  font-size: 17px;
+  font-weight: bold;
+}
+
+.git-insert-desc {
+  font-size: 13px;
+  color: #777777;
+}
+
+@media screen and (max-width: 930px) {
+  .git-insert {
+    flex-direction: column;
+  }
+}
+
+.git-insert-tooltip {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+
+  /* Position the tooltip */
+  position: absolute;
+  left: 80px;
+  bottom: 38px;
+  z-index: 1;
+}

vite.config.js

@@ -24,6 +24,7 @@ export default {
         copy({
           targets: [
             { src: 'fgb/axis_orientation_neu_3044.fgb', dest: './dist/fgb' },
+            { src: 'components', dest: './dist' },
           ]
         })
       ]