@behance/helicropter - npm Package Compare versions

Comparing version 15.0.1 to 15.1.0

package.json

 {
   "name": "@behance/helicropter",
-  "version": "15.0.1",
+  "version": "15.1.0",
   "description": "My helicropter goes \"whosh whosh whosh\"",
@@ -5,0 +5,0 @@ "main": "src/js/index.js",

src/js/index.js

@@ -28,2 +28,3 @@ import extend from '@behance/nbd/util/extend';
       hasInitialImage: this._model.get('initialImage'),
+      loaderStyle: this._model.get('loaderStyle'),
     });
@@ -30,0 +31,0 @@

src/js/UploadArea.js

@@ -79,5 +79,5 @@ import Spinner from 'spin.js';
     this._$btn = this.$view.find('.js-upload-button');
+    this._$progressBar = this.$view.find('.js-progress-bar');
+    this._$progress = this.$view.find('.js-progress');
 
-    this._spinner = new Spinner(SPINNER_OPTIONS);
-
     this._$container.css({
@@ -89,2 +89,3 @@ width: this._model.width,
     this._bindUploadButton();
+    this._bindLoaderStyle(this._model.loaderStyle)();
 
@@ -106,10 +107,2 @@ if (this._model.hasInitialImage) {
 
-  _showUploadState() {
-    this._spinner.stop();
-  },
-
-  _showLoadingState() {
-    this._spinner.spin(this._$btnArea[0]);
-  },
-
   uploadImage() {
@@ -131,13 +124,56 @@ return this._uploader.choose();
     this.on('upload-image', () => this.uploadImage());
-    this.on('image-uploading show-loading-state', () => this._showLoadingState());
-    this.on('image-upload-complete upload-error show-upload-state', () => this._showUploadState());
     this.on('image-uploaded', () => this.hide());
   },
 
+  _bindLoaderStyle(type = 'spinner') {
+    const types = {
+      spinner: () => this._bindSpinner(),
+      progressbar: () => this._bindProgressBar(),
+    };
+
+    if (!types[type]) {
+      throw new Error(`loaderStyle must be 1 of ${Object.keys(types).toString()}`);
+    }
+
+    return types[type];
+  },
+
+  _bindSpinner() {
+    this._$progressBar.hide();
+
+    this.spinner = new Spinner(SPINNER_OPTIONS);
+    const btnArea = this.$view.find('.js-image-upload-wrapper');
+
+    this.on('image-uploading show-loading-state', () => this.spinner.spin(btnArea[0]));
+    this.on('image-upload-complete upload-error show-upload-state', () => this.spinner.stop());
+  },
+
+  _bindProgressBar() {
+    this._$progressBar.show();
+
+    if (!this._$progressBar) {
+      throw new Error('There is no instance of progress bar');
+    }
+
+    this.on('image-progress', ({ loaded, total }) => this._updateProgressBar({ loaded, total }));
+  },
+
+  _updateProgressBar({ loaded, total }) {
+    const perc = loaded / total * 100;
+
+    this._$progress.css('width', `${perc}%`);
+  },
+
   _bind() {
     this.listenTo(this._uploader, {
-      submit() {
+      submit({ file }) {
+        this._model.backgroundImage = this._URL().createObjectURL(file);
+
         this.trigger('image-uploading');
       },
 
+      progress({ loaded, total }) {
+        this.trigger('image-progress', { loaded, total });
+      },
+
       complete({ file, uploadPath, uploadEndpoint, response }) {
@@ -144,0 +180,0 @@ this.trigger('image-upload-complete');

test/specs/index.js

@@ -114,2 +114,8 @@ import $ from 'jquery';
   describe('#uploadThenRender', function() {
+    beforeEach(function() {
+      this.file = new File(['foo'], '', {
+        type: 'image/png',
+      });
+    });
+
     it('does not render until the image is submitted', function() {
@@ -121,3 +127,3 @@ this.helicropter = new Helicropter(this.defaultConfig);
       this.helicropter.uploadThenRender($('.helicropter-container'));
-      this.helicropter._view._uploadArea._uploader.trigger('submit');
+      this.helicropter._view._uploadArea._uploader.trigger('submit', { file: this.file });
 
@@ -133,3 +139,3 @@ expect(this.helicropter._view.$view).toBeDefined();
 
-      this.helicropter._view._uploadArea._uploader.trigger('submit');
+      this.helicropter._view._uploadArea._uploader.trigger('submit', { file: this.file });
     });
@@ -146,3 +152,3 @@
 
-      this.helicropter._view._uploadArea._uploader.trigger('submit');
+      this.helicropter._view._uploadArea._uploader.trigger('submit', { file: this.file });
     });
@@ -149,0 +155,0 @@ });

test/specs/UploadArea.js

@@ -69,2 +69,58 @@ import $ from 'jquery';
 
+  describe('loaderStyle', function() {
+    describe('progressbar', function() {
+      beforeEach(function() {
+        this.uploadArea = this.create({
+          loaderStyle: 'progressbar',
+        });
+      });
+
+      it('displays .js-progress-bar when it is progressbar', function() {
+        expect($('.js-progress-bar')).toExist();
+      });
+
+      it('updates the value as it loads the image', function() {
+        this.uploadArea._uploader.trigger('progress', { loaded: 1, total: 2 });
+        expect($('.js-progress').attr('style')).toEqual('width: 50%;');
+        this.uploadArea._uploader.trigger('progress', { loaded: 2, total: 2 });
+        expect($('.js-progress').attr('style')).toEqual('width: 100%;');
+      });
+    });
+
+    describe('spinner', function() {
+      beforeEach(function() {
+        this.uploadArea = this.create();
+
+        this.file = new File(['foo'], '', {
+          type: 'image/png',
+        });
+
+        spyOn(this.uploadArea.spinner, 'spin');
+        spyOn(this.uploadArea.spinner, 'stop');
+      });
+
+      it('hides .js-progress-bar when it is progressbar', function() {
+        expect($('.js-progress-bar')).not.toBeVisible();
+      });
+
+      it('displays the spinner when it is uploading the image', function() {
+        this.uploadArea._uploader.trigger('submit', { file: this.file });
+
+        expect(this.uploadArea.spinner.spin).toHaveBeenCalled();
+      });
+
+      it('stops the spinner when it is done uploading the image', function() {
+        this.uploadArea._uploader.trigger('complete', { file: this.file });
+
+        expect(this.uploadArea.spinner.stop).toHaveBeenCalled();
+      });
+
+      it('stops the spinner when the upload causes an error', function() {
+        this.uploadArea._uploader.trigger('error', 'foo');
+
+        expect(this.uploadArea.spinner.stop).toHaveBeenCalled();
+      });
+    });
+  });
+
   describe('isUploadButtonHidden', function() {
@@ -71,0 +127,0 @@ it('hides .js-upload-button when it is true', function() {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8659244

increased by0.04%

Number of package files

51

increased by2%

Lines of code

4140

increased by1.85%

No dependency changes