Add JavaScript flag support

jamesrwilliams · Sep 17, 2021 · 2990ec4 · 2990ec4
1 parent 95b8a16
commit 2990ec4
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,25 @@ if ( flagpole_flag_enabled( 'flag_key' ) ) {
 
 Replace `flag_key` with the key used in the register function to check if it is enabled.
 
+It is also possible to use the same function in JavaScript and get the same results:
+
+```javascript
+if ( flagpole_flag_enabled( 'flag_key' ) ) {
+	/* flag_key is enabled! */
+}
+```
+
+However, checking the Flagpole function exists before expecting it to return a value is recommended. This prevents JavaScript files from breaking if the plugin is not enabled on your project.
+
+```javascript
+const flagEnabled = typeof( flagpole_flag_enabled ) === 'function' && flagpole_flag_enabled( 'flag_key' );
+
+if ( flagEnabled ) {
+	/* flag_key is enabled! */
+}
+```
+
+
 #### Flag options/arguments
 
 

diff --git a/flagpole.php b/flagpole.php
@@ -25,6 +25,7 @@
 }
 
 use Flagpole\Flagpole;
+use Flagpole\JavaScript;
 
 // Define plugin paths and url for global usage.
 define( 'FLAGPOLE_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
@@ -99,6 +100,7 @@ function flagpole_admin_imports( $hook ) {
 require plugin_dir_path( __FILE__ ) . 'includes/admin/settings-page.php';
 require plugin_dir_path( __FILE__ ) . 'includes/api/api.general.php';
 require plugin_dir_path( __FILE__ ) . 'includes/api/api.shortcode.php';
+require plugin_dir_path( __FILE__ ) . 'includes/javascript/class-javascript.php';
 
 /**
  * AJAX Action toggling features from the WP admin area.
@@ -176,8 +178,12 @@ function flagpole_create_group() {
 	$validation = array_filter( $validation );
 
 	if ( $validation ) {
-		$result = Flagpole::init()->create_group( $validation['group-key'], $validation['group-name'],
-			$validation['group-desc'], $validation['group-private'] );
+		$result = Flagpole::init()->create_group(
+			$validation['group-key'],
+			$validation['group-name'],
+			$validation['group-desc'],
+			$validation['group-private']
+		);
 
 		flagpole_operation_redirect( $result );
 	}
@@ -338,3 +344,5 @@ function flagpole_operation_redirect( $error_code = false, $redirect = true ) {
 add_shortcode( 'debugFlagpole_flags', 'flagpole_shortcode_debug_flags' );
 add_shortcode( 'debugFlagpole_groups', 'flagpole_shortcode_debug_groups' );
 add_shortcode( 'debugFlagpole_db', 'flagpole_shortcode_debug_db' );
+
+( new JavaScript() )->init();
diff --git a/includes/javascript/class-javascript.php b/includes/javascript/class-javascript.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * JavaScript Class
+ *
+ * Inserts feature flag object and a corresponding flagpole_flag_enabled function into the <head>.
+ *
+ * @package flagpole
+ */
+
+namespace Flagpole;
+
+/**
+ * Class Flagpole_JavaScript.
+ *
+ * @package Peake\Plugins
+ */
+class JavaScript {
+	/**
+	 * Initialise filters.
+	 */
+	public function init() {
+		add_action( 'wp_head', array( $this, 'print_flagpole_js' ) );
+	}
+
+	/**
+	 * Reduces the full array of flagpole flag objects into an array of enabled array keys.
+	 * Returns an empty array if the 'flagpole_flag_enabled' PHP function is not present.
+	 *
+	 * @param array $flag_list The defined flags.
+	 * @return array The keys of enabled flags.
+	 */
+	private function enabled_flag_filter( array $flag_list ) {
+		$filtered_list = array();
+
+		foreach ( $flag_list as $flag ) {
+			if ( flagpole_flag_enabled( $flag->key ) ) {
+				$filtered_list[] = $flag->key;
+			}
+		}
+
+		return $filtered_list;
+	}
+
+	/**
+	 * Prints a flagpole_flag_enabled function.
+	 * The function returns 'true' if the flag is in our list of enabled flags.
+	 * Otherwise, it returns false.
+	 *
+	 * @return void
+	 */
+	public function print_flagpole_js() {
+		$flagpole_available_flags = self::enabled_flag_filter( Flagpole::init()->get_flags() );
+		?>
+		<script>
+			var flagpole_flag_enabled = function( ff ) {
+				const flist = <?php echo wp_json_encode( $flagpole_available_flags ); ?>;
+				return flist.indexOf( ff ) !== -1;
+			}
+		</script>
+		<?php
+	}
+}