merged

assets/admin/js/dev/app.js

@@ -5,6 +5,7 @@ App = Marionette.Application.extend( {
 	helpers: require( 'elementor-utils/helpers' ),
 	heartbeat: require( 'elementor-utils/heartbeat' ),
 	schemes: require( 'elementor-utils/schemes' ),
+	presetsFactory: require( 'elementor-utils/presets-factory' ),
 
 	// Channels
 	editor: Backbone.Radio.channel( 'ELEMENTOR:editor' ),

assets/admin/js/dev/utils/presets-factory.js

@@ -0,0 +1,115 @@
+var presetsFactory;
+
+presetsFactory = {
+
+	getPresetsDictionary: function() {
+		return {
+			11: 100 / 9,
+			12: 100 / 8,
+			14: 100 / 7,
+			16: 100 / 6,
+			33: 100 / 3,
+			66: 2 / 3 * 100,
+			83: 5 / 6 * 100
+		};
+	},
+
+	getAbsolutePresetValues: function( preset ) {
+		var clonedPreset = elementor.helpers.cloneObject( preset ),
+			presetDictionary = this.getPresetsDictionary();
+
+		_.each( clonedPreset, function( unitValue, unitIndex ) {
+			if ( presetDictionary[ unitValue ] ) {
+				clonedPreset[ unitIndex ] = presetDictionary[ unitValue ];
+			}
+		} );
+
+		return clonedPreset;
+	},
+
+	getPresets: function( columnsCount, presetIndex ) {
+		var presets = elementor.helpers.cloneObject( elementor.config.elements.section.presets );
+
+		if ( columnsCount ) {
+			presets = presets[ columnsCount ];
+		}
+
+		if ( presetIndex ) {
+			presets = presets[ presetIndex ];
+		}
+
+		return presets;
+	},
+
+	getPresetByStructure: function( structure ) {
+		var parsedStructure = this.getParsedStructure( structure );
+
+		return this.getPresets( parsedStructure.columnsCount, parsedStructure.presetIndex );
+	},
+
+	getParsedStructure: function( structure ) {
+		structure += ''; // Make sure this is a string
+
+		return {
+			columnsCount: structure.slice( 0, -1 ),
+			presetIndex: structure.substr( -1 )
+		};
+	},
+
+	getPresetSVG: function( preset, svgWidth, svgHeight, separatorWidth ) {
+		svgWidth = svgWidth || 100;
+		svgHeight = svgHeight || 50;
+		separatorWidth = separatorWidth || 2;
+
+		var absolutePresetValues = this.getAbsolutePresetValues( preset ),
+			presetSVGPath = this._generatePresetSVGPath( absolutePresetValues, svgWidth, svgHeight, separatorWidth );
+
+		return this._createSVGPreset( presetSVGPath, svgWidth, svgHeight );
+	},
+
+	_createSVGPreset: function( presetPath, svgWidth, svgHeight ) {
+		var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+
+		svg.setAttributeNS( 'http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink' );
+		svg.setAttribute( 'viewBox', '0 0 ' + svgWidth + ' ' + svgHeight );
+
+		var path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+
+		path.setAttribute( 'd', presetPath );
+
+		svg.appendChild( path );
+
+		return svg;
+	},
+
+	_generatePresetSVGPath: function( preset, svgWidth, svgHeight, separatorWidth ) {
+		var DRAW_SIZE = svgWidth - separatorWidth * ( preset.length - 1 );
+
+		var xPointer = 0,
+			dOutput = '';
+
+		for ( var i = 0; i < preset.length; i++ ) {
+			if ( i ) {
+				dOutput += ' ';
+			}
+
+			var increment = preset[ i ] / 100 * DRAW_SIZE;
+
+			xPointer += increment;
+
+			dOutput += 'M' + ( +xPointer.toFixed( 4 ) ) + ',0';
+
+			dOutput += 'V' + svgHeight;
+
+			dOutput += 'H' + ( +( xPointer - increment ).toFixed( 4 ) );
+
+			dOutput += 'V0Z';
+
+			xPointer += separatorWidth;
+		}
+
+		return dOutput;
+	}
+};
+
+module.exports = presetsFactory;

assets/admin/js/dev/views/controls/dimensions.js

@@ -60,11 +60,13 @@ ControlDimensionsItemView = ControlBaseUnitsItemView.extend( {
 			this.ui.link.addClass( 'unlinked' );
 
 			this.ui.controls.each( _.bind( function( index, element ) {
-				if ( _.isEmpty( currentValue[ element.name ] ) ) {
-					currentValue[ element.name ] = this.defaultDimensionValue;
+				var value = currentValue[ element.dataset.setting ];
+
+				if ( _.isEmpty( value ) ) {
+					value = this.defaultDimensionValue;
 				}
 
-				this.$( element ).val( currentValue[ element.name ] );
+				this.$( element ).val( value );
 			}, this ) );
 		}
 

assets/admin/js/dev/views/controls/media.js

@@ -18,7 +18,7 @@ ControlMediaItemView = ControlMultipleBaseItemView.extend( {
 	},
 
 	onReady: function() {
-		if ( _.isEmpty( this.getControlValue() ) ) {
+		if ( _.isEmpty( this.getControlValue( 'url' ) ) ) {
 			this.ui.controlMedia.addClass( 'media-empty' );
 		}
 	},

assets/admin/js/dev/views/controls/structure.js

@@ -1,25 +1,20 @@
 var ControlBaseItemView = require( 'elementor-views/controls/base' ),
-	SectionView = require( 'elementor-views/section' ),
 	ControlStructureItemView;
 
 ControlStructureItemView = ControlBaseItemView.extend( {
 
 	templateHelpers: function() {
 		var helpers = ControlBaseItemView.prototype.templateHelpers.apply( this, arguments );
 
-		helpers.getPresetByStructure = function( structure ) {
-			return SectionView.getPresetByStructure( structure );
-		};
-
 		helpers.getMorePresets = _.bind( this.getMorePresets, this );
 
 		return helpers;
 	},
 
 	getMorePresets: function() {
-		var parsedStructure = SectionView.getParsedStructure( this.getControlValue() );
+		var parsedStructure = elementor.presetsFactory.getParsedStructure( this.getControlValue() );
 
-		return SectionView.getPresets( parsedStructure.columnsCount );
+		return elementor.presetsFactory.getPresets( parsedStructure.columnsCount );
 	},
 
 	onInputChange: function() {

assets/admin/js/dev/views/section.js

@@ -105,7 +105,8 @@ SectionView = BaseElementView.extend( {
 	},
 
 	setStructure: function( structure ) {
-		var parsedStructure = SectionView.getParsedStructure( structure );
+		var parsedStructure = elementor.presetsFactory.getParsedStructure( structure );
+
 		if ( +parsedStructure.columnsCount !== this.collection.length ) {
 			throw new TypeError( 'The provided structure doesn\'t match the columns count.' );
 		}
@@ -114,7 +115,7 @@ SectionView = BaseElementView.extend( {
 	},
 
 	redefineLayout: function() {
-		var preset = SectionView.getPresetByStructure( this.getStructure() );
+		var preset = elementor.presetsFactory.getPresetByStructure( this.getStructure() );
 
 		this.collection.each( function( model, index ) {
 			model.setSetting( '_column_size', preset.preset[ index ] );
@@ -221,34 +222,6 @@ SectionView = BaseElementView.extend( {
 	onStructureChanged: function() {
 		this.redefineLayout();
 	}
-}, {
-	// Static methods
-	getPresets: function( columnsCount, presetIndex ) {
-		var presets = elementor.helpers.cloneObject( elementor.config.elements.section.presets );
-
-		if ( columnsCount ) {
-			presets = presets[ columnsCount ];
-		}
-
-		if ( presetIndex ) {
-			presets = presets[ presetIndex ];
-		}
-
-		return presets;
-	},
-
-	getPresetByStructure: function( structure ) {
-		var parsedStructure = SectionView.getParsedStructure( structure );
-
-		return SectionView.getPresets( parsedStructure.columnsCount, parsedStructure.presetIndex );
-	},
-
-	getParsedStructure: function( structure ) {
-		return {
-			columnsCount: structure.slice( 0, -1 ),
-			presetIndex: structure.substr( -1 )
-		};
-	}
 } );
 
 module.exports = SectionView;

assets/admin/js/dev/views/sections.js

@@ -131,7 +131,7 @@ SectionsCollectionView = Marionette.CompositeView.extend( {
 		this.closeSelectPresets();
 
 		var selectedStructure = event.currentTarget.dataset.structure,
-			parsedStructure = SectionView.getParsedStructure( selectedStructure ),
+			parsedStructure = elementor.presetsFactory.getParsedStructure( selectedStructure ),
 			elements = [],
 			loopIndex;