Add "modal image" display for part thumbnails

InvenTree/templates/js/modals.js

@@ -909,3 +909,42 @@ function launchModalForm(url, options = {}) {
     // Send the AJAX request
     $.ajax(ajax_data);
 }
+
+
+function hideModalImage() {
+
+    var modal = $('#modal-image-dialog');
+
+    modal.animate({
+        opacity: 0.0,
+    }, 250, function() {
+        modal.hide();
+    });
+
+}
+
+
+function showModalImage(image_url) {
+    // Display full-screen modal image
+
+    console.log('showing modal image: ' + image_url);
+
+    var modal = $('#modal-image-dialog');
+
+    // Set image content
+    $('#modal-image').attr('src', image_url);
+
+    modal.show();
+
+    modal.animate({
+        opacity: 1.0,
+    }, 250);
+
+    $('#modal-image-close').click(function() {
+        hideModalImage();
+    });
+
+    modal.click(function() {
+        hideModalImage();
+    });
+}

InvenTree/templates/modals.html

@@ -1,5 +1,12 @@
 {% load i18n %}
 
+<div class='modal fade modal-image' role='dialog' id='modal-image-dialog'>
+  <span class='modal-close' id='modal-image-close'>&times;</span>
+
+  <img class='modal-image-content' id='modal-image'>
+
+</div>
+
 <div class='modal fade modal-fixed-footer modal-primary' tabindex='-1' role='dialog' id='modal-form'>
     <div class='modal-dialog'>
         <div class='modal-content'>