Update Gitlab_PNG_Compare.user.js

Author: hannsen

Gitlab_PNG_Compare.user.js

@@ -1,44 +1,94 @@
 // ==UserScript==
 // @name         Gitlab PNG Compare
 // @namespace    http://tampermonkey.net/
-// @version      0.1
+// @version      0.7
 // @description  try to take over the world!
 // @author       hannsen
 // @match        https://git04.quodata.de/*/merge_requests/*
 // @grant        none
-// @downloadURL  https://github.com/hannsen/userscripts/raw/master/Gitlab_PNG_Compare.user.js
-// @updateURL    https://github.com/hannsen/userscripts/raw/master/Gitlab_PNG_Compare.user.js
+// @downloadURL  https://git04.quodata.de/quodata/userscripts/-/raw/master/Gitlab_PNG_Compare.user.js
+// @updateURL    https://git04.quodata.de/quodata/userscripts/-/raw/master/Gitlab_PNG_Compare.user.js
 // ==/UserScript==
 
 (function() {
     'use strict';
 
+     function onScreen (el) {
+        return (jQuery(window).scrollTop() <= el.offset().top + el.height() &&
+                jQuery(window).scrollTop() + jQuery(window).height() >= el.offset().top);
+    };
+
 
     function replaceImgView(){
-        jQuery('div.file-title:not(.qd-handled)').each(function(){
-            this.classList.add('qd-handled');
+        jQuery('div.diff-file.file-holder').each(function(){
             var $this = jQuery(this);
-            if($this.find('strong').text().trim().endsWith('.png')){
-                var $dl_links = $this.next().find('a[download]');
-                if(!$dl_links[0]){
-                    $dl_links = $this.find('a.view-file');
-                }
+            if(!onScreen($this)){
+                return;
+            }
+
+            var $diffView = $this.find('div.diff-viewer');
+            var $container = $this.parent().parent();
+            var datapath = $this.attr('data-path');
+            if(!datapath.endsWith('.png')){
+                setTimeout(function() {
+                    removeWronglyPlacedImgCompare($container);
+                }, 50)
+                return;
+            }
 
-                if($dl_links[0]){
-                    var old_url = $dl_links[0].href.replace('/blob/', '/raw/');
-                    var new_url = $dl_links[1] ? $dl_links[1].href.replace('/blob/', '/raw/') : old_url;
-                    $this.next().remove();
-                }
 
-                var $img = buildImgCompare(old_url, new_url);
-                $img.css('border', 'solid 1px black');
-                $this.after($img);
+            var $imgcmp = $container.find('div.img_compare');
+            if($imgcmp[0] && $imgcmp.attr('data-path') == datapath){
+                return;
             }
+
+            $imgcmp.remove();
+
+            var $diff_button = $this.find('button > .gl-button-text');
+            if($diff_button){
+                $diff_button.click();
+            }
+
+            setTimeout(function() {
+                startBuildImgCompare($this, datapath);
+            }, 50)
         });
     }
 
+    function removeWronglyPlacedImgCompare($container){
+        $container.find('div.img_compare').remove();
+        $container.find('div.diff-viewer').show();
+    }
+
+    function startBuildImgCompare($this, datapath){
+        $this.find('div.diff-viewer').hide();
+        var $dl_links = $this.find('.gl-new-dropdown-item > a[role="menuitem"]');
+        if(!$dl_links[0]){
+            $dl_links = $this.find('a.view-file');
+        }
+
+        if($dl_links[0]){
+                if(!$dl_links[1]){
+                    // Lets check if there really is no old picture
+                    var $old_pic_link = $this.find('.diff-viewer .deleted a[data-qa-selector="download_button"]');
+                    if($old_pic_link[0]){
+                        $dl_links = [$old_pic_link[0], $dl_links[0]];
+                    }
+                }
+            var old_url = $dl_links[0].href.replace('/blob/', '/raw/');
+            var new_url = $dl_links[1] ? $dl_links[1].href.replace('/blob/', '/raw/') : old_url;
+
+
+        }
+
+        var $img = buildImgCompare(old_url, new_url);
+        $img.css('border', 'solid 1px black');
+        $img.attr('data-path', datapath);
+        $this.after($img);
+    }
+
     function buildImgCompare(old_url, new_url){
-        var div = jQuery('<div><div/>');
+        var div = jQuery('<div class="img_compare"><div/>');
         var img_old = jQuery('<img class="img_old" src="' + old_url + '"/>');
         var img_new = jQuery('<img class="img_new" src="' + new_url + '"/>').css('display', 'none');
         var old_desc = "old< new";
@@ -64,6 +114,10 @@
         return div;
     }
 
-    window.onscroll = replaceImgView;
+    var scrollTimeout;
+    window.onscroll = function(){
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(replaceImgView, 50);
+    };
 
 })();