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 = $( '' ) + .val( key ).text( value ), + method = ! key ? 'prepend' : 'append'; + selectID.val( oldValue ); + selectID[method]( new_option ); + } ); + } + DFIGBlockObject.params = typeof DisplayFeaturedImageBlock === 'undefined' ? '' : DisplayFeaturedImageBlock; if ( typeof DFIGBlockObject.params !== 'undefined' ) { diff --git a/includes/js/block.min.js b/includes/js/block.min.js index cc89cca..3029875 100644 --- a/includes/js/block.min.js +++ b/includes/js/block.min.js @@ -1 +1 @@ -!function(e,t){"use strict";const n={el:e.element.createElement};n.init=function(t){const o=e.blocks.registerBlockType,l=e.components.ServerSideRender,r=e.editor.InspectorControls;o(t.block,{title:t.title,description:t.description,keywords:t.keywords,icon:t.icon,category:t.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e})=>({"data-align":e}),edit:o=>{const{attributes:i,setAttributes:s}=o,a=e.element.Fragment,c=e.editor.BlockControls,m=e.editor.BlockAlignmentToolbar;return[n.el(l,{block:t.block,attributes:i}),n.el(a,null,n.el(c,null,n.el(m,{value:i.blockAlignment,controls:["wide","full"],onChange:e=>{s({blockAlignment:e})}}))),n.el(r,{},function(t,o){const l=[],r=e.components.PanelBody;return Object.keys(o.panels).forEach(function(i,s){if(o.panels.hasOwnProperty(i)){const a=o.panels[i];l[s]=n.el(r,{title:a.title,initialOpen:a.initialOpen,className:"scriptless-panel-"+i},function(t,o){const l=[];return Object.keys(o).forEach(function(r,i){if(o.hasOwnProperty(r)){if(-1!==["blockAlignment","className"].indexOf(r))return;const s=o[r],a=function(t,n){const{TextControl:o,SelectControl:l,RangeControl:r,CheckboxControl:i,TextareaControl:s}=e.components,a=o;return"select"===t?l:"number"===t&&"number"===n?r:"checkbox"===t?i:"textarea"===t?s:a}(s.method,s.type);l[i]=n.el(a,function(e,t,n){const{attributes:o,setAttributes:l}=n,r={label:t.label,value:o[e],className:"displayfeaturedimagegenesis-"+e,onChange:t=>{l({[e]:t})}};return"select"===t.method?r.options=t.options:"number"===t.method?(r.min=t.min,r.max=t.max,"number"!==t.type?r.type="number":r.initialPosition=t.min):"checkbox"===t.method&&(r.checked=o[e]),r}(r,s,t))}}),l}(t,a.attributes))}}),l}(o,t))]},save:e=>null})},n.params="undefined"==typeof DisplayFeaturedImageBlock?"":DisplayFeaturedImageBlock,void 0!==n.params&&Object.keys(n.params).forEach(function(e,t){n.params.hasOwnProperty(e)&&n.init(n.params[e])})}(wp); \ No newline at end of file +!function(e,t){"use strict";const n={el:e.element.createElement};function o(e,o,s,i){if("displayfeaturedimagegenesis/term"!==i)return;!function(e,o,s){const{attributes:i,setAttributes:r}=s;$.post(n.params.ajax_url,e,function(e){if(t!==e.success&&!1===e.success)return!1;const n=$.parseJSON(e);!function(e,t,n){const o=$(".displayfeaturedimagegenesis-"+t+" select"),s=n[t]||"";o.empty(),function(e,t,n){$.each(e,function(e,o){const s=$("").val(e).text(o),i=e?"append":"prepend";t.val(n),t[i](s)})}(e,o,s)}(n,"term",i),o&&r({term:""})})}(function(e,t,o){const s={action:"displayfeaturedimagegenesis_block",security:n.params.security},{attributes:i}=o;s.taxonomy="taxonomy"===e?t:i.taxonomy;return s}(e,o,s),e,s)}n.init=function(t){const s=e.blocks.registerBlockType,i=e.components.ServerSideRender,r=e.editor.InspectorControls;s(t.block,{title:t.title,description:t.description,keywords:t.keywords,icon:t.icon,category:t.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e})=>({"data-align":e}),edit:s=>{const{attributes:a,setAttributes:c}=s,l=e.element.Fragment,u=e.editor.BlockControls,m=e.editor.BlockAlignmentToolbar;return[n.el(i,{block:t.block,attributes:a}),n.el(l,null,n.el(u,null,n.el(m,{value:a.blockAlignment,controls:["wide","full"],onChange:e=>{c({blockAlignment:e})}}))),n.el(r,{},function(t,s,i){const r=[],a=e.components.PanelBody;return Object.keys(s.panels).forEach(function(c,l){if(s.panels.hasOwnProperty(c)){const u=s.panels[c];r[l]=n.el(a,{title:u.title,initialOpen:u.initialOpen,className:"scriptless-panel-"+c},function(t,s,i){const r=[];return Object.keys(s).forEach(function(a,c){if(s.hasOwnProperty(a)){if(-1!==["blockAlignment","className"].indexOf(a))return;const l=s[a],u=function(t,n){const{TextControl:o,SelectControl:s,RangeControl:i,CheckboxControl:r,TextareaControl:a}=e.components,c=o;return"select"===t?s:"number"===t&&"number"===n?i:"checkbox"===t?r:"textarea"===t?a:c}(l.method,l.type);r[c]=n.el(u,function(e,t,n,s){const{attributes:i,setAttributes:r}=n,a={label:t.label,value:i[e],className:"displayfeaturedimagegenesis-"+e,onChange:t=>{"displayfeaturedimagegenesis/term"===s&&"taxonomy"===e&&o(e,t,n,s),r({[e]:t})}};return"select"===t.method?a.options=t.options:"number"===t.method?(a.min=t.min,a.max=t.max,"number"!==t.type?a.type="number":a.initialPosition=t.min):"checkbox"===t.method&&(a.checked=i[e]),a}(a,l,t,i))}}),r}(t,u.attributes,i))}}),r}(s,t,t.block),o(!1,!1,s))]},save:e=>null})},n.params="undefined"==typeof DisplayFeaturedImageBlock?"":DisplayFeaturedImageBlock,void 0!==n.params&&Object.keys(n.params).forEach(function(e,t){n.params.hasOwnProperty(e)&&n.init(n.params[e])})}(wp); \ No newline at end of file diff --git a/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-fields.php b/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-fields.php index d92546f..8ea33b8 100644 --- a/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-fields.php +++ b/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-fields.php @@ -19,7 +19,10 @@ class DisplayFeaturedImageGenesisWidgetsBlocksFields { 'icon' => 'format-image', 'category' => 'widgets', ); - $output = array(); + $output = array( + 'ajax_url' => admin_url( 'admin-ajax.php' ), + 'security' => wp_create_nonce( 'displayfeaturedimagegenesis-block-nonce' ), + ); $blocks = include 'fields/blocks.php'; foreach ( $blocks as $block => $data ) { if ( empty( $data['nickname'] ) ) { @@ -61,6 +64,14 @@ class DisplayFeaturedImageGenesisWidgetsBlocksFields { return $output; } + /** + * Set the block term action callback here since this class already has a getter for the form class. + */ + public function term_action_callback() { + $form = $this->get_form_class(); + $form->term_action_callback(); + } + /** * @param $block * @@ -111,6 +122,20 @@ class DisplayFeaturedImageGenesisWidgetsBlocksFields { ); } + /** + * @return array + */ + protected function term_fields() { + $form = $this->get_form_class(); + + return array_merge( + include 'fields/text.php', + include 'fields/term-taxonomy.php', + include 'fields/image.php', + include 'fields/archive.php' + ); + } + /** * Get an array of attributes for an individual field. * diff --git a/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-output.php b/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-output.php index aed5a94..a1bef1f 100644 --- a/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-output.php +++ b/includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-output.php @@ -1,7 +1,13 @@ ' . __( 'Please select a term.', 'sixtenpress' ) . ''; + } + $atts = wp_parse_args( $atts, include 'fields/term-defaults.php' ); + $term = get_term_by( 'id', $atts['term'], $atts['taxonomy'] ); + if ( ! $term ) { + return ''; + } + $classes = $this->get_block_classes( $atts, 'term' ); + include_once plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-term.php'; + + $output = '