PanelSchemeTypographyView = PanelSchemeItemView.extend( {
getUIType: function() {
return 'typography';
},
className: function() {
var classes = PanelSchemeItemView.prototype.className.apply( this, arguments );
return classes + ' elementor-panel-box';
},
ui: {
heading: '.elementor-panel-heading',
allFields: '.elementor-panel-scheme-typography-item-field',
inputFields: 'input.elementor-panel-scheme-typography-item-field',
selectFields: 'select.elementor-panel-scheme-typography-item-field',
selectFamilyFields: 'select.elementor-panel-scheme-typography-item-field[name="font_family"]'
},
events: {
'input @ui.inputFields': 'onFieldChange',
'change @ui.selectFields': 'onFieldChange',
'click @ui.heading': 'toggleVisibility'
},
onRender: function() {
var self = this;
this.ui.inputFields.add( this.ui.selectFields ).each( function() {
var $this = Backbone.$( this ),
name = $this.attr( 'name' ),
value = self.model.get( 'value' )[ name ];
$this.val( value );
} );
this.ui.selectFamilyFields.select2( {
dir: elementor.config.is_rtl ? 'rtl' : 'ltr'
} );
},
toggleVisibility: function() {
this.ui.heading.toggleClass( 'elementor-open' );
},
changeUIValue: function( newValue ) {
this.ui.allFields.each( function() {
var $this = Backbone.$( this ),
thisName = $this.attr( 'name' ),
newFieldValue = newValue[ thisName ];
$this.val( newFieldValue ).trigger( 'change' );
} );
},
onFieldChange: function( event ) {
var $select = this.$( event.currentTarget ),
currentValue = elementor.helpers.cloneObject( this.model.get( 'value' ) ),
fieldKey = $select.attr( 'name' );
currentValue[ fieldKey ] = $select.val();
if ( 'font_family' === fieldKey && ! _.isEmpty( currentValue[ fieldKey ] ) ) {
elementor.helpers.enqueueFont( currentValue[ fieldKey ] );
}
this.triggerMethod( 'value:change', currentValue );
}
} );
PanelSchemeColorView;
PanelSchemeColorView = PanelSchemeItemView.extend( {
getUIType: function() {
return 'color';
},
ui: {
input: '.elementor-panel-scheme-color-value'
},
changeUIValue: function( newValue ) {
this.ui.input.wpColorPicker( 'color', newValue );
},
onBeforeDestroy: function() {
if ( this.ui.input.wpColorPicker( 'instance' ) ) {
this.ui.input.wpColorPicker( 'close' );
}
},
onRender: function() {
elementor.helpers.wpColorPicker( this.ui.input, {
change: _.bind( function( event, ui ) {
this.triggerMethod( 'value:change', ui.color.toString() );
}, this )
} );
}
} );
module.exports = PanelSchemeColorView;