Merge pull request #248 from cobicarmel/feature/box-shadow

Feature/box shadow

assets/admin/js/dev/app.js

@@ -80,7 +80,8 @@ App = Marionette.Application.extend( {
 				gallery: require( 'elementor-views/controls/gallery' ),
 				select2: require( 'elementor-views/controls/select2' ),
 				box_shadow: require( 'elementor-views/controls/box-shadow' ),
-				structure: require( 'elementor-views/controls/structure' )
+				structure: require( 'elementor-views/controls/structure' ),
+				animation: require( 'elementor-views/controls/animation' )
 			};
 
 			this.editor.trigger( 'editor:controls:initialize' );

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

@@ -0,0 +1,11 @@
+var ControlBaseItemView = require( 'elementor-views/controls/base' ),
+	ControlAnimationItemView;
+
+ControlAnimationItemView = ControlBaseItemView.extend( {
+
+	onReady: function() {
+		this.ui.select.select2();
+	}
+} );
+
+module.exports = ControlAnimationItemView;

assets/admin/js/dev/views/controls/box-shadow.js

@@ -5,7 +5,7 @@ ControlBoxShadowItemView = ControlMultipleBaseItemView.extend( {
 	ui: function() {
 		var ui = ControlMultipleBaseItemView.prototype.ui.apply( this, arguments );
 
-		ui.sliders = '.elementor-control-slider';
+		ui.sliders = '.elementor-slider';
 		ui.colors = '.elementor-box-shadow-color-picker';
 
 		return ui;
@@ -20,55 +20,40 @@ ControlBoxShadowItemView = ControlMultipleBaseItemView.extend( {
 
 		this.ui.sliders.each( function() {
 			var $slider = Backbone.$( this ),
-				$input = $slider.next( '.elementor-control-slider-input' ).find( 'input' ),
-				min = Number( $input.attr( 'min' ) ),
-				max = Number( $input.attr( 'max' ) );
+				$input = $slider.next( '.elementor-slider-input' ).find( 'input' );
 
 			$slider.slider( {
 				value: value[ this.dataset.input ],
-				min: min,
-				max: max
+				min: +$input.attr( 'min' ),
+				max: +$input.attr( 'max' )
 			} );
 		} );
 	},
 
 	initColors: function() {
-		var $colors = this.ui.colors,
-			self = this;
+		var self = this;
 
-		$colors.each( function() {
-			var $color = Backbone.$( this );
-
-			$color.wpColorPicker( {
-				change: function() {
-					var type = $color.data( 'setting' );
-
-					self.setValue( type, $color.wpColorPicker( 'color' ) );
-				},
+		this.ui.colors.wpColorPicker( {
+			change: function() {
+				var $this = Backbone.$( this ),
+					type = $this.data( 'setting' );
 
-				clear: function() {
-					var type = $color.data( 'setting' );
+				self.setValue( type, $this.wpColorPicker( 'color' ) );
+			},
 
-					self.setValue( type, '' );
-				},
+			clear: function() {
+				self.setValue( this.dataset.setting, '' );
+			},
 
-				width: 251
-			} );
+			width: 251
 		} );
 	},
 
 	onInputChange: function( event ) {
 		var type = event.currentTarget.dataset.setting,
-			$slider = this.ui.sliders.filter( '[data-input="' + type + '"]' ),
-			$input = Backbone.$( event.currentTarget ),
-			min = Number( $input.attr( 'min' ) ),
-			max = Number( $input.attr( 'max' ) );
-
-		$slider.slider( {
-			value: this.getControlValue( type ),
-			min: min,
-			max: max
-		} );
+			$slider = this.ui.sliders.filter( '[data-input="' + type + '"]' );
+
+		$slider.slider( 'value', this.getControlValue( type ) );
 	},
 
 	onReady: function() {

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

@@ -2,26 +2,12 @@ var ControlBaseItemView = require( 'elementor-views/controls/base' ),
 	ControlFontItemView;
 
 ControlFontItemView = ControlBaseItemView.extend( {
-	ui: function() {
-		var ui = ControlBaseItemView.prototype.ui.apply( this, arguments );
-
-		ui.fontSelect = '.elementor-control-font-family';
-
-		return ui;
-	},
 	onReady: function() {
-		this.ui.fontSelect.select2( {
+		this.ui.select.select2( {
 			dir: elementor.config.is_rtl ? 'rtl' : 'ltr'
 		} );
 	},
 
-	onBeforeDestroy: function() {
-		if ( this.ui.fontSelect.data( 'select2' ) ) {
-			this.ui.fontSelect.select2( 'destroy' );
-		}
-		this.$el.remove();
-	},
-
 	templateHelpers: function() {
 		var helpers = ControlBaseItemView.prototype.templateHelpers.apply( this, arguments );
 

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

@@ -2,13 +2,6 @@ var ControlBaseItemView = require( 'elementor-views/controls/base' ),
 	ControlIconItemView;
 
 ControlIconItemView = ControlBaseItemView.extend( {
-	ui: function() {
-		var ui = ControlBaseItemView.prototype.ui.apply( this, arguments );
-
-		ui.iconSelect = '.elementor-control-icon';
-
-		return ui;
-	},
 
 	initialize: function() {
 		ControlBaseItemView.prototype.initialize.apply( this, arguments );
@@ -56,18 +49,11 @@ ControlIconItemView = ControlBaseItemView.extend( {
 	},
 
 	onReady: function() {
-		this.ui.iconSelect.select2( {
+		this.ui.select.select2( {
 			allowClear: true,
 			templateResult: _.bind( this.iconsList, this ),
 			templateSelection: _.bind( this.iconsList, this )
 		} );
-	},
-
-	onBeforeDestroy: function() {
-		if ( this.ui.iconSelect.data( 'select2' ) ) {
-			this.ui.iconSelect.select2( 'destroy' );
-		}
-		this.$el.remove();
 	}
 } );
 

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

@@ -1,3 +1,5 @@
+// Attention: DO NOT use this control since it has bugs
+// TODO: This control is unused
 var ControlBaseItemView = require( 'elementor-views/controls/base' ),
 	ControlSelect2ItemView;
 

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

@@ -5,7 +5,7 @@ ControlSliderItemView = ControlBaseUnitsItemView.extend( {
 	ui: function() {
 		var ui = ControlBaseUnitsItemView.prototype.ui.apply( this, arguments );
 
-		ui.slider = '.elementor-control-slider';
+		ui.slider = '.elementor-slider';
 
 		return ui;
 	},