Modal for roomfinder (#281)

* Added modalOpen to JavaScript * Modal for roomfinder implementation in html * Update i18n-view.yaml * Added loadModalRoomfinderMap function in JavaScript Co-authored-by: ge78fug <ge78fug@mytum.de> Co-authored-by: Frank Elsinga <frank@elsinga.de>
TUM-Dev · Dec 6, 2022 · d2b2a1d · d2b2a1d
1 parent d6ce444
commit d2b2a1d
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 25 deletions.
diff --git a/webclient/src/views/view/i18n-view.yaml b/webclient/src/views/view/i18n-view.yaml
@@ -107,3 +107,12 @@ view_view:
     author: { de: "Autor", en: "Author" }
     source: { de: "Quelle", en: "Source" }
     license: { de: "Lizenz", en: "License" }
+  modalRoomfinder:
+    header:
+      de: "Lageplan"
+      en: "Site Plan"
+    close: { de: "Schließen", en: "Close"}
+    image_alt:
+      de: "Ein Bild welches den Lageplan zeigt"
+      en: "Image showing the Site Plan"
+
diff --git a/webclient/src/views/view/view-view.inc b/webclient/src/views/view/view-view.inc
@@ -239,31 +239,36 @@
           <div id="interactive-map" class="loading"></div>
         </div>
       </div>
-      <div
-        class="roomfinder-map-container"
-        v-bind:class="{'d-none': state.map.selected !== 'roomfinder'}"
-        v-if="view_data.maps.roomfinder && view_data.maps.roomfinder.available"
-      >
-        <img
-          alt="Cross showing where the room is located on the hand-drawn roomfinder map image"
-          src="<!-- @echo app_prefix -->assets/roomfinder_cross-v2.webp"
-          v-bind:style="{'transform': 'translate(' + state.map.roomfinder.x + 'px, ' + state.map.roomfinder.y + 'px)'}"
-          id="roomfinder-map-cross"
-        />
-        <img
-          alt="Hand-drawn roomfinder map image"
-          v-bind:src="'<!-- @echo cdn_prefix -->maps/roomfinder/' + view_data.maps.roomfinder.available[state.map.roomfinder.selected_index].file"
-          class="img-responsive"
-          v-bind:width="state.map.roomfinder.width"
-          v-bind:height="state.map.roomfinder.height"
-          id="roomfinder-map-img"
-        />
-        <div>
-          ${{_.view_view.map.img_source}}$: {{
-          view_data.maps.roomfinder.available[state.map.roomfinder.selected_index].source
-          }}
-        </div>
-      </div>
+        <a
+          @click="map.roomfinder.modalOpen=true"
+          v-on:click="delayedLoadModalRoomfinderMap"
+        >
+          <div
+            class="roomfinder-map-container"
+            v-bind:class="{'d-none': state.map.selected !== 'roomfinder'}"
+            v-if="view_data.maps.roomfinder && view_data.maps.roomfinder.available"
+          >
+            <img
+              alt="Cross showing where the room is located on the hand-drawn roomfinder map image"
+              src="<!-- @echo app_prefix -->assets/roomfinder_cross-v2.webp"
+              v-bind:style="{'transform': 'translate(' + state.map.roomfinder.x + 'px, ' + state.map.roomfinder.y + 'px)'}"
+              id="roomfinder-map-cross"
+            />
+            <img
+              alt="Hand-drawn roomfinder map image"
+              v-bind:src="'<!-- @echo cdn_prefix -->maps/roomfinder/' + view_data.maps.roomfinder.available[state.map.roomfinder.selected_index].file"
+              class="img-responsive"
+              v-bind:width="state.map.roomfinder.width"
+              v-bind:height="state.map.roomfinder.height"
+              id="roomfinder-map-img"
+            />
+            <div>
+              ${{_.view_view.map.img_source}}$: {{
+              view_data.maps.roomfinder.available[state.map.roomfinder.selected_index].source
+              }}
+            </div>
+          </div>
+        </a>
       <div
         class="accordion"
         id="roomfinder-map-select"
@@ -327,6 +332,53 @@
       </div>
       <div class="divider" style="margin-top: 10px"></div>
     </div>
+    <!-- Modal-Roomfinder -->
+    <div
+      class="modal modal-lg"
+      id="modal-roomfinder"
+      v-bind:class="{active: map.roomfinder.modalOpen}"
+    >
+      <a
+        class="modal-overlay"
+        aria-label="${{_.view_view.modalRoomfinder.close}}$"
+        @click="map.roomfinder.modalOpen=false"
+      >
+      </a>
+      <div class="modal-container modal-fullheight" id="roomfinderModal-container">
+        <div class="modal-header">
+          <button
+            class="btn btn-clear float-right"
+            aria-label="${{_view_view.modalRoomfinder.close}}$"
+            @click="map.roomfinder.modalOpen=false"
+          >
+          </button>
+            <h5 class="modal-title">${{_.view_view.modalRoomfinder.header}}$</h5>
+        </div>
+        <div class="modal-body">
+          <div class="roomfinder-map-container">
+            <img
+              alt="Cross showing where the room is located on the hand-drawn roomfinder map image"
+              src="<!-- @echo app_prefix -->assets/roomfinder_cross-v2.webp"
+              v-bind:style="{'transform': 'translate(' + state.map.roomfinder.modalX + 'px, ' + state.map.roomfinder.modalY + 'px)'}"
+              id="modalRoomfinder-map-cross"
+            />
+            <img
+              alt="Hand-drawn roomfinder map image"
+              v-bind:src="'<!-- @echo cdn_prefix -->maps/roomfinder/' + view_data.maps.roomfinder.available[state.map.roomfinder.selected_index].file"
+              class="img-responsive"
+              v-bind:width="state.map.roomfinder.width"
+              v-bind:height="state.map.roomfinder.height"
+              id="modalRoomfinder-map-img"
+            />
+            <div>
+              ${{_.view_view.map.img_source}}$: {{
+                  view_data.maps.roomfinder.available[state.map.roomfinder.selected_index].source
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <!-- Information section (on mobile) -->
     <div

diff --git a/webclient/src/views/view/view-view.js b/webclient/src/views/view/view-view.js
@@ -53,6 +53,8 @@ const _viewDefaultState = {
       selected_index: null, // Index in the 'available' list
       x: -1023 - 10, // Outside in top left corner
       y: -1023 - 10,
+      modalX: -1023 -10,
+      modalY: -1023 -10,
       width: 400,
       height: 300,
     },
@@ -85,6 +87,9 @@ navigatum.registerView("view", {
           marker: null,
           marker2: null,
         },
+        roomfinder: {
+          modalOpen: false,
+        }
       },
       sections: {
         rooms_overview: {
@@ -519,6 +524,25 @@ navigatum.registerView("view", {
         );
       }
     },
+    loadModalRoomfinderMap: function () {
+      const map = this.view_data.maps.roomfinder.available[this.state.map.roomfinder.selected_index];
+
+      const rect = document
+          .getElementById("roomfinderModal-container")
+          .getBoundingClientRect();
+      // -1023px, -1023px is top left corner, 16px = 2*8px is element padding
+      this.state.map.roomfinder.modalX =
+          -1023 + (map.x / map.width) * (rect.width - 65);
+
+      // We cannot use "height" here as it might be still zero before layouting
+      // finished, so we use the aspect ratio here.
+      this.state.map.roomfinder.modalY =
+          -1023 +
+          (map.y / map.height) * (rect.width - 65) * (map.height / map.width);
+    },
+    delayedLoadModalRoomfinderMap: function () {
+      setTimeout(this.loadModalRoomfinderMap, 1000);
+    },
     updateRoomsOverview: function (setSelected) {
       const state = this.state.rooms_overview;
       const data = this.view_data.sections.rooms_overview;

diff --git a/webclient/src/views/view/view-view.scss b/webclient/src/views/view/view-view.scss
@@ -341,12 +341,27 @@
     #roomfinder-map-img {
         width: 100%;
         display: block;
+        cursor: pointer;
     }
 
     #roomfinder-map-select > label {
         padding: .05rem .3rem;
     }
 
+    #roomfinderModal-container {
+        padding-bottom: 4em;
+    }
+
+    #modalRoomfinder-map-cross {
+        position: absolute;
+        transition: transform .3s;
+        pointer-events: none;
+    }
+
+    #modalRoomfinder-map-img {
+        width: 100%; // Without this part the image doesn't fill the modal over the whole width.
+    }
+
     .accordion-body {
         ul,
         button,
@@ -549,6 +564,16 @@
             }
         }
     }
+
+    /* --- Modal Roomfinder --- */
+    #modal-roomfinder {
+        align-items: baseline;
+
+        & .modal-container {
+            position: relative;
+            top: 5em;
+        }
+    }
 }
 
 // 'md' (