Improve new upload fetching and feedback

Gruntfile.js

@@ -32,8 +32,8 @@ module.exports = function (grunt)
 		uglify: {
 			options: {
 				preserveComments: false,
-				sourceMap: true,
-				beautify: true
+				sourceMap: false,
+				beautify: false
 			},
 			plugins: {
 				files: [

js/app/models/model.attachment.js

@@ -49,6 +49,9 @@
 			}, this);
 
 			this.on('change:differState', this.resetAjaxState, this);
+
+			// Trigger once to handle situation where no data is given after fetching
+			self.setDifferState();
 		},
 
 		/**
@@ -60,6 +63,8 @@
 		{
 			var self = this;
 
+			this.set('ajaxState', 'fetching');
+
 			this.fetch({
 				url: ajaxurl + '?action=get-focuspoint',
 				data: $.param({id: this.id}),
@@ -71,18 +76,22 @@
 							self.validateFocusPoint(data);
 
 							//Store focuspoint and use 'set' for to trigger events
-							self.set({'src': data.src});
-							self.set({'focusPointOrigin': data.focusPoint});
-							self.set({'focusPoint': data.focusPoint});
+							self.set({
+								'src': data.src,
+								'focusPointOrigin': data.focusPoint,
+								'focusPoint': data.focusPoint
+							});
 						} catch (error) {
 							console.log(error);
 						}
 					}
+					self.set('ajaxState', false);
 				},
 				error: function (collection, response, options)
 				{
 					// you can pass additional options to the event you trigger here as well
 					console.log(response);
+					self.set('ajaxState', false);
 				}
 			});
 		},
@@ -117,8 +126,8 @@
 				error: function (collection, response, options)
 				{
 					// you can pass additional options to the event you trigger here as well
-					self.set('ajaxState', 'failed');
 					console.log(response);
+					self.set('ajaxState', 'failed');
 				}
 			});
 		},
@@ -165,7 +174,7 @@
 		resetAjaxState: function ()
 		{
 			if (this.differState === true) {
-				self.model.set('ajaxState', false);
+				this.model.set('ajaxState', false);
 			}
 		},
 

js/app/views/view.attachment.js

@@ -17,9 +17,10 @@
 			//Trigger once on focusPointOrigin change, called straight after an ajax call
 			this.model.once("change:focusPoint", this.updateDimensions, this);
 			this.model.on("change:focusPointOrigin", this.updateDimensions, this);
+			this.model.on("change:ajaxState", this.updateDimensions, this);
 
 			// Trigger also on focusInterface activeState changes to minimum display errors
-			this.focusInterface.on('change:activeState',this.updateDimensions, this);
+			this.focusInterface.on('change:activeState', this.updateDimensions, this);
 		},
 
 		/**

js/app/views/view.cropbutton.js

@@ -29,7 +29,7 @@
 			this.model.on('change:text', this.render, this);
 
 			// Update button
-			this.render();
+			this.ajaxStateHandler().differStateHandler().render();
 		},
 
 		render: function ()
@@ -41,6 +41,8 @@
 			this.$cropButton.toggleClass(IFA.css.button._disabled, disableState);
 			this.$cropButton.toggleClass(IFA.css.button._primary, highlightState);
 			this.$cropButton.text(text);
+
+			return this;
 		},
 
 		differStateHandler: function ()
@@ -53,6 +55,8 @@
 			} else {
 				this.disable();
 			}
+
+			return this;
 		},
 
 		ajaxStateHandler: function ()
@@ -68,13 +72,19 @@
 					this.model.set('text', focusPointL10n.cropButtonSuccess);
 					this.disable();
 					break;
+				case 'fetching':
+					this.model.set('text', focusPointL10n.cropButtonFetching);
+					this.disable();
+					break;
 				case 'failed':
 					this.model.set('text', focusPointL10n.cropButtonFailed);
 					this.activate();
 					break;
 				default:
 					this.model.set('text', focusPointL10n.cropButton);
 			}
+
+			return this;
 		},
 
 		highlight: function ()

js/app/views/view.focusinterface.js

@@ -44,6 +44,9 @@
 			this.attachment.once('change:focusPoint', this.updateDimensionData, this);
 			this.attachment.once('change:focusPoint', this.updateFocusPoint, this);
 
+			// Avoid calculation errors when no data is given by triggering updateDimensionData on ajaxState changes
+			this.attachment.on('change:ajaxState', this.updateDimensionData, this);
+
 			// Set events for states
 			this.setStateEvent('hoverState','is-hover');
 			this.setStateEvent('activeState','is-active');
@@ -298,6 +301,7 @@
 			});
 
 			var focusPoint = this.attachment.get('focusPoint');
+
 			// Write position based on the calculation position of focuspoint of the attachment
 			var position = {
 				x: (focusPoint.x / 100) * this.attachment.get('width'),