added image preview functionality to werk and titelbild

the_works/static/css/the_works.css

@@ -225,6 +225,11 @@ label:has([type="radio"]) {
   align-content: center;
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+}
+
+td .imageselect-entry {
+  padding-left: calc(-1 * var(--pico-form-element-spacing-vertical));
+}
 
 .imageselect-div {
   display: flex;
@@ -236,10 +241,10 @@ label:has([type="radio"]) {
   max-height: 100%;
   text-align: center;
   width: calc(1rem * var(--pico-line-height));
+}
 
-/*    display: block;
-    padding: 0px;
-    margin: auto;*/
+#imagepreview-modal svg  {
+  height: 768px;
 }
 
 .imageselect-img,
@@ -247,7 +252,6 @@ label:has([type="radio"]) {
   object-fit: contain;
   height: calc(1rem * var(--pico-line-height));
 }
-}
 
 details.imageselect > summary.imageselect-summary {
   padding: 0px;

the_works/static/js/imagepreview.js

@@ -11,8 +11,15 @@ function initImagepreview(modal_id) {
 
 function handleImagepreview(event) {
   let modal = document.getElementById("imagepreview-modal");
-  modal.querySelector("img").setAttribute("src", event.target.closest(".imageselect-entry").dataset["bild"]); 
+  let src = event.target.closest(".imageselect-entry").dataset["bild"];
+  let img = modal.querySelector("img");
+  if ( src.toLowerCase().startsWith("<svg") ) { // placeholder svg
+    modal.querySelector(".imagepreview-details").innerText = "";
+    modal.querySelector(".imagepreview-div").innerHTML = src
+  } else { // actual image
     modal.querySelector(".imagepreview-details").innerText = event.target.closest(".imageselect-entry").querySelector(".imageselect-label").innerText;
+    modal.querySelector(".imagepreview-div").innerHTML = `<img src="${src}" />`;
+  }
   modal.showModal();
   if ( event.target.closest(".imageselect-entry").localName.toLowerCase() == "div" ) {
     event.stopPropagation();

the_works/templates/views/titelbild.html

@@ -25,7 +25,15 @@
   <tbody>
     {% for titelbild in titelbilder %}
     <tr id="titelbild-{{ titelbild['ID'] }}">
-      <td title="Titelbild"><a href="{{ titelbild['Bild'] }}"><img src="{{ titelbild['Thumbnail'] }}" /></a></td>
+      <td title="Titelbild">
+        <div class="imageselect-entry" data-bild="{{ titelbild['Bild'] }}">
+          <div class="imageselect-div">
+            <img src="{{ titelbild['Thumbnail'] }}" width="128" height="128" alt="Titelbild (Thumbnail)" />
+              <span class="imageselect-label display-none">
+                {{ titelbild['Dateiname'] }} ({{ titelbild['Breite'] }} x {{ titelbild['Hoehe'] }}, {{ titelbild['Dateigroesse'] }} Bytes)
+              </span>
+          </div>  
+        </div>
       <td>{{ titelbild["Dateiname"] }}</td> 
       <td>{{ titelbild["Breite"] }}x{{ titelbild["Hoehe"]}}</td>
       <td>{{ sizeof_fmt(titelbild["Dateigroesse"]) }}</td> 
@@ -94,12 +102,26 @@
     </form>
   </article>
 </dialog>
+
+<dialog id="imagepreview-modal" closedby="any">
+  <article>
+    <header>
+      <button class="modal-close" aria-label="close" rel="prev"></button>
+      <div class="imagepreview-details"></div>
+    </header>
+    <div class="imagepreview-div">
+      <img src="#" alt="" />
+    </div>
+  </article>
+</dialog>
+
 {% endblock content %}
 
 {% block script %}
 <script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
 <script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
 <script src="{{ url_for('static', filename='js/modal.js') }}"></script>
+<script src="{{ url_for('static', filename='js/imagepreview.js') }}"></script>
 <script src="{{ url_for('static', filename='js/fileinput.js') }}"></script>
 <script>
   window.onload = function () {
@@ -107,6 +129,7 @@
     initCreateButton("titelbild-table", "titelbild hinzufügen …");
     initModal("titelbild-modal", [], ["Neues Titelbild", "Titelbild bearbeiten"], ["{{ url_for('titelbild.create') }}", "{{ url_for('titelbild.update', id=-1) }}"]); 
     initFileinput("titelbild", "current", "titelbild-modal");
+    initImagepreview("imagepreview-modal");
   }
 </script>
 {% endblock script %}

the_works/templates/views/werk.html

@@ -51,7 +51,20 @@
         <td title="ISSN">{{ werk["ISSN"] }}</td>
         <td title="Genre(s)">{{ werk["Genre_list"] | join(", ") }}</td>
         <td title="Herausgeber:in(nen)">{{ werk["Herausgeber_list"] | join(", ") }}</td>
-        <td title="Titelbild">{% if werk["Titelbild"] %}<img src="{{ werk['Titelbild'] }}" width="128" height="128" alt="Titelbild (Thumbnail)" />{% else %}&#10008;{% endif %}</td>
+        <td title="Titelbild">
+          {% if werk["Titelbild"] %}
+          <div class="imageselect-entry" data-bild="{{ werk['Titelbild']['Bild'] }}">
+            <div class="imageselect-div">
+              <img src="{{ werk['Titelbild']['Thumbnail'] }}" width="128" height="128" alt="Titelbild (Thumbnail)" />
+                <span class="imageselect-label display-none">
+                  {{ werk['Titelbild']['Dateiname'] }} ({{ werk['Titelbild']['Breite'] }} x {{ werk['Titelbild']['Hoehe'] }}, {{ werk['Titelbild']['Dateigroesse'] }} Bytes)
+                </span>
+            </div>  
+          </div>
+          {% else %}
+          &#10008;
+          {% endif %}
+        </td>
         <td title="Klappentext"{% if werk["Klappentext"] %} data-tooltip="{{ werk['Klappentext'] | replace('\n', ' &#13;&#10; ') | safe }}" data-placement="bottom">&#10004;{% else %}>&#10008;{% endif %}</td>
         <td title="Anmerkungen">{{ werk["Anmerkungen"] }}</td>
         <td class="action action-update" data-id="{{ werk['id'] }}"><a href="{{ url_for('werk.read', id=werk['id']) }}" title="Werk ansehen/bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
@@ -61,16 +74,30 @@
     </tbody>
   </table>
 </div>
+
+<dialog id="imagepreview-modal" closedby="any">
+  <article>
+    <header>
+      <button class="modal-close" aria-label="close" rel="prev"></button>
+      <div class="imagepreview-details"></div>
+    </header>
+    <div class="imagepreview-div">
+      <img src="" />
+    </div>
+  </article>
+</dialog>
+
 {% endblock content %}
 
 {% block script %}
 <script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
 <script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
-<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
+<script src="{{ url_for('static', filename='js/imagepreview.js') }}"></script>
 <script>
   window.onload = () => {
     initDataTable("werk-table");
     initCreateButton("werk-table", "Werk hinzufügen", "{{ url_for('werk.read', id=0) }}");
+    initImagepreview("imagepreview-modal");
   }
 </script>
 {% endblock script %}

the_works/templates/views/werk_detail.html

@@ -75,7 +75,7 @@ Werk bearbeiten
           <summary id="form_Titelbild_summary" class="imageselect-summary">
           </summary>
           <ul>
-            <li class="imageselect-entry" data-bild="">
+            <li class="imageselect-entry" data-bild='<svg width="900" height="1280" viewbox="0 0 90 128"><use class="imageselect-svg" href="#placeholder" /></svg>'>
               <div class="imageselect-input">
                 <input id="imageselect-radio-0" type="radio" name="form_Titelbild" value="" {% if not werk['Titelbild'] %}checked{% endif %}/>
               </div>
@@ -194,9 +194,7 @@ Werk bearbeiten
       <button class="modal-close" aria-label="close" rel="prev"></button>
       <div class="imagepreview-details"></div>
     </header>
-    <div class="imagepreview-div">
-      <img src="#" alt="#" />
-    </div>
+    <div class="imagepreview-div" />
   </article>
 </dialog>
 

the_works/views/werk.py

@@ -28,7 +28,8 @@ def all():
       "ISBN_10": row.Werk.ISBN_10 or "",
       "ISSN": row.Werk.ISSN or "",
       "Preis": row.Werk.Preis or "",
-      "Titelbild": url_for("titelbild.thumbnail", id=row.Werk.Titelbild) if row.Werk.Titelbild else "",
+#      "Titelbild": url_for("titelbild.thumbnail", id=row.Werk.Titelbild) if row.Werk.Titelbild else "",
+      "Titelbild": db.session.get(Titelbild, row.Werk.Titelbild)._asdict_with_urls() if row.Werk.Titelbild else "",
       "Klappentext": row.Werk.Klappentext or "",
       "Anmerkungen": row.Werk.Anmerkungen or "",
       "Herausgeber_list": [wh.herausgeber.Name for wh in row.Werk.werk_herausgeber],