diff --git a/includes/js/block.js b/includes/js/block.js index f6a8ea4..aad9232 100644 --- a/includes/js/block.js +++ b/includes/js/block.js @@ -55,7 +55,8 @@ ), ), DFIGBlockObject.el( InspectorControls, {}, - _getPanels( props, params ) + _getPanels( props, params, params.block ), + onChangeSelect( false, false, props ) ) ]; }, @@ -71,10 +72,11 @@ * * @param props * @param params + * @param blockName * @return {Array} * @private */ - function _getPanels( props, params ) { + function _getPanels( props, params, blockName ) { const panels = [], PanelBody = wp.components.PanelBody; Object.keys( params.panels ).forEach( function ( key, index ) { @@ -84,7 +86,7 @@ title: IndividualPanel.title, initialOpen: IndividualPanel.initialOpen, className: 'scriptless-panel-' + key - }, _getControls( props, IndividualPanel.attributes ) ); + }, _getControls( props, IndividualPanel.attributes, blockName ) ); } } ); @@ -96,10 +98,11 @@ * * @param props * @param fields + * @param blockName * @return {Array} * @private */ - function _getControls( props, fields ) { + function _getControls( props, fields, blockName ) { const controls = []; Object.keys( fields ).forEach( function ( key, index ) { if ( fields.hasOwnProperty( key ) ) { @@ -109,7 +112,7 @@ } const IndividualField = fields[key], control = _getControlType( IndividualField.method, IndividualField.type ); - controls[index] = DFIGBlockObject.el( control, _getIndividualControl( key, IndividualField, props ) ); + controls[index] = DFIGBlockObject.el( control, _getIndividualControl( key, IndividualField, props, blockName ) ); } } ); @@ -152,16 +155,18 @@ * @param key * @param field * @param props + * @param blockName * @return {{label: *, value: *, className: string, onChange: onChange}} * @private */ - function _getIndividualControl( key, field, props ) { + function _getIndividualControl( key, field, props, blockName ) { const {attributes, setAttributes} = props; const control = { label: field.label, value: attributes[key], className: 'displayfeaturedimagegenesis-' + key, onChange: ( value ) => { + onChangeSelect( key, value, props, blockName ); setAttributes( {[key]: value} ); } }; @@ -183,6 +188,102 @@ return control; } + /** + * Update values and options. + * @param select_id + * @param value + * @param props + * @param blockName + */ + function onChangeSelect( select_id, value, props, blockName ) { + if ( 'displayfeaturedimagegenesis/term' !== blockName ) { + return; + } + const data = _getAjaxData( select_id, value, props ); + _doAjaxUpdate( data, select_id, props ); + } + + /** + * + * @param select_id + * @param value + * @param props + * @returns {{action: string, security: *}} + * @private + */ + function _getAjaxData( select_id, value, props ) { + const data = { + action: 'displayfeaturedimagegenesis_block', + security: DFIGBlockObject.params.security + }, + {attributes} = props; + if ( 'taxonomy' === select_id ) { + data.taxonomy = value; + } else { + data.taxonomy = attributes.taxonomy; + } + + return data; + } + + /** + * Call on our ajax action and update the select + * @param data + * @param select_id + * @param props + * @return + * @private + */ + function _doAjaxUpdate( data, select_id, props ) { + const {attributes, setAttributes} = props; + $.post( DFIGBlockObject.params.ajax_url, data, function ( response ) { + + if ( undefined !== response.success && false === response.success ) { + return false; + } + + const jsonData = $.parseJSON( response ); + + _modifySelectInput( jsonData, 'term', attributes ); + if ( select_id ) { + setAttributes( { + term: '', + } ); + } + } ); + } + + /** + * Modify the term dropdown. + * @param options + * @param key + * @param attributes + * @private + */ + function _modifySelectInput( options, key, attributes ) { + const selectID = $( '.displayfeaturedimagegenesis-' + key + ' select' ), + oldValue = attributes[key] || ''; + selectID.empty(); + _updateSelectOptions( options, selectID, oldValue ); + } + + /** + * Update the select input with the new options. + * @param options + * @param selectID + * @param oldValue + * @private + */ + function _updateSelectOptions( options, selectID, oldValue ) { + $.each( options, function ( key, value ) { + const new_option = $( '