Added select_all checkbox in multicheck options

Closes issue #328

js/multicheck-select-all.js

@@ -0,0 +1,57 @@
+jQuery(document).ready(function($){
+  "use strict";
+
+    // Checks the select all checkbox if all other checkboxes are checked.
+    $( "input.tf_checkbox_selectall" ).each( function() {
+      var optionContainer = $( this ).parent().parent();
+      var allCheckboxes = optionContainer.find( 'input[type=checkbox]:not(.tf_checkbox_selectall)' );
+      var allCheckboxesChecked = optionContainer.find( 'input[type=checkbox]:not(.tf_checkbox_selectall):checked' );
+      if ( allCheckboxes.length === allCheckboxesChecked.length ) {
+        $( this ).prop( 'checked', true );
+      }
+    } );
+
+    // Check all checkboxes if selectall checkbox is checked.
+    $( "input.tf_checkbox_selectall" ).change( function() {
+      var optionContainer = $( this ).parent().parent();
+      var allCheckboxes = optionContainer.find( 'input[type=checkbox]:not(.tf_checkbox_selectall)' );
+
+      // Uncheck "select all", if one of the listed checkbox item is unchecked.
+      if ( false == $( this ).prop( "checked" ) ) {
+        allCheckboxes.prop( 'checked', false );
+      } else {
+        // Check "select all" if all checkbox items are checked.
+        allCheckboxes.prop( 'checked', true );
+      }
+      allCheckboxes.trigger( 'change' );
+    } );
+
+
+    // Check selectall if all checkboxes are checked.
+    $( 'input[type=checkbox]:not(.tf_checkbox_selectall)' ).change( function() {
+      if ( ! $( this ).parent() ) {
+        return;
+      }
+      if ( ! $( this ).parent().parent() ) {
+        return;
+      }
+
+      var optionContainer = $( this ).parent().parent();
+      var selectAll = optionContainer.find( 'input.tf_checkbox_selectall' );
+      var allCheckboxes = optionContainer.find( 'input[type=checkbox]:not(.tf_checkbox_selectall)' );
+      var allCheckboxesChecked = optionContainer.find( 'input[type=checkbox]:not(.tf_checkbox_selectall):checked' );
+
+      if ( ! selectAll.length ) {
+        return;
+      }
+
+      // Check "select all" if all checkbox items are checked.
+      if ( allCheckboxes.length === allCheckboxesChecked.length ) {
+        selectAll.prop( 'checked', true );
+      } else {
+        selectAll.prop( 'checked', false );
+      }
+
+    } );
+
+});

lib/class-option-ajax-button.php

@@ -269,7 +269,6 @@ public static function createAjaxScript() {
 	 * Display for theme customizer
 	 */
 	public function registerCustomizerControl( $wp_customize, $section, $priority = 1 ) {
-		// var_dump($section->getID());
 		$wp_customize->add_control( new TitanFrameworkOptionAjaxButtonControl( $wp_customize, '', array(
 			'label' => $this->settings['name'],
 			'section' => $section->getID(),

lib/class-option-multicheck-categories.php

@@ -11,6 +11,7 @@ class TitanFrameworkOptionMulticheckCategories extends TitanFrameworkOptionMulti
 		'taxonomy' => 'category',
 		'hide_empty' => false,
 		'show_count' => false,
+		'select_all' => false
 	);
 
 	/*
@@ -58,6 +59,7 @@ public function registerCustomizerControl( $wp_customize, $section, $priority =
 			'settings' => $this->getID(),
 			'description' => $this->settings['desc'],
 			'options' => $this->settings['options'],
+			'select_all' => $this->settings['select_all'],
 			'priority' => $priority,
 		) ) );
 	}

lib/class-option-multicheck-pages.php

@@ -6,6 +6,7 @@ class TitanFrameworkOptionMulticheckPages extends TitanFrameworkOptionMulticheck
 
 	public $defaultSecondarySettings = array(
 		'options' => array(),
+		'select_all' => false
 	);
 
 	private static $allPages;
@@ -56,6 +57,7 @@ public function registerCustomizerControl( $wp_customize, $section, $priority =
 			'settings' => $this->getID(),
 			'description' => $this->settings['desc'],
 			'options' => $this->settings['options'],
+			'select_all' => $this->settings['select_all'],
 			'priority' => $priority,
 		) ) );
 	}

lib/class-option-multicheck-post-types.php

@@ -9,6 +9,7 @@ class TitanFrameworkOptionMulticheckPostTypes extends TitanFrameworkOptionMultic
 		'public' => true,
 		'value' => 'all',
 		'slug' => true,
+		'select_all' => false
 	);
 
 	/*
@@ -69,6 +70,7 @@ public function registerCustomizerControl( $wp_customize, $section, $priority =
 			'value' => $this->settings['value'],
 			'slug' => $this->settings['slug'],
 			'options' => $this->settings['options'],
+			'select_all' => $this->settings['select_all'],
 			'priority' => $priority,
 		) ) );
 	}

lib/class-option-multicheck-posts.php

@@ -11,6 +11,7 @@ class TitanFrameworkOptionMulticheckPosts extends TitanFrameworkOptionMulticheck
 		'post_status' => 'any',
 		'orderby' => 'post_date',
 		'order' => 'DESC',
+		'select_all' => false
 	);
 
 	/*
@@ -68,6 +69,7 @@ public function registerCustomizerControl( $wp_customize, $section, $priority =
 			'settings' => $this->getID(),
 			'description' => $this->settings['desc'],
 			'options' => $this->settings['options'],
+			'select_all' => $this->settings['select_all'],
 			'priority' => $priority,
 		) ) );
 	}

lib/class-option-multicheck.php

@@ -6,8 +6,26 @@ class TitanFrameworkOptionMulticheck extends TitanFrameworkOption {
 
 	public $defaultSecondarySettings = array(
 		'options' => array(),
+		'select_all' => false,
 	);
 
+	/**
+	 * Constructor
+	 *
+	 * @param array  $settings Option settings
+	 * @param string $owner    Namespace
+	 *
+	 * @since 1.11
+	 */
+	function __construct( $settings, $owner ) {
+		parent::__construct( $settings, $owner );
+
+		tf_add_action_once( 'admin_enqueue_scripts', array( $this, 'load_select_scripts' ) );
+		tf_add_action_once( 'customize_controls_enqueue_scripts', array( $this, 'load_select_scripts' ) );
+
+	}
+
+
 	/*
 	 * Display for options and meta
 	 */
@@ -18,7 +36,18 @@ public function display() {
 
 		$savedValue = $this->getValue();
 
+		if ( ! empty( $this->settings['select_all'] ) ) {
+			$select_all_label = __( 'Select All' );
+			if ( is_string(  $this->settings['select_all'] ) ) {
+				$select_all_label = $this->settings['select_all'];
+			}
+			printf('<label style="margin-bottom: 1em !important;"><input class="tf_checkbox_selectall" type="checkbox" /> %s </label><br>',
+				esc_html( $select_all_label )
+			);
+		}
+
 		foreach ( $this->settings['options'] as $value => $label ) {
+
 			printf('<label for="%s"><input id="%s" type="checkbox" name="%s[]" value="%s" %s/> %s</label><br>',
 				$this->getID() . $value,
 				$this->getID() . $value,
@@ -32,6 +61,19 @@ public function display() {
 		echo '</fieldset>';
 
 		$this->echoOptionFooter( false );
+
+	}
+
+	/**
+	 * Load the multicheck-selectall script
+	 *
+	 * @since 1.11
+	 * @return void
+	 */
+	public function load_select_scripts() {
+
+		wp_enqueue_script( 'tf-multicheck-select-all', TitanFramework::getURL( '../js/multicheck-select-all.js', __FILE__ ), array( 'jquery' ), TF_VERSION, true );
+
 	}
 
 	public function cleanValueForSaving( $value ) {
@@ -73,6 +115,7 @@ public function registerCustomizerControl( $wp_customize, $section, $priority =
 			'settings' => $this->getID(),
 			'description' => $this->settings['desc'],
 			'options' => $this->settings['options'],
+			'select_all' => $this->settings['select_all'],
 			'priority' => $priority,
 		) ) );
 	}
@@ -87,6 +130,7 @@ function registerTitanFrameworkOptionMulticheckControl() {
 	class TitanFrameworkOptionMulticheckControl extends WP_Customize_Control {
 		public $description;
 		public $options;
+		public $select_all;
 
 		private static $firstLoad = true;
 
@@ -140,6 +184,17 @@ public function render_content() {
 				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 				<?php
 				echo $description;
+
+				if ( ! empty( $this->select_all ) ) {
+					$select_all_label = __( 'Select All' );
+					if ( is_string( $this->select_all ) ) {
+						$select_all_label = $this->select_all;
+					}
+					printf('<label style="margin-bottom: 1em !important; display: inline-block;"><input class="tf_checkbox_selectall" type="checkbox" /> %s </label><br>',
+						esc_html( $select_all_label )
+					);
+				}
+
 				foreach ( $this->options as $value => $label ) {
 					printf('<label for="%s"><input class="tf-multicheck" id="%s" type="checkbox" value="%s" %s/> %s</label><br>',
 						$this->id . $value,