Merge pull request #353 from cobicarmel/master

Improved resize performance
elementor · Aug 1, 2016 · 036dda7 · 036dda7
2 parents e430217 + d45d2e1
commit 036dda7
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 99 deletions.
diff --git a/assets/admin/js/app.js b/assets/admin/js/app.js
diff --git a/assets/admin/js/app.min.js b/assets/admin/js/app.min.js
diff --git a/assets/admin/js/dev/behaviors/resizable.js b/assets/admin/js/dev/behaviors/resizable.js
@@ -10,9 +10,8 @@ ResizableBehavior = Marionette.Behavior.extend( {
 	},
 
 	events: {
-		'resizestart': 'onResizeStart',
-		'resizestop': 'onResizeStop',
-		'resize': 'onResize'
+		'resize': 'onResize',
+		'resizestop': 'onResizeStop'
 	},
 
 	initialize: function() {
@@ -58,28 +57,19 @@ ResizableBehavior = Marionette.Behavior.extend( {
 		this.deactivate();
 	},
 
-	onResizeStart: function( event, ui ) {
-		//this.ui.columnTitle.fadeIn( 'fast' );
-	},
+	onResize: function( event, ui ) {
+		event.stopPropagation();
 
-	onResizeStop: function( event, ui ) {
-		//this.ui.columnTitle.fadeOut( 'fast' );
+		this.view.triggerMethod( 'request:resize', ui );
 	},
 
-	onResize: function( event, ui ) {
+	onResizeStop: function( event, ui ) {
 		event.stopPropagation();
 
-		this.view.triggerMethod( 'request:resize', ui );
+		this.view.triggerMethod( 'resize:stopped', ui );
 	},
 
 	getChildViewContainer: function() {
-		//if ( 'function' === typeof this.view.getChildViewContainer ) {
-		//	// CompositeView
-		//	return this.view.getChildViewContainer( this.view );
-		//} else {
-		//	// CollectionView
-		//	return this.$el;
-		//}
 		return this.$el;
 	}
 } );

diff --git a/assets/admin/js/dev/views/column.js b/assets/admin/js/dev/views/column.js
@@ -88,13 +88,16 @@ ColumnView = BaseElementView.extend( {
 		return 'widget' === elType;
 	},
 
-	changeSizeUI: function() {
-		var columnSize = this.model.getSetting( '_column_size' ),
-			inlineSize = this.model.getSetting( '_inline_size' ),
-			columnSizeTitle = parseFloat( inlineSize || columnSize ).toFixed( 1 ) + '%';
+	changeSizeUI: function( inlineSize ) {
+		var columnSize = this.model.getSetting( '_column_size' );
+
+		if ( undefined === inlineSize ) {
+			inlineSize = this.model.getSetting( '_inline_size' );
+		}
+
+		var columnSizeTitle = parseFloat( inlineSize || columnSize ).toFixed( 1 ) + '%';
 
 		this.$el.attr( 'data-col', columnSize );
-		//this.$el.css( 'width', inlineSize ? inlineSize + '%' : '' );
 
 		this.ui.columnTitle.html( columnSizeTitle );
 	},

diff --git a/assets/admin/js/dev/views/section.js b/assets/admin/js/dev/views/section.js
@@ -154,6 +154,40 @@ SectionView = BaseElementView.extend( {
 		}
 	},
 
+	parseColumnsResize: function( childView, ui ) {
+		var currentSize = childView.model.getSetting( '_inline_size' );
+
+		if ( ! currentSize ) {
+			currentSize = this.getColumnPercentSize( ui.element, ui.originalSize.width );
+		}
+
+		var newSize = this.getColumnPercentSize( ui.element, ui.size.width ),
+			difference = newSize - currentSize;
+
+		// Get next column details
+		var modelIndex = this.collection.indexOf( childView.model ),
+			nextModel = this.collection.at( modelIndex + 1 ),
+			nextChildView = this.children.findByModelCid( nextModel.cid );
+
+		if ( ! nextChildView ) {
+			return false;
+		}
+
+		var $nextElement = nextChildView.$el,
+			nextElementCurrentSize = this.getColumnPercentSize( $nextElement, $nextElement.width() ),
+			nextElementNewSize = nextElementCurrentSize - difference;
+
+		if ( newSize < 10 || newSize > 100 || ! difference || nextElementNewSize < 10 || nextElementNewSize > 100 ) {
+			return false;
+		}
+
+		return {
+			currentColumnNewSize: newSize.toFixed( 3 ),
+			nextColumn: nextChildView,
+			nextColumnNewSize: nextElementNewSize.toFixed( 3 )
+		};
+	},
+
 	onBeforeRender: function() {
 		this._checkIsEmpty();
 	},
@@ -177,46 +211,30 @@ SectionView = BaseElementView.extend( {
 	},
 
 	onChildviewRequestResize: function( childView, ui ) {
-		// Get current column details
-		var currentSize = childView.model.getSetting( '_inline_size' );
+		var parsedResize = this.parseColumnsResize( childView, ui );
 
-		if ( ! currentSize ) {
-			currentSize = this.getColumnPercentSize( ui.element, ui.originalSize.width );
-		}
+		childView.changeSizeUI( parsedResize.currentColumnNewSize );
 
-		var	newSize = this.getColumnPercentSize( ui.element, ui.size.width ),
-			difference = newSize - currentSize;
+		parsedResize.nextColumn.changeSizeUI( parsedResize.nextColumnNewSize );
+	},
+
+	onChildviewResizeStopped: function( childView, ui ) {
+		var parsedResize = this.parseColumnsResize( childView, ui );
 
 		ui.element.css( {
-			//width: currentSize + '%',
 			width: '',
 			left: 'initial' // Fix for RTL resizing
 		} );
 
-		// Get next column details
-		var modelIndex = this.collection.indexOf( childView.model ),
-			nextModel = this.collection.at( modelIndex + 1 ),
-			nextChildView = this.children.findByModelCid( nextModel.cid );
-
-		if ( ! nextChildView ) {
-			return;
-		}
-
-		var $nextElement = nextChildView.$el,
-			nextElementCurrentSize = this.getColumnPercentSize( $nextElement, $nextElement.width() ),
-			nextElementNewSize = nextElementCurrentSize - difference;
-
-		if ( newSize < 10 || newSize > 100 || ! difference || nextElementNewSize < 10 || nextElementNewSize > 100 ) {
+		if ( ! parsedResize ) {
 			return;
 		}
 
 		// Set the current column size
-		childView.model.setSetting( '_inline_size', newSize.toFixed( 3 ) );
-		childView.changeSizeUI();
+		childView.model.setSetting( '_inline_size', parsedResize.currentColumnNewSize );
 
 		// Set the next column size
-		nextChildView.model.setSetting( '_inline_size', nextElementNewSize.toFixed( 3 ) );
-		nextChildView.changeSizeUI();
+		parsedResize.nextColumn.model.setSetting( '_inline_size', parsedResize.nextColumnNewSize );
 	},
 
 	onStructureChanged: function() {