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;