Variants and subsets now prefill with saved values.

skapecollective · Oct 21, 2020 · 355dfec · 355dfec
1 parent 43db0e0
commit 355dfec
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 20 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/README.md b/README.md
@@ -35,5 +35,5 @@ There are 4 returnable values for this field which include:
 
 ## Todo
 
- - [ ] Variants and subsets need to prefill with saved values.
+ - [x] Variants and subsets need to prefill with saved values.
  - [ ] Upgrade Google CSS API from v1 to v2.
diff --git a/acf-google-fonts.php b/acf-google-fonts.php
@@ -3,7 +3,7 @@
 /**
  * Plugin Name: Advanced Custom Fields: Google Fonts
  * Description: A field for Advanced Custom Fields (ACF) allowing users to select fonts from the Google Fonts suite.
- * Version: 1.0.0
+ * Version: 1.0.1
  * Plugin URI: https://github.com/skapecollective/acf-google-fonts/
  * Author: Skape Collective
  * Author URI: https://skape.co/
@@ -23,7 +23,7 @@
 // Register global constants
 AcfGoogleFonts\Wrappers\Constants::set( 'FILE', __FILE__ );
 AcfGoogleFonts\Wrappers\Constants::set( 'DEBUG', defined( 'WP_DEBUG' ) && WP_DEBUG );
-AcfGoogleFonts\Wrappers\Constants::set( 'VERSION', '1.0.0' );
+AcfGoogleFonts\Wrappers\Constants::set( 'VERSION', '1.0.1' );
 AcfGoogleFonts\Wrappers\Constants::set( 'PATH', plugin_dir_path( __FILE__ ) );
 AcfGoogleFonts\Wrappers\Constants::set( 'URL', plugin_dir_url( __FILE__ ) );
 AcfGoogleFonts\Wrappers\Constants::set( 'BASENAME', plugin_basename( __FILE__ ) );

diff --git a/assets/js/field.js b/assets/js/field.js
@@ -8,18 +8,14 @@
             const $container = $field.find( '.acf-google_fonts' );
             const $select = $container.find( '.acf-google_fonts-choice select' );
             const $preview = $container.find( '.acf-google_fonts-preview' );
+            const data = JSON.parse( $container.find( '.acf-google_fonts-js_data' ).text() );
 
             // Initiate select2
             $select.select2();
 
             const checkboxTypes = [ 'variants', 'subsets' ];
             var request = null;
 
-            const name = $select.data( 'js-name' );
-            const key = $select.data( 'js-key' );
-            const action = $select.data( 'js-action' );
-            const token = $select.data( 'js-token' );
-
             const handleError = ( response ) => console.log( response );
             const handleSuccess = ( response ) => {
 
@@ -72,19 +68,21 @@
                                 class: 'acf-google_fonts-list'
                             } ).appendTo( $type );
 
+                            let currentValue = 'values' in data && type in data.values ? data.values[ type ] : null;
+
                             for ( var value in response.data[ type ] ) {
 
                                 const label = response.data[ type ][ value ];
-                                const id = `_${key}_${type}_${value}`;
+                                const id = `_${data.id}_${type}_${value}`;
 
                                 const $li = $( '<li>' ).appendTo( $ul );
 
                                 $( '<input>', {
                                     type: 'checkbox',
-                                    name: `${name}[${type}][]`,
+                                    name: `${data.name}[${type}][]`,
                                     value: value,
                                     id: id
-                                } ).appendTo( $li );
+                                } ).appendTo( $li ).prop( 'checked', Array.isArray( currentValue ) ? currentValue.includes( value ) : false );
 
                                 $( '<label>', {
                                     text: label,
@@ -121,8 +119,8 @@
                         type: 'post',
                         dataType: 'json',
                         data: {
-                            action: action,
-                            csrf: token,
+                            action: data.action,
+                            csrf: data.token,
                             family: $select.val()
                         }
                     } ).done( ( response, textStatus, jqXHR ) => {

diff --git a/build/js/field.js b/build/js/field.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "acf-google-fonts",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "devDependencies": {
     "@babel/core": "^7.11.6",

diff --git a/source/Field.php b/source/Field.php
@@ -158,6 +158,13 @@ public function render_field( $field ) {
 
 		?>
 			<div class="acf-google_fonts">
+                <script type="application/json" class="acf-google_fonts-js_data"><?= json_encode( [
+                    'action' => $this->ajaxFieldRenderer->requestName(),
+                    'token' => $this->ajaxFieldRenderer->getToken(),
+                    'name' => $field[ 'name' ],
+                    'id' => $field[ 'id' ],
+                    'values' => $values
+                ] ); ?></script>
 				<?php if ( $fonts = $field[ 'choices' ] ): ?>
 
 					<?php if ( $field[ 'preview' ] ): ?>
@@ -179,11 +186,7 @@ public function render_field( $field ) {
 						<div class="acf-google_fonts-column">
 							<div class="acf-google_fonts-choice">
 								<div class="acf-google_fonts-label"><?php _e('Font Family', 'skape' ); ?></div>
-								<select name="<?= esc_attr( $field[ 'name' ] . '[family]' ); ?>"
-										data-js-action="<?= esc_attr( $this->ajaxFieldRenderer->requestName() ); ?>"
-										data-js-token="<?= esc_attr( $this->ajaxFieldRenderer->getToken() ); ?>"
-										data-js-name="<?= esc_attr( $field[ 'name' ] ); ?>"
-										data-js-key="<?= esc_attr( $field[ 'id' ] ); ?>">
+								<select name="<?= esc_attr( $field[ 'name' ] . '[family]' ); ?>">
 									<?php foreach( $fonts as $family ): ?>
 										<option <?php selected( $family, $values[ 'family' ] ); ?> value="<?= $family; ?>"><?= $family; ?></option>
 									<?php endforeach ?>