Update jquery.waitforimages & use npm version

#39072

app/assets/javascripts/commit/image_file.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-use-before-define, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, object-shorthand, max-len */
-import 'vendor/jquery.waitforimages';
 // Width where images must fits in, for 2-up this gets divided by 2
 const availWidth = 900;

app/assets/javascripts/commons/jquery.js

@@ -6,5 +6,5 @@ import 'vendor/jquery.endless-scroll';
 import 'vendor/jquery.caret';
 import 'vendor/jquery.atwho';
 import 'vendor/jquery.scrollTo';
-import 'vendor/jquery.waitforimages';
+import 'jquery.waitforimages';
 import 'select2/select2';

app/assets/javascripts/issue.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
-import 'vendor/jquery.waitforimages';
 import axios from './lib/utils/axios_utils';
 import { addDelimiter } from './lib/utils/text_utility';
 import flash from './flash';

app/assets/javascripts/merge_request.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
-
-import 'vendor/jquery.waitforimages';
 import { __ } from '~/locale';
 import TaskList from './task_list';
 import MergeRequestTabs from './merge_request_tabs';

package.json

@@ -52,6 +52,7 @@
     "jed": "^1.1.1",
     "jquery": "^2.2.4",
     "jquery-ujs": "1.2.2",
+    "jquery.waitforimages": "^2.2.0",
     "js-cookie": "^2.1.3",
     "jszip": "^3.1.3",
     "jszip-utils": "^0.0.2",

vendor/assets/javascripts/jquery.waitforimages.js

-/*
- * waitForImages 1.4
- * -----------------
- * Provides a callback when all images have loaded in your given selector.
- * http://www.alexanderdickson.com/
- *
- *
- * Copyright (c) 2011 Alex Dickson
- * Licensed under the MIT licenses.
- * See website for more info.
- *
- */
-
-;(function($) {
-    // Namespace all events.
-    var eventNamespace = 'waitForImages';
-
-    // CSS properties which contain references to images. 
-    $.waitForImages = {
-        hasImageProperties: [
-        'backgroundImage',
-        'listStyleImage',
-        'borderImage',
-        'borderCornerImage'
-        ]
-    };
-    
-    // Custom selector to find `img` elements that have a valid `src` attribute and have not already loaded.
-    $.expr[':'].uncached = function(obj) {
-        // Ensure we are dealing with an `img` element with a valid `src` attribute.
-        if ( ! $(obj).is('img[src!=""]')) {
-            return false;
-        }
-
-        // Firefox's `complete` property will always be`true` even if the image has not been downloaded.
-        // Doing it this way works in Firefox.
-        var img = document.createElement('img');
-        img.src = obj.src;
-        return ! img.complete;
-    };
-
-    $.fn.waitForImages = function(finishedCallback, eachCallback, waitForAll) {
-
-        // Handle options object.
-        if ($.isPlainObject(arguments[0])) {
-            eachCallback = finishedCallback.each;
-            waitForAll = finishedCallback.waitForAll;
-            finishedCallback = finishedCallback.finished;
-        }
-
-        // Handle missing callbacks.
-        finishedCallback = finishedCallback || $.noop;
-        eachCallback = eachCallback || $.noop;
-
-        // Convert waitForAll to Boolean
-        waitForAll = !! waitForAll;
-
-        // Ensure callbacks are functions.
-        if (!$.isFunction(finishedCallback) || !$.isFunction(eachCallback)) {
-            throw new TypeError('An invalid callback was supplied.');
-        };
-
-        return this.each(function() {
-            // Build a list of all imgs, dependent on what images will be considered.
-            var obj = $(this),
-                allImgs = [];
-
-            if (waitForAll) {
-                // CSS properties which may contain an image.
-                var hasImgProperties = $.waitForImages.hasImageProperties || [],
-                    matchUrl = /url\((['"]?)(.*?)\1\)/g;
-                
-                // Get all elements, as any one of them could have a background image.
-                obj.find('*').each(function() {
-                    var element = $(this);
-
-                    // If an `img` element, add it. But keep iterating in case it has a background image too.
-                    if (element.is('img:uncached')) {
-                        allImgs.push({
-                            src: element.attr('src'),
-                            element: element[0]
-                        });
-                    }
-
-                    $.each(hasImgProperties, function(i, property) {
-                        var propertyValue = element.css(property);
-                        // If it doesn't contain this property, skip.
-                        if ( ! propertyValue) {
-                            return true;
-                        }
-
-                        // Get all url() of this element.
-                        var match;
-                        while (match = matchUrl.exec(propertyValue)) {
-                            allImgs.push({
-                                src: match[2],
-                                element: element[0]
-                            });
-                        };
-                    });
-                });
-            } else {
-                // For images only, the task is simpler.
-                obj
-                 .find('img:uncached')
-                 .each(function() {
-                    allImgs.push({
-                        src: this.src,
-                        element: this
-                    });
-                });
-            };
-
-            var allImgsLength = allImgs.length,
-                allImgsLoaded = 0;
-
-            // If no images found, don't bother.
-            if (allImgsLength == 0) {
-                finishedCallback.call(obj[0]);
-            };
-
-            $.each(allImgs, function(i, img) {
-                
-                var image = new Image;
-                
-                // Handle the image loading and error with the same callback.
-                $(image).bind('load.' + eventNamespace + ' error.' + eventNamespace, function(event) {
-                    allImgsLoaded++;
-                    
-                    // If an error occurred with loading the image, set the third argument accordingly.
-                    eachCallback.call(img.element, allImgsLoaded, allImgsLength, event.type == 'load');
-                    
-                    if (allImgsLoaded == allImgsLength) {
-                        finishedCallback.call(obj[0]);
-                        return false;
-                    };
-                    
-                });
-
-                image.src = img.src;
-            });
-        });
-    };
-})(jQuery);

yarn.lock

@@ -4203,6 +4203,10 @@ jquery-ujs@1.2.2:
   dependencies:
     jquery ">=1.8.0"
+jquery.waitforimages@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jquery.waitforimages/-/jquery.waitforimages-2.2.0.tgz#63f23131055a1b060dc913e6d874bcc9b9e6b16b"
+
 "jquery@>= 1.9.1", jquery@>=1.8.0, jquery@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"