Add the featured term block

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 = $( '<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' ) {

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);
+!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=$("<option />").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);