use amendments to render throbber/grayscale

internal/js/view_support.js

@@ -62,6 +62,11 @@ function DrawImg()
     if( im.width == 0 )
         return
 
+    // find any matching ammendment
+    am=document.amendments.filter(obj => obj.eid === document.viewing.id)
+    if( am.length )
+        am=am[0]
+
     canvas.width=NewWidth(im)
     canvas.height=NewHeight(im)
 
@@ -69,14 +74,29 @@ function DrawImg()
 	$('#img-cap').width(canvas.width)
 
     // actually draw the pixel images to the canvas at the right size
-    if( grayscale )
+    if (!Array.isArray(am))
         context.filter='grayscale(1)'
     context.drawImage(im, 0, 0, canvas.width, canvas.height )
     // -50 is a straight up hack, no idea why this works, but its good enough for me
-    if( throbber )
-        $('#throbber').attr('style', 'display:show; position:absolute; left:'+canvas.width/2+'px; top:'+(canvas.height/2-50)+'px' )
-    else
-        $('#throbber').hide();
+    if (!Array.isArray(am))
+    {
+        const style = 'position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);';
+        $('#throbber').attr('style', style + ' height: 96px;');
+        $('#white-circle').attr('style', style + ' height: 72px;');
+        if(am.type.which == 'img' )
+            $('#inside-img').attr('style', style + ' height: 64px;').attr('src', '/internal/'+am.type.what );
+        else
+        {
+            $('#inside-icon').attr('style', `${style} color:${am.type.colour}; height: 64px;`)
+            $('#inside-icon').attr('fill', am.type.colour )
+            $('#inside-icon use').attr('xlink:href', `/internal/icons.svg#${am.type.what}`);
+        }
+    } else {
+        $('#throbber').hide()
+        $('#white-circle').hide()
+        $('#inside-img').hide()
+        $('#inside-icon').hide()
+    }
 
     // show (or not) the whole figcaption with fname in it - based on state of fname_toggle
     if( $('#fname_toggle').prop('checked' ) )
@@ -678,13 +698,11 @@ function addViewerKeyHandler() {
         {
             case "Left": // IE/Edge specific value
             case "ArrowLeft":
-                if( $('#la').prop('disabled') == false )
-                    $('#la').click()
+                $('#la').click()
                 break;
             case "Right": // IE/Edge specific value
             case "ArrowRight":
-                if( $('#ra').prop('disabled') == false )
-                    $('#ra').click()
+                $('#ra').click()
                 break;
             case "d":
                 $('#distance').click()
@@ -724,7 +742,6 @@ function nextImageInViewer()
     getNextEntry()
     setDisabledForViewingNextPrevBttons()
     ViewImageOrVideo()
-
 }
 
 // wrapper func to start the viewer - needed as we have a dbl-click & View file