Refactor GitLabCrop to ES6.

app/assets/javascripts/profile/gl_crop.js → app/assets/javascripts/profile/gl_crop.js.es6

-(function() {
-  var GitLabCrop,
-    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+((global) => {
 
-  GitLabCrop = (function() {
-    var FILENAMEREGEX;
+  // Matches everything but the file name
+  const FILENAMEREGEX = /^.*[\\\/]/;
 
-    // Matches everything but the file name
-    FILENAMEREGEX = /^.*[\\\/]/;
+  class GitLabCrop {
+    constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
+        exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
 
-    function GitLabCrop(input, opts) {
-      var ref, ref1, ref2, ref3, ref4;
-      if (opts == null) {
-        opts = {};
-      }
-      this.onUploadImageBtnClick = bind(this.onUploadImageBtnClick, this);
-      this.onModalHide = bind(this.onModalHide, this);
-      this.onModalShow = bind(this.onModalShow, this);
-      this.onPickImageClick = bind(this.onPickImageClick, this);
+      this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
+      this.onModalHide = this.onModalHide.bind(this);
+      this.onModalShow = this.onModalShow.bind(this);
+      this.onPickImageClick = this.onPickImageClick.bind(this);
       this.fileInput = $(input);
-      // We should rename to avoid spec to fail
-      // Form will submit the proper input filed with a file using FormData
-      this.fileInput.attr('name', (this.fileInput.attr('name')) + "-trigger").attr('id', (this.fileInput.attr('id')) + "-trigger");
-      // Set defaults
-      this.exportWidth = (ref = opts.exportWidth) != null ? ref : 200, this.exportHeight = (ref1 = opts.exportHeight) != null ? ref1 : 200, this.cropBoxWidth = (ref2 = opts.cropBoxWidth) != null ? ref2 : 200, this.cropBoxHeight = (ref3 = opts.cropBoxHeight) != null ? ref3 : 200, this.form = (ref4 = opts.form) != null ? ref4 : this.fileInput.parents('form'), this.filename = opts.filename, this.previewImage = opts.previewImage, this.modalCrop = opts.modalCrop, this.pickImageEl = opts.pickImageEl, this.uploadImageBtn = opts.uploadImageBtn, this.modalCropImg = opts.modalCropImg;
-      // Required params
-      // Ensure needed elements are jquery objects
-      // If selector is provided we will convert them to a jQuery Object
-      this.filename = this.getElement(this.filename);
-      this.previewImage = this.getElement(this.previewImage);
-      this.pickImageEl = this.getElement(this.pickImageEl);
-      // Modal elements usually are outside the @form element
-      this.modalCrop = _.isString(this.modalCrop) ? $(this.modalCrop) : this.modalCrop;
-      this.uploadImageBtn = _.isString(this.uploadImageBtn) ? $(this.uploadImageBtn) : this.uploadImageBtn;
       this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
+      this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `this.fileInput.attr('id')-trigger`);
+      this.exportWidth = exportWidth;
+      this.exportHeight = exportHeight;
+      this.cropBoxWidth = cropBoxWidth;
+      this.cropBoxHeight = cropBoxHeight;
+      this.form = this.fileInput.parents('form');
+      this.filename = filename;
+      this.previewImage = previewImage;
+      this.modalCrop = modalCrop;
+      this.pickImageEl = pickImageEl;
+      this.uploadImageBtn = uploadImageBtn;
+      this.modalCropImg = modalCropImg;
+      this.filename = this.getElement(filename);
+      this.previewImage = this.getElement(previewImage);
+      this.pickImageEl = this.getElement(pickImageEl);
+      this.modalCrop = _.isString(modalCrop) ? $(modalCrop) : modalCrop;
+      this.uploadImageBtn = _.isString(uploadImageBtn) ? $(uploadImageBtn) : uploadImageBtn;
+      this.modalCropImg = _.isString(modalCropImg) ? $(modalCropImg) : modalCropImg;
       this.cropActionsBtn = this.modalCrop.find('[data-method]');
       this.bindEvents();
     }
 
-    GitLabCrop.prototype.getElement = function(selector) {
+    getElement(selector) {
       return $(selector, this.form);
-    };
+    }
 
-    GitLabCrop.prototype.bindEvents = function() {
+    bindEvents() {
       var _this;
       _this = this;
       this.fileInput.on('change', function(e) {
@@ -57,13 +55,13 @@
         return _this.onActionBtnClick(btn);
       });
       return this.croppedImageBlob = null;
-    };
+    }
 
-    GitLabCrop.prototype.onPickImageClick = function() {
+    onPickImageClick() {
       return this.fileInput.trigger('click');
-    };
+    }
 
-    GitLabCrop.prototype.onModalShow = function() {
+    onModalShow() {
       var _this;
       _this = this;
       return this.modalCropImg.cropper({
@@ -95,44 +93,44 @@
           });
         }
       });
-    };
+    }
 
-    GitLabCrop.prototype.onModalHide = function() {
+    onModalHide() {
       return this.modalCropImg.attr('src', '').cropper('destroy');
-    };
+    }
 
-    GitLabCrop.prototype.onUploadImageBtnClick = function(e) { // Remove attached image
-      e.preventDefault(); // Destroy cropper instance
+    onUploadImageBtnClick(e) {
+      e.preventDefault();
       this.setBlob();
       this.setPreview();
       this.modalCrop.modal('hide');
       return this.fileInput.val('');
-    };
+    }
 
-    GitLabCrop.prototype.onActionBtnClick = function(btn) {
+    onActionBtnClick(btn) {
       var data, result;
       data = $(btn).data();
       if (this.modalCropImg.data('cropper') && data.method) {
         return result = this.modalCropImg.cropper(data.method, data.option);
       }
-    };
+    }
 
-    GitLabCrop.prototype.onFileInputChange = function(e, input) {
+    onFileInputChange(e, input) {
       return this.readFile(input);
-    };
+    }
 
-    GitLabCrop.prototype.readFile = function(input) {
+    readFile(input) {
       var _this, reader;
       _this = this;
       reader = new FileReader;
-      reader.onload = function() {
+      reader.onload = () => {
         _this.modalCropImg.attr('src', reader.result);
         return _this.modalCrop.modal('show');
       };
       return reader.readAsDataURL(input.files[0]);
-    };
+    }
 
-    GitLabCrop.prototype.dataURLtoBlob = function(dataURL) {
+    dataURLtoBlob(dataURL) {
       var array, binary, i, k, len, v;
       binary = atob(dataURL.split(',')[1]);
       array = [];
@@ -143,35 +141,32 @@
       return new Blob([new Uint8Array(array)], {
         type: 'image/png'
       });
-    };
+    }
 
-    GitLabCrop.prototype.setPreview = function() {
+    setPreview() {
       var filename;
       this.previewImage.attr('src', this.dataURL);
       filename = this.fileInput.val().replace(FILENAMEREGEX, '');
       return this.filename.text(filename);
-    };
+    }
 
-    GitLabCrop.prototype.setBlob = function() {
+    setBlob() {
       this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
         width: 200,
         height: 200
       }).toDataURL('image/png');
       return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
-    };
+    }
 
-    GitLabCrop.prototype.getBlob = function() {
+    getBlob() {
       return this.croppedImageBlob;
-    };
-
-    return GitLabCrop;
-
-  })();
+    }
+  }
 
   $.fn.glCrop = function(opts) {
     return this.each(function() {
       return $(this).data('glcrop', new GitLabCrop(this, opts));
     });
-  };
+  }
 
-}).call(this);
+})(window.gl || (window.gl = {}));