Merge branch 'Remove-IIFEs-from-image_file.js' into 'master'

Remove IIFEs from image_file.js

See merge request gitlab-org/gitlab!19548

app/assets/javascripts/commit/image_file.js

-/* eslint-disable func-names, no-var, no-else-return, consistent-return, one-var, no-return-assign, no-unused-expressions, no-sequences */
+/* eslint-disable func-names, no-var, no-else-return, consistent-return, one-var, no-return-assign */
 
 import $ from 'jquery';
 
@@ -9,40 +9,29 @@ const viewModes = ['two-up', 'swipe'];
 export default class ImageFile {
   constructor(file) {
     this.file = file;
-    this.requestImageInfo(
-      $('.two-up.view .frame.deleted img', this.file),
-      (function(_this) {
-        return function() {
-          return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), () => {
-            _this.initViewModes();
+    this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), () =>
+      this.requestImageInfo($('.two-up.view .frame.added img', this.file), () => {
+        this.initViewModes();
 
         // Load two-up view after images are loaded
         // so that we can display the correct width and height information
-            const $images = $('.two-up.view img', _this.file);
+        const $images = $('.two-up.view img', this.file);
 
         $images.waitForImages(() => {
-              _this.initView('two-up');
+          this.initView('two-up');
         });
-          });
-        };
-      })(this),
+      }),
     );
   }
 
   initViewModes() {
     const viewMode = viewModes[0];
     $('.view-modes', this.file).removeClass('hide');
-    $('.view-modes-menu', this.file).on(
-      'click',
-      'li',
-      (function(_this) {
-        return function(event) {
+    $('.view-modes-menu', this.file).on('click', 'li', event => {
       if (!$(event.currentTarget).hasClass('active')) {
-            return _this.activateViewMode(event.currentTarget.className);
+        return this.activateViewMode(event.currentTarget.className);
       }
-        };
-      })(this),
-    );
+    });
     return this.activateViewMode(viewMode);
   }
 
@@ -51,15 +40,10 @@ export default class ImageFile {
       .removeClass('active')
       .filter(`.${viewMode}`)
       .addClass('active');
-    return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(
-      200,
-      (function(_this) {
-        return function() {
-          $(`.view.${viewMode}`, _this.file).fadeIn(200);
-          return _this.initView(viewMode);
-        };
-      })(this),
-    );
+    return $(`.view:visible:not(.${viewMode})`, this.file).fadeOut(200, () => {
+      $(`.view.${viewMode}`, this.file).fadeIn(200);
+      return this.initView(viewMode);
+    });
   }
 
   initView(viewMode) {
@@ -103,22 +87,18 @@ export default class ImageFile {
       .on('touchmove', dragMove);
   }
 
-  prepareFrames(view) {
+  static prepareFrames(view) {
     var maxHeight, maxWidth;
     maxWidth = 0;
     maxHeight = 0;
     $('.frame', view)
-      .each(
-        (function() {
-          return function(index, frame) {
+      .each((index, frame) => {
         var height, width;
         width = $(frame).width();
         height = $(frame).height();
         maxWidth = width > maxWidth ? width : maxWidth;
         return (maxHeight = height > maxHeight ? height : maxHeight);
-          };
-        })(this),
-      )
+      })
       .css({
         width: maxWidth,
         height: maxHeight,
@@ -128,9 +108,7 @@ export default class ImageFile {
 
   views = {
     'two-up': function() {
-      return $('.two-up.view .wrap', this.file).each(
-        (function(_this) {
-          return function(index, wrap) {
+      return $('.two-up.view .wrap', this.file).each((index, wrap) => {
         $('img', wrap).each(function() {
           var currentWidth;
           currentWidth = $(this).width();
@@ -138,24 +116,21 @@ export default class ImageFile {
             return $(this).width(availWidth / 2);
           }
         });
-            return _this.requestImageInfo($('img', wrap), (width, height) => {
+        return this.requestImageInfo($('img', wrap), (width, height) => {
           $('.image-info .meta-width', wrap).text(`${width}px`);
           $('.image-info .meta-height', wrap).text(`${height}px`);
           return $('.image-info', wrap).removeClass('hide');
         });
-          };
-        })(this),
-      );
+      });
     },
     swipe() {
       var maxHeight, maxWidth;
       maxWidth = 0;
       maxHeight = 0;
-      return $('.swipe.view', this.file).each(
-        (function(_this) {
-          return function(index, view) {
-            var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-            (ref = _this.prepareFrames(view)), ([maxWidth, maxHeight] = ref);
+      return $('.swipe.view', this.file).each((index, view) => {
+        var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding;
+        const ref = ImageFile.prepareFrames(view);
+        [maxWidth, maxHeight] = ref;
         $swipeFrame = $('.swipe-frame', view);
         $swipeWrap = $('.swipe-wrap', view);
         $swipeBar = $('.swipe-bar', view);
@@ -175,26 +150,24 @@ export default class ImageFile {
 
         wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
 
-            _this.initDraggable($swipeBar, wrapPadding, (e, left) => {
+        this.initDraggable($swipeBar, wrapPadding, (e, left) => {
           if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) {
             $swipeWrap.width(maxWidth + 1 - left);
             $swipeBar.css('left', left);
           }
         });
-          };
-        })(this),
-      );
+      });
     },
     'onion-skin': function() {
       var dragTrackWidth, maxHeight, maxWidth;
       maxWidth = 0;
       maxHeight = 0;
       dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
-      return $('.onion-skin.view', this.file).each(
-        (function(_this) {
-          return function(index, view) {
-            var $frame, $track, $dragger, $frameAdded, framePadding, ref;
-            (ref = _this.prepareFrames(view)), ([maxWidth, maxHeight] = ref);
+      return $('.onion-skin.view', this.file).each((index, view) => {
+        var $frame, $track, $dragger, $frameAdded, framePadding;
+
+        const ref = ImageFile.prepareFrames(view);
+        [maxWidth, maxHeight] = ref;
         $frame = $('.onion-skin-frame', view);
         $frameAdded = $('.frame.added', view);
         $track = $('.drag-track', view);
@@ -215,7 +188,7 @@ export default class ImageFile {
         $frameAdded.css('opacity', 1);
         framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
 
-            _this.initDraggable($dragger, framePadding, (e, left) => {
+        this.initDraggable($dragger, framePadding, (e, left) => {
           var opacity = left / dragTrackWidth;
 
           if (opacity >= 0 && opacity <= 1) {
@@ -223,9 +196,7 @@ export default class ImageFile {
             $frameAdded.css('opacity', opacity);
           }
         });
-          };
-        })(this),
-      );
+      });
     },
   };
 
@@ -235,14 +206,7 @@ export default class ImageFile {
       if (domImg.complete) {
         return callback.call(this, domImg.naturalWidth, domImg.naturalHeight);
       } else {
-        return img.on(
-          'load',
-          (function(_this) {
-            return function() {
-              return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight);
-            };
-          })(this),
-        );
+        return img.on('load', () => callback.call(this, domImg.naturalWidth, domImg.naturalHeight));
       }
     }
   }

changelogs/unreleased/Remove-IIFEs-from-image_file-js.yml

+---
+title: Removed IIFEs from image_file.js
+merge_request: 19548
+author: nuwe1
+type: other