Customify – A Theme Customizer Booster - Version 2.2.0

Version Description

  • Added support for the new Gutenberg block editor.
Download this release

Release Info

Developer vlad.olaru
Plugin Icon Customify – A Theme Customizer Booster
Version 2.2.0
Comparing to
See all releases

Code changes from version 2.1.3 to 2.2.0

Files changed (10) hide show
  1. class-pixcustomify.php +62 -26
  2. customify.php +2 -2
  3. features/class-Font_Selector.php +13 -5
  4. includes/class-customify-color-palettes.php +92 -119
  5. includes/class-customify-font-palettes.php +7 -0
  6. includes/class-customify-gutenberg.php +519 -0
  7. includes/class-customify-style-manager.php +9 -9
  8. js/customizer/color-palettes.js +900 -869
  9. readme.txt +4 -1
  10. scss/customizer.scss +5 -5
class-pixcustomify.php CHANGED
@@ -5,7 +5,7 @@
5
  * @author Pixelgrade <contact@pixelgrade.com>
6
  * @license GPL-2.0+
7
  * @link https://pixelgrade.com
8
- * @copyright 2014-2017 Pixelgrade
9
  */
10
 
11
  /**
@@ -126,6 +126,14 @@ class PixCustomifyPlugin {
126
  */
127
  public $style_manager = null;
128
 
 
 
 
 
 
 
 
 
129
  /**
130
  * Minimal Required PHP Version
131
  * @var string
@@ -158,7 +166,13 @@ class PixCustomifyPlugin {
158
  /* Initialize the Style Manager logic. */
159
  require_once( $this->get_base_path() . 'includes/class-customify-style-manager.php' );
160
  if ( is_null( $this->style_manager ) ) {
161
- $this->style_manager = Customify_Style_Manager::instance( $this );
 
 
 
 
 
 
162
  }
163
 
164
  // Register all the needed hooks
@@ -532,7 +546,7 @@ class PixCustomifyPlugin {
532
  }
533
 
534
  if ( isset( $option['type'] ) && $option['type'] === 'custom_background' ) {
535
- $option['value'] = $this->get_option( $option_id );
536
  $custom_css .= $this->process_custom_background_field_output( $option_id, $option ) . PHP_EOL;
537
  }
538
  }
@@ -545,22 +559,33 @@ class PixCustomifyPlugin {
545
  continue;
546
  }
547
 
548
- $custom_css .= PHP_EOL . '@media ' . $media_query . " { " . PHP_EOL . PHP_EOL;
549
 
550
  foreach ( $properties as $key => $property ) {
551
  $property_settings = $property['property'];
552
  $property_value = $property['value'];
553
- $custom_css .= "\t" . $this->proccess_css_property( $property_settings, $property_value ) . PHP_EOL;
 
 
 
 
 
 
 
554
  }
555
 
556
- $custom_css .= "}" . PHP_EOL;
 
 
557
 
558
  }
559
  }
560
  ?>
561
- <style id="customify_output_style">
562
- <?php echo apply_filters( 'customify_dynamic_style', $custom_css ); ?>
563
- </style><?php
 
 
564
 
565
  /**
566
  * from now on we output only style tags only for the preview purpose
@@ -578,7 +603,7 @@ class PixCustomifyPlugin {
578
 
579
  <style id="custom_background_output_for_<?php echo sanitize_html_class( $option_id ); ?>">
580
  <?php
581
- if ( isset( $custom_background_output ) && ! empty( $custom_background_output )) {
582
  echo $custom_background_output;
583
  } ?>
584
  </style>
@@ -602,7 +627,10 @@ class PixCustomifyPlugin {
602
  }
603
 
604
  if ( isset( $properties_set['selector'] ) && isset( $properties_set['property'] ) ) {
605
- echo $this->proccess_css_property($properties_set, $this_value) . PHP_EOL;
 
 
 
606
  }
607
 
608
  if ( isset( $properties_set['media'] ) && ! empty( $properties_set['media'] ) ) {
@@ -744,13 +772,16 @@ class PixCustomifyPlugin {
744
  <?php } ?>
745
  <style id="customify_typography_output_style">
746
  <?php
747
- foreach ( $this->typo_settings as $key => $font ) {
 
 
 
748
  $load_all_weights = false;
749
  if ( isset( $font['load_all_weights'] ) && $font['load_all_weights'] == 'true' ) {
750
  $load_all_weights = true;
751
  }
752
 
753
- if ( isset( $font['selector'] ) && isset( $font['value'] ) && ! empty( $font['value'] ) ) {
754
  // Make sure that the value is in the proper format
755
  $value = PixCustomifyPlugin::decodeURIComponent( $font['value'] );
756
  if ( is_string( $value ) ) {
@@ -790,7 +821,7 @@ class PixCustomifyPlugin {
790
  // First handle the case where we have the font-family in the selected variant (usually this means a custom font from our Fonto plugin)
791
  if ( ! empty( $selected_variant ) && is_array( $selected_variant ) && ! empty( $selected_variant['font-family'] ) ) {
792
  // The variant's font-family
793
- echo $font['selector'] . " {\nfont-family: " . $selected_variant['font-family'] . ";\n";
794
 
795
  if ( ! $load_all_weights ) {
796
  // If this is a custom font (like from our plugin Fonto) with individual styles & weights - i.e. the font-family says it all
@@ -814,7 +845,7 @@ class PixCustomifyPlugin {
814
  echo "}\n";
815
  } elseif ( isset( $value['font_family'] ) ) {
816
  // The selected font family
817
- echo $font['selector'] . " {\n font-family: " . $value['font_family'] . ";\n";
818
 
819
  if ( ! empty( $selected_variant ) && ! $load_all_weights ) {
820
  $weight_and_style = strtolower( $selected_variant );
@@ -942,14 +973,14 @@ class PixCustomifyPlugin {
942
  }
943
 
944
  if ( isset( $css_property['selector'] ) && isset( $css_property['property'] ) ) {
945
- $output .= $this->proccess_css_property( $css_property, $this_value ) . PHP_EOL;
946
  }
947
  }
948
 
949
  return $output;
950
  }
951
 
952
- protected function proccess_css_property( $css_property, $this_value ) {
953
  $unit = '';
954
 
955
  if ( isset( $css_property['unit'] ) ) {
@@ -960,9 +991,15 @@ class PixCustomifyPlugin {
960
  if ( empty( $unit ) && in_array( $css_property['property'], self::$pixel_dependent_css_properties ) ) {
961
  $unit = 'px';
962
  }
 
963
  // lose the tons of tabs
964
- $css_property['selector'] = trim( preg_replace( '/\t+/', '', $css_property['selector'] ) );
 
 
965
 
 
 
 
966
  $this_property_output = $css_property['selector'] . ' { ' . $css_property['property'] . ': ' . $this_value . $unit . "; }" . PHP_EOL;
967
 
968
  // Handle the value filter callback.
@@ -975,6 +1012,10 @@ class PixCustomifyPlugin {
975
  $this_property_output = call_user_func( $css_property['callback_filter'], $this_value, $css_property['selector'], $css_property['property'], $unit );
976
  }
977
 
 
 
 
 
978
  return $this_property_output;
979
  }
980
 
@@ -1834,7 +1875,7 @@ class PixCustomifyPlugin {
1834
 
1835
  $control_class_name = 'Pix_Customize_Select2_Control';
1836
  break;
1837
-
1838
  case 'sm_radio' :
1839
  if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
1840
  return;
@@ -1854,7 +1895,7 @@ class PixCustomifyPlugin {
1854
 
1855
  $control_class_name = 'Pix_Customize_SM_palette_filter_Control';
1856
  break;
1857
-
1858
  case 'sm_switch' :
1859
  if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
1860
  return;
@@ -2563,11 +2604,6 @@ class PixCustomifyPlugin {
2563
  </script>
2564
  <?php }
2565
 
2566
- /**
2567
- * Return an instance of this class.
2568
- * @since 1.0.0
2569
- * @return PixCustomifyPlugin A single instance of this class.
2570
- */
2571
  /**
2572
  * Main PixCustomifyPlugin Instance
2573
  *
@@ -2610,4 +2646,4 @@ class PixCustomifyPlugin {
2610
 
2611
  _doing_it_wrong( __FUNCTION__, esc_html( __( 'Cheatin&#8217; huh?' ) ), esc_html( $this->_version ) );
2612
  } // End __wakeup ()
2613
- }
5
  * @author Pixelgrade <contact@pixelgrade.com>
6
  * @license GPL-2.0+
7
  * @link https://pixelgrade.com
8
+ * @copyright 2014-2018 Pixelgrade
9
  */
10
 
11
  /**
126
  */
127
  public $style_manager = null;
128
 
129
+ /**
130
+ * Gutenberg class object.
131
+ * @var Customify_Gutenberg
132
+ * @access public
133
+ * @since 2.2.0
134
+ */
135
+ public $gutenberg = null;
136
+
137
  /**
138
  * Minimal Required PHP Version
139
  * @var string
166
  /* Initialize the Style Manager logic. */
167
  require_once( $this->get_base_path() . 'includes/class-customify-style-manager.php' );
168
  if ( is_null( $this->style_manager ) ) {
169
+ $this->style_manager = Customify_Style_Manager::instance();
170
+ }
171
+
172
+ /* Initialize the Gutenberg logic. */
173
+ require_once( $this->get_base_path() . 'includes/class-customify-gutenberg.php' );
174
+ if ( is_null( $this->gutenberg ) ) {
175
+ $this->gutenberg = Customify_Gutenberg::instance();
176
  }
177
 
178
  // Register all the needed hooks
546
  }
547
 
548
  if ( isset( $option['type'] ) && $option['type'] === 'custom_background' ) {
549
+ $option['value'] = $this->get_option( $option_id );
550
  $custom_css .= $this->process_custom_background_field_output( $option_id, $option ) . PHP_EOL;
551
  }
552
  }
559
  continue;
560
  }
561
 
562
+ $media_query_custom_css = '';
563
 
564
  foreach ( $properties as $key => $property ) {
565
  $property_settings = $property['property'];
566
  $property_value = $property['value'];
567
+ $css_output = $this->process_css_property( $property_settings, $property_value );
568
+ if ( ! empty( $css_output ) ) {
569
+ $media_query_custom_css .= "\t" . $css_output . PHP_EOL;
570
+ }
571
+ }
572
+
573
+ if ( ! empty( $media_query_custom_css ) ) {
574
+ $media_query_custom_css = PHP_EOL . '@media ' . $media_query . " { " . PHP_EOL . PHP_EOL . $custom_css . "}" . PHP_EOL;
575
  }
576
 
577
+ if ( ! empty( $media_query_custom_css ) ) {
578
+ $custom_css .= $media_query_custom_css;
579
+ }
580
 
581
  }
582
  }
583
  ?>
584
+
585
+ <style id="customify_output_style">
586
+ <?php echo apply_filters( 'customify_dynamic_style', $custom_css ); ?>
587
+ </style>
588
+ <?php
589
 
590
  /**
591
  * from now on we output only style tags only for the preview purpose
603
 
604
  <style id="custom_background_output_for_<?php echo sanitize_html_class( $option_id ); ?>">
605
  <?php
606
+ if ( ! empty( $custom_background_output )) {
607
  echo $custom_background_output;
608
  } ?>
609
  </style>
627
  }
628
 
629
  if ( isset( $properties_set['selector'] ) && isset( $properties_set['property'] ) ) {
630
+ $css_output = $this->process_css_property($properties_set, $this_value);
631
+ if ( ! empty( $css_output ) ) {
632
+ echo $css_output . PHP_EOL;
633
+ }
634
  }
635
 
636
  if ( isset( $properties_set['media'] ) && ! empty( $properties_set['media'] ) ) {
772
  <?php } ?>
773
  <style id="customify_typography_output_style">
774
  <?php
775
+
776
+ foreach ( $this->typo_settings as $font ) {
777
+ $selector = apply_filters( 'customify_typography_css_selector', $font['selector'], $font );
778
+
779
  $load_all_weights = false;
780
  if ( isset( $font['load_all_weights'] ) && $font['load_all_weights'] == 'true' ) {
781
  $load_all_weights = true;
782
  }
783
 
784
+ if ( isset( $selector ) && isset( $font['value'] ) && ! empty( $font['value'] ) ) {
785
  // Make sure that the value is in the proper format
786
  $value = PixCustomifyPlugin::decodeURIComponent( $font['value'] );
787
  if ( is_string( $value ) ) {
821
  // First handle the case where we have the font-family in the selected variant (usually this means a custom font from our Fonto plugin)
822
  if ( ! empty( $selected_variant ) && is_array( $selected_variant ) && ! empty( $selected_variant['font-family'] ) ) {
823
  // The variant's font-family
824
+ echo $selector . " {\nfont-family: " . $selected_variant['font-family'] . ";\n";
825
 
826
  if ( ! $load_all_weights ) {
827
  // If this is a custom font (like from our plugin Fonto) with individual styles & weights - i.e. the font-family says it all
845
  echo "}\n";
846
  } elseif ( isset( $value['font_family'] ) ) {
847
  // The selected font family
848
+ echo $selector . " {\n font-family: " . $value['font_family'] . ";\n";
849
 
850
  if ( ! empty( $selected_variant ) && ! $load_all_weights ) {
851
  $weight_and_style = strtolower( $selected_variant );
973
  }
974
 
975
  if ( isset( $css_property['selector'] ) && isset( $css_property['property'] ) ) {
976
+ $output .= $this->process_css_property( $css_property, $this_value );
977
  }
978
  }
979
 
980
  return $output;
981
  }
982
 
983
+ protected function process_css_property( $css_property, $this_value, $editor = false ) {
984
  $unit = '';
985
 
986
  if ( isset( $css_property['unit'] ) ) {
991
  if ( empty( $unit ) && in_array( $css_property['property'], self::$pixel_dependent_css_properties ) ) {
992
  $unit = 'px';
993
  }
994
+
995
  // lose the tons of tabs
996
+ $css_property['selector'] = trim( $css_property['selector'] );
997
+
998
+ $css_property['selector'] = apply_filters( 'customify_css_selector', $css_property['selector'], $css_property );
999
 
1000
+ if ( empty( $css_property['selector'] ) ) {
1001
+ return '';
1002
+ }
1003
  $this_property_output = $css_property['selector'] . ' { ' . $css_property['property'] . ': ' . $this_value . $unit . "; }" . PHP_EOL;
1004
 
1005
  // Handle the value filter callback.
1012
  $this_property_output = call_user_func( $css_property['callback_filter'], $this_value, $css_property['selector'], $css_property['property'], $unit );
1013
  }
1014
 
1015
+ // if ( ! empty( $editor ) && empty( $css_property['editor'] ) ) {
1016
+ // $this_property_output = '';
1017
+ // }
1018
+
1019
  return $this_property_output;
1020
  }
1021
 
1875
 
1876
  $control_class_name = 'Pix_Customize_Select2_Control';
1877
  break;
1878
+
1879
  case 'sm_radio' :
1880
  if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
1881
  return;
1895
 
1896
  $control_class_name = 'Pix_Customize_SM_palette_filter_Control';
1897
  break;
1898
+
1899
  case 'sm_switch' :
1900
  if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
1901
  return;
2604
  </script>
2605
  <?php }
2606
 
 
 
 
 
 
2607
  /**
2608
  * Main PixCustomifyPlugin Instance
2609
  *
2646
 
2647
  _doing_it_wrong( __FUNCTION__, esc_html( __( 'Cheatin&#8217; huh?' ) ), esc_html( $this->_version ) );
2648
  } // End __wakeup ()
2649
+ }
customify.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Customify
4
  Plugin URI: https://wordpress.org/plugins/customify/
5
  Description: A Theme Customizer Booster
6
- Version: 2.1.3
7
  Author: Pixelgrade
8
  Author URI: https://pixelgrade.com
9
  Author Email: contact@pixelgrade.com
@@ -61,7 +61,7 @@ function PixCustomifyPlugin() {
61
  */
62
  require_once plugin_dir_path( __FILE__ ) . 'class-pixcustomify.php';
63
 
64
- $instance = PixCustomifyPlugin::instance( __FILE__, '2.1.3' );
65
 
66
  return $instance;
67
  }
3
  Plugin Name: Customify
4
  Plugin URI: https://wordpress.org/plugins/customify/
5
  Description: A Theme Customizer Booster
6
+ Version: 2.2.0
7
  Author: Pixelgrade
8
  Author URI: https://pixelgrade.com
9
  Author Email: contact@pixelgrade.com
61
  */
62
  require_once plugin_dir_path( __FILE__ ) . 'class-pixcustomify.php';
63
 
64
+ $instance = PixCustomifyPlugin::instance( __FILE__, '2.2.0' );
65
 
66
  return $instance;
67
  }
features/class-Font_Selector.php CHANGED
@@ -123,7 +123,7 @@ class Customify_Font_Selector {
123
  return $to_return;
124
  }
125
 
126
- function output_font_dynamic_style() {
127
 
128
  /** @var PixCustomifyPlugin $local_plugin */
129
  $local_plugin = PixCustomifyPlugin();
@@ -227,9 +227,16 @@ class Customify_Font_Selector {
227
  }
228
 
229
  foreach ( self::$typo_settings as $key => $font ) {
 
 
 
 
 
 
230
  if ( empty( $font['selector'] ) || empty( $font['value'] ) ) {
231
  continue;
232
  }
 
233
  $value = $this->maybe_decode_value( $font['value'] );
234
 
235
  if ( $value === null ) {
@@ -246,7 +253,7 @@ class Customify_Font_Selector {
246
  $value = $local_plugin->standardize_non_associative_font_default( $value );
247
  }
248
 
249
- $this->output_font_style( $key, $font, $value );
250
  }
251
 
252
  // in customizer the CSS is printed per option, in front-end we need to print them in bulk
@@ -294,7 +301,8 @@ class Customify_Font_Selector {
294
  <?php
295
  }
296
 
297
- function output_font_style( $field, $font, $value ) {
 
298
  $value = $this->validate_font_values( $value );
299
  // some sanitizing
300
  $load_all_weights = false;
@@ -315,7 +323,7 @@ class Customify_Font_Selector {
315
  if ( isset( $font['callback'] ) && function_exists( $font['callback'] ) ) {
316
  $output = call_user_func( $font['callback'], $value, $font );
317
  echo $output;
318
- } else {
319
  echo $font['selector'] . " {" . PHP_EOL;
320
 
321
  // First handle the case where we have the font-family in the selected variant (usually this means a custom font from our Fonto plugin)
@@ -392,7 +400,7 @@ class Customify_Font_Selector {
392
  }
393
  }
394
 
395
- if ( $value['font_size']['unit'] == 'em' && $value['font_size']['value'] >= 9 ) {
396
  $value['font_size']['unit'] = 'px';
397
  }
398
 
123
  return $to_return;
124
  }
125
 
126
+ function output_font_dynamic_style( $editor = false ) {
127
 
128
  /** @var PixCustomifyPlugin $local_plugin */
129
  $local_plugin = PixCustomifyPlugin();
227
  }
228
 
229
  foreach ( self::$typo_settings as $key => $font ) {
230
+ if ( ! isset( $font['selector'] ) ) {
231
+ continue;
232
+ }
233
+
234
+ $font['selector'] = apply_filters( 'customify_font_css_selector', $font['selector'], $font );
235
+
236
  if ( empty( $font['selector'] ) || empty( $font['value'] ) ) {
237
  continue;
238
  }
239
+
240
  $value = $this->maybe_decode_value( $font['value'] );
241
 
242
  if ( $value === null ) {
253
  $value = $local_plugin->standardize_non_associative_font_default( $value );
254
  }
255
 
256
+ $this->output_font_style( $key, $font, $value, $editor );
257
  }
258
 
259
  // in customizer the CSS is printed per option, in front-end we need to print them in bulk
301
  <?php
302
  }
303
 
304
+ function output_font_style( $field, $font, $value, $editor ) {
305
+
306
  $value = $this->validate_font_values( $value );
307
  // some sanitizing
308
  $load_all_weights = false;
323
  if ( isset( $font['callback'] ) && function_exists( $font['callback'] ) ) {
324
  $output = call_user_func( $font['callback'], $value, $font );
325
  echo $output;
326
+ } elseif ( isset( $font['selector'] ) ) {
327
  echo $font['selector'] . " {" . PHP_EOL;
328
 
329
  // First handle the case where we have the font-family in the selected variant (usually this means a custom font from our Fonto plugin)
400
  }
401
  }
402
 
403
+ if ( isset( $value['font_size']['unit'] ) && $value['font_size']['unit'] == 'em' && $value['font_size']['value'] >= 9 ) {
404
  $value['font_size']['unit'] = 'px';
405
  }
406
 
includes/class-customify-color-palettes.php CHANGED
@@ -203,7 +203,6 @@ class Customify_Color_Palettes {
203
  'label' => esc_html__( 'Color Primary', 'customify' ),
204
  'default' => '#ffeb00',
205
  'connected_fields' => array(
206
- // 'sm_color_primary_connected'
207
  ),
208
  'css' => array(
209
  array(
@@ -212,20 +211,14 @@ class Customify_Color_Palettes {
212
  ),
213
  ),
214
  ),
215
- 'sm_color_primary_connected' => array(
216
- 'type' => 'color',
217
  'setting_type' => 'option',
218
- 'setting_id' => 'sm_color_primary_connected',
219
  'priority' => 21,
220
- 'label' => esc_html__( 'Color Primary Connected', 'customify' ),
221
  'live' => true,
222
- 'default' => '#ffeb00',
223
- 'css' => array(
224
- array(
225
- 'selector' => ':root',
226
- 'property' => '--sm-color-primary-connected',
227
- ),
228
- ),
229
  ),
230
  'sm_color_secondary' => array(
231
  'type' => 'color',
@@ -236,7 +229,6 @@ class Customify_Color_Palettes {
236
  'label' => esc_html__( 'Color Secondary', 'customify' ),
237
  'default' => '#00ecff',
238
  'connected_fields' => array(
239
- // 'sm_color_secondary_connected'
240
  ),
241
  'css' => array(
242
  array(
@@ -245,20 +237,14 @@ class Customify_Color_Palettes {
245
  ),
246
  ),
247
  ),
248
- 'sm_color_secondary_connected' => array(
249
- 'type' => 'color',
250
  'setting_type' => 'option',
251
- 'setting_id' => 'sm_color_secondary_connected',
252
  'priority' => 21,
253
- 'label' => esc_html__( 'Color Secondary Connected', 'customify' ),
254
  'live' => true,
255
- 'default' => '#00ecff',
256
- 'css' => array(
257
- array(
258
- 'selector' => ':root',
259
- 'property' => '--sm-color-secondary-connected',
260
- ),
261
- ),
262
  ),
263
  'sm_color_tertiary' => array(
264
  'type' => 'color',
@@ -269,7 +255,6 @@ class Customify_Color_Palettes {
269
  'label' => esc_html__( 'Color Tertiary', 'customify' ),
270
  'default' => '#00ecff',
271
  'connected_fields' => array(
272
- // 'sm_color_tertiary_connected'
273
  ),
274
  'css' => array(
275
  array(
@@ -278,20 +263,14 @@ class Customify_Color_Palettes {
278
  ),
279
  ),
280
  ),
281
- 'sm_color_tertiary_connected' => array(
282
- 'type' => 'color',
283
  'setting_type' => 'option',
284
- 'setting_id' => 'sm_color_tertiary_connected',
285
  'priority' => 21,
286
- 'label' => esc_html__( 'Color Tertiary Connected', 'customify' ),
287
  'live' => true,
288
- 'default' => '#00ecff',
289
- 'css' => array(
290
- array(
291
- 'selector' => ':root',
292
- 'property' => '--sm-color-tertiary-connected',
293
- ),
294
- ),
295
  ),
296
  'sm_dark_primary' => array(
297
  'type' => 'color',
@@ -302,7 +281,6 @@ class Customify_Color_Palettes {
302
  'label' => esc_html__( 'Dark Primary', 'customify' ),
303
  'default' => '#171617',
304
  'connected_fields' => array(
305
- // 'sm_dark_primary_connected'
306
  ),
307
  'css' => array(
308
  array(
@@ -311,20 +289,14 @@ class Customify_Color_Palettes {
311
  ),
312
  ),
313
  ),
314
- 'sm_dark_primary_connected' => array(
315
- 'type' => 'color',
316
  'setting_type' => 'option',
317
- 'setting_id' => 'sm_dark_primary_connected',
318
  'priority' => 21,
319
- 'label' => esc_html__( 'Dark Primary Connected', 'customify' ),
320
  'live' => true,
321
- 'default' => '#171617',
322
- 'css' => array(
323
- array(
324
- 'selector' => ':root',
325
- 'property' => '--sm-dark-primary-connected',
326
- ),
327
- ),
328
  ),
329
  'sm_dark_secondary' => array(
330
  'type' => 'color',
@@ -335,7 +307,6 @@ class Customify_Color_Palettes {
335
  'label' => esc_html__( 'Dark Secondary', 'customify' ),
336
  'default' => '#383c50',
337
  'connected_fields' => array(
338
- // 'sm_dark_secondary_connected'
339
  ),
340
  'css' => array(
341
  array(
@@ -344,20 +315,14 @@ class Customify_Color_Palettes {
344
  ),
345
  ),
346
  ),
347
- 'sm_dark_secondary_connected' => array(
348
- 'type' => 'color',
349
  'setting_type' => 'option',
350
- 'setting_id' => 'sm_dark_secondary_connected',
351
  'priority' => 21,
352
- 'label' => esc_html__( 'Color Primary Connected', 'customify' ),
353
  'live' => true,
354
- 'default' => '#ffeb00',
355
- 'css' => array(
356
- array(
357
- 'selector' => ':root',
358
- 'property' => '--sm-dark-secondary-connected',
359
- ),
360
- ),
361
  ),
362
  'sm_dark_tertiary' => array(
363
  'type' => 'color',
@@ -368,7 +333,6 @@ class Customify_Color_Palettes {
368
  'label' => esc_html__( 'Dark Tertiary', 'customify' ),
369
  'default' => '#65726F',
370
  'connected_fields' => array(
371
- // 'sm_dark_tertiary_connected'
372
  ),
373
  'css' => array(
374
  array(
@@ -377,20 +341,14 @@ class Customify_Color_Palettes {
377
  ),
378
  ),
379
  ),
380
- 'sm_dark_tertiary_connected' => array(
381
- 'type' => 'color',
382
  'setting_type' => 'option',
383
- 'setting_id' => 'sm_dark_tertiary_connected',
384
  'priority' => 21,
385
- 'label' => esc_html__( 'Dark Tertiary Connected', 'customify' ),
386
  'live' => true,
387
- 'default' => '#ffeb00',
388
- 'css' => array(
389
- array(
390
- 'selector' => ':root',
391
- 'property' => '--sm-dark-tertiary-connected',
392
- ),
393
- ),
394
  ),
395
  'sm_light_primary' => array(
396
  'type' => 'color',
@@ -401,7 +359,6 @@ class Customify_Color_Palettes {
401
  'label' => esc_html__( 'Light Primary', 'customify' ),
402
  'default' => '#ffffff',
403
  'connected_fields' => array(
404
- // 'sm_light_primary_connected'
405
  ),
406
  'css' => array(
407
  array(
@@ -410,20 +367,14 @@ class Customify_Color_Palettes {
410
  ),
411
  ),
412
  ),
413
- 'sm_light_primary_connected' => array(
414
- 'type' => 'color',
415
  'setting_type' => 'option',
416
- 'setting_id' => 'sm_light_primary_connected',
417
  'priority' => 21,
418
- 'label' => esc_html__( 'Light Primary Connected', 'customify' ),
419
  'live' => true,
420
- 'default' => '#ffffff',
421
- 'css' => array(
422
- array(
423
- 'selector' => ':root',
424
- 'property' => '--sm-light-primary-connected',
425
- ),
426
- ),
427
  ),
428
  'sm_light_secondary' => array(
429
  'type' => 'color',
@@ -434,7 +385,6 @@ class Customify_Color_Palettes {
434
  'label' => esc_html__( 'Light Secondary', 'customify' ),
435
  'default' => '#ffffff',
436
  'connected_fields' => array(
437
- // 'sm_light_secondary_connected'
438
  ),
439
  'css' => array(
440
  array(
@@ -443,20 +393,14 @@ class Customify_Color_Palettes {
443
  ),
444
  ),
445
  ),
446
- 'sm_light_secondary_connected' => array(
447
- 'type' => 'color',
448
  'setting_type' => 'option',
449
- 'setting_id' => 'sm_light_secondary_connected',
450
  'priority' => 21,
451
- 'label' => esc_html__( 'Light Secondary Connected', 'customify' ),
452
  'live' => true,
453
- 'default' => '#ffffff',
454
- 'css' => array(
455
- array(
456
- 'selector' => ':root',
457
- 'property' => '--sm-light-secondary-connected',
458
- ),
459
- ),
460
  ),
461
  'sm_light_tertiary' => array(
462
  'type' => 'color',
@@ -467,7 +411,6 @@ class Customify_Color_Palettes {
467
  'label' => esc_html__( 'Light Tertiary', 'customify' ),
468
  'default' => '#ffffff',
469
  'connected_fields' => array(
470
- // 'sm_light_tertiary_connected'
471
  ),
472
  'css' => array(
473
  array(
@@ -476,20 +419,14 @@ class Customify_Color_Palettes {
476
  ),
477
  ),
478
  ),
479
- 'sm_light_tertiary_connected' => array(
480
- 'type' => 'color',
481
  'setting_type' => 'option',
482
- 'setting_id' => 'sm_light_tertiary_connected',
483
  'priority' => 21,
484
- 'label' => esc_html__( 'Light Tertiary Connected', 'customify' ),
485
  'live' => true,
486
- 'default' => '#ffffff',
487
- 'css' => array(
488
- array(
489
- 'selector' => ':root',
490
- 'property' => '--sm-light-tertiary-connected',
491
- ),
492
- ),
493
  ),
494
  'sm_swap_colors' => array(
495
  'type' => 'button',
@@ -727,17 +664,17 @@ class Customify_Color_Palettes {
727
  $optionsArrayObject = new ArrayObject( $config['sections']['style_manager_section']['options'] );
728
  $optionsCopy = $optionsArrayObject->getArrayCopy();
729
 
730
- $pos1 = array_search('sm_color_primary_connected', $optionsCopy['sm_color_primary']['connected_fields'] );
731
  if ( false !== $pos1 ) {
732
  unset( $optionsCopy['sm_color_primary']['connected_fields'][$pos1] );
733
  }
734
 
735
- $pos2 = array_search('sm_color_secondary_connected', $optionsCopy['sm_color_secondary']['connected_fields'] );
736
  if ( false !== $pos2 ) {
737
  unset( $optionsCopy['sm_color_secondary']['connected_fields'][$pos2] );
738
  }
739
 
740
- $pos3 = array_search('sm_color_tertiary_connected', $optionsCopy['sm_color_tertiary']['connected_fields'] );
741
  if ( false !== $pos3 ) {
742
  unset( $optionsCopy['sm_color_tertiary']['connected_fields'][$pos3] );
743
  }
@@ -860,12 +797,12 @@ class Customify_Color_Palettes {
860
  $optionsArrayObject = new ArrayObject( $options );
861
  $optionsCopy = $optionsArrayObject->getArrayCopy();
862
 
863
- $pos1 = array_search($color_id . '_connected', $optionsCopy[$color_id]['connected_fields'] );
864
  if ( false !== $pos1 ) {
865
  unset( $optionsCopy[$color_id]['connected_fields'][$pos1] );
866
  }
867
 
868
- $pos2 = array_search($dark_id . '_connected', $optionsCopy[$dark_id]['connected_fields'] );
869
  if ( false !== $pos2 ) {
870
  unset( $optionsCopy[$dark_id]['connected_fields'][$pos2] );
871
  }
@@ -1118,20 +1055,56 @@ class Customify_Color_Palettes {
1118
  *
1119
  * @return array
1120
  */
1121
- public function get_all_master_color_controls_ids( $options ) {
1122
- $master_color_controls = array();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1123
 
1124
  if ( empty( $options ) ) {
1125
- return $master_color_controls;
1126
  }
1127
 
1128
  foreach ( $options as $option_id => $option_settings ) {
1129
- if ( ! empty( $option_settings['type'] ) && 'color' === $option_settings['type'] ) {
1130
- $master_color_controls[] = $option_id;
 
 
 
1131
  }
1132
  }
1133
 
1134
- return $master_color_controls;
1135
  }
1136
 
1137
  /**
203
  'label' => esc_html__( 'Color Primary', 'customify' ),
204
  'default' => '#ffeb00',
205
  'connected_fields' => array(
 
206
  ),
207
  'css' => array(
208
  array(
211
  ),
212
  ),
213
  ),
214
+ 'sm_color_primary_final' => array(
215
+ 'type' => 'hidden',
216
  'setting_type' => 'option',
217
+ 'setting_id' => 'sm_color_primary_final',
218
  'priority' => 21,
219
+ 'label' => esc_html__( 'Color Primary Final', 'customify' ),
220
  'live' => true,
221
+ 'default' => '',
 
 
 
 
 
 
222
  ),
223
  'sm_color_secondary' => array(
224
  'type' => 'color',
229
  'label' => esc_html__( 'Color Secondary', 'customify' ),
230
  'default' => '#00ecff',
231
  'connected_fields' => array(
 
232
  ),
233
  'css' => array(
234
  array(
237
  ),
238
  ),
239
  ),
240
+ 'sm_color_secondary_final' => array(
241
+ 'type' => 'hidden',
242
  'setting_type' => 'option',
243
+ 'setting_id' => 'sm_color_secondary_final',
244
  'priority' => 21,
245
+ 'label' => esc_html__( 'Color Secondary Final', 'customify' ),
246
  'live' => true,
247
+ 'default' => '',
 
 
 
 
 
 
248
  ),
249
  'sm_color_tertiary' => array(
250
  'type' => 'color',
255
  'label' => esc_html__( 'Color Tertiary', 'customify' ),
256
  'default' => '#00ecff',
257
  'connected_fields' => array(
 
258
  ),
259
  'css' => array(
260
  array(
263
  ),
264
  ),
265
  ),
266
+ 'sm_color_tertiary_final' => array(
267
+ 'type' => 'hidden',
268
  'setting_type' => 'option',
269
+ 'setting_id' => 'sm_color_tertiary_final',
270
  'priority' => 21,
271
+ 'label' => esc_html__( 'Color Tertiary Final', 'customify' ),
272
  'live' => true,
273
+ 'default' => '',
 
 
 
 
 
 
274
  ),
275
  'sm_dark_primary' => array(
276
  'type' => 'color',
281
  'label' => esc_html__( 'Dark Primary', 'customify' ),
282
  'default' => '#171617',
283
  'connected_fields' => array(
 
284
  ),
285
  'css' => array(
286
  array(
289
  ),
290
  ),
291
  ),
292
+ 'sm_dark_primary_final' => array(
293
+ 'type' => 'hidden',
294
  'setting_type' => 'option',
295
+ 'setting_id' => 'sm_dark_primary_final',
296
  'priority' => 21,
297
+ 'label' => esc_html__( 'Dark Primary Final', 'customify' ),
298
  'live' => true,
299
+ 'default' => '',
 
 
 
 
 
 
300
  ),
301
  'sm_dark_secondary' => array(
302
  'type' => 'color',
307
  'label' => esc_html__( 'Dark Secondary', 'customify' ),
308
  'default' => '#383c50',
309
  'connected_fields' => array(
 
310
  ),
311
  'css' => array(
312
  array(
315
  ),
316
  ),
317
  ),
318
+ 'sm_dark_secondary_final' => array(
319
+ 'type' => 'hidden',
320
  'setting_type' => 'option',
321
+ 'setting_id' => 'sm_dark_secondary_final',
322
  'priority' => 21,
323
+ 'label' => esc_html__( 'Dark Secondary Final', 'customify' ),
324
  'live' => true,
325
+ 'default' => '',
 
 
 
 
 
 
326
  ),
327
  'sm_dark_tertiary' => array(
328
  'type' => 'color',
333
  'label' => esc_html__( 'Dark Tertiary', 'customify' ),
334
  'default' => '#65726F',
335
  'connected_fields' => array(
 
336
  ),
337
  'css' => array(
338
  array(
341
  ),
342
  ),
343
  ),
344
+ 'sm_dark_tertiary_final' => array(
345
+ 'type' => 'hidden',
346
  'setting_type' => 'option',
347
+ 'setting_id' => 'sm_dark_tertiary_final',
348
  'priority' => 21,
349
+ 'label' => esc_html__( 'Dark Tertiary Final', 'customify' ),
350
  'live' => true,
351
+ 'default' => '',
 
 
 
 
 
 
352
  ),
353
  'sm_light_primary' => array(
354
  'type' => 'color',
359
  'label' => esc_html__( 'Light Primary', 'customify' ),
360
  'default' => '#ffffff',
361
  'connected_fields' => array(
 
362
  ),
363
  'css' => array(
364
  array(
367
  ),
368
  ),
369
  ),
370
+ 'sm_light_primary_final' => array(
371
+ 'type' => 'hidden',
372
  'setting_type' => 'option',
373
+ 'setting_id' => 'sm_light_primary_final',
374
  'priority' => 21,
375
+ 'label' => esc_html__( 'Light Primary Final', 'customify' ),
376
  'live' => true,
377
+ 'default' => '',
 
 
 
 
 
 
378
  ),
379
  'sm_light_secondary' => array(
380
  'type' => 'color',
385
  'label' => esc_html__( 'Light Secondary', 'customify' ),
386
  'default' => '#ffffff',
387
  'connected_fields' => array(
 
388
  ),
389
  'css' => array(
390
  array(
393
  ),
394
  ),
395
  ),
396
+ 'sm_light_secondary_final' => array(
397
+ 'type' => 'hidden',
398
  'setting_type' => 'option',
399
+ 'setting_id' => 'sm_light_secondary_final',
400
  'priority' => 21,
401
+ 'label' => esc_html__( 'Light Secondary Final', 'customify' ),
402
  'live' => true,
403
+ 'default' => '',
 
 
 
 
 
 
404
  ),
405
  'sm_light_tertiary' => array(
406
  'type' => 'color',
411
  'label' => esc_html__( 'Light Tertiary', 'customify' ),
412
  'default' => '#ffffff',
413
  'connected_fields' => array(
 
414
  ),
415
  'css' => array(
416
  array(
419
  ),
420
  ),
421
  ),
422
+ 'sm_light_tertiary_final' => array(
423
+ 'type' => 'hidden',
424
  'setting_type' => 'option',
425
+ 'setting_id' => 'sm_light_tertiary_final',
426
  'priority' => 21,
427
+ 'label' => esc_html__( 'Light Tertiary Final', 'customify' ),
428
  'live' => true,
429
+ 'default' => '',
 
 
 
 
 
 
430
  ),
431
  'sm_swap_colors' => array(
432
  'type' => 'button',
664
  $optionsArrayObject = new ArrayObject( $config['sections']['style_manager_section']['options'] );
665
  $optionsCopy = $optionsArrayObject->getArrayCopy();
666
 
667
+ $pos1 = array_search('sm_color_primary_final', $optionsCopy['sm_color_primary']['connected_fields'] );
668
  if ( false !== $pos1 ) {
669
  unset( $optionsCopy['sm_color_primary']['connected_fields'][$pos1] );
670
  }
671
 
672
+ $pos2 = array_search('sm_color_secondary_final', $optionsCopy['sm_color_secondary']['connected_fields'] );
673
  if ( false !== $pos2 ) {
674
  unset( $optionsCopy['sm_color_secondary']['connected_fields'][$pos2] );
675
  }
676
 
677
+ $pos3 = array_search('sm_color_tertiary_final', $optionsCopy['sm_color_tertiary']['connected_fields'] );
678
  if ( false !== $pos3 ) {
679
  unset( $optionsCopy['sm_color_tertiary']['connected_fields'][$pos3] );
680
  }
797
  $optionsArrayObject = new ArrayObject( $options );
798
  $optionsCopy = $optionsArrayObject->getArrayCopy();
799
 
800
+ $pos1 = array_search($color_id . '_final', $optionsCopy[$color_id]['connected_fields'] );
801
  if ( false !== $pos1 ) {
802
  unset( $optionsCopy[$color_id]['connected_fields'][$pos1] );
803
  }
804
 
805
+ $pos2 = array_search($dark_id . '_final', $optionsCopy[$dark_id]['connected_fields'] );
806
  if ( false !== $pos2 ) {
807
  unset( $optionsCopy[$dark_id]['connected_fields'][$pos2] );
808
  }
1055
  *
1056
  * @return array
1057
  */
1058
+ public function get_all_master_color_controls_ids( $options = null ) {
1059
+ $control_ids = array();
1060
+
1061
+ if ( empty( $options ) ) {
1062
+ $options = PixCustomifyPlugin()->get_options_configs();
1063
+ }
1064
+
1065
+ if ( empty( $options ) ) {
1066
+ return $control_ids;
1067
+ }
1068
+
1069
+ foreach ( $options as $option_id => $option_settings ) {
1070
+ if ( ! empty( $option_settings['type'] ) && 'color' === $option_settings['type'] && 0 === strpos( $option_id, 'sm_' ) ) {
1071
+ $control_ids[] = $option_id;
1072
+ }
1073
+ }
1074
+
1075
+ return $control_ids;
1076
+ }
1077
+
1078
+ /**
1079
+ * Get all the defined Style Manager final (master) color field ids.
1080
+ *
1081
+ * @since 2.2.0
1082
+ *
1083
+ * @param array $options
1084
+ *
1085
+ * @return array
1086
+ */
1087
+ public function get_all_final_master_color_controls_ids( $options = null ) {
1088
+ $control_ids = array();
1089
+
1090
+ if ( empty( $options ) ) {
1091
+ $options = PixCustomifyPlugin()->get_options_configs();
1092
+ }
1093
 
1094
  if ( empty( $options ) ) {
1095
+ return $control_ids;
1096
  }
1097
 
1098
  foreach ( $options as $option_id => $option_settings ) {
1099
+ if ( ! empty( $option_settings['type'] )
1100
+ && 'hidden' === $option_settings['type']
1101
+ && 0 === strpos( $option_id, 'sm_' )
1102
+ && '__final' === substr( $option_id, - strlen( '__final' ) ) ) {
1103
+ $control_ids[] = $option_id;
1104
  }
1105
  }
1106
 
1107
+ return $control_ids;
1108
  }
1109
 
1110
  /**
includes/class-customify-font-palettes.php CHANGED
@@ -1102,10 +1102,17 @@ class Customify_Font_Palettes {
1102
  'font_styles_intervals' => array(
1103
  array(
1104
  'start' => 0,
 
1105
  'font_weight' => 400,
1106
  'letter_spacing' => '0em',
1107
  'text_transform' => 'none',
1108
  ),
 
 
 
 
 
 
1109
  ),
1110
  ),
1111
 
1102
  'font_styles_intervals' => array(
1103
  array(
1104
  'start' => 0,
1105
+ 'end' => 15,
1106
  'font_weight' => 400,
1107
  'letter_spacing' => '0em',
1108
  'text_transform' => 'none',
1109
  ),
1110
+ array(
1111
+ 'start' => 15,
1112
+ 'font_weight' => 700,
1113
+ 'letter_spacing' => '0em',
1114
+ 'text_transform' => 'none',
1115
+ ),
1116
  ),
1117
  ),
1118
 
includes/class-customify-gutenberg.php ADDED
@@ -0,0 +1,519 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * This is the class that handles the overall logic for integration with the new Gutenberg Editor (WordPress 5.0+).
4
+ *
5
+ * @see https://pixelgrade.com
6
+ * @author Pixelgrade
7
+ * @since 2.2.0
8
+ */
9
+
10
+ if ( ! defined( 'ABSPATH' ) ) {
11
+ exit; // Exit if accessed directly
12
+ }
13
+
14
+ if ( ! class_exists( 'Customify_Gutenberg' ) ) :
15
+
16
+ class Customify_Gutenberg {
17
+
18
+ /**
19
+ * Holds the only instance of this class.
20
+ * @var null|Customify_Gutenberg
21
+ * @access protected
22
+ * @since 2.2.0
23
+ */
24
+ protected static $_instance = null;
25
+
26
+ /*
27
+ * Selectors that we will use to constrain CSS rules to certain scopes.
28
+ */
29
+ public static $editor_namespace_selector = '.edit-post-visual-editor.editor-styles-wrapper';
30
+ public static $title_namespace_selector = '.editor-styles-wrapper .editor-post-title__block';
31
+ public static $title_input_namespace_selector = '.editor-styles-wrapper .editor-post-title__block .editor-post-title__input';
32
+ public static $block_namespace_selector = '.edit-post-visual-editor.editor-styles-wrapper .editor-block-list__block';
33
+
34
+ /**
35
+ * Regexes
36
+ */
37
+ public static $gutenbergy_selector_regex = '/^(\.edit-post-visual-editor|\.editor-block-list__block).*$/';
38
+ public static $root_regex = '/^(body|html).*$/';
39
+ public static $title_regex = '/^(h1|h1\s+.*|\.single\s*\.entry-title.*|\.entry-title.*|\.page-title.*|\.article__?title.*)$/';
40
+ /* Regexes based on which we will ignore selectors = do not include them in the selector list for a certain rule. */
41
+ public static $excluded_selectors_regex = array(
42
+ // We don't want to mess with buttons as we have a high likelihood of messing with the Gutenberg toolbar.
43
+ '/^\s*button/',
44
+ '/^\s*\.button/',
45
+ '/^\s*input/',
46
+ '/^\s*select/',
47
+ '/^\s*#/', // ignore all ids
48
+ '/^\s*div#/', // ignore all ids
49
+
50
+ '/\.u-/',
51
+ '/\.c-/',
52
+ '/\.o-/',
53
+ '/\.site-/',
54
+ '/\.card/',
55
+
56
+ '/^\s*\.archive/',
57
+ '/^\s*\.search/',
58
+ '/^\s*\.no-results/',
59
+ '/^\s*\.home/',
60
+ '/^\s*\.blog/',
61
+ '/^\s*\.site-/',
62
+ '/\.search/',
63
+ '/\.page/',
64
+ '/\.attachment/',
65
+ '/\.mobile/',
66
+
67
+ '/\.sticky/',
68
+ '/\.custom-logo-link/',
69
+
70
+ '/\.entry-meta/',
71
+ '/\.entry-footer/',
72
+ '/\.header-meta/',
73
+ '/\.nav/',
74
+ '/\.main-navigation/',
75
+ '/navbar/',
76
+ '/comment/',
77
+ '/\.dummy/',
78
+ '/\.back-to-top/',
79
+ '/\.page-numbers/',
80
+ '/\.featured/',
81
+ '/\.widget/',
82
+ '/\.edit-link/',
83
+ '/\.posted-on/',
84
+ '/\.cat-links/',
85
+ '/\.posted-by/',
86
+ '/\.more-link/',
87
+
88
+ '/jetpack/',
89
+ '/wpforms/',
90
+ '/contact-form/',
91
+ '/sharedaddy/',
92
+ );
93
+
94
+ /**
95
+ * Constructor.
96
+ *
97
+ * @since 2.2.0
98
+ */
99
+ protected function __construct() {
100
+ $this->init();
101
+ }
102
+
103
+ /**
104
+ * Initialize this module.
105
+ *
106
+ * @since 2.2.0
107
+ */
108
+ public function init() {
109
+
110
+ // Hook up.
111
+ $this->add_hooks();
112
+ }
113
+
114
+ /**
115
+ * Initiate our hooks
116
+ *
117
+ * @since 2.2.0
118
+ */
119
+ public function add_hooks() {
120
+
121
+ add_action( 'enqueue_block_editor_assets', array( $this, 'dynamic_styles' ), 999 );
122
+
123
+ // Styles on the front end.
124
+ add_action( 'wp_enqueue_scripts', array( $this, 'frontend_styles' ), 999 );
125
+
126
+ add_action( 'init', array( $this, 'editor_color_palettes' ), 20 );
127
+ }
128
+
129
+ /**
130
+ * Determine if Gutenberg is supported.
131
+ *
132
+ * @since 2.2.0
133
+ *
134
+ * @return bool
135
+ */
136
+ public function is_supported() {
137
+ $gutenberg = false;
138
+ if ( has_filter( 'replace_editor', 'gutenberg_init' ) ) {
139
+ // Gutenberg is installed and activated.
140
+ $gutenberg = true;
141
+ }
142
+
143
+ return apply_filters( 'customify_gutenberg_is_supported', $gutenberg );
144
+ }
145
+
146
+ public function get_editor_style_handle() {
147
+ global $wp_styles;
148
+ if ( ! ( $wp_styles instanceof WP_Styles ) ) {
149
+ return '';
150
+ }
151
+
152
+ // We need to look into the registered theme stylesheets and get the one most likely to be used for Gutenberg.
153
+ // Thus we can attach inline styles to it.
154
+ $theme_dir_uri = get_stylesheet_directory_uri();
155
+ $theme_slug = get_stylesheet();
156
+
157
+ $handle = 'wp-edit-post'; // this is better than nothing as it is the main editor style.
158
+ $reversed = array_reverse( $wp_styles->registered );
159
+ /** @var _WP_Dependency $style */
160
+ foreach ( $reversed as $style ) {
161
+ // This is the most precise.
162
+ if ( 0 === strpos( $style->src, $theme_dir_uri ) ) {
163
+ $handle = $style->handle;
164
+ break;
165
+ }
166
+
167
+ // If it is prefixed with the theme slug, it is good also.
168
+ if ( 0 === strpos( $style->handle, $theme_slug . '-' ) || 0 === strpos( $style->handle, $theme_slug . '_' ) ) {
169
+ $handle = $style->handle;
170
+ break;
171
+ }
172
+ }
173
+
174
+ return $handle;
175
+ }
176
+
177
+ public function get_frontend_style_handle() {
178
+ global $wp_styles;
179
+ if ( ! ( $wp_styles instanceof WP_Styles ) ) {
180
+ return '';
181
+ }
182
+
183
+ // We need to look into the registered theme stylesheets and get the one most likely to be used for Gutenberg.
184
+ // Thus we can attach inline styles to it.
185
+ $style_css_uri = get_stylesheet_uri();
186
+ $theme_slug = get_stylesheet();
187
+
188
+ $handle = 'wp-edit-post'; // this is better than nothing as it is the main editor style.
189
+ $reversed = array_reverse( $wp_styles->registered );
190
+ /** @var _WP_Dependency $style */
191
+ foreach ( $reversed as $style ) {
192
+ // This is the most precise.
193
+ if ( 0 === strpos( $style->src, $style_css_uri ) ) {
194
+ $handle = $style->handle;
195
+ break;
196
+ }
197
+
198
+ // If it is prefixed with the theme slug, it is good also.
199
+ if ( ( 0 === strpos( $style->handle, $theme_slug . '-' ) || 0 === strpos( $style->handle, $theme_slug . '_' ) )
200
+ && false !== strpos( $style->src, '.css') ) {
201
+ $handle = $style->handle;
202
+ break;
203
+ }
204
+ }
205
+
206
+ return $handle;
207
+ }
208
+
209
+ /**
210
+ * Output Customify's dynamic styles in the Gutenberg context.
211
+ *
212
+ * @since 2.2.0
213
+ */
214
+ public function dynamic_styles() {
215
+ $enqueue_parent_handle = $this->get_editor_style_handle();
216
+
217
+ if ( PixCustomifyPlugin()->get_plugin_setting( 'enable_editor_style', true ) ) {
218
+ add_filter( 'customify_typography_css_selector', array( $this, 'gutenbergify_font_css_selectors' ), 10, 2 );
219
+ PixCustomifyPlugin()->output_typography_dynamic_style();
220
+ remove_filter( 'customify_typography_css_selector', array( $this, 'gutenbergify_font_css_selectors' ), 10 );
221
+
222
+ add_filter( 'customify_font_css_selector', array( $this, 'gutenbergify_font_css_selectors' ), 10, 2 );
223
+ Customify_Font_Selector::instance()->output_font_dynamic_style();
224
+ remove_filter( 'customify_font_css_selector', array( $this, 'gutenbergify_font_css_selectors' ), 10 );
225
+
226
+ add_filter( 'customify_css_selector', array( $this, 'gutenbergify_css_selectors' ), 10, 2 );
227
+ PixCustomifyPlugin()->output_dynamic_style();
228
+ remove_filter( 'customify_css_selector', array( $this, 'gutenbergify_css_selectors' ), 10 );
229
+
230
+ // Add color palettes classes.
231
+ wp_add_inline_style( $enqueue_parent_handle, $this->editor_color_palettes_css_classes() );
232
+ }
233
+ }
234
+
235
+ public function frontend_styles() {
236
+ $enqueue_parent_handle = $this->get_editor_style_handle();
237
+
238
+ // Add color palettes classes.
239
+ wp_add_inline_style( $enqueue_parent_handle, $this->editor_color_palettes_css_classes() );
240
+ }
241
+
242
+ public function gutenbergify_css_selectors( $selectors, $css_property ) {
243
+
244
+ // Treat the selector(s) as an array.
245
+ $selectors = $this->maybeExplodeSelectors( $selectors );
246
+
247
+ $new_selectors = array();
248
+ foreach ( $selectors as $selector ) {
249
+ // Clean up
250
+ $selector = trim( $selector );
251
+
252
+ // If the selector matches the excluded, skip it.
253
+ if ( $this->preg_match_any( self::$excluded_selectors_regex, $selector ) ) {
254
+ continue;
255
+ }
256
+
257
+ // If the selector is already Gutenbergy, we will not do anything to it
258
+ if ( preg_match( self::$gutenbergy_selector_regex, $selector ) ) {
259
+ $new_selectors[] = $selector;
260
+ continue;
261
+ }
262
+
263
+ // We will let :root selectors be
264
+ if ( ':root' === $selector ) {
265
+ $new_selectors[] = $selector;
266
+ continue;
267
+ }
268
+
269
+ // For root html elements, we will not prefix them, but replace them with the block and title namespace.
270
+ if ( preg_match( self::$root_regex, $selector ) ) {
271
+ // We will ignore pseudo-selectors
272
+ if ( preg_match( '/^(body|html)[\:\+]+.*$/', $selector ) ) {
273
+ continue;
274
+ }
275
+
276
+ // When it comes to background properties applied at the body level, we need to scope to the editor namespace
277
+ if ( isset( $css_property['property'] ) && 0 === strpos( $css_property['property'], 'background' ) ) {
278
+ $new_selectors[] = preg_replace( '/^(html body|body|html)/', self::$editor_namespace_selector, $selector );
279
+ } else {
280
+ $new_selectors[] = preg_replace( '/^(html body|body|html)/', self::$block_namespace_selector, $selector );
281
+ $new_selectors[] = preg_replace( '/^(html body|body|html)/', self::$title_namespace_selector, $selector );
282
+ }
283
+ continue;
284
+ }
285
+
286
+ // If we encounter selectors that seem that they could target the post title,
287
+ // we will add selectors for the Gutenberg title also.
288
+ if ( preg_match( self::$title_regex, $selector ) ) {
289
+ $new_selectors[] = preg_replace( self::$title_regex, self::$title_input_namespace_selector, $selector );
290
+ }
291
+
292
+ $new_selectors[] = self::$block_namespace_selector . ' ' . $selector;
293
+ }
294
+
295
+ return implode( ', ', $new_selectors );
296
+ }
297
+
298
+ public function gutenbergify_font_css_selectors( $selectors, $font ) {
299
+
300
+ // Treat the selector(s) as an array.
301
+ $selectors = $this->maybeExplodeSelectors( $selectors );
302
+
303
+ $new_selectors = array();
304
+ foreach ( $selectors as $selector ) {
305
+ // Clean up
306
+ $selector = trim( $selector );
307
+
308
+ // If the selector matches the excluded, skip it.
309
+ if ( $this->preg_match_any( self::$excluded_selectors_regex, $selector ) ) {
310
+ continue;
311
+ }
312
+
313
+ // If the selector is already Gutenbergy, we will not do anything to it
314
+ if ( preg_match( self::$gutenbergy_selector_regex, $selector ) ) {
315
+ $new_selectors[] = $selector;
316
+ continue;
317
+ }
318
+
319
+ // We will let :root selectors be
320
+ if ( ':root' === $selector ) {
321
+ $new_selectors[] = $selector;
322
+ continue;
323
+ }
324
+
325
+ // For root html elements, we will not prefix them, but replace them with the block and title namespace.
326
+ if ( preg_match( self::$root_regex, $selector ) ) {
327
+ $new_selectors[] = preg_replace( '/^(html body|body|html|)/', self::$block_namespace_selector, $selector );
328
+ $new_selectors[] = preg_replace( '/^(html body|body|html)/', self::$title_namespace_selector, $selector );
329
+ continue;
330
+ }
331
+
332
+ // If we encounter selectors that seem that they could target the post title,
333
+ // we will add selectors for the Gutenberg title also.
334
+ if ( preg_match( self::$title_regex, $selector ) ) {
335
+ $new_selectors[] = preg_replace( self::$title_regex, self::$title_input_namespace_selector, $selector );
336
+ }
337
+
338
+ $new_selectors[] = self::$block_namespace_selector . ' ' . $selector;
339
+ }
340
+
341
+ return implode( ', ', $new_selectors );
342
+ }
343
+
344
+ /**
345
+ * Preg_match a series of regex against a subject.
346
+ *
347
+ * @param string|array $regexes
348
+ * @param string $subject
349
+ *
350
+ * @return bool Returns true if at least one of the regex matches, false otherwise.
351
+ */
352
+ public function preg_match_any( $regexes, $subject ) {
353
+ if ( is_string( $regexes ) ) {
354
+ $regexes = array( $regexes );
355
+ }
356
+
357
+ if ( ! is_array( $regexes ) ) {
358
+ return false;
359
+ }
360
+
361
+ foreach ( $regexes as $regex ) {
362
+ if ( preg_match( $regex, $subject ) ) {
363
+ return true;
364
+ }
365
+ }
366
+
367
+ return false;
368
+ }
369
+
370
+ /**
371
+ * Attempt to split a string with selectors and return the parts as an array.
372
+ * If not a string or no comma present, just returns the value.
373
+ *
374
+ * @param mixed $value
375
+ *
376
+ * @return array|false|string[]
377
+ */
378
+ public function maybeExplodeSelectors( $value ) {
379
+ if ( ! is_string( $value ) ) {
380
+ return $value;
381
+ }
382
+
383
+ return preg_split( '#[\s]*,[\s]*#', $value, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE );
384
+ }
385
+
386
+ /**
387
+ * Add the SM Color Palettes to the editor sidebar.
388
+ */
389
+ public function editor_color_palettes() {
390
+ // Bail if Color Palettes are not supported
391
+ if ( ! Customify_Color_Palettes::instance()->is_supported() ) {
392
+ return;
393
+ }
394
+
395
+ $options = PixCustomifyPlugin()->get_options_configs();
396
+
397
+ $master_color_control_ids = Customify_Color_Palettes::instance()->get_all_master_color_controls_ids();
398
+ if ( empty( $master_color_control_ids ) ) {
399
+ return;
400
+ }
401
+
402
+ $editor_color_palettes = array();
403
+ foreach ( $master_color_control_ids as $control_id ) {
404
+ if ( empty( $options[ $control_id ] ) ) {
405
+ continue;
406
+ }
407
+
408
+ $value = get_option( $control_id . '_final' );
409
+ if ( empty( $value ) ) {
410
+ continue;
411
+ }
412
+
413
+ $editor_color_palettes[] = array(
414
+ 'name' => $options[ $control_id ]['label'],
415
+ 'slug' => $control_id,
416
+ 'color' => esc_html( $value ),
417
+ );
418
+ }
419
+
420
+ if ( ! empty( $editor_color_palettes ) ) {
421
+ /**
422
+ * Custom colors for use in the editor.
423
+ *
424
+ * @link https://wordpress.org/gutenberg/handbook/reference/theme-support/
425
+ */
426
+ add_theme_support(
427
+ 'editor-color-palette',
428
+ $editor_color_palettes
429
+ );
430
+ }
431
+ }
432
+
433
+ /**
434
+ * Generate the special classes for our colors.
435
+ */
436
+ public function editor_color_palettes_css_classes() {
437
+ // Bail if Color Palettes are not supported
438
+ if ( ! Customify_Color_Palettes::instance()->is_supported() ) {
439
+ return '';
440
+ }
441
+
442
+ $options = PixCustomifyPlugin()->get_options_configs();
443
+
444
+ $master_color_control_ids = Customify_Color_Palettes::instance()->get_all_master_color_controls_ids();
445
+ if ( empty( $master_color_control_ids ) ) {
446
+ return '';
447
+ }
448
+
449
+ // Build styles.
450
+ $css = '';
451
+ foreach ( $master_color_control_ids as $control_id ) {
452
+ if ( empty( $options[ $control_id ] ) ) {
453
+ continue;
454
+ }
455
+
456
+ $value = get_option( $control_id . '_final' );
457
+ if ( empty( $value ) ) {
458
+ continue;
459
+ }
460
+
461
+ $editor_color_palettes[] = array(
462
+ 'name' => $options[ $control_id ]['label'],
463
+ 'slug' => $control_id,
464
+ 'color' => esc_html( $value ),
465
+ );
466
+
467
+ $color_in_kebab_case = self::to_kebab_case($control_id);
468
+
469
+ $css .= '.has-' . $color_in_kebab_case . '-color { color: ' . esc_attr( $value ) . ' !important; }';
470
+ $css .= '.has-' . $color_in_kebab_case . '-background-color { background-color: ' . esc_attr( $value ) . '; }';
471
+ }
472
+ return wp_strip_all_tags( $css );
473
+ }
474
+
475
+ public static function to_kebab_case( $string ) {
476
+ return implode('-', array_map('\strtolower', preg_split( "/[\n\r\t -_]+/", preg_replace("/['\x{2019}]/u", '', $string), -1, PREG_SPLIT_NO_EMPTY )));
477
+ }
478
+
479
+ /**
480
+ * Main Customify_Gutenberg Instance
481
+ *
482
+ * Ensures only one instance of Customify_Gutenberg is loaded or can be loaded.
483
+ *
484
+ * @since 2.2.0
485
+ * @static
486
+ *
487
+ * @return Customify_Gutenberg Main Customify_Gutenberg instance
488
+ */
489
+ public static function instance() {
490
+
491
+ if ( is_null( self::$_instance ) ) {
492
+ self::$_instance = new self();
493
+ }
494
+
495
+ return self::$_instance;
496
+ } // End instance ()
497
+
498
+ /**
499
+ * Cloning is forbidden.
500
+ *
501
+ * @since 2.2.0
502
+ */
503
+ public function __clone() {
504
+
505
+ _doing_it_wrong( __FUNCTION__,esc_html( __( 'Cheatin&#8217; huh?' ) ), null );
506
+ } // End __clone ()
507
+
508
+ /**
509
+ * Unserializing instances of this class is forbidden.
510
+ *
511
+ * @since 2.2.0
512
+ */
513
+ public function __wakeup() {
514
+
515
+ _doing_it_wrong( __FUNCTION__, esc_html( __( 'Cheatin&#8217; huh?' ) ), null );
516
+ } // End __wakeup ()
517
+ }
518
+
519
+ endif;
includes/class-customify-style-manager.php CHANGED
@@ -297,23 +297,23 @@ class Customify_Style_Manager {
297
  'sm_color_palette',
298
  'sm_color_palette_variation',
299
  'sm_color_primary',
300
- 'sm_color_primary_connected',
301
  'sm_color_secondary',
302
- 'sm_color_secondary_connected',
303
  'sm_color_tertiary',
304
- 'sm_color_tertiary_connected',
305
  'sm_dark_primary',
306
- 'sm_dark_primary_connected',
307
  'sm_dark_secondary',
308
- 'sm_dark_secondary_connected',
309
  'sm_dark_tertiary',
310
- 'sm_dark_tertiary_connected',
311
  'sm_light_primary',
312
- 'sm_light_primary_connected',
313
  'sm_light_secondary',
314
- 'sm_light_secondary_connected',
315
  'sm_light_tertiary',
316
- 'sm_light_tertiary_connected',
317
  'sm_swap_colors',
318
  'sm_swap_dark_light',
319
  'sm_swap_colors_dark',
297
  'sm_color_palette',
298
  'sm_color_palette_variation',
299
  'sm_color_primary',
300
+ 'sm_color_primary_final',
301
  'sm_color_secondary',
302
+ 'sm_color_secondary_final',
303
  'sm_color_tertiary',
304
+ 'sm_color_tertiary_final',
305
  'sm_dark_primary',
306
+ 'sm_dark_primary_final',
307
  'sm_dark_secondary',
308
+ 'sm_dark_secondary_final',
309
  'sm_dark_tertiary',
310
+ 'sm_dark_tertiary_final',
311
  'sm_light_primary',
312
+ 'sm_light_primary_final',
313
  'sm_light_secondary',
314
+ 'sm_light_secondary_final',
315
  'sm_light_tertiary',
316
+ 'sm_light_tertiary_final',
317
  'sm_swap_colors',
318
  'sm_swap_dark_light',
319
  'sm_swap_colors_dark',
js/customizer/color-palettes.js CHANGED
@@ -1,959 +1,990 @@
1
- let ColorPalettes = ( function( $, exports, wp ) {
2
-
3
- const defaultVariation = 'light';
4
- const masterSettingIds = [
5
- "sm_color_primary",
6
- "sm_color_secondary",
7
- "sm_color_tertiary",
8
- "sm_dark_primary",
9
- "sm_dark_secondary",
10
- "sm_dark_tertiary",
11
- "sm_light_primary",
12
- "sm_light_secondary",
13
- "sm_light_tertiary"
14
- ];
15
-
16
- const filteredColors = {
17
- sm_color_primary: '',
18
- sm_color_secondary: '',
19
- sm_color_tertiary: '',
20
- sm_dark_primary: '',
21
- sm_dark_secondary: '',
22
- sm_dark_tertiary: '',
23
- sm_light_primary: '',
24
- sm_light_secondary: '',
25
- sm_light_tertiary: ''
26
- };
27
-
28
- const primary_color_selector = '#_customize-input-sm_dark_color_primary_slider_control';
29
- const secondary_color_selector = '#_customize-input-sm_dark_color_secondary_slider_control';
30
- const tertiary_color_selector = '#_customize-input-sm_dark_color_tertiary_slider_control';
31
- const color_sliders_selector = primary_color_selector + ', ' + secondary_color_selector + ', ' + tertiary_color_selector;
32
-
33
- let setupGlobalsDone = false;
34
-
35
- const setupGlobals = () => {
36
-
37
- if ( setupGlobalsDone ) {
38
- return;
39
- }
40
 
41
- // Cache initial settings configuration to be able to update connected fields on variation change.
42
- if ( typeof window.settingsClone === "undefined" ) {
43
- window.settingsClone = $.extend(true, {}, wp.customize.settings.settings);
44
- }
 
 
 
 
 
 
45
 
46
- // Create a stack of callbacks bound to parent settings to be able to unbind them
47
- // when altering the connected_fields attribute.
48
- if ( typeof window.colorsConnectedFieldsCallbacks === "undefined" ) {
49
- window.colorsConnectedFieldsCallbacks = {};
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  }
51
 
52
- setupGlobalsDone = true;
53
- };
 
54
 
55
- const hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 
 
 
 
 
 
 
 
 
 
 
56
 
57
- function hex( x ) {
58
- return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
59
- }
 
 
60
 
61
- function rgb2hex( color ) {
62
- return '#' + hex( color[0] ) + hex( color[1] ) + hex( color[2] );
63
- }
64
 
65
- function hsl2hex( color ) {
66
- var rgb = hsl2Rgb( color.hue, color.saturation, color.lightness );
67
- return rgb2hex( rgb );
68
- }
69
 
70
- function hex2rgba( hex ) {
71
- var matches = /^#([A-Fa-f0-9]{3,4}){1,2}$/.test( hex );
72
- var r = 0, g = 0, b = 0, a = 0;
73
- if ( matches ) {
74
- hex = hex.substring(1).split('');
75
- if ( hex.length === 3 ) {
76
- hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2], 'F', 'F'];
77
- }
78
- if ( hex.length === 4 ) {
79
- hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]];
80
- }
81
- r = parseInt( [ hex[0], hex[1] ].join(''), 16 );
82
- g = parseInt( [ hex[2], hex[3] ].join(''), 16 );
83
- b = parseInt( [ hex[4], hex[5] ].join(''), 16 );
84
- a = parseInt( [ hex[6], hex[7] ].join(''), 16 );
85
- }
86
- var hsl = rgbToHsl(r, g, b);
87
- var rgba = {
88
- red: r,
89
- green: g,
90
- blue: b,
91
- alpha: a,
92
- hue: hsl[0],
93
- saturation: hsl[1],
94
- lightness: hsl[2],
95
- luma: 0.2126 * r + 0.7152 * g + 0.0722 * b
96
- };
97
- return rgba;
98
- }
99
-
100
- function rgbToHsl(r, g, b){
101
- r /= 255, g /= 255, b /= 255;
102
- var max = Math.max(r, g, b), min = Math.min(r, g, b);
103
- var h, s, l = (max + min) / 2;
104
-
105
- if(max == min){
106
- h = s = 0; // achromatic
107
- }else{
108
- var d = max - min;
109
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
110
- switch(max){
111
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
112
- case g: h = (b - r) / d + 2; break;
113
- case b: h = (r - g) / d + 4; break;
114
- }
115
- h /= 6;
116
- }
117
- return [h, s, l];
118
- }
119
-
120
- const resetSettings = () => {
121
- _.each( masterSettingIds, function( setting_id ) {
122
- const setting = wp.customize( setting_id );
123
-
124
- if ( typeof setting !== "undefined" ) {
125
- let value = setting();
126
- let parent_setting_data = wp.customize.settings.settings[setting_id];
127
-
128
- _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
129
- if ( _.isUndefined( connected_field_data ) || _.isUndefined( connected_field_data.setting_id ) || ! _.isString( connected_field_data.setting_id ) ) {
130
- return;
131
- }
132
- const connected_setting = wp.customize( connected_field_data.setting_id );
133
- if ( _.isUndefined( connected_setting ) ) {
134
- return;
135
- }
136
- connected_setting.set( getFilteredColor( setting_id ) );
137
- } );
138
  }
139
- });
140
- };
141
-
142
- const updateFilteredColors = () => {
143
- _.each( masterSettingIds, function( setting_id ) {
144
- const setting = wp.customize( setting_id );
145
-
146
- if ( typeof setting !== "undefined" ) {
147
- let value = setting();
148
- filteredColors[setting_id] = filterColor( value );
149
- }
150
- });
151
- };
152
-
153
- const getFilteredColor = ( setting_id ) => {
154
- return filteredColors[setting_id];
155
- };
156
-
157
- const getMasterFieldCallback = function( parent_setting_data, parent_setting_id ) {
158
- return function( new_value, old_value ) {
159
- _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
160
- if ( _.isUndefined( connected_field_data ) || _.isUndefined( connected_field_data.setting_id ) || ! _.isString( connected_field_data.setting_id ) ) {
161
- return;
162
- }
163
- const setting = wp.customize( connected_field_data.setting_id );
164
- if ( _.isUndefined( setting ) ) {
165
- return;
166
- }
167
- setting.set( getFilteredColor( parent_setting_id ) );
168
- } );
169
- updateFilterPreviews();
170
  }
171
- };
172
-
173
- const bindConnectedFields = function() {
174
- _.each( masterSettingIds, function( parent_setting_id ) {
175
- if ( typeof wp.customize.settings.settings[parent_setting_id] !== "undefined" ) {
176
- let parent_setting_data = wp.customize.settings.settings[parent_setting_id];
177
- let parent_setting = wp.customize(parent_setting_id);
178
-
179
- if ( ! _.isUndefined( parent_setting_data.connected_fields ) ) {
180
- window.colorsConnectedFieldsCallbacks[parent_setting_id] = getMasterFieldCallback(parent_setting_data, parent_setting_id);
181
- parent_setting.bind(window.colorsConnectedFieldsCallbacks[parent_setting_id]);
182
-
183
- _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
184
- let connected_setting_id = connected_field_data.setting_id;
185
- let connected_setting = wp.customize(connected_setting_id);
186
-
187
- if ( typeof connected_setting !== "undefined" ) {
188
- window.colorsConnectedFieldsCallbacks[connected_setting_id] = toggleAlteredClassOnMasterControls;
189
- connected_setting.bind(window.colorsConnectedFieldsCallbacks[connected_setting_id]);
190
- }
191
- } );
192
- }
193
- }
194
- } );
195
- };
196
-
197
- const unbindConnectedFields = function() {
198
- _.each( window.colorsConnectedFieldsCallbacks, function( callback, setting_id ) {
199
- let setting = wp.customize(setting_id);
200
- setting.unbind( callback );
201
- } );
202
- window.colorsConnectedFieldsCallbacks = {};
203
- };
204
-
205
- // alter connected fields of the master colors controls depending on the selected palette variation
206
- const getCurrentVariation = () => {
207
- const setting = wp.customize( 'sm_color_palette_variation' );
208
-
209
- if ( _.isUndefined( setting ) ) {
210
- return defaultVariation;
211
- }
212
 
213
- const variation = setting();
214
 
215
- if ( ! window.colorPalettesVariations.hasOwnProperty( variation ) ) {
216
- return defaultVariation;
217
- }
218
 
219
- return variation;
220
- };
221
 
222
- const getSwapMap = ( variation ) => {
223
- if ( ! window.colorPalettesVariations.hasOwnProperty( variation ) ) {
224
- return defaultVariation;
225
- }
226
- return window.colorPalettesVariations[variation];
227
- };
228
-
229
- // return an array with the hex values of the current palette
230
- const getCurrentPaletteColors = () => {
231
- const colors = [];
232
- _.each( masterSettingIds, function( setting_id ) {
233
- const setting = wp.customize( setting_id );
234
- const color = setting();
235
- colors.push( color );
236
- } );
237
- return colors;
238
- };
239
-
240
- function hsl2Rgb(h, s, l){
241
- var r, g, b;
242
-
243
- if(s == 0){
244
- r = g = b = l; // achromatic
245
- }else{
246
- var hue2rgb = function hue2rgb(p, q, t){
247
- if(t < 0) t += 1;
248
- if(t > 1) t -= 1;
249
- if(t < 1/6) return p + (q - p) * 6 * t;
250
- if(t < 1/2) return q;
251
- if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
252
- return p;
253
- };
254
-
255
- var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
256
- var p = 2 * l - q;
257
- r = hue2rgb(p, q, h + 1/3);
258
- g = hue2rgb(p, q, h);
259
- b = hue2rgb(p, q, h - 1/3);
260
- }
261
-
262
- return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
263
- }
264
-
265
- function mixRGB(color1, color2, ratio) {
266
- ratio = ratio || 0.5;
267
- color1.red = parseInt( color2.red * ratio + color1.red * ( 1 - ratio ), 10);
268
- color1.green = parseInt( color2.green * ratio + color1.green * ( 1 - ratio ), 10);
269
- color1.blue = parseInt( color2.blue * ratio + color1.blue * ( 1 - ratio ), 10);
270
- return hex2rgba( rgb2hex( [color1.red, color1.green, color1.blue] ) );
271
- }
272
-
273
- function mix(property, color1, color2, ratio) {
274
- return color1[property] * ( 1 - ratio ) + color2[property] * ratio;
275
- }
276
-
277
- function mixValues( value1, value2, ratio ) {
278
- return value1 * ( 1 - ratio ) + value2 * ratio;
279
- }
280
-
281
- const filterColor = ( color, filter ) => {
282
- filter = typeof filter === "undefined" ? $( '[name*="sm_palette_filter"]:checked' ).val() : filter;
283
-
284
- let newColor = hex2rgba( color );
285
- var palette = getCurrentPaletteColors();
286
- var paletteColors = palette.slice(0,3);
287
- var paletteDark = palette.slice(3,6);
288
- var average = getAveragePixel( getPixelsFromColors( palette ) );
289
- var averageColor = getAveragePixel( getPixelsFromColors( paletteColors ) );
290
- var averageDark = getAveragePixel( getPixelsFromColors( paletteDark ) );
291
-
292
- // Intensity Filters
293
- if ( filter === 'vivid' ) {
294
- newColor = hsl2Rgb( newColor.hue, mixValues( newColor.saturation, 1, 0.5 ), newColor.lightness );
295
- return rgb2hex( newColor );
296
- }
297
 
298
- if ( filter === 'warm' && color !== palette[0] ) {
299
- var sepia = hex2rgba( '#704214' );
300
- sepia.saturation = mix( 'saturation', sepia, newColor, 1 );
301
- sepia.lightness = mix( 'lightness', sepia, newColor, 1 );
302
- sepia = hex2rgba( hsl2hex( sepia ) );
303
- newColor.saturation = newColor.saturation * 0.75;
304
- newColor = hex2rgba( hsl2hex( newColor ) );
305
- newColor = mixRGB( newColor, sepia, 0.75 );
306
-
307
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( newColor.lightness > 0.5 ? '#FFF' : '#000' ), 0.2 );
308
- return hsl2hex( newColor );
309
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
310
 
311
- if ( filter === 'softer' ) {
312
- // if ( paletteColors.indexOf( color ) !== -1 ) {
313
- // newColor = mixRGB( newColor, averageColor, 0.5 );
314
- // return rgb2hex( [ newColor.red, newColor.green, newColor.blue ] );
315
- // }
316
- newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#FFF' ), 0.3 );
317
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#FFF' ), 0.1 );
318
- // newColor.hue = mix( 'hue', newColor, averageColor, 1 );
319
- return hsl2hex( newColor );
320
- }
 
 
321
 
322
- if ( filter === 'pastel' ) {
323
- newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#FFF' ), 0.6 );
324
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#FFF' ), 0.2 );
325
- return hsl2hex( newColor );
326
- }
 
 
 
 
 
327
 
328
- if ( filter === 'greyish' ) {
329
- newColor = hsl2Rgb( newColor.hue, mixValues( newColor.saturation, 0, 0.8 ), newColor.lightness );
330
- return rgb2hex(newColor);
331
- }
 
332
 
333
- // Custom (Real) Filters
334
- if ( filter === 'clarendon' ) {
335
- // Color Group
336
- // Slightly increase saturation
337
- if ( color === palette[0] || color === palette[1] || color === palette[2] ) {
338
- newColor = hsl2Rgb( newColor.hue, mixValues( newColor.saturation, 1, 0.3 ), newColor.lightness );
339
- return rgb2hex( newColor );
340
- }
341
 
342
- // Dark Group
343
- // Add dark to darker colors
344
- if ( color === palette[3] || color === palette[4] || color === palette[5] ) {
345
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#000' ), 0.4 );
346
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
347
 
348
- // Light Group
349
- // Add light to lighter colors
350
- if ( color === palette[6] || color === palette[7] || color === palette[8] ) {
351
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#FFF' ), 0.4 );
352
- }
353
 
354
- return hsl2hex( newColor );
355
- }
 
356
 
357
- // Inactive Below
358
- if ( filter === 'cold' && color !== palette[0] ) {
359
- var targetHue = 0.55;
 
 
 
 
360
 
361
- newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#FFF' ), 0.4 );
362
- newColor.hue = ( newColor.hue - targetHue ) / 18 + targetHue;
363
- newColor = hex2rgba( hsl2hex( newColor ) );
364
 
365
- // increase contrast ( saturation +10%, lightness +/- 20% );
366
- var newColorHSL = rgbToHsl( newColor.red, newColor.green, newColor.blue );
367
- newColor.hue = newColorHSL[0];
368
- newColor.saturation = mixValues( newColorHSL[1], 1, 0.1 );
369
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( newColor.lightness > 0.5 ? '#FFF' : '#000' ), 0.2 );
370
- return hsl2hex( newColor );
371
- }
372
 
373
- if ( filter === 'dumb' ) {
374
-
375
- if ( color === palette[1] || color === palette[2] ) {
376
- newColor = hex2rgba(palette[0]);
377
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#000' ), 0.2 );
378
- newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#000' ), 0.2 );
379
-
380
- if ( color === palette[2] ) {
381
- newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#000' ), 0.2 );
382
- newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#000' ), 0.2 );
383
- }
384
- return hsl2hex( newColor );
385
- } else {
386
- newColor.hue = hex2rgba(palette[0]).hue;
387
- return hsl2hex( newColor );
388
- }
389
  }
 
 
 
 
 
 
390
 
391
- if ( filter === 'mayfair' ) {
392
- if ( color === palette[1] || color === palette[2] ) {
393
- newColor = hex2rgba(palette[0]);
394
- newColor.hue = ( newColor.hue + 0.05 ) % 1;
395
- if ( color === palette[2] ) {
396
- newColor.hue = ( newColor.hue + 0.05 ) % 1;
397
- }
398
- return hsl2hex( newColor );
399
- } else {
400
- newColor.hue = hex2rgba(palette[0]).hue;
401
- return hsl2hex( newColor );
402
- }
403
  }
 
 
 
 
 
 
404
 
405
-
406
- if ( filter === 'sierra' ) {
407
- if ( color === palette[1] || color === palette[2] ) {
408
- newColor = hex2rgba(palette[0]);
409
- newColor.hue = ( newColor.hue + 0.95 ) % 1;
410
- if ( color === palette[2] ) {
411
- newColor.hue = ( newColor.hue + 0.95 ) % 1;
412
- }
413
- return hsl2hex( newColor );
414
- } else {
415
- newColor.hue = hex2rgba(palette[0]).hue;
416
- return hsl2hex( newColor );
417
- }
418
  }
 
 
 
 
 
 
419
 
420
- return color;
421
- };
422
 
423
- const createCurrentPaletteControls = () => {
424
- const $palette = $( '.c-color-palette' );
425
- const $fields = $palette.find( '.c-color-palette__fields' ).find( 'input' );
426
 
427
- if ( ! $palette.length ) {
428
- return;
429
- }
430
 
431
- const $colors = $palette.find( '.colors .color' );
432
 
433
- $colors.each( ( i, obj ) => {
434
- const $obj = $( obj );
435
- const setting_id = $obj.data( 'setting' );
436
- const $input = $fields.filter( '.' + setting_id );
437
- const setting = wp.customize( setting_id );
438
 
439
- $obj.data( 'target', $input );
440
 
441
- $input.iris( {
442
- change: ( event, ui ) => {
443
- const currentColor = ui.color.toString();
444
 
445
- $obj.css( 'color', filterColor( currentColor ) );
446
 
447
- filteredColors[setting_id] = filterColor( currentColor );
448
- setting.set( currentColor );
449
 
450
- if ( event.originalEvent.type !== 'external' ) {
451
- $palette.find( '.color.' + setting_id ).removeClass( 'altered' );
452
- }
453
 
454
- setPalettesOnConnectedFields();
455
  // buildColorMatrix();
456
- },
457
- } );
458
-
459
- $obj.find( '.iris-picker' ).on( 'click', function( e ) {
460
- e.stopPropagation();
461
- e.preventDefault();
462
- } );
463
-
464
- const showColorPicker = () => {
465
- $colors.not( $obj ).each( function( i, obj ) {
466
- $( obj ).data( 'target' ).not( $input ).hide();
467
- } );
468
- $input.show().focus();
469
- };
470
-
471
- $obj.on( 'click', ( e ) => {
472
- e.stopPropagation();
473
- e.preventDefault();
474
-
475
- if ( $input.is( ':visible' ) ) {
476
- $input.iris( 'hide' );
477
- $input.hide();
478
- $colors.removeClass( 'active inactive' );
479
- } else {
480
- if ( $obj.is( '.altered' ) ) {
481
- confirmChanges( showColorPicker );
482
- } else {
483
- showColorPicker();
484
- }
485
- }
486
- } );
487
-
488
- $input.on( 'click', ( e ) => {
489
- e.stopPropagation();
490
- e.preventDefault();
491
- } );
492
-
493
- $input.on( 'focus', ( e ) => {
494
- $colors.not( $obj ).addClass( 'inactive' ).removeClass( 'active' );
495
- $obj.addClass( 'active' ).removeClass( 'inactive' );
496
-
497
- $colors.not( $obj ).each( function( i, other ) {
498
- $( other ).data( 'target' ).iris( 'hide' );
499
- } );
500
-
501
- const $iris = $input.next( '.iris-picker' );
502
- const paletteWidth = $palette.find( '.c-color-palette__colors' ).outerWidth();
503
- const $visibleColors = $colors.filter( ':visible' );
504
- const index = $visibleColors.index( $obj );
505
-
506
- $iris.css( 'left', ( paletteWidth - 200 ) * index / ( $visibleColors.length - 1 ) );
507
-
508
- showOldColors();
509
-
510
- $input.iris( 'show' );
511
- } );
512
-
513
- $input.on( 'focusout', ( e ) => {
514
- showNewColors();
515
- });
516
- } );
517
-
518
- $( 'body' ).on( 'click', function() {
519
- $colors.removeClass( 'active inactive' );
520
- $colors.each( function( i, obj ) {
521
- const $input = $( obj ).data( 'target' );
522
-
523
- $input.iris( 'hide' );
524
- $input.hide();
525
- } );
526
- } );
527
- };
528
-
529
- const showNewColors = function() {
530
- _.each(masterSettingIds, function( id ) {
531
- $( '.c-color-palette' ).find( '.color.' + id ).css( 'color', getFilteredColor( id ) );
532
- });
533
- };
534
-
535
- const showOldColors = function() {
536
- _.each(masterSettingIds, function( id ) {
537
- const setting = wp.customize( id );
538
- const initialColor = setting();
539
- $( '.c-color-palette' ).find( '.color.' + id ).css( 'color', initialColor );
540
- });
541
- };
542
-
543
- const onPaletteChange = function() {
544
- $( this ).trigger( 'customify:preset-change' );
545
- updateFilteredColors();
546
- reinitializeConnectedFields();
547
- };
548
-
549
- // this function goes through all the connected fields and adds swatches to the default color picker for all the colors in the current color palette
550
- const setPalettesOnConnectedFields = _.debounce( () => {
551
- let $targets = $();
552
- // loop through the master settings
553
- _.each( masterSettingIds, function( parent_setting_id ) {
554
- if ( typeof wp.customize.settings.settings[parent_setting_id] !== "undefined" ) {
555
- let parent_setting_data = wp.customize.settings.settings[parent_setting_id];
556
- if ( ! _.isUndefined( parent_setting_data.connected_fields ) ) {
557
- // loop through all the connected fields and search the element on which the iris plugin has been initialized
558
- _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
559
- // the connected_setting_id is different than the actual id attribute of the element we're searching for
560
- // so we have to do some regular expressions
561
- let connected_setting_id = connected_field_data.setting_id;
562
- let matches = connected_setting_id.match(/\[(.*?)\]/);
563
-
564
- if ( matches ) {
565
- let target_id = matches[1];
566
- let $target = $( '.customize-control-color' ).filter( '[id*="' + target_id + '"]' ).find( '.wp-color-picker' );
567
- $targets = $targets.add( $target );
568
- }
569
- });
570
- }
571
- }
572
- });
573
- // apply the current color palettes to all the elements found
574
- $targets.iris({ palettes: getCurrentPaletteColors() });
575
- }, 30 );
576
-
577
- const buildColorMatrix = () => {
578
- const $matrix = $( '.sm_color_matrix' );
579
-
580
- if ( ! $matrix.children().length ) {
581
- _.each( masterSettingIds, function( setting_id ) {
582
- $( '<div class="' + setting_id + '">' ).appendTo( $matrix );
583
- } );
584
  }
585
-
586
- _.each( masterSettingIds, function( setting_id ) {
587
- const $bucket = $matrix.children( '.' + setting_id );
588
- let classes = [];
589
-
590
- $bucket.css( 'color', getFilteredColor( setting_id ) );
591
-
592
- _.each( wp.customize.settings.settings[setting_id]['connected_fields'], function( connected_field ) {
593
- const field_id = connected_field.setting_id;
594
- const fieldClassName = field_id.replace( '[', '_' ).replace( ']', '' );
595
- classes.push( fieldClassName );
596
-
597
- if ( ! $bucket.children( '.' + fieldClassName ).length ) {
598
- $( '<div title="' + field_id + '" class="' + fieldClassName + '">' ).appendTo( $bucket );
599
- }
600
- } );
601
-
602
- let className = '.' + classes.join( ', .' );
603
-
604
- if ( classes.length ) {
605
- $bucket.children().not( className ).remove();
606
- } else {
607
- $bucket.children().remove();
608
- }
609
- });
610
- };
611
-
612
- const toggleAlteredClassOnMasterControls = _.debounce( () => {
613
- let alteredSettings = [];
614
- let alteredSettingsSelector;
615
-
616
- _.each( masterSettingIds, function( masterSettingId ) {
617
- let connectedFields = wp.customize.settings.settings[masterSettingId]['connected_fields'];
618
- let masterSettingValue = wp.customize( masterSettingId )();
619
- let connectedFieldsWereAltered = false;
620
-
621
- if ( ! _.isUndefined( connectedFields ) && ! Array.isArray( connectedFields ) ) {
622
- connectedFields = Object.keys( connectedFields ).map( function(key) {
623
- return connectedFields[key];
624
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
625
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
626
 
627
- if ( ! _.isUndefined( connectedFields ) && connectedFields.length ) {
628
- _.each( connectedFields, function( connectedField ) {
629
- let connectedSettingId = connectedField.setting_id;
630
- let connectedSetting = wp.customize( connectedSettingId );
631
 
632
- if ( typeof connectedSetting !== "undefined" ) {
633
- let connectedFieldValue = connectedSetting();
634
 
635
- if ( typeof connectedFieldValue === "string" && connectedFieldValue.toLowerCase() !== filterColor( masterSettingValue ).toLowerCase() ) {
636
- connectedFieldsWereAltered = true;
637
- }
638
- }
639
- } );
640
 
641
- if ( connectedFieldsWereAltered ) {
642
- alteredSettings.push( masterSettingId );
643
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
644
  }
645
- } );
 
646
 
647
- alteredSettingsSelector = '.' + alteredSettings.join(', .');
648
-
649
- $( '.c-color-palette .color' ).removeClass( 'altered' );
650
-
651
- if ( alteredSettings.length ) {
652
- $( '.c-color-palette .color' ).filter( alteredSettingsSelector ).addClass( 'altered' );
653
  }
 
 
654
 
655
- }, 30 );
656
 
657
- const toggleHiddenClassOnMasterControls = _.debounce( () => {
658
- let optionsToShow = [];
659
- let optionsSelector;
660
 
661
- _.each( masterSettingIds, function( masterSettingId ) {
662
- let connectedFields = wp.customize.settings.settings[masterSettingId]['connected_fields'];
 
663
 
664
- if ( ! _.isUndefined( connectedFields ) && ! _.isEmpty( connectedFields ) ) {
665
- optionsToShow.push( masterSettingId );
666
- }
667
- } );
668
-
669
- optionsSelector = '.' + optionsToShow.join(', .');
670
-
671
- $( '.sm-palette-filter .color' ).addClass( 'hidden' ).filter( optionsSelector ).removeClass( 'hidden' );
672
- $( '.c-color-palette .color' ).addClass( 'hidden' ).filter( optionsSelector ).removeClass( 'hidden' );
673
- $( '.customify_preset.color_palette .palette__item' ).addClass( 'hidden' ).filter( optionsSelector ).removeClass( 'hidden' );
674
- }, 30 );
675
-
676
- const refreshCurrentPaletteControl = () => {
677
- toggleAlteredClassOnMasterControls();
678
- toggleHiddenClassOnMasterControls();
679
- setPalettesOnConnectedFields();
680
- showNewColors();
681
- };
682
-
683
- const swapConnectedFields = ( settings, swapMap ) => {
684
- let newSettings = JSON.parse(JSON.stringify(settings));
685
- let oldSettings = JSON.parse(JSON.stringify(settings));
686
-
687
- _.each( swapMap, function( fromArray, to ) {
688
- if ( typeof newSettings[to] !== "undefined" ) {
689
- let newConnectedFields = [];
690
- if ( fromArray instanceof Array ) {
691
- _.each( fromArray, function( from ) {
692
- let oldConnectedFields;
693
- if ( _.isUndefined( oldSettings[from]['connected_fields'] ) ) {
694
- oldSettings[from]['connected_fields'] = [];
695
- }
696
- oldConnectedFields = Object.values( oldSettings[from]['connected_fields'] );
697
- newConnectedFields = newConnectedFields.concat( oldConnectedFields );
698
- } );
699
- }
700
- newSettings[to]['connected_fields'] = Object.keys( newConnectedFields ).map( function(key) {
701
- return newConnectedFields[key];
702
- });
703
- }
704
- } );
705
- return _.clone(newSettings);
706
- };
707
-
708
- const moveConnectedFields = ( oldSettings, from, to, ratio ) => {
709
-
710
- let settings = _.clone( oldSettings );
711
-
712
- if ( ! _.isUndefined( settings[to] ) && ! _.isUndefined( settings[from] ) ) {
713
-
714
- if ( _.isUndefined( settings[from]['connected_fields'] ) ) {
715
- settings[from]['connected_fields'] = [];
716
  }
 
 
 
 
 
 
 
 
 
 
 
717
 
718
- if ( _.isUndefined( settings[to]['connected_fields'] ) ) {
719
- settings[to]['connected_fields'] = [];
720
- }
721
 
722
- const oldFromConnectedFields = Object.values( settings[from]['connected_fields'] );
723
- const oldToConnectedFields = Object.values( settings[to]['connected_fields'] );
724
- const oldConnectedFields = oldToConnectedFields.concat( oldFromConnectedFields );
725
- const count = Math.round( ratio * oldConnectedFields.length );
726
 
727
- let newToConnectedFields = oldConnectedFields.slice( 0, count );
728
- let newFromConnectedFields = oldConnectedFields.slice( count );
729
 
730
- newToConnectedFields = Object.keys( newToConnectedFields ).map( function(key) {
731
- return newToConnectedFields[key];
732
- });
733
- newToConnectedFields = Object.keys( newToConnectedFields ).map( function(key) {
734
- return newToConnectedFields[key];
735
- });
736
 
737
- settings[to]['connected_fields'] = newToConnectedFields;
738
- settings[from]['connected_fields'] = newFromConnectedFields;
739
- }
740
 
741
- return settings;
742
- };
 
 
743
 
744
- const reloadConnectedFields = () => {
745
- let tempSettings = JSON.parse(JSON.stringify(window.settingsClone));
746
 
747
- if ( typeof $( '[name*="sm_color_diversity"]:checked' ).data( 'default' ) === 'undefined'
748
- || typeof $( '[name*="sm_coloration_level"]:checked' ).data( 'default' ) === 'undefined' ) {
749
- const primaryRatio = $( primary_color_selector ).val() / 100;
750
- const secondaryRatio = $( secondary_color_selector ).val() / 100;
751
- const tertiaryRatio = $( tertiary_color_selector ).val() / 100;
 
752
 
753
- tempSettings = moveConnectedFields( tempSettings, 'sm_dark_primary', 'sm_color_primary', primaryRatio );
754
- tempSettings = moveConnectedFields( tempSettings, 'sm_dark_secondary', 'sm_color_secondary', secondaryRatio );
755
- tempSettings = moveConnectedFields( tempSettings, 'sm_dark_tertiary', 'sm_color_tertiary', tertiaryRatio );
756
 
757
- var diversity = $( '[name*="sm_color_diversity"]:checked' ).val();
758
- var diversity_variation = getSwapMap( 'color_diversity_low' );
759
- tempSettings = swapConnectedFields( tempSettings, diversity_variation );
760
 
761
- if ( diversity === 'medium' ) {
762
- tempSettings = moveConnectedFields( tempSettings, 'sm_color_primary', 'sm_color_secondary', 0.5 );
763
- }
764
 
765
- if ( diversity === 'high' ) {
766
- tempSettings = moveConnectedFields( tempSettings, 'sm_color_primary', 'sm_color_secondary', 0.67 );
767
- tempSettings = moveConnectedFields( tempSettings, 'sm_color_secondary', 'sm_color_tertiary', 0.50 );
768
- }
769
- }
770
 
771
- var shuffle = $( '[name*="sm_shuffle_colors"]:checked' ).val();
772
- if ( shuffle !== 'default' ) {
773
- var shuffle_variation = getSwapMap( 'shuffle_' + shuffle );
774
- tempSettings = swapConnectedFields( tempSettings, shuffle_variation );
775
- }
776
 
777
- var dark_mode = $( '[name*="sm_dark_mode"]:checked' ).val();
778
- if ( dark_mode === 'on' ) {
779
- var dark_mmode_variation = getSwapMap( 'dark' );
780
- tempSettings = swapConnectedFields( tempSettings, dark_mmode_variation );
781
- }
782
 
783
- _.each( masterSettingIds, function( masterSettingId ) {
784
- wp.customize.settings.settings[masterSettingId] = tempSettings[masterSettingId];
785
- });
786
- };
787
-
788
- const getPixelsFromColors = function( colors ) {
789
- var pixels = [];
790
- _.each( colors, function( color ) {
791
- pixels.push( hex2rgba( color ) );
792
- });
793
- return pixels;
794
- };
795
-
796
- const getAveragePixel = function( pixels ) {
797
- var averagePixel = {
798
- red: 0,
799
- green: 0,
800
- blue: 0,
801
- alpha: 0,
802
- hue: 0,
803
- saturation: 0,
804
- lightness: 0,
805
- luma: 0
806
- };
807
-
808
- for ( var i = 0; i < pixels.length; i++ ) {
809
- var pixel = pixels[i];
810
-
811
- for ( var k in averagePixel ) {
812
- averagePixel[k] += pixel[k];
813
- }
814
- }
815
 
816
- for ( var k in averagePixel ) {
817
- averagePixel[k] /= pixels.length;
818
- }
 
 
819
 
820
- return averagePixel;
 
 
 
821
  }
822
 
823
- const applyColorationValueToFields = () => {
824
- var setting_id = 'sm_coloration_level';
825
- var setting = wp.customize( setting_id );
826
- var coloration = $( '[name*="sm_coloration_level"]:checked' ).val();
 
827
 
828
- if ( typeof $( '[name*="sm_coloration_level"]:checked' ).data( 'default' ) !== 'undefined' ) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
829
 
830
- var sliders = ['sm_dark_color_primary_slider', 'sm_dark_color_secondary_slider', 'sm_dark_color_tertiary_slider'];
831
- _.each(sliders, function( slider_id ) {
832
- var slider_setting = customify_settings.settings[ slider_id ];
833
- wp.customize( slider_id ).set( slider_setting.default );
834
- $( '#_customize-input-' + slider_id + '_control ').val( slider_setting.default );
835
- });
836
- } else {
837
- var ratio = parseFloat( coloration );
838
- $( color_sliders_selector ).val( ratio );
839
- }
840
- reinitializeConnectedFields();
841
- };
842
 
843
- const reinitializeConnectedFields = () => {
844
- reloadConnectedFields();
845
- // buildColorMatrix();
846
- unbindConnectedFields();
847
- bindConnectedFields();
848
- refreshCurrentPaletteControl();
849
- resetSettings();
850
- };
851
-
852
- const confirmChanges = ( callback ) => {
853
- let altered = !! $( '.c-color-palette .color.altered' ).length;
854
- let confirmed = true;
855
-
856
- if ( altered ) {
857
- confirmed = confirm( "One or more fields connected to the color palette have been modified. By changing the palette variation you will lose changes to any color made prior to this action." );
858
- }
859
 
860
- if ( ! altered || confirmed ) {
861
- if ( typeof callback === 'function' ) {
862
- callback();
863
- }
864
- return true;
865
- }
866
 
867
- return false;
868
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
869
 
870
- const bindEvents = () => {
871
- const paletteControlSelector = '.c-color-palette__control';
872
- const $paletteControl = $( paletteControlSelector );
873
- const variation = getCurrentVariation();
 
 
 
 
 
 
 
 
 
 
 
 
874
 
875
- $paletteControl.removeClass( 'active' );
876
- $paletteControl.filter( '.variation-' + variation ).addClass( 'active' );
 
 
 
 
877
 
878
- $( document ).on( 'click', '.customify_preset.color_palette input', function (e) {
879
- if ( ! confirmChanges( onPaletteChange.bind( this ) ) ) {
880
- e.preventDefault();
881
- }
882
- } );
883
-
884
-
885
- $( '[for*="sm_palette_filter"], [for*="sm_coloration_level"], [for*="sm_color_diversity"], [for*="sm_shuffle_colors"], [for*="sm_dark_mode"]' ).on( 'click', function(e) {
886
- if ( ! confirmChanges() ) {
887
- e.preventDefault();
888
- }
889
- });
890
-
891
- $( '[name*="sm_coloration_level"]' ).on( 'change', applyColorationValueToFields );
892
- $( '[name*="sm_color_diversity"]' ).on( 'change', reinitializeConnectedFields );
893
- $( '[name*="sm_shuffle_colors"]' ).on( 'change', reinitializeConnectedFields );
894
- $( '[name*="sm_dark_mode"]' ).on( 'change', reinitializeConnectedFields );
895
- $( '[name*="sm_palette_filter"]' ).on( 'change', () => {
896
- updateFilteredColors();
897
- reinitializeConnectedFields();
898
- } );
899
-
900
- $( document ).on( 'click', '.sm-tabs__item', function( e ) {
901
- e.preventDefault();
902
-
903
- var $section = $( '#sub-accordion-section-sm_color_palettes_section' );
904
- var $tabs = $( '.sm-tabs__item' );
905
- var $active = $(this);
906
- var target = $active.data('target');
907
-
908
- $tabs.removeClass( 'sm-tabs__item--active' );
909
- $active.addClass( 'sm-tabs__item--active' );
910
- $section.removeClass( 'sm-view-palettes sm-view-filters sm-view-customize').addClass( 'sm-view-' + target );
911
- } );
912
-
913
- $( '.sm-tabs__item' ).first().trigger( 'click' );
914
- };
915
-
916
- const updateFilterPreviews = _.debounce(() => {
917
- $( '.sm-palette-filter' ).each(function() {
918
- let $filters = $( this ).find( 'input' );
919
-
920
- $filters.each(function(i, obj) {
921
- let $input = $(obj);
922
- let $label = $input.next( 'label' );
923
- let label = $input.val();
924
- let $colors = $label.find('.color');
925
-
926
- $colors.each( function( j, color ) {
927
- let $color = $( color );
928
- let setting_id = $color.data( 'setting' );
929
- let setting = wp.customize( setting_id );
930
- let originalColor = setting();
931
-
932
- $color.css( 'color', filterColor( originalColor, label ) );
933
- });
934
- });
935
- });
936
- }, 30);
937
-
938
- wp.customize.bind( 'ready', function() {
939
- setupGlobals();
940
-
941
- createCurrentPaletteControls();
942
-
943
- reloadConnectedFields();
944
- updateFilteredColors();
945
- unbindConnectedFields();
946
- bindConnectedFields();
947
- refreshCurrentPaletteControl();
 
 
 
 
 
 
 
 
 
 
948
  // buildColorMatrix();
949
 
950
- updateFilterPreviews();
951
 
952
- bindEvents();
953
- } );
954
 
955
- return {
956
- masterSettingIds: masterSettingIds
957
- };
958
 
959
- } )( jQuery, window, wp );
1
+ let ColorPalettes = (function ($, exports, wp) {
2
+
3
+ const defaultVariation = 'light'
4
+ const masterSettingIds = [
5
+ 'sm_color_primary',
6
+ 'sm_color_secondary',
7
+ 'sm_color_tertiary',
8
+ 'sm_dark_primary',
9
+ 'sm_dark_secondary',
10
+ 'sm_dark_tertiary',
11
+ 'sm_light_primary',
12
+ 'sm_light_secondary',
13
+ 'sm_light_tertiary'
14
+ ]
15
+
16
+ const filteredColors = {
17
+ sm_color_primary: '',
18
+ sm_color_secondary: '',
19
+ sm_color_tertiary: '',
20
+ sm_dark_primary: '',
21
+ sm_dark_secondary: '',
22
+ sm_dark_tertiary: '',
23
+ sm_light_primary: '',
24
+ sm_light_secondary: '',
25
+ sm_light_tertiary: ''
26
+ }
27
+
28
+ const primary_color_selector = '#_customize-input-sm_dark_color_primary_slider_control'
29
+ const secondary_color_selector = '#_customize-input-sm_dark_color_secondary_slider_control'
30
+ const tertiary_color_selector = '#_customize-input-sm_dark_color_tertiary_slider_control'
31
+ const color_sliders_selector = primary_color_selector + ', ' + secondary_color_selector + ', ' + tertiary_color_selector
32
+
33
+ let setupGlobalsDone = false
34
+
35
+ const setupGlobals = () => {
36
+
37
+ if (setupGlobalsDone) {
38
+ return
39
+ }
40
 
41
+ // Cache initial settings configuration to be able to update connected fields on variation change.
42
+ if (typeof window.settingsClone === 'undefined') {
43
+ window.settingsClone = $.extend(true, {}, wp.customize.settings.settings)
44
+ }
45
+
46
+ // Create a stack of callbacks bound to parent settings to be able to unbind them
47
+ // when altering the connected_fields attribute.
48
+ if (typeof window.colorsConnectedFieldsCallbacks === 'undefined') {
49
+ window.colorsConnectedFieldsCallbacks = {}
50
+ }
51
 
52
+ setupGlobalsDone = true
53
+ }
54
+
55
+ const hexDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
56
+
57
+ function hex (x) {
58
+ return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]
59
+ }
60
+
61
+ function rgb2hex (color) {
62
+ return '#' + hex(color[0]) + hex(color[1]) + hex(color[2])
63
+ }
64
+
65
+ function hsl2hex (color) {
66
+ var rgb = hsl2Rgb(color.hue, color.saturation, color.lightness)
67
+ return rgb2hex(rgb)
68
+ }
69
+
70
+ function hex2rgba (hex) {
71
+ var matches = /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)
72
+ var r = 0, g = 0, b = 0, a = 0
73
+ if (matches) {
74
+ hex = hex.substring(1).split('')
75
+ if (hex.length === 3) {
76
+ hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2], 'F', 'F']
77
+ }
78
+ if (hex.length === 4) {
79
+ hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]]
80
+ }
81
+ r = parseInt([hex[0], hex[1]].join(''), 16)
82
+ g = parseInt([hex[2], hex[3]].join(''), 16)
83
+ b = parseInt([hex[4], hex[5]].join(''), 16)
84
+ a = parseInt([hex[6], hex[7]].join(''), 16)
85
+ }
86
+ var hsl = rgbToHsl(r, g, b)
87
+ var rgba = {
88
+ red: r,
89
+ green: g,
90
+ blue: b,
91
+ alpha: a,
92
+ hue: hsl[0],
93
+ saturation: hsl[1],
94
+ lightness: hsl[2],
95
+ luma: 0.2126 * r + 0.7152 * g + 0.0722 * b
96
+ }
97
+ return rgba
98
+ }
99
+
100
+ function rgbToHsl (r, g, b) {
101
+ r /= 255, g /= 255, b /= 255
102
+ var max = Math.max(r, g, b), min = Math.min(r, g, b)
103
+ var h, s, l = (max + min) / 2
104
+
105
+ if (max == min) {
106
+ h = s = 0 // achromatic
107
+ } else {
108
+ var d = max - min
109
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
110
+ switch (max) {
111
+ case r:
112
+ h = (g - b) / d + (g < b ? 6 : 0)
113
+ break
114
+ case g:
115
+ h = (b - r) / d + 2
116
+ break
117
+ case b:
118
+ h = (r - g) / d + 4
119
+ break
120
+ }
121
+ h /= 6
122
+ }
123
+ return [h, s, l]
124
+ }
125
+
126
+ const resetSettings = () => {
127
+ _.each(masterSettingIds, function (setting_id) {
128
+ const setting = wp.customize(setting_id)
129
+
130
+ if (typeof setting !== 'undefined') {
131
+ let parent_setting_data = wp.customize.settings.settings[setting_id];
132
+
133
+ const final_value = getFilteredColor(setting_id);
134
+
135
+ _.each(parent_setting_data.connected_fields, function (connected_field_data) {
136
+ if (_.isUndefined(connected_field_data) || _.isUndefined(connected_field_data.setting_id) || !_.isString(connected_field_data.setting_id)) {
137
+ return
138
+ }
139
+ const connected_setting = wp.customize(connected_field_data.setting_id)
140
+ if (_.isUndefined(connected_setting)) {
141
+ return
142
+ }
143
+
144
+ connected_setting.set(final_value);
145
+ })
146
+
147
+ // Also set the final setting value, for safe keeping.
148
+ const final_setting_id = setting_id + '_final';
149
+ const final_setting = wp.customize(final_setting_id);
150
+ if (!_.isUndefined(final_setting)) {
151
+ if ( !_.isUndefined(parent_setting_data.connected_fields) && !_.isEmpty(parent_setting_data.connected_fields)) {
152
+ final_setting.set(final_value);
153
+ } else {
154
+ final_setting.set('');
155
+ }
156
+ }
157
+ }
158
+ })
159
+ }
160
+
161
+ const updateFilteredColors = () => {
162
+ _.each(masterSettingIds, function (setting_id) {
163
+ const setting = wp.customize(setting_id)
164
+
165
+ if (typeof setting !== 'undefined') {
166
+ let value = setting()
167
+ filteredColors[setting_id] = filterColor(value)
168
+ }
169
+ })
170
+ }
171
+
172
+ const getFilteredColor = (setting_id) => {
173
+ return filteredColors[setting_id]
174
+ }
175
+
176
+ const getMasterFieldCallback = function (parent_setting_data, parent_setting_id) {
177
+ return function (new_value, old_value) {
178
+ const final_value = getFilteredColor(parent_setting_id);
179
+
180
+ _.each(parent_setting_data.connected_fields, function (connected_field_data) {
181
+ if (_.isUndefined(connected_field_data) || _.isUndefined(connected_field_data.setting_id) || !_.isString(connected_field_data.setting_id)) {
182
+ return
183
+ }
184
+ const setting = wp.customize(connected_field_data.setting_id)
185
+ if (_.isUndefined(setting)) {
186
+ return
187
  }
188
 
189
+ setting.set(final_value)
190
+ })
191
+ updateFilterPreviews();
192
 
193
+ // Also set the final setting value, for safe keeping.
194
+ const final_setting_id = parent_setting_id + '_final';
195
+ const final_setting = wp.customize(final_setting_id)
196
+ if (!_.isUndefined(final_setting)) {
197
+ if ( !_.isUndefined(parent_setting_data.connected_fields) && !_.isEmpty(parent_setting_data.connected_fields)) {
198
+ final_setting.set(final_value);
199
+ } else {
200
+ final_setting.set('');
201
+ }
202
+ }
203
+ }
204
+ }
205
 
206
+ const bindConnectedFields = function () {
207
+ _.each(masterSettingIds, function (parent_setting_id) {
208
+ if (typeof wp.customize.settings.settings[parent_setting_id] !== 'undefined') {
209
+ let parent_setting_data = wp.customize.settings.settings[parent_setting_id]
210
+ let parent_setting = wp.customize(parent_setting_id)
211
 
212
+ if (!_.isUndefined(parent_setting_data.connected_fields)) {
213
+ window.colorsConnectedFieldsCallbacks[parent_setting_id] = getMasterFieldCallback(parent_setting_data, parent_setting_id)
214
+ parent_setting.bind(window.colorsConnectedFieldsCallbacks[parent_setting_id])
215
 
216
+ _.each(parent_setting_data.connected_fields, function (connected_field_data) {
217
+ let connected_setting_id = connected_field_data.setting_id
218
+ let connected_setting = wp.customize(connected_setting_id)
 
219
 
220
+ if (typeof connected_setting !== 'undefined') {
221
+ window.colorsConnectedFieldsCallbacks[connected_setting_id] = toggleAlteredClassOnMasterControls
222
+ connected_setting.bind(window.colorsConnectedFieldsCallbacks[connected_setting_id])
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  }
224
+ })
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
225
  }
226
+ }
227
+ })
228
+ }
229
+
230
+ const unbindConnectedFields = function () {
231
+ _.each(window.colorsConnectedFieldsCallbacks, function (callback, setting_id) {
232
+ let setting = wp.customize(setting_id)
233
+ setting.unbind(callback)
234
+ })
235
+ window.colorsConnectedFieldsCallbacks = {}
236
+ }
237
+
238
+ // alter connected fields of the master colors controls depending on the selected palette variation
239
+ const getCurrentVariation = () => {
240
+ const setting = wp.customize('sm_color_palette_variation')
241
+
242
+ if (_.isUndefined(setting)) {
243
+ return defaultVariation
244
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
 
246
+ const variation = setting()
247
 
248
+ if (!window.colorPalettesVariations.hasOwnProperty(variation)) {
249
+ return defaultVariation
250
+ }
251
 
252
+ return variation
253
+ }
254
 
255
+ const getSwapMap = (variation) => {
256
+ if (!window.colorPalettesVariations.hasOwnProperty(variation)) {
257
+ return defaultVariation
258
+ }
259
+ return window.colorPalettesVariations[variation]
260
+ }
261
+
262
+ // return an array with the hex values of the current palette
263
+ const getCurrentPaletteColors = () => {
264
+ const colors = []
265
+ _.each(masterSettingIds, function (setting_id) {
266
+ const setting = wp.customize(setting_id)
267
+ const color = setting()
268
+ colors.push(color)
269
+ })
270
+ return colors
271
+ }
272
+
273
+ function hsl2Rgb (h, s, l) {
274
+ var r, g, b
275
+
276
+ if (s == 0) {
277
+ r = g = b = l // achromatic
278
+ } else {
279
+ var hue2rgb = function hue2rgb (p, q, t) {
280
+ if (t < 0) t += 1
281
+ if (t > 1) t -= 1
282
+ if (t < 1 / 6) return p + (q - p) * 6 * t
283
+ if (t < 1 / 2) return q
284
+ if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
285
+ return p
286
+ }
287
+
288
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s
289
+ var p = 2 * l - q
290
+ r = hue2rgb(p, q, h + 1 / 3)
291
+ g = hue2rgb(p, q, h)
292
+ b = hue2rgb(p, q, h - 1 / 3)
293
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
294
 
295
+ return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
296
+ }
297
+
298
+ function mixRGB (color1, color2, ratio) {
299
+ ratio = ratio || 0.5
300
+ color1.red = parseInt(color2.red * ratio + color1.red * (1 - ratio), 10)
301
+ color1.green = parseInt(color2.green * ratio + color1.green * (1 - ratio), 10)
302
+ color1.blue = parseInt(color2.blue * ratio + color1.blue * (1 - ratio), 10)
303
+ return hex2rgba(rgb2hex([color1.red, color1.green, color1.blue]))
304
+ }
305
+
306
+ function mix (property, color1, color2, ratio) {
307
+ return color1[property] * (1 - ratio) + color2[property] * ratio
308
+ }
309
+
310
+ function mixValues (value1, value2, ratio) {
311
+ return value1 * (1 - ratio) + value2 * ratio
312
+ }
313
+
314
+ const filterColor = (color, filter) => {
315
+ filter = typeof filter === 'undefined' ? $('[name*="sm_palette_filter"]:checked').val() : filter
316
+
317
+ let newColor = hex2rgba(color)
318
+ var palette = getCurrentPaletteColors()
319
+ var paletteColors = palette.slice(0, 3)
320
+ var paletteDark = palette.slice(3, 6)
321
+ var average = getAveragePixel(getPixelsFromColors(palette))
322
+ var averageColor = getAveragePixel(getPixelsFromColors(paletteColors))
323
+ var averageDark = getAveragePixel(getPixelsFromColors(paletteDark))
324
+
325
+ // Intensity Filters
326
+ if (filter === 'vivid') {
327
+ newColor = hsl2Rgb(newColor.hue, mixValues(newColor.saturation, 1, 0.5), newColor.lightness)
328
+ return rgb2hex(newColor)
329
+ }
330
 
331
+ if (filter === 'warm' && color !== palette[0]) {
332
+ var sepia = hex2rgba('#704214')
333
+ sepia.saturation = mix('saturation', sepia, newColor, 1)
334
+ sepia.lightness = mix('lightness', sepia, newColor, 1)
335
+ sepia = hex2rgba(hsl2hex(sepia))
336
+ newColor.saturation = newColor.saturation * 0.75
337
+ newColor = hex2rgba(hsl2hex(newColor))
338
+ newColor = mixRGB(newColor, sepia, 0.75)
339
+
340
+ newColor.lightness = mix('lightness', newColor, hex2rgba(newColor.lightness > 0.5 ? '#FFF' : '#000'), 0.2)
341
+ return hsl2hex(newColor)
342
+ }
343
 
344
+ if (filter === 'softer') {
345
+ // if ( paletteColors.indexOf( color ) !== -1 ) {
346
+ // newColor = mixRGB( newColor, averageColor, 0.5 );
347
+ // return rgb2hex( [ newColor.red, newColor.green, newColor.blue ] );
348
+ // }
349
+ newColor.saturation = mix('saturation', newColor, hex2rgba('#FFF'), 0.3)
350
+ newColor.lightness = mix('lightness', newColor, hex2rgba('#FFF'), 0.1)
351
+ // newColor.hue = mix( 'hue', newColor, averageColor, 1 );
352
+ return hsl2hex(newColor)
353
+ }
354
 
355
+ if (filter === 'pastel') {
356
+ newColor.saturation = mix('saturation', newColor, hex2rgba('#FFF'), 0.6)
357
+ newColor.lightness = mix('lightness', newColor, hex2rgba('#FFF'), 0.2)
358
+ return hsl2hex(newColor)
359
+ }
360
 
361
+ if (filter === 'greyish') {
362
+ newColor = hsl2Rgb(newColor.hue, mixValues(newColor.saturation, 0, 0.8), newColor.lightness)
363
+ return rgb2hex(newColor)
364
+ }
 
 
 
 
365
 
366
+ // Custom (Real) Filters
367
+ if (filter === 'clarendon') {
368
+ // Color Group
369
+ // Slightly increase saturation
370
+ if (color === palette[0] || color === palette[1] || color === palette[2]) {
371
+ newColor = hsl2Rgb(newColor.hue, mixValues(newColor.saturation, 1, 0.3), newColor.lightness)
372
+ return rgb2hex(newColor)
373
+ }
374
+
375
+ // Dark Group
376
+ // Add dark to darker colors
377
+ if (color === palette[3] || color === palette[4] || color === palette[5]) {
378
+ newColor.lightness = mix('lightness', newColor, hex2rgba('#000'), 0.4)
379
+ }
380
+
381
+ // Light Group
382
+ // Add light to lighter colors
383
+ if (color === palette[6] || color === palette[7] || color === palette[8]) {
384
+ newColor.lightness = mix('lightness', newColor, hex2rgba('#FFF'), 0.4)
385
+ }
386
+
387
+ return hsl2hex(newColor)
388
+ }
389
 
390
+ // Inactive Below
391
+ if (filter === 'cold' && color !== palette[0]) {
392
+ var targetHue = 0.55
 
 
393
 
394
+ newColor.saturation = mix('saturation', newColor, hex2rgba('#FFF'), 0.4)
395
+ newColor.hue = (newColor.hue - targetHue) / 18 + targetHue
396
+ newColor = hex2rgba(hsl2hex(newColor))
397
 
398
+ // increase contrast ( saturation +10%, lightness +/- 20% );
399
+ var newColorHSL = rgbToHsl(newColor.red, newColor.green, newColor.blue)
400
+ newColor.hue = newColorHSL[0]
401
+ newColor.saturation = mixValues(newColorHSL[1], 1, 0.1)
402
+ newColor.lightness = mix('lightness', newColor, hex2rgba(newColor.lightness > 0.5 ? '#FFF' : '#000'), 0.2)
403
+ return hsl2hex(newColor)
404
+ }
405
 
406
+ if (filter === 'dumb') {
 
 
407
 
408
+ if (color === palette[1] || color === palette[2]) {
409
+ newColor = hex2rgba(palette[0])
410
+ newColor.lightness = mix('lightness', newColor, hex2rgba('#000'), 0.2)
411
+ newColor.saturation = mix('saturation', newColor, hex2rgba('#000'), 0.2)
 
 
 
412
 
413
+ if (color === palette[2]) {
414
+ newColor.lightness = mix('lightness', newColor, hex2rgba('#000'), 0.2)
415
+ newColor.saturation = mix('saturation', newColor, hex2rgba('#000'), 0.2)
 
 
 
 
 
 
 
 
 
 
 
 
 
416
  }
417
+ return hsl2hex(newColor)
418
+ } else {
419
+ newColor.hue = hex2rgba(palette[0]).hue
420
+ return hsl2hex(newColor)
421
+ }
422
+ }
423
 
424
+ if (filter === 'mayfair') {
425
+ if (color === palette[1] || color === palette[2]) {
426
+ newColor = hex2rgba(palette[0])
427
+ newColor.hue = (newColor.hue + 0.05) % 1
428
+ if (color === palette[2]) {
429
+ newColor.hue = (newColor.hue + 0.05) % 1
 
 
 
 
 
 
430
  }
431
+ return hsl2hex(newColor)
432
+ } else {
433
+ newColor.hue = hex2rgba(palette[0]).hue
434
+ return hsl2hex(newColor)
435
+ }
436
+ }
437
 
438
+ if (filter === 'sierra') {
439
+ if (color === palette[1] || color === palette[2]) {
440
+ newColor = hex2rgba(palette[0])
441
+ newColor.hue = (newColor.hue + 0.95) % 1
442
+ if (color === palette[2]) {
443
+ newColor.hue = (newColor.hue + 0.95) % 1
 
 
 
 
 
 
 
444
  }
445
+ return hsl2hex(newColor)
446
+ } else {
447
+ newColor.hue = hex2rgba(palette[0]).hue
448
+ return hsl2hex(newColor)
449
+ }
450
+ }
451
 
452
+ return color
453
+ }
454
 
455
+ const createCurrentPaletteControls = () => {
456
+ const $palette = $('.c-color-palette')
457
+ const $fields = $palette.find('.c-color-palette__fields').find('input')
458
 
459
+ if (!$palette.length) {
460
+ return
461
+ }
462
 
463
+ const $colors = $palette.find('.colors .color')
464
 
465
+ $colors.each((i, obj) => {
466
+ const $obj = $(obj)
467
+ const setting_id = $obj.data('setting')
468
+ const $input = $fields.filter('.' + setting_id)
469
+ const setting = wp.customize(setting_id)
470
 
471
+ $obj.data('target', $input)
472
 
473
+ $input.iris({
474
+ change: (event, ui) => {
475
+ const currentColor = ui.color.toString()
476
 
477
+ $obj.css('color', filterColor(currentColor))
478
 
479
+ filteredColors[setting_id] = filterColor(currentColor)
480
+ setting.set(currentColor)
481
 
482
+ if (event.originalEvent.type !== 'external') {
483
+ $palette.find('.color.' + setting_id).removeClass('altered')
484
+ }
485
 
486
+ setPalettesOnConnectedFields()
487
  // buildColorMatrix();
488
+ },
489
+ })
490
+
491
+ $obj.find('.iris-picker').on('click', function (e) {
492
+ e.stopPropagation()
493
+ e.preventDefault()
494
+ })
495
+
496
+ const showColorPicker = () => {
497
+ $colors.not($obj).each(function (i, obj) {
498
+ $(obj).data('target').not($input).hide()
499
+ })
500
+ $input.show().focus()
501
+ }
502
+
503
+ $obj.on('click', (e) => {
504
+ e.stopPropagation()
505
+ e.preventDefault()
506
+
507
+ if ($input.is(':visible')) {
508
+ $input.iris('hide')
509
+ $input.hide()
510
+ $colors.removeClass('active inactive')
511
+ } else {
512
+ if ($obj.is('.altered')) {
513
+ confirmChanges(showColorPicker)
514
+ } else {
515
+ showColorPicker()
516
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
517
  }
518
+ })
519
+
520
+ $input.on('click', (e) => {
521
+ e.stopPropagation()
522
+ e.preventDefault()
523
+ })
524
+
525
+ $input.on('focus', (e) => {
526
+ $colors.not($obj).addClass('inactive').removeClass('active')
527
+ $obj.addClass('active').removeClass('inactive')
528
+
529
+ $colors.not($obj).each(function (i, other) {
530
+ $(other).data('target').iris('hide')
531
+ })
532
+
533
+ const $iris = $input.next('.iris-picker')
534
+ const paletteWidth = $palette.find('.c-color-palette__colors').outerWidth()
535
+ const $visibleColors = $colors.filter(':visible')
536
+ const index = $visibleColors.index($obj)
537
+
538
+ $iris.css('left', (paletteWidth - 200) * index / ($visibleColors.length - 1))
539
+
540
+ showOldColors()
541
+
542
+ $input.iris('show')
543
+ })
544
+
545
+ $input.on('focusout', (e) => {
546
+ showNewColors()
547
+ })
548
+ })
549
+
550
+ $('body').on('click', function () {
551
+ $colors.removeClass('active inactive')
552
+ $colors.each(function (i, obj) {
553
+ const $input = $(obj).data('target')
554
+
555
+ $input.iris('hide')
556
+ $input.hide()
557
+ })
558
+ })
559
+ }
560
+
561
+ const showNewColors = function () {
562
+ _.each(masterSettingIds, function (id) {
563
+ $('.c-color-palette').find('.color.' + id).css('color', getFilteredColor(id))
564
+ })
565
+ }
566
+
567
+ const showOldColors = function () {
568
+ _.each(masterSettingIds, function (id) {
569
+ const setting = wp.customize(id)
570
+ const initialColor = setting()
571
+ $('.c-color-palette').find('.color.' + id).css('color', initialColor)
572
+ })
573
+ }
574
+
575
+ const onPaletteChange = function () {
576
+ $(this).trigger('customify:preset-change')
577
+ updateFilteredColors()
578
+ reinitializeConnectedFields()
579
+ }
580
+
581
+ // this function goes through all the connected fields and adds swatches to the default color picker for all the colors in the current color palette
582
+ const setPalettesOnConnectedFields = _.debounce(() => {
583
+ let $targets = $()
584
+ // loop through the master settings
585
+ _.each(masterSettingIds, function (parent_setting_id) {
586
+ if (typeof wp.customize.settings.settings[parent_setting_id] !== 'undefined') {
587
+ let parent_setting_data = wp.customize.settings.settings[parent_setting_id]
588
+ if (!_.isUndefined(parent_setting_data.connected_fields)) {
589
+ // loop through all the connected fields and search the element on which the iris plugin has been initialized
590
+ _.each(parent_setting_data.connected_fields, function (connected_field_data) {
591
+ // the connected_setting_id is different than the actual id attribute of the element we're searching for
592
+ // so we have to do some regular expressions
593
+ let connected_setting_id = connected_field_data.setting_id
594
+ let matches = connected_setting_id.match(/\[(.*?)\]/)
595
+
596
+ if (matches) {
597
+ let target_id = matches[1]
598
+ let $target = $('.customize-control-color').filter('[id*="' + target_id + '"]').find('.wp-color-picker')
599
+ $targets = $targets.add($target)
600
  }
601
+ })
602
+ }
603
+ }
604
+ })
605
+ // apply the current color palettes to all the elements found
606
+ $targets.iris({palettes: getCurrentPaletteColors()})
607
+ }, 30)
608
+
609
+ const buildColorMatrix = () => {
610
+ const $matrix = $('.sm_color_matrix')
611
+
612
+ if (!$matrix.children().length) {
613
+ _.each(masterSettingIds, function (setting_id) {
614
+ $('<div class="' + setting_id + '">').appendTo($matrix)
615
+ })
616
+ }
617
 
618
+ _.each(masterSettingIds, function (setting_id) {
619
+ const $bucket = $matrix.children('.' + setting_id)
620
+ let classes = []
 
621
 
622
+ $bucket.css('color', getFilteredColor(setting_id))
 
623
 
624
+ _.each(wp.customize.settings.settings[setting_id]['connected_fields'], function (connected_field) {
625
+ const field_id = connected_field.setting_id
626
+ const fieldClassName = field_id.replace('[', '_').replace(']', '')
627
+ classes.push(fieldClassName)
 
628
 
629
+ if (!$bucket.children('.' + fieldClassName).length) {
630
+ $('<div title="' + field_id + '" class="' + fieldClassName + '">').appendTo($bucket)
631
+ }
632
+ })
633
+
634
+ let className = '.' + classes.join(', .')
635
+
636
+ if (classes.length) {
637
+ $bucket.children().not(className).remove()
638
+ } else {
639
+ $bucket.children().remove()
640
+ }
641
+ })
642
+ }
643
+
644
+ const toggleAlteredClassOnMasterControls = _.debounce(() => {
645
+ let alteredSettings = []
646
+ let alteredSettingsSelector
647
+
648
+ _.each(masterSettingIds, function (masterSettingId) {
649
+ let connectedFields = wp.customize.settings.settings[masterSettingId]['connected_fields']
650
+ let masterSettingValue = wp.customize(masterSettingId)()
651
+ let connectedFieldsWereAltered = false
652
+
653
+ if (!_.isUndefined(connectedFields) && !Array.isArray(connectedFields)) {
654
+ connectedFields = Object.keys(connectedFields).map(function (key) {
655
+ return connectedFields[key]
656
+ })
657
+ }
658
+
659
+ if (!_.isUndefined(connectedFields) && connectedFields.length) {
660
+ _.each(connectedFields, function (connectedField) {
661
+ let connectedSettingId = connectedField.setting_id
662
+ let connectedSetting = wp.customize(connectedSettingId)
663
+
664
+ if (typeof connectedSetting !== 'undefined') {
665
+ let connectedFieldValue = connectedSetting()
666
+
667
+ if (typeof connectedFieldValue === 'string' && connectedFieldValue.toLowerCase() !== filterColor(masterSettingValue).toLowerCase()) {
668
+ connectedFieldsWereAltered = true
669
  }
670
+ }
671
+ })
672
 
673
+ if (connectedFieldsWereAltered) {
674
+ alteredSettings.push(masterSettingId)
 
 
 
 
675
  }
676
+ }
677
+ })
678
 
679
+ alteredSettingsSelector = '.' + alteredSettings.join(', .')
680
 
681
+ $('.c-color-palette .color').removeClass('altered')
 
 
682
 
683
+ if (alteredSettings.length) {
684
+ $('.c-color-palette .color').filter(alteredSettingsSelector).addClass('altered')
685
+ }
686
 
687
+ }, 30)
688
+
689
+ const toggleHiddenClassOnMasterControls = _.debounce(() => {
690
+ let optionsToShow = []
691
+ let optionsSelector
692
+
693
+ _.each(masterSettingIds, function (masterSettingId) {
694
+ let connectedFields = wp.customize.settings.settings[masterSettingId]['connected_fields']
695
+
696
+ if (!_.isUndefined(connectedFields) && !_.isEmpty(connectedFields)) {
697
+ optionsToShow.push(masterSettingId)
698
+ }
699
+ })
700
+
701
+ optionsSelector = '.' + optionsToShow.join(', .')
702
+
703
+ $('.sm-palette-filter .color').addClass('hidden').filter(optionsSelector).removeClass('hidden')
704
+ $('.c-color-palette .color').addClass('hidden').filter(optionsSelector).removeClass('hidden')
705
+ $('.customify_preset.color_palette .palette__item').addClass('hidden').filter(optionsSelector).removeClass('hidden')
706
+ }, 30)
707
+
708
+ const refreshCurrentPaletteControl = () => {
709
+ toggleAlteredClassOnMasterControls()
710
+ toggleHiddenClassOnMasterControls()
711
+ setPalettesOnConnectedFields()
712
+ showNewColors()
713
+ }
714
+
715
+ const swapConnectedFields = (settings, swapMap) => {
716
+ let newSettings = JSON.parse(JSON.stringify(settings))
717
+ let oldSettings = JSON.parse(JSON.stringify(settings))
718
+
719
+ _.each(swapMap, function (fromArray, to) {
720
+ if (typeof newSettings[to] !== 'undefined') {
721
+ let newConnectedFields = []
722
+ if (fromArray instanceof Array) {
723
+ _.each(fromArray, function (from) {
724
+ let oldConnectedFields
725
+ if (_.isUndefined(oldSettings[from]['connected_fields'])) {
726
+ oldSettings[from]['connected_fields'] = []
 
 
 
 
 
 
 
 
 
 
 
 
727
  }
728
+ oldConnectedFields = Object.values(oldSettings[from]['connected_fields'])
729
+ newConnectedFields = newConnectedFields.concat(oldConnectedFields)
730
+ })
731
+ }
732
+ newSettings[to]['connected_fields'] = Object.keys(newConnectedFields).map(function (key) {
733
+ return newConnectedFields[key]
734
+ })
735
+ }
736
+ })
737
+ return _.clone(newSettings)
738
+ }
739
 
740
+ const moveConnectedFields = (oldSettings, from, to, ratio) => {
 
 
741
 
742
+ let settings = _.clone(oldSettings)
 
 
 
743
 
744
+ if (!_.isUndefined(settings[to]) && !_.isUndefined(settings[from])) {
 
745
 
746
+ if (_.isUndefined(settings[from]['connected_fields'])) {
747
+ settings[from]['connected_fields'] = []
748
+ }
 
 
 
749
 
750
+ if (_.isUndefined(settings[to]['connected_fields'])) {
751
+ settings[to]['connected_fields'] = []
752
+ }
753
 
754
+ const oldFromConnectedFields = Object.values(settings[from]['connected_fields'])
755
+ const oldToConnectedFields = Object.values(settings[to]['connected_fields'])
756
+ const oldConnectedFields = oldToConnectedFields.concat(oldFromConnectedFields)
757
+ const count = Math.round(ratio * oldConnectedFields.length)
758
 
759
+ let newToConnectedFields = oldConnectedFields.slice(0, count)
760
+ let newFromConnectedFields = oldConnectedFields.slice(count)
761
 
762
+ newToConnectedFields = Object.keys(newToConnectedFields).map(function (key) {
763
+ return newToConnectedFields[key]
764
+ })
765
+ newToConnectedFields = Object.keys(newToConnectedFields).map(function (key) {
766
+ return newToConnectedFields[key]
767
+ })
768
 
769
+ settings[to]['connected_fields'] = newToConnectedFields
770
+ settings[from]['connected_fields'] = newFromConnectedFields
771
+ }
772
 
773
+ return settings
774
+ }
 
775
 
776
+ const reloadConnectedFields = () => {
777
+ let tempSettings = JSON.parse(JSON.stringify(window.settingsClone))
 
778
 
779
+ if (typeof $('[name*="sm_color_diversity"]:checked').data('default') === 'undefined'
780
+ || typeof $('[name*="sm_coloration_level"]:checked').data('default') === 'undefined') {
781
+ const primaryRatio = $(primary_color_selector).val() / 100
782
+ const secondaryRatio = $(secondary_color_selector).val() / 100
783
+ const tertiaryRatio = $(tertiary_color_selector).val() / 100
784
 
785
+ tempSettings = moveConnectedFields(tempSettings, 'sm_dark_primary', 'sm_color_primary', primaryRatio)
786
+ tempSettings = moveConnectedFields(tempSettings, 'sm_dark_secondary', 'sm_color_secondary', secondaryRatio)
787
+ tempSettings = moveConnectedFields(tempSettings, 'sm_dark_tertiary', 'sm_color_tertiary', tertiaryRatio)
 
 
788
 
789
+ var diversity = $('[name*="sm_color_diversity"]:checked').val()
790
+ var diversity_variation = getSwapMap('color_diversity_low')
791
+ tempSettings = swapConnectedFields(tempSettings, diversity_variation)
 
 
792
 
793
+ if (diversity === 'medium') {
794
+ tempSettings = moveConnectedFields(tempSettings, 'sm_color_primary', 'sm_color_secondary', 0.5)
795
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
796
 
797
+ if (diversity === 'high') {
798
+ tempSettings = moveConnectedFields(tempSettings, 'sm_color_primary', 'sm_color_secondary', 0.67)
799
+ tempSettings = moveConnectedFields(tempSettings, 'sm_color_secondary', 'sm_color_tertiary', 0.50)
800
+ }
801
+ }
802
 
803
+ var shuffle = $('[name*="sm_shuffle_colors"]:checked').val()
804
+ if (shuffle !== 'default') {
805
+ var shuffle_variation = getSwapMap('shuffle_' + shuffle)
806
+ tempSettings = swapConnectedFields(tempSettings, shuffle_variation)
807
  }
808
 
809
+ var dark_mode = $('[name*="sm_dark_mode"]:checked').val()
810
+ if (dark_mode === 'on') {
811
+ var dark_mmode_variation = getSwapMap('dark')
812
+ tempSettings = swapConnectedFields(tempSettings, dark_mmode_variation)
813
+ }
814
 
815
+ _.each(masterSettingIds, function (masterSettingId) {
816
+ wp.customize.settings.settings[masterSettingId] = tempSettings[masterSettingId]
817
+ })
818
+ }
819
+
820
+ const getPixelsFromColors = function (colors) {
821
+ var pixels = []
822
+ _.each(colors, function (color) {
823
+ pixels.push(hex2rgba(color))
824
+ })
825
+ return pixels
826
+ }
827
+
828
+ const getAveragePixel = function (pixels) {
829
+ var averagePixel = {
830
+ red: 0,
831
+ green: 0,
832
+ blue: 0,
833
+ alpha: 0,
834
+ hue: 0,
835
+ saturation: 0,
836
+ lightness: 0,
837
+ luma: 0
838
+ }
839
 
840
+ for (var i = 0; i < pixels.length; i++) {
841
+ var pixel = pixels[i]
 
 
 
 
 
 
 
 
 
 
842
 
843
+ for (var k in averagePixel) {
844
+ averagePixel[k] += pixel[k]
845
+ }
846
+ }
 
 
 
 
 
 
 
 
 
 
 
 
847
 
848
+ for (var k in averagePixel) {
849
+ averagePixel[k] /= pixels.length
850
+ }
 
 
 
851
 
852
+ return averagePixel
853
+ }
854
+
855
+ const applyColorationValueToFields = () => {
856
+ var setting_id = 'sm_coloration_level'
857
+ var setting = wp.customize(setting_id)
858
+ var coloration = $('[name*="sm_coloration_level"]:checked').val()
859
+
860
+ if (typeof $('[name*="sm_coloration_level"]:checked').data('default') !== 'undefined') {
861
+
862
+ var sliders = ['sm_dark_color_primary_slider', 'sm_dark_color_secondary_slider', 'sm_dark_color_tertiary_slider']
863
+ _.each(sliders, function (slider_id) {
864
+ var slider_setting = customify_settings.settings[slider_id]
865
+ wp.customize(slider_id).set(slider_setting.default)
866
+ $('#_customize-input-' + slider_id + '_control ').val(slider_setting.default)
867
+ })
868
+ } else {
869
+ var ratio = parseFloat(coloration)
870
+ $(color_sliders_selector).val(ratio)
871
+ }
872
+ reinitializeConnectedFields()
873
+ }
874
 
875
+ const reinitializeConnectedFields = () => {
876
+ reloadConnectedFields()
877
+ // buildColorMatrix();
878
+ unbindConnectedFields()
879
+ bindConnectedFields()
880
+ refreshCurrentPaletteControl()
881
+ resetSettings()
882
+ }
883
+
884
+ const confirmChanges = (callback) => {
885
+ let altered = !!$('.c-color-palette .color.altered').length
886
+ let confirmed = true
887
+
888
+ if (altered) {
889
+ confirmed = confirm('One or more fields connected to the color palette have been modified. By changing the palette variation you will lose changes to any color made prior to this action.')
890
+ }
891
 
892
+ if (!altered || confirmed) {
893
+ if (typeof callback === 'function') {
894
+ callback()
895
+ }
896
+ return true
897
+ }
898
 
899
+ return false
900
+ }
901
+
902
+ const bindEvents = () => {
903
+ const paletteControlSelector = '.c-color-palette__control'
904
+ const $paletteControl = $(paletteControlSelector)
905
+ const variation = getCurrentVariation()
906
+
907
+ $paletteControl.removeClass('active')
908
+ $paletteControl.filter('.variation-' + variation).addClass('active')
909
+
910
+ $(document).on('click', '.customify_preset.color_palette input', function (e) {
911
+ if (!confirmChanges(onPaletteChange.bind(this))) {
912
+ e.preventDefault()
913
+ }
914
+ })
915
+
916
+ $('[for*="sm_palette_filter"], [for*="sm_coloration_level"], [for*="sm_color_diversity"], [for*="sm_shuffle_colors"], [for*="sm_dark_mode"]').on('click', function (e) {
917
+ if (!confirmChanges()) {
918
+ e.preventDefault()
919
+ }
920
+ })
921
+
922
+ $('[name*="sm_coloration_level"]').on('change', applyColorationValueToFields)
923
+ $('[name*="sm_color_diversity"]').on('change', reinitializeConnectedFields)
924
+ $('[name*="sm_shuffle_colors"]').on('change', reinitializeConnectedFields)
925
+ $('[name*="sm_dark_mode"]').on('change', reinitializeConnectedFields)
926
+ $('[name*="sm_palette_filter"]').on('change', () => {
927
+ updateFilteredColors()
928
+ reinitializeConnectedFields()
929
+ })
930
+
931
+ $(document).on('click', '.sm-tabs__item', function (e) {
932
+ e.preventDefault()
933
+
934
+ var $section = $('#sub-accordion-section-sm_color_palettes_section')
935
+ var $tabs = $('.sm-tabs__item')
936
+ var $active = $(this)
937
+ var target = $active.data('target')
938
+
939
+ $tabs.removeClass('sm-tabs__item--active')
940
+ $active.addClass('sm-tabs__item--active')
941
+ $section.removeClass('sm-view-palettes sm-view-filters sm-view-customize').addClass('sm-view-' + target)
942
+ })
943
+
944
+ $('.sm-tabs__item').first().trigger('click')
945
+ }
946
+
947
+ const updateFilterPreviews = _.debounce(() => {
948
+ $('.sm-palette-filter').each(function () {
949
+ let $filters = $(this).find('input')
950
+
951
+ $filters.each(function (i, obj) {
952
+ let $input = $(obj)
953
+ let $label = $input.next('label')
954
+ let label = $input.val()
955
+ let $colors = $label.find('.color')
956
+
957
+ $colors.each(function (j, color) {
958
+ let $color = $(color)
959
+ let setting_id = $color.data('setting')
960
+ let setting = wp.customize(setting_id)
961
+ let originalColor = setting()
962
+
963
+ $color.css('color', filterColor(originalColor, label))
964
+ })
965
+ })
966
+ })
967
+ }, 30)
968
+
969
+ wp.customize.bind('ready', function () {
970
+ setupGlobals()
971
+
972
+ createCurrentPaletteControls()
973
+
974
+ reloadConnectedFields()
975
+ updateFilteredColors()
976
+ unbindConnectedFields()
977
+ bindConnectedFields()
978
+ refreshCurrentPaletteControl()
979
  // buildColorMatrix();
980
 
981
+ updateFilterPreviews()
982
 
983
+ bindEvents()
984
+ })
985
 
986
+ return {
987
+ masterSettingIds: masterSettingIds
988
+ }
989
 
990
+ })(jQuery, window, wp)
readme.txt CHANGED
@@ -2,7 +2,7 @@
2
  Contributors: pixelgrade, euthelup, babbardel, vlad.olaru, cristianfrumusanu, raduconstantin, razvanonofrei
3
  Tags: customizer, css, editor, live, preview, customizer
4
  Requires at least: 4.7.0
5
- Tested up to: 4.9.8
6
  Stable tag: 2.1.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -45,6 +45,9 @@ With [Customify](https://github.com/pixelgrade/customify), developers can easily
45
 
46
  == Changelog ==
47
 
 
 
 
48
  = 2.1.3 =
49
  * Improve Customizer section grouping in the Theme Options Panel
50
  * Fix Font Palettes giving huge sizes to font options set in ems
2
  Contributors: pixelgrade, euthelup, babbardel, vlad.olaru, cristianfrumusanu, raduconstantin, razvanonofrei
3
  Tags: customizer, css, editor, live, preview, customizer
4
  Requires at least: 4.7.0
5
+ Tested up to: 5.0.0
6
  Stable tag: 2.1.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
45
 
46
  == Changelog ==
47
 
48
+ = 2.2.0 =
49
+ * Added support for the new **Gutenberg block editor.**
50
+
51
  = 2.1.3 =
52
  * Improve Customizer section grouping in the Theme Options Panel
53
  * Fix Font Palettes giving huge sizes to font options set in ems
scss/customizer.scss CHANGED
@@ -11,7 +11,7 @@ $accent : #3677bd;
11
  $dark : #232527;
12
  $gray : #303235;
13
  $light : #cbcfd4;
14
- $lighter : #3b3f45; //borders
15
  $descriptions : #4d7b90;
16
 
17
  $borders :#e0e8ef;
@@ -2392,7 +2392,7 @@ input.c-color-palette__input[class] {
2392
  justify-content: space-between;
2393
  padding: 0 16px;
2394
  text-align: center;
2395
-
2396
  border-bottom: 1px solid #DFE8EF;
2397
 
2398
  &__item {
@@ -2400,12 +2400,12 @@ input.c-color-palette__input[class] {
2400
  margin-bottom: -1px;
2401
  // flex-grow: 1;
2402
  flex-basis: 31%;
2403
-
2404
  font-size: 14px;
2405
  // font-weight: 500;
2406
  color: $blue-dark;
2407
  opacity: 0.7;
2408
-
2409
  border-bottom: 3px solid transparent;
2410
  cursor: pointer;
2411
 
@@ -2445,7 +2445,7 @@ input.c-color-palette__input[class] {
2445
  }
2446
 
2447
  [id="customize-control-sm_current_color_palette_control"] ~ * {
2448
-
2449
 
2450
  display: none !important;
2451
  }
11
  $dark : #232527;
12
  $gray : #303235;
13
  $light : #cbcfd4;
14
+ $lighter : #3b3f45; // borders
15
  $descriptions : #4d7b90;
16
 
17
  $borders :#e0e8ef;
2392
  justify-content: space-between;
2393
  padding: 0 16px;
2394
  text-align: center;
2395
+
2396
  border-bottom: 1px solid #DFE8EF;
2397
 
2398
  &__item {
2400
  margin-bottom: -1px;
2401
  // flex-grow: 1;
2402
  flex-basis: 31%;
2403
+
2404
  font-size: 14px;
2405
  // font-weight: 500;
2406
  color: $blue-dark;
2407
  opacity: 0.7;
2408
+
2409
  border-bottom: 3px solid transparent;
2410
  cursor: pointer;
2411
 
2445
  }
2446
 
2447
  [id="customize-control-sm_current_color_palette_control"] ~ * {
2448
+
2449
 
2450
  display: none !important;
2451
  }