From 6e2907457a8a774b4e0ed87fcb0a3f9ec625fd86 Mon Sep 17 00:00:00 2001 From: AlxMedia Date: Mon, 30 May 2022 09:56:06 +0200 Subject: [PATCH] Kirki 4.0.24 --- functions/kirki/CHANGELOG.md | 34 + functions/kirki/README.md | 4 +- functions/kirki/example.php | 37 +- functions/kirki/kirki.php | 4 +- functions/kirki/packages/autoload.php | 5 + .../packages/composer/InstalledVersions.php | 2 + .../packages/composer/autoload_classmap.php | 2 +- .../packages/composer/autoload_namespaces.php | 2 +- .../kirki/packages/composer/autoload_psr4.php | 2 +- .../kirki/packages/composer/autoload_real.php | 25 +- .../kirki/packages/composer/include_paths.php | 2 +- .../kirki/packages/composer/installed.php | 66 +- .../compatibility/src/Kirki.php | 2 +- .../compatibility/src/Scripts.php | 2 + .../control-code/src/Control/Code.php | 125 ++ .../control-code/src/Field/Code.php | 4 +- .../control-react-colorful/dist/control.css | 5 +- .../control-react-colorful/dist/control.js | 4 +- .../control-react-colorful/dist/preview.js | 4 +- .../src/Control/ReactColorful.php | 6 +- .../src/Field/ReactColorful.php | 2 + .../js/components/KirkiReactColorfulCircle.js | 77 +- .../js/components/KirkiReactColorfulInput.js | 152 +- .../components/KirkiReactColorfulSwatches.js | 32 +- .../src/js/hooks/useClickOutside.js | 56 +- .../src/js/hooks/useWindowResize.js | 18 +- .../src/js/utils/convertColorForCustomizer.js | 89 +- .../src/js/utils/convertColorForInput.js | 286 +-- .../src/js/utils/convertColorForPicker.js | 51 +- .../control-repeater/dist/control.js | 2 +- .../dist/wp-color-picker-alpha.min.js | 11 + .../control-repeater/src/Control/Repeater.php | 40 +- .../control-repeater/src/control.js | 1723 +++++++++-------- .../kirki-framework/module-css/src/CSS.php | 41 +- .../src/Editor_Styles.php | 14 +- .../module-postmessage/src/postMessage.js | 5 +- .../module-webfonts/src/Webfonts/Async.php | 2 +- .../module-webfonts/src/Webfonts/Embed.php | 3 +- functions/kirki/readme.txt | 38 +- 39 files changed, 1664 insertions(+), 1315 deletions(-) create mode 100644 functions/kirki/packages/kirki-framework/control-code/src/Control/Code.php create mode 100644 functions/kirki/packages/kirki-framework/control-repeater/dist/wp-color-picker-alpha.min.js diff --git a/functions/kirki/CHANGELOG.md b/functions/kirki/CHANGELOG.md index 5b6331e..b391358 100644 --- a/functions/kirki/CHANGELOG.md +++ b/functions/kirki/CHANGELOG.md @@ -1,3 +1,37 @@ +### 4.0.24 - March 22, 2022 ### +#### control-react-colorful package +Bugfixes: +- Fix issue where uppercase color was failed to be saved +- Fix the layout issue of the swatches (removing `justify-content: space-between;`) +- Fix the swatches layout issue when it contains a lot of colors. +- Allow clearing picker's color by clearing the input field value. + +#### compatibility package +Bugfixes: +- Fix notice error: Undefined index of 'transport' as reported in #2476 +- Fix code that called URL class without it's namespace +- **control-repeater**: `"alpha" => true` choice didn't work as reported in issue #2469 +- **module-css**: `KIRKI_NO_OUTPUT` didn't work in the front area + +#### module-webfonts package +Finetuning: +- Stop preconnecting to https://fonts.gstatic.com/ . It was related to issue #2478. + +#### module-postMessage package +Bugfix: +- Fix multicolor output issue on customizer preview where the CSS property was appended with its assigned choice. + +### 4.0.23 - March 22, 2022 ### +Bugfixes: +- **control-repeater**: `"alpha" => true` choice didn't work as reported in issue #2469 +- **module-css**: `KIRKI_NO_OUTPUT` didn't work in the front area + +New Filter: +- New `kirki_inline_styles_id` filter to filter the ID of the inline style tag. The default id is `kirki-inline-styles` (**module-css**) + +New Constant: +- New `KIRKI_NO_GUTENBERG_OUTPUT` constant. Since we get rid of Kirki config usage in Kirki 4, then new constant is necessary. Define `KIRKI_NO_GUTENBERG_OUTPUT` constant to `true` to disable Gutenberg support (**module-editor-styles**). + ### 4.0.22 - February 17, 2022 ### Bugfix: - **module-css** & **module-postmessage**: Fix bug where CSS output didn't work when `'option_type' => 'option'` and `'option_name'` is provided. This fixed issue #2466 and issue #2465 diff --git a/functions/kirki/README.md b/functions/kirki/README.md index 5b1bb54..33e354e 100644 --- a/functions/kirki/README.md +++ b/functions/kirki/README.md @@ -2,8 +2,8 @@ **Contributors:** [davidvongries](https://profiles.wordpress.org/davidvongries), [aristath](https://profiles.wordpress.org/aristath), [dannycooper](https://profiles.wordpress.org/dannycooper), [wplemon](https://profiles.wordpress.org/wplemon), [igmoweb](https://profiles.wordpress.org/igmoweb) **Tags:** customizer, options framework, theme, mods, toolkit, gutenberg **Requires at least:** 5.2 -**Tested up to:** 5.9 -**Stable tag:** 4.0.22 +**Tested up to:** 6 +**Stable tag:** 4.0.24 **License:** MIT **License URI:** https://opensource.org/licenses/MIT diff --git a/functions/kirki/example.php b/functions/kirki/example.php index 9b638c7..d26867b 100644 --- a/functions/kirki/example.php +++ b/functions/kirki/example.php @@ -899,25 +899,24 @@ new \Kirki\Field\Multicolor( 'priority' => 10, 'transport' => 'postMessage', 'choices' => [ - 'link' => esc_html__( 'Color', 'kirki' ), - 'hover' => esc_html__( 'And this hover color just so that you have long label', 'kirki' ), - 'active' => esc_html__( 'Active', 'kirki' ), - 'active' => esc_html__( 'Active', 'kirki' ), - 'active1' => esc_html__( 'Active', 'kirki' ), - 'active2' => esc_html__( 'Active', 'kirki' ), - 'active3' => esc_html__( 'Active', 'kirki' ), - 'active4' => esc_html__( 'Active', 'kirki' ), - 'active5' => esc_html__( 'Active', 'kirki' ), - 'active6' => esc_html__( 'Active', 'kirki' ), - 'active7' => esc_html__( 'Active', 'kirki' ), - 'active8' => esc_html__( 'Active', 'kirki' ), - 'active9' => esc_html__( 'Active', 'kirki' ), - 'active10' => esc_html__( 'Active', 'kirki' ), - 'active11' => esc_html__( 'Active', 'kirki' ), - 'active12' => esc_html__( 'Active', 'kirki' ), - 'active13' => esc_html__( 'Active', 'kirki' ), - 'active14' => esc_html__( 'Active', 'kirki' ), - 'active15' => esc_html__( 'Active', 'kirki' ), + 'link' => esc_html__( 'Link Color', 'kirki' ), + 'hover' => esc_html__( 'And this is hover color with long label so you know how it is displayed.', 'kirki' ), + 'active' => esc_html__( 'Active Color', 'kirki' ), + 'another1' => esc_html__( 'Another color 1', 'kirki' ), + 'another2' => esc_html__( 'Another color 2', 'kirki' ), + 'another3' => esc_html__( 'Another color 3', 'kirki' ), + 'another4' => esc_html__( 'Another color 4', 'kirki' ), + 'another5' => esc_html__( 'Another color 5', 'kirki' ), + 'another6' => esc_html__( 'Another color 6', 'kirki' ), + 'another7' => esc_html__( 'Another color 7', 'kirki' ), + 'another8' => esc_html__( 'Another color 8', 'kirki' ), + 'another9' => esc_html__( 'Another color 9', 'kirki' ), + 'another10' => esc_html__( 'Another color 10', 'kirki' ), + 'another11' => esc_html__( 'Another color 11', 'kirki' ), + 'another12' => esc_html__( 'Another color 12', 'kirki' ), + 'another13' => esc_html__( 'Another color 13', 'kirki' ), + 'another14' => esc_html__( 'Another color 14', 'kirki' ), + 'another15' => esc_html__( 'Another color 15', 'kirki' ), ], 'alpha' => true, 'default' => [ diff --git a/functions/kirki/kirki.php b/functions/kirki/kirki.php index cca3962..40164ca 100644 --- a/functions/kirki/kirki.php +++ b/functions/kirki/kirki.php @@ -5,7 +5,7 @@ * Description: The Ultimate WordPress Customizer Framework * Author: David Vongries * Author URI: https://davidvongries.com/ - * Version: 4.0.22 + * Version: 4.0.24 * Text Domain: kirki * Requires at least: 5.2 * Requires PHP: 7.0 @@ -44,7 +44,7 @@ require_once __DIR__ . '/inc/bootstrap.php'; // phpcs:ignore WPThemeReview.CoreF // Define the KIRKI_VERSION constant. if ( ! defined( 'KIRKI_VERSION' ) ) { - define( 'KIRKI_VERSION', '4.0.22' ); + define( 'KIRKI_VERSION', '4.0.24' ); } if ( ! function_exists( 'Kirki' ) ) { diff --git a/functions/kirki/packages/autoload.php b/functions/kirki/packages/autoload.php index e514376..2fdd036 100644 --- a/functions/kirki/packages/autoload.php +++ b/functions/kirki/packages/autoload.php @@ -2,6 +2,11 @@ // autoload.php @generated by Composer +if (PHP_VERSION_ID < 50600) { + echo 'Composer 2.3.0 dropped support for autoloading on PHP <5.6 and you are running '.PHP_VERSION.', please upgrade PHP or use Composer 2.2 LTS via "composer self-update --2.2". Aborting.'.PHP_EOL; + exit(1); +} + require_once __DIR__ . '/composer/autoload_real.php'; return ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144::getLoader(); diff --git a/functions/kirki/packages/composer/InstalledVersions.php b/functions/kirki/packages/composer/InstalledVersions.php index d50e0c9..41bc143 100644 --- a/functions/kirki/packages/composer/InstalledVersions.php +++ b/functions/kirki/packages/composer/InstalledVersions.php @@ -21,6 +21,8 @@ use Composer\Semver\VersionParser; * See also https://getcomposer.org/doc/07-runtime.md#installed-versions * * To require its presence, you can require `composer-runtime-api ^2.0` + * + * @final */ class InstalledVersions { diff --git a/functions/kirki/packages/composer/autoload_classmap.php b/functions/kirki/packages/composer/autoload_classmap.php index b26f1b1..0fb0a2c 100644 --- a/functions/kirki/packages/composer/autoload_classmap.php +++ b/functions/kirki/packages/composer/autoload_classmap.php @@ -2,7 +2,7 @@ // autoload_classmap.php @generated by Composer -$vendorDir = dirname(dirname(__FILE__)); +$vendorDir = dirname(__DIR__); $baseDir = dirname($vendorDir); return array( diff --git a/functions/kirki/packages/composer/autoload_namespaces.php b/functions/kirki/packages/composer/autoload_namespaces.php index b7fc012..15a2ff3 100644 --- a/functions/kirki/packages/composer/autoload_namespaces.php +++ b/functions/kirki/packages/composer/autoload_namespaces.php @@ -2,7 +2,7 @@ // autoload_namespaces.php @generated by Composer -$vendorDir = dirname(dirname(__FILE__)); +$vendorDir = dirname(__DIR__); $baseDir = dirname($vendorDir); return array( diff --git a/functions/kirki/packages/composer/autoload_psr4.php b/functions/kirki/packages/composer/autoload_psr4.php index 125484e..b072dfe 100644 --- a/functions/kirki/packages/composer/autoload_psr4.php +++ b/functions/kirki/packages/composer/autoload_psr4.php @@ -2,7 +2,7 @@ // autoload_psr4.php @generated by Composer -$vendorDir = dirname(dirname(__FILE__)); +$vendorDir = dirname(__DIR__); $baseDir = dirname($vendorDir); return array( diff --git a/functions/kirki/packages/composer/autoload_real.php b/functions/kirki/packages/composer/autoload_real.php index c504328..400add2 100644 --- a/functions/kirki/packages/composer/autoload_real.php +++ b/functions/kirki/packages/composer/autoload_real.php @@ -25,34 +25,15 @@ class ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144 require __DIR__ . '/platform_check.php'; spl_autoload_register(array('ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144', 'loadClassLoader'), true, true); - self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(\dirname(__FILE__))); + self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(__DIR__)); spl_autoload_unregister(array('ComposerAutoloaderInitc56aa391ac498061f8d648878e0e6144', 'loadClassLoader')); $includePaths = require __DIR__ . '/include_paths.php'; $includePaths[] = get_include_path(); set_include_path(implode(PATH_SEPARATOR, $includePaths)); - $useStaticLoader = PHP_VERSION_ID >= 50600 && !defined('HHVM_VERSION') && (!function_exists('zend_loader_file_encoded') || !zend_loader_file_encoded()); - if ($useStaticLoader) { - require __DIR__ . '/autoload_static.php'; - - call_user_func(\Composer\Autoload\ComposerStaticInitc56aa391ac498061f8d648878e0e6144::getInitializer($loader)); - } else { - $map = require __DIR__ . '/autoload_namespaces.php'; - foreach ($map as $namespace => $path) { - $loader->set($namespace, $path); - } - - $map = require __DIR__ . '/autoload_psr4.php'; - foreach ($map as $namespace => $path) { - $loader->setPsr4($namespace, $path); - } - - $classMap = require __DIR__ . '/autoload_classmap.php'; - if ($classMap) { - $loader->addClassMap($classMap); - } - } + require __DIR__ . '/autoload_static.php'; + call_user_func(\Composer\Autoload\ComposerStaticInitc56aa391ac498061f8d648878e0e6144::getInitializer($loader)); $loader->register(true); diff --git a/functions/kirki/packages/composer/include_paths.php b/functions/kirki/packages/composer/include_paths.php index 253ce05..d9dee2b 100644 --- a/functions/kirki/packages/composer/include_paths.php +++ b/functions/kirki/packages/composer/include_paths.php @@ -2,7 +2,7 @@ // include_paths.php @generated by Composer -$vendorDir = dirname(dirname(__FILE__)); +$vendorDir = dirname(__DIR__); $baseDir = dirname($vendorDir); return array( diff --git a/functions/kirki/packages/composer/installed.php b/functions/kirki/packages/composer/installed.php index 6a02b09..96cd6db 100644 --- a/functions/kirki/packages/composer/installed.php +++ b/functions/kirki/packages/composer/installed.php @@ -1,22 +1,22 @@ array( - 'pretty_version' => 'dev-master', - 'version' => 'dev-master', + 'pretty_version' => '4.0.24', + 'version' => '4.0.24.0', 'type' => 'library', 'install_path' => __DIR__ . '/../../', 'aliases' => array(), - 'reference' => 'f44123472688894cb60ad0552857a3aadc4a6ee4', + 'reference' => NULL, 'name' => 'kirki-framework/kirki', 'dev' => true, ), 'versions' => array( 'composer/installers' => array( - 'pretty_version' => 'v2.0.1', - 'version' => '2.0.1.0', + 'pretty_version' => 'v2.1.1', + 'version' => '2.1.1.0', 'type' => 'composer-plugin', 'install_path' => __DIR__ . '/./installers', 'aliases' => array(), - 'reference' => 'a241e78aaeb09781f5f5b92ac01ffd13ab43e5e8', + 'reference' => 'af93ba6e52236418f07a278033eba6959ee5b983', 'dev_requirement' => true, ), 'dealerdirect/phpcodesniffer-composer-installer' => array( @@ -29,12 +29,12 @@ 'dev_requirement' => true, ), 'kirki-framework/compatibility' => array( - 'pretty_version' => 'v1.0.9', - 'version' => '1.0.9.0', + 'pretty_version' => 'v1.0.11', + 'version' => '1.0.11.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/compatibility', 'aliases' => array(), - 'reference' => '1169e68f1232dfc7d659c981d440d81e8253a810', + 'reference' => '551fdc67b39e7345fc49a785b2cdd0c2a9f0bc3e', 'dev_requirement' => false, ), 'kirki-framework/control-base' => array( @@ -56,12 +56,12 @@ 'dev_requirement' => false, ), 'kirki-framework/control-code' => array( - 'pretty_version' => 'v1.0.1', - 'version' => '1.0.1.0', + 'pretty_version' => 'v1.0.2', + 'version' => '1.0.2.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/control-code', 'aliases' => array(), - 'reference' => '29909ae3f62210b9b5937c798086ce8495e77d72', + 'reference' => '88e7b01127fc7039e2c1fc6761184b0332f9a0c3', 'dev_requirement' => false, ), 'kirki-framework/control-color' => array( @@ -182,12 +182,12 @@ 'dev_requirement' => false, ), 'kirki-framework/control-react-colorful' => array( - 'pretty_version' => 'v1.0.14', - 'version' => '1.0.14.0', + 'pretty_version' => 'v1.0.17', + 'version' => '1.0.17.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/control-react-colorful', 'aliases' => array(), - 'reference' => 'bcfe71b736f4b43c00b0292e9260c78815808364', + 'reference' => '79258cdbcdd4ee8582560edc4a09c8ba45eaf219', 'dev_requirement' => false, ), 'kirki-framework/control-react-select' => array( @@ -200,12 +200,12 @@ 'dev_requirement' => false, ), 'kirki-framework/control-repeater' => array( - 'pretty_version' => 'v1.0.3', - 'version' => '1.0.3.0', + 'pretty_version' => '1.0.5', + 'version' => '1.0.5.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/control-repeater', 'aliases' => array(), - 'reference' => 'b24e7ae8641867616cc12038eda0a6e990399bbd', + 'reference' => '5375e65054b7a73da4e735fa7bee831c7f6c1cfc', 'dev_requirement' => false, ), 'kirki-framework/control-select' => array( @@ -317,12 +317,12 @@ 'dev_requirement' => false, ), 'kirki-framework/kirki' => array( - 'pretty_version' => 'dev-master', - 'version' => 'dev-master', + 'pretty_version' => '4.0.24', + 'version' => '4.0.24.0', 'type' => 'library', 'install_path' => __DIR__ . '/../../', 'aliases' => array(), - 'reference' => 'f44123472688894cb60ad0552857a3aadc4a6ee4', + 'reference' => NULL, 'dev_requirement' => false, ), 'kirki-framework/l10n' => array( @@ -335,21 +335,21 @@ 'dev_requirement' => false, ), 'kirki-framework/module-css' => array( - 'pretty_version' => 'v1.0.10', - 'version' => '1.0.10.0', + 'pretty_version' => 'v1.0.11', + 'version' => '1.0.11.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/module-css', 'aliases' => array(), - 'reference' => '93b97d0e6b09fe4953c69a8ba9bc06884af91b27', + 'reference' => 'b53cff693b489cc7e4991ef725a66ddafa8aa84b', 'dev_requirement' => false, ), 'kirki-framework/module-editor-styles' => array( - 'pretty_version' => 'v1.0.1', - 'version' => '1.0.1.0', + 'pretty_version' => 'v1.0.2', + 'version' => '1.0.2.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/module-editor-styles', 'aliases' => array(), - 'reference' => 'd30622f500cfcc4e0145790d4aeca541d6c73319', + 'reference' => 'a86f8b66fa0a442ce092c122b997c8d5f8d20951', 'dev_requirement' => false, ), 'kirki-framework/module-field-dependencies' => array( @@ -371,12 +371,12 @@ 'dev_requirement' => false, ), 'kirki-framework/module-postmessage' => array( - 'pretty_version' => 'v1.0.6', - 'version' => '1.0.6.0', + 'pretty_version' => '1.0.7', + 'version' => '1.0.7.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/module-postmessage', 'aliases' => array(), - 'reference' => 'd543c8d34e7d6fc8c2ce4805d8fc940070a54691', + 'reference' => '9b2b419027f3b95a2546041a83fc5607492f35a5', 'dev_requirement' => false, ), 'kirki-framework/module-preset' => array( @@ -425,12 +425,12 @@ 'dev_requirement' => false, ), 'kirki-framework/module-webfonts' => array( - 'pretty_version' => 'v1.0.4', - 'version' => '1.0.4.0', + 'pretty_version' => 'v1.0.5', + 'version' => '1.0.5.0', 'type' => 'library', 'install_path' => __DIR__ . '/../kirki-framework/module-webfonts', 'aliases' => array(), - 'reference' => 'ec12372bb67230ab5558a6b3d8b7f98300d2e2a6', + 'reference' => '6be8c298abc29bccc227e1b1dbcb029e6a072659', 'dev_requirement' => false, ), 'kirki-framework/url-getter' => array( diff --git a/functions/kirki/packages/kirki-framework/compatibility/src/Kirki.php b/functions/kirki/packages/kirki-framework/compatibility/src/Kirki.php index 50d775d..d62fc82 100644 --- a/functions/kirki/packages/kirki-framework/compatibility/src/Kirki.php +++ b/functions/kirki/packages/kirki-framework/compatibility/src/Kirki.php @@ -271,7 +271,7 @@ class Kirki extends Init { // Convert css_vars to output args. if ( isset( $args['css_vars'] ) ) { - if ( 'postMessage' === $args['transport'] ) { + if ( isset( $args['transport'] ) && 'postMessage' === $args['transport'] ) { $args['transport'] = 'auto'; } diff --git a/functions/kirki/packages/kirki-framework/compatibility/src/Scripts.php b/functions/kirki/packages/kirki-framework/compatibility/src/Scripts.php index d5f7518..b3c5675 100644 --- a/functions/kirki/packages/kirki-framework/compatibility/src/Scripts.php +++ b/functions/kirki/packages/kirki-framework/compatibility/src/Scripts.php @@ -12,6 +12,8 @@ namespace Kirki\Compatibility; +use Kirki\URL; + /** * Adds scripts for backwards-compatibility * diff --git a/functions/kirki/packages/kirki-framework/control-code/src/Control/Code.php b/functions/kirki/packages/kirki-framework/control-code/src/Control/Code.php new file mode 100644 index 0000000..a0466e3 --- /dev/null +++ b/functions/kirki/packages/kirki-framework/control-code/src/Control/Code.php @@ -0,0 +1,125 @@ +editor_settings = wp_enqueue_code_editor( + array_merge( + array( + 'type' => $this->code_type, + 'codemirror' => array( + 'indentUnit' => 2, + 'tabSize' => 2, + ), + ), + $this->editor_settings + ) + ); + } + + /** + * Refresh the parameters passed to the JavaScript via JSON. + * + * @since 1.0.2 + * + * @see WP_Customize_Control::json() + * + * @return array Array of parameters passed to the JavaScript. + */ + public function json() { + $json = parent::json(); + $json['editor_settings'] = $this->editor_settings; + $json['input_attrs'] = $this->input_attrs; + return $json; + } + + /** + * Don't render the control content from PHP, as it's rendered via JS on load. + * + * @since 1.0.2 + */ + public function render_content() {} + + /** + * Render a JS template for control display. + * + * @since 1.0.2 + */ + public function content_template() { + ?> + <# var elementIdPrefix = 'el' + String( Math.random() ); #> + <# if ( data.label ) { #> + + <# } #> + <# if ( data.description ) { #> + {{{ data.description }}} + <# } #> +
+ + l))return!1;var p=u.get(t),v=u.get(e);if(p&&v)return p==e&&v==t;var d=-1,b=!0,h=2&r?new n:void 0;for(u.set(t,e),u.set(e,t);++d-1&&t%1==0&&t-1}},4705:function(t,e,r){var n=r(8470);t.exports=function(t,e){var r=this.__data__,o=n(r,t);return o<0?(++this.size,r.push([t,e])):r[o][1]=e,this}},4785:function(t,e,r){var n=r(1989),o=r(8407),a=r(7071);t.exports=function(){this.size=0,this.__data__={hash:new n,map:new(a||o),string:new n}}},1285:function(t,e,r){var n=r(5050);t.exports=function(t){var e=n(this,t).delete(t);return this.size-=e?1:0,e}},6e3:function(t,e,r){var n=r(5050);t.exports=function(t){return n(this,t).get(t)}},9916:function(t,e,r){var n=r(5050);t.exports=function(t){return n(this,t).has(t)}},5265:function(t,e,r){var n=r(5050);t.exports=function(t,e){var r=n(this,t),o=r.size;return r.set(t,e),this.size+=r.size==o?0:1,this}},8776:function(t){t.exports=function(t){var e=-1,r=Array(t.size);return t.forEach((function(t,n){r[++e]=[n,t]})),r}},2634:function(t){t.exports=function(t,e){return function(r){return null!=r&&r[t]===e&&(void 0!==e||t in Object(r))}}},4523:function(t,e,r){var n=r(8306);t.exports=function(t){var e=n(t,(function(t){return 500===r.size&&r.clear(),t})),r=e.cache;return e}},4536:function(t,e,r){var n=r(852)(Object,"create");t.exports=n},6916:function(t,e,r){var n=r(5569)(Object.keys,Object);t.exports=n},3498:function(t){t.exports=function(t){var e=[];if(null!=t)for(var r in Object(t))e.push(r);return e}},1167:function(t,e,r){t=r.nmd(t);var n=r(1957),o=e&&!e.nodeType&&e,a=o&&t&&!t.nodeType&&t,c=a&&a.exports===o&&n.process,i=function(){try{return a&&a.require&&a.require("util").types||c&&c.binding&&c.binding("util")}catch(t){}}();t.exports=i},2333:function(t){var e=Object.prototype.toString;t.exports=function(t){return e.call(t)}},5569:function(t){t.exports=function(t,e){return function(r){return t(e(r))}}},5639:function(t,e,r){var n=r(1957),o="object"==typeof self&&self&&self.Object===Object&&self,a=n||o||Function("return this")();t.exports=a},619:function(t){t.exports=function(t){return this.__data__.set(t,"__lodash_hash_undefined__"),this}},2385:function(t){t.exports=function(t){return this.__data__.has(t)}},1814:function(t){t.exports=function(t){var e=-1,r=Array(t.size);return t.forEach((function(t){r[++e]=t})),r}},7465:function(t,e,r){var n=r(8407);t.exports=function(){this.__data__=new n,this.size=0}},3779:function(t){t.exports=function(t){var e=this.__data__,r=e.delete(t);return this.size=e.size,r}},7599:function(t){t.exports=function(t){return this.__data__.get(t)}},4758:function(t){t.exports=function(t){return this.__data__.has(t)}},4309:function(t,e,r){var n=r(8407),o=r(7071),a=r(3369);t.exports=function(t,e){var r=this.__data__;if(r instanceof n){var c=r.__data__;if(!o||c.length<199)return c.push([t,e]),this.size=++r.size,this;r=this.__data__=new a(c)}return r.set(t,e),this.size=r.size,this}},5514:function(t,e,r){var n=r(4523),o=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,a=/\\(\\)?/g,c=n((function(t){var e=[];return 46===t.charCodeAt(0)&&e.push(""),t.replace(o,(function(t,r,n,o){e.push(n?o.replace(a,"$1"):r||t)})),e}));t.exports=c},327:function(t,e,r){var n=r(3448);t.exports=function(t){if("string"==typeof t||n(t))return t;var e=t+"";return"0"==e&&1/t==-1/0?"-0":e}},346:function(t){var e=Function.prototype.toString;t.exports=function(t){if(null!=t){try{return e.call(t)}catch(t){}try{return t+""}catch(t){}}return""}},361:function(t,e,r){var n=r(5990);t.exports=function(t){return n(t,5)}},7813:function(t){t.exports=function(t,e){return t===e||t!=t&&e!=e}},2525:function(t,e,r){var n=r(7816),o=r(4290);t.exports=function(t,e){return t&&n(t,o(e))}},7361:function(t,e,r){var n=r(7786);t.exports=function(t,e,r){var o=null==t?void 0:n(t,e);return void 0===o?r:o}},9095:function(t,e,r){var n=r(13),o=r(222);t.exports=function(t,e){return null!=t&&o(t,e,n)}},6557:function(t){t.exports=function(t){return t}},5694:function(t,e,r){var n=r(9454),o=r(7005),a=Object.prototype,c=a.hasOwnProperty,i=a.propertyIsEnumerable,u=n(function(){return arguments}())?n:function(t){return o(t)&&c.call(t,"callee")&&!i.call(t,"callee")};t.exports=u},1469:function(t){var e=Array.isArray;t.exports=e},8612:function(t,e,r){var n=r(3560),o=r(1780);t.exports=function(t){return null!=t&&o(t.length)&&!n(t)}},4144:function(t,e,r){t=r.nmd(t);var n=r(5639),o=r(5062),a=e&&!e.nodeType&&e,c=a&&t&&!t.nodeType&&t,i=c&&c.exports===a?n.Buffer:void 0,u=(i?i.isBuffer:void 0)||o;t.exports=u},3560:function(t,e,r){var n=r(4239),o=r(3218);t.exports=function(t){if(!o(t))return!1;var e=n(t);return"[object Function]"==e||"[object GeneratorFunction]"==e||"[object AsyncFunction]"==e||"[object Proxy]"==e}},1780:function(t){t.exports=function(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=9007199254740991}},6688:function(t,e,r){var n=r(5588),o=r(7518),a=r(1167),c=a&&a.isMap,i=c?o(c):n;t.exports=i},3218:function(t){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},7005:function(t){t.exports=function(t){return null!=t&&"object"==typeof t}},8630:function(t,e,r){var n=r(4239),o=r(5924),a=r(7005),c=Function.prototype,i=Object.prototype,u=c.toString,s=i.hasOwnProperty,l=u.call(Object);t.exports=function(t){if(!a(t)||"[object Object]"!=n(t))return!1;var e=o(t);if(null===e)return!0;var r=s.call(e,"constructor")&&e.constructor;return"function"==typeof r&&r instanceof r&&u.call(r)==l}},2928:function(t,e,r){var n=r(9221),o=r(7518),a=r(1167),c=a&&a.isSet,i=c?o(c):n;t.exports=i},7037:function(t,e,r){var n=r(4239),o=r(1469),a=r(7005);t.exports=function(t){return"string"==typeof t||!o(t)&&a(t)&&"[object String]"==n(t)}},3448:function(t,e,r){var n=r(4239),o=r(7005);t.exports=function(t){return"symbol"==typeof t||o(t)&&"[object Symbol]"==n(t)}},6719:function(t,e,r){var n=r(8749),o=r(7518),a=r(1167),c=a&&a.isTypedArray,i=c?o(c):n;t.exports=i},3674:function(t,e,r){var n=r(4636),o=r(280),a=r(8612);t.exports=function(t){return a(t)?n(t):o(t)}},1704:function(t,e,r){var n=r(4636),o=r(313),a=r(8612);t.exports=function(t){return a(t)?n(t,!0):o(t)}},5161:function(t,e,r){var n=r(9932),o=r(7206),a=r(9199),c=r(1469);t.exports=function(t,e){return(c(t)?n:a)(t,o(e,3))}},8306:function(t,e,r){var n=r(3369);function o(t,e){if("function"!=typeof t||null!=e&&"function"!=typeof e)throw new TypeError("Expected a function");var r=function(){var n=arguments,o=e?e.apply(this,n):n[0],a=r.cache;if(a.has(o))return a.get(o);var c=t.apply(this,n);return r.cache=a.set(o,c)||a,c};return r.cache=new(o.Cache||n),r}o.Cache=n,t.exports=o},9601:function(t,e,r){var n=r(371),o=r(9152),a=r(5403),c=r(327);t.exports=function(t){return a(t)?n(c(t)):o(t)}},479:function(t){t.exports=function(){return[]}},5062:function(t){t.exports=function(){return!1}},9833:function(t,e,r){var n=r(531);t.exports=function(t){return null==t?"":n(t)}},4754:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.autoprefix=void 0;var n,o=(n=r(2525))&&n.__esModule?n:{default:n},a=Object.assign||function(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:"span";return function(r){function n(){var r,u,s;c(this,n);for(var l=arguments.length,f=Array(l),p=0;p1&&void 0!==arguments[1]?arguments[1]:"span";return function(r){function n(){var r,u,s;c(this,n);for(var l=arguments.length,f=Array(l),p=0;p0&&void 0!==arguments[0]?arguments[0]:[],r=[];return(0,c.default)(e,(function(e){Array.isArray(e)?t(e).map((function(t){return r.push(t)})):(0,a.default)(e)?(0,o.default)(e,(function(t,e){!0===t&&r.push(e),r.push(e+"-"+t)})):(0,n.default)(e)&&r.push(e)})),r};e.default=u},9941:function(t,e,r){"use strict";var n=s(r(4147)),o=s(r(8556)),a=s(r(4754)),c=s(r(1765)),i=s(r(6002)),u=s(r(7742));function s(t){return t&&t.__esModule?t:{default:t}}c.default,c.default,i.default,u.default;e.ZP=function(t){for(var e=arguments.length,r=Array(e>1?e-1:0),c=1;c1&&void 0!==arguments[1])||arguments[1];r[t]=e};return 0===t&&n("first-child"),t===e-1&&n("last-child"),(0===t||t%2==0)&&n("even"),1===Math.abs(t%2)&&n("odd"),n("nth-child",t),r}},8556:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.mergeClasses=void 0;var n=c(r(2525)),o=c(r(361)),a=Object.assign||function(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:[],r=t.default&&(0,o.default)(t.default)||{};return e.map((function(e){var o=t[e];return o&&(0,n.default)(o,(function(t,e){r[e]||(r[e]={}),r[e]=a({},r[e],o[e])})),e})),r};e.default=i},7363:function(t){"use strict";t.exports=React}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var a=e[n]={id:n,loaded:!1,exports:{}};return t[n](a,a.exports,r),a.loaded=!0,a.exports}r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,{a:e}),e},r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.nmd=function(t){return t.paths=[],t.children||(t.children=[]),t},function(){"use strict";var t=ReactDOM,e=r.n(t),n=r(7363),o=r.n(n);function a(){return(a=Object.assign||function(t){for(var e=1;e=0||(o[r]=t[r]);return o}function i(t){var e=(0,n.useRef)(t),r=(0,n.useRef)((function(t){e.current&&e.current(t)}));return e.current=t,r.current}var u=function(t,e,r){return void 0===e&&(e=0),void 0===r&&(r=1),t>r?r:t0:t.buttons>0)&&v.current?d(f(v.current,t,h.current)):r(!1)},e=function(){return r(!1)};function r(r){var n=g.current,o=l(v.current),a=r?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",t),a(n?"touchend":"mouseup",e)}return[function(t){var e=t.nativeEvent,n=v.current;if(n&&(p(e),!function(t,e){return e&&!s(t)}(e,g.current)&&n)){if(s(e)){g.current=!0;var o=e.changedTouches||[];o.length&&(h.current=o[0].identifier)}n.focus(),d(f(n,e,h.current)),r(!0)}},function(t){var e=t.which||t.keyCode;e<37||e>40||(t.preventDefault(),b({left:39===e?.05:37===e?-.05:0,top:40===e?.05:38===e?-.05:0}))},r]}),[b,d]),y=m[0],x=m[1],_=m[2];return(0,n.useEffect)((function(){return _}),[_]),o().createElement("div",a({},u,{onTouchStart:y,onMouseDown:y,className:"react-colorful__interactive",ref:v,onKeyDown:x,tabIndex:0,role:"slider"}))})),d=function(t){return t.filter(Boolean).join(" ")},b=function(t){var e=t.color,r=t.left,n=t.top,a=void 0===n?.5:n,c=d(["react-colorful__pointer",t.className]);return o().createElement("div",{className:c,style:{top:100*a+"%",left:100*r+"%"}},o().createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:e}}))},h=function(t,e,r){return void 0===e&&(e=0),void 0===r&&(r=Math.pow(10,e)),Math.round(r*t)/r},g={grad:.9,turn:360,rad:360/(2*Math.PI)},m=function(t){return"#"===t[0]&&(t=t.substr(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}:{r:parseInt(t.substr(0,2),16),g:parseInt(t.substr(2,2),16),b:parseInt(t.substr(4,2),16),a:1}},y=function(t,e){return void 0===e&&(e="deg"),Number(t)*(g[e]||1)},x=function(t){var e=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return e?k({h:y(e[1],e[2]),s:Number(e[3]),l:Number(e[4]),a:void 0===e[5]?1:Number(e[5])/(e[6]?100:1)}):{h:0,s:0,v:0,a:1}},_=x,k=function(t){var e=t.s,r=t.l;return{h:t.h,s:(e*=(r<50?r:100-r)/100)>0?2*e/(r+e)*100:0,v:r+e,a:t.a}},j=function(t){var e=t.s,r=t.v,n=t.a,o=(200-e)*r/100;return{h:h(t.h),s:h(o>0&&o<200?e*r/100/(o<=100?o:200-o)*100:0),l:h(o/2),a:h(n,2)}},C=function(t){var e=j(t);return"hsl("+e.h+", "+e.s+"%, "+e.l+"%)"},w=function(t){var e=j(t);return"hsla("+e.h+", "+e.s+"%, "+e.l+"%, "+e.a+")"},O=function(t){var e=t.h,r=t.s,n=t.v,o=t.a;e=e/360*6,r/=100,n/=100;var a=Math.floor(e),c=n*(1-r),i=n*(1-(e-a)*r),u=n*(1-(1-e+a)*r),s=a%6;return{r:h(255*[n,i,c,c,u,n][s]),g:h(255*[u,n,n,i,c,c][s]),b:h(255*[c,c,u,n,n,i][s]),a:h(o,2)}},A=function(t){var e=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return e?M({h:y(e[1],e[2]),s:Number(e[3]),v:Number(e[4]),a:void 0===e[5]?1:Number(e[5])/(e[6]?100:1)}):{h:0,s:0,v:0,a:1}},E=A,S=function(t){var e=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return e?R({r:Number(e[1])/(e[2]?100/255:1),g:Number(e[3])/(e[4]?100/255:1),b:Number(e[5])/(e[6]?100/255:1),a:void 0===e[7]?1:Number(e[7])/(e[8]?100:1)}):{h:0,s:0,v:0,a:1}},H=S,P=function(t){var e=t.toString(16);return e.length<2?"0"+e:e},R=function(t){var e=t.r,r=t.g,n=t.b,o=t.a,a=Math.max(e,r,n),c=a-Math.min(e,r,n),i=c?a===e?(r-n)/c:a===r?2+(n-e)/c:4+(e-r)/c:0;return{h:h(60*(i<0?i+6:i)),s:h(a?c/a*100:0),v:h(a/255*100),a:o}},M=function(t){return{h:h(t.h),s:h(t.s),v:h(t.v),a:h(t.a,2)}},N=o().memo((function(t){var e=t.hue,r=t.onChange,n=d(["react-colorful__hue",t.className]);return o().createElement("div",{className:n},o().createElement(v,{onMove:function(t){r({h:360*t.left})},onKey:function(t){r({h:u(e+360*t.left,0,360)})},"aria-label":"Hue","aria-valuetext":h(e)},o().createElement(b,{className:"react-colorful__hue-pointer",left:e/360,color:C({h:e,s:100,v:100,a:1})})))})),B=o().memo((function(t){var e=t.hsva,r=t.onChange,n={backgroundColor:C({h:e.h,s:100,v:100,a:1})};return o().createElement("div",{className:"react-colorful__saturation",style:n},o().createElement(v,{onMove:function(t){r({s:100*t.left,v:100-100*t.top})},onKey:function(t){r({s:u(e.s+100*t.left,0,100),v:u(e.v-100*t.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+h(e.s)+"%, Brightness "+h(e.v)+"%"},o().createElement(b,{className:"react-colorful__saturation-pointer",top:1-e.v/100,left:e.s/100,color:C(e)})))})),z=function(t,e){if(t===e)return!0;for(var r in t)if(t[r]!==e[r])return!1;return!0},I=function(t,e){return t.replace(/\s/g,"")===e.replace(/\s/g,"")};function F(t,e,r){var o=i(r),a=(0,n.useState)((function(){return t.toHsva(e)})),c=a[0],u=a[1],s=(0,n.useRef)({color:e,hsva:c});(0,n.useEffect)((function(){if(!t.equal(e,s.current.color)){var r=t.toHsva(e);s.current={hsva:r,color:e},u(r)}}),[e,t]),(0,n.useEffect)((function(){var e;z(c,s.current.hsva)||t.equal(e=t.fromHsva(c),s.current.color)||(s.current={hsva:c,color:e},o(e))}),[c,t,o]);var l=(0,n.useCallback)((function(t){u((function(e){return Object.assign({},e,t)}))}),[]);return[c,l]}var T="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,U=new Map,L=function(t){T((function(){var e=t.current?t.current.ownerDocument:document;if(void 0!==e&&!U.has(e)){var n=e.createElement("style");n.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',U.set(e,n);var o=r.nc;o&&n.setAttribute("nonce",o),e.head.appendChild(n)}}),[])},D=function(t){var e=t.className,r=t.colorModel,i=t.color,u=void 0===i?r.defaultColor:i,s=t.onChange,l=c(t,["className","colorModel","color","onChange"]),f=(0,n.useRef)(null);L(f);var p=F(r,u,s),v=p[0],b=p[1],h=d(["react-colorful",e]);return o().createElement("div",a({},l,{ref:f,className:h}),o().createElement(B,{hsva:v,onChange:b}),o().createElement(N,{hue:v.h,onChange:b,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:function(t){return R(m(t))},fromHsva:function(t){return r=(e=O(t)).g,n=e.b,"#"+P(e.r)+P(r)+P(n);var e,r,n},equal:function(t,e){return t.toLowerCase()===e.toLowerCase()||z(m(t),m(e))}},J=function(t){return o().createElement(D,a({},t,{colorModel:W}))},Z=function(t){var e=t.className,r=t.hsva,n=t.onChange,a={backgroundImage:"linear-gradient(90deg, "+w(Object.assign({},r,{a:0}))+", "+w(Object.assign({},r,{a:1}))+")"},c=d(["react-colorful__alpha",e]);return o().createElement("div",{className:c},o().createElement("div",{className:"react-colorful__alpha-gradient",style:a}),o().createElement(v,{onMove:function(t){n({a:t.left})},onKey:function(t){n({a:u(r.a+t.left)})},"aria-label":"Alpha","aria-valuetext":h(100*r.a)+"%"},o().createElement(b,{className:"react-colorful__alpha-pointer",left:r.a,color:w(r)})))},q=function(t){var e=t.className,r=t.colorModel,i=t.color,u=void 0===i?r.defaultColor:i,s=t.onChange,l=c(t,["className","colorModel","color","onChange"]),f=(0,n.useRef)(null);L(f);var p=F(r,u,s),v=p[0],b=p[1],h=d(["react-colorful",e]);return o().createElement("div",a({},l,{ref:f,className:h}),o().createElement(B,{hsva:v,onChange:b}),o().createElement(N,{hue:v.h,onChange:b}),o().createElement(Z,{hsva:v,onChange:b,className:"react-colorful__last-control"}))},G={defaultColor:{h:0,s:0,l:0,a:1},toHsva:k,fromHsva:j,equal:z},$=function(t){return o().createElement(q,a({},t,{colorModel:G}))},K={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:x,fromHsva:w,equal:I},Q=function(t){return o().createElement(q,a({},t,{colorModel:K}))},V={defaultColor:{h:0,s:0,l:0},toHsva:function(t){return k({h:t.h,s:t.s,l:t.l,a:1})},fromHsva:function(t){return{h:(e=j(t)).h,s:e.s,l:e.l};var e},equal:z},Y=function(t){return o().createElement(D,a({},t,{colorModel:V}))},X={defaultColor:"hsl(0, 0%, 0%)",toHsva:_,fromHsva:C,equal:I},tt=function(t){return o().createElement(D,a({},t,{colorModel:X}))},et={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(t){return t},fromHsva:M,equal:z},rt=function(t){return o().createElement(q,a({},t,{colorModel:et}))},nt={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:A,fromHsva:function(t){var e=M(t);return"hsva("+e.h+", "+e.s+"%, "+e.v+"%, "+e.a+")"},equal:I},ot=function(t){return o().createElement(q,a({},t,{colorModel:nt}))},at={defaultColor:{h:0,s:0,v:0},toHsva:function(t){return{h:t.h,s:t.s,v:t.v,a:1}},fromHsva:function(t){var e=M(t);return{h:e.h,s:e.s,v:e.v}},equal:z},ct=function(t){return o().createElement(D,a({},t,{colorModel:at}))},it={defaultColor:"hsv(0, 0%, 0%)",toHsva:E,fromHsva:function(t){var e=M(t);return"hsv("+e.h+", "+e.s+"%, "+e.v+"%)"},equal:I},ut=function(t){return o().createElement(D,a({},t,{colorModel:it}))},st={defaultColor:{r:0,g:0,b:0,a:1},toHsva:R,fromHsva:O,equal:z},lt=function(t){return o().createElement(q,a({},t,{colorModel:st}))},ft={defaultColor:"rgba(0, 0, 0, 1)",toHsva:S,fromHsva:function(t){var e=O(t);return"rgba("+e.r+", "+e.g+", "+e.b+", "+e.a+")"},equal:I},pt=function(t){return o().createElement(q,a({},t,{colorModel:ft}))},vt={defaultColor:{r:0,g:0,b:0},toHsva:function(t){return R({r:t.r,g:t.g,b:t.b,a:1})},fromHsva:function(t){return{r:(e=O(t)).r,g:e.g,b:e.b};var e},equal:z},dt=function(t){return o().createElement(D,a({},t,{colorModel:vt}))},bt={defaultColor:"rgb(0, 0, 0)",toHsva:H,fromHsva:function(t){var e=O(t);return"rgb("+e.r+", "+e.g+", "+e.b+")"},equal:I},ht=function(t){return o().createElement(D,a({},t,{colorModel:bt}))},gt=r(9941),mt=t=>{const{onChange:e,color:r=""}=t,[o,a]=(0,n.useState)((()=>r)),c=(0,n.useCallback)((t=>{let r=t.target.value;2===r.length?r.includes("#")||r.includes("rg")||r.includes("hs")||(r="#"+r):3!==r.length&&6!==r.length||r.includes("#")||r.includes("rg")||r.includes("hs")||(r="#"+r),r=r.toLowerCase(),new RegExp(/(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/).test(r)&&e(r),a(r)}),[e]);(0,n.useEffect)((()=>{a(r)}),[r]);const i=(0,gt.ZP)({default:{colorPreviewWrapper:{backgroundImage:["RgbaColorPicker","RgbaStringColorPicker","HslaColorPicker","HslaStringColorPicker","HsvaColorPicker","HsvaStringColorPicker"].includes(t.pickerComponent)?'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")':"none"},colorPreview:{backgroundColor:o}}});return React.createElement("div",{className:"kirki-color-input-wrapper"},React.createElement("div",{className:"kirki-color-input-control"},!t.useHueMode&&React.createElement("div",{className:"kirki-color-preview-wrapper",style:i.colorPreviewWrapper},React.createElement("button",{type:"button",className:"kirki-color-preview",style:i.colorPreview})),React.createElement("input",{type:"text",value:o,className:"kirki-color-input",spellCheck:"false",onChange:c})))},yt=({colors:t,onClick:e})=>React.createElement("div",{className:"kirki-color-swatches"},t.map(((t,r)=>{const n=t&&t.color?t.color:t;return React.createElement("button",{key:r.toString(),type:"button",className:"kirki-color-swatch","data-kirki-color":n,style:{backgroundColor:n},onClick:()=>e(n)})}))),xt={grad:.9,turn:360,rad:360/(2*Math.PI)},_t=function(t){return"string"==typeof t?t.length>0:"number"==typeof t},kt=function(t,e,r){return void 0===e&&(e=0),void 0===r&&(r=Math.pow(10,e)),Math.round(r*t)/r+0},jt=function(t,e,r){return void 0===e&&(e=0),void 0===r&&(r=1),t>r?r:t>e?t:e},Ct=function(t){return(t=isFinite(t)?t%360:0)>0?t:t+360},wt=function(t){return{r:jt(t.r,0,255),g:jt(t.g,0,255),b:jt(t.b,0,255),a:jt(t.a)}},Ot=function(t){return{r:kt(t.r),g:kt(t.g),b:kt(t.b),a:kt(t.a,3)}},At=/^#([0-9a-f]{3,8})$/i,Et=function(t){var e=t.toString(16);return e.length<2?"0"+e:e},St=function(t){var e=t.r,r=t.g,n=t.b,o=t.a,a=Math.max(e,r,n),c=a-Math.min(e,r,n),i=c?a===e?(r-n)/c:a===r?2+(n-e)/c:4+(e-r)/c:0;return{h:60*(i<0?i+6:i),s:a?c/a*100:0,v:a/255*100,a:o}},Ht=function(t){var e=t.h,r=t.s,n=t.v,o=t.a;e=e/360*6,r/=100,n/=100;var a=Math.floor(e),c=n*(1-r),i=n*(1-(e-a)*r),u=n*(1-(1-e+a)*r),s=a%6;return{r:255*[n,i,c,c,u,n][s],g:255*[u,n,n,i,c,c][s],b:255*[c,c,u,n,n,i][s],a:o}},Pt=function(t){return{h:Ct(t.h),s:jt(t.s,0,100),l:jt(t.l,0,100),a:jt(t.a)}},Rt=function(t){return{h:kt(t.h),s:kt(t.s),l:kt(t.l),a:kt(t.a,3)}},Mt=function(t){return Ht((r=(e=t).s,{h:e.h,s:(r*=((n=e.l)<50?n:100-n)/100)>0?2*r/(n+r)*100:0,v:n+r,a:e.a}));var e,r,n},Nt=function(t){return{h:(e=St(t)).h,s:(o=(200-(r=e.s))*(n=e.v)/100)>0&&o<200?r*n/100/(o<=100?o:200-o)*100:0,l:o/2,a:e.a};var e,r,n,o},Bt=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,zt=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,It=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,Ft=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,Tt={string:[[function(t){var e=At.exec(t);return e?(t=e[1]).length<=4?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?kt(parseInt(t[3]+t[3],16)/255,2):1}:6===t.length||8===t.length?{r:parseInt(t.substr(0,2),16),g:parseInt(t.substr(2,2),16),b:parseInt(t.substr(4,2),16),a:8===t.length?kt(parseInt(t.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(t){var e=It.exec(t)||Ft.exec(t);return e?e[2]!==e[4]||e[4]!==e[6]?null:wt({r:Number(e[1])/(e[2]?100/255:1),g:Number(e[3])/(e[4]?100/255:1),b:Number(e[5])/(e[6]?100/255:1),a:void 0===e[7]?1:Number(e[7])/(e[8]?100:1)}):null},"rgb"],[function(t){var e=Bt.exec(t)||zt.exec(t);if(!e)return null;var r,n,o=Pt({h:(r=e[1],n=e[2],void 0===n&&(n="deg"),Number(r)*(xt[n]||1)),s:Number(e[3]),l:Number(e[4]),a:void 0===e[5]?1:Number(e[5])/(e[6]?100:1)});return Mt(o)},"hsl"]],object:[[function(t){var e=t.r,r=t.g,n=t.b,o=t.a,a=void 0===o?1:o;return _t(e)&&_t(r)&&_t(n)?wt({r:Number(e),g:Number(r),b:Number(n),a:Number(a)}):null},"rgb"],[function(t){var e=t.h,r=t.s,n=t.l,o=t.a,a=void 0===o?1:o;if(!_t(e)||!_t(r)||!_t(n))return null;var c=Pt({h:Number(e),s:Number(r),l:Number(n),a:Number(a)});return Mt(c)},"hsl"],[function(t){var e=t.h,r=t.s,n=t.v,o=t.a,a=void 0===o?1:o;if(!_t(e)||!_t(r)||!_t(n))return null;var c=function(t){return{h:Ct(t.h),s:jt(t.s,0,100),v:jt(t.v,0,100),a:jt(t.a)}}({h:Number(e),s:Number(r),v:Number(n),a:Number(a)});return Ht(c)},"hsv"]]},Ut=function(t,e){for(var r=0;r=.5},t.prototype.toHex=function(){return e=(t=Ot(this.rgba)).r,r=t.g,n=t.b,a=(o=t.a)<1?Et(kt(255*o)):"","#"+Et(e)+Et(r)+Et(n)+a;var t,e,r,n,o,a},t.prototype.toRgb=function(){return Ot(this.rgba)},t.prototype.toRgbString=function(){return e=(t=Ot(this.rgba)).r,r=t.g,n=t.b,(o=t.a)<1?"rgba("+e+", "+r+", "+n+", "+o+")":"rgb("+e+", "+r+", "+n+")";var t,e,r,n,o},t.prototype.toHsl=function(){return Rt(Nt(this.rgba))},t.prototype.toHslString=function(){return e=(t=Rt(Nt(this.rgba))).h,r=t.s,n=t.l,(o=t.a)<1?"hsla("+e+", "+r+"%, "+n+"%, "+o+")":"hsl("+e+", "+r+"%, "+n+"%)";var t,e,r,n,o},t.prototype.toHsv=function(){return t=St(this.rgba),{h:kt(t.h),s:kt(t.s),v:kt(t.v),a:kt(t.a,3)};var t},t.prototype.invert=function(){return Zt({r:255-(t=this.rgba).r,g:255-t.g,b:255-t.b,a:t.a});var t},t.prototype.saturate=function(t){return void 0===t&&(t=.1),Zt(Lt(this.rgba,t))},t.prototype.desaturate=function(t){return void 0===t&&(t=.1),Zt(Lt(this.rgba,-t))},t.prototype.grayscale=function(){return Zt(Lt(this.rgba,-1))},t.prototype.lighten=function(t){return void 0===t&&(t=.1),Zt(Wt(this.rgba,t))},t.prototype.darken=function(t){return void 0===t&&(t=.1),Zt(Wt(this.rgba,-t))},t.prototype.rotate=function(t){return void 0===t&&(t=15),this.hue(this.hue()+t)},t.prototype.alpha=function(t){return"number"==typeof t?Zt({r:(e=this.rgba).r,g:e.g,b:e.b,a:t}):kt(this.rgba.a,3);var e},t.prototype.hue=function(t){var e=Nt(this.rgba);return"number"==typeof t?Zt({h:t,s:e.s,l:e.l,a:e.a}):kt(e.h)},t.prototype.isEqual=function(t){return this.toHex()===Zt(t).toHex()},t}(),Zt=function(t){return t instanceof Jt?t:new Jt(t)},qt=t=>{const{color:e=""}=t,[r,o]=(0,n.useState)((()=>e));(0,n.useEffect)((()=>{o(e)}),[e]);const a=(0,gt.ZP)({default:{triggerButton:{backgroundImage:["RgbaColorPicker","RgbaStringColorPicker","HslaColorPicker","HslaStringColorPicker","HsvaColorPicker","HsvaStringColorPicker"].includes(t.pickerComponent)?'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")':"none"},colorPreview:{backgroundColor:r||"transparent"}}});return React.createElement("div",{className:"kirki-trigger-circle-wrapper"},React.createElement("button",{type:"button",className:"kirki-trigger-circle",onClick:t.togglePickerHandler,style:a.triggerButton},React.createElement("div",{className:"kirki-color-preview",style:a.colorPreview})))},Gt=t=>{const{control:e,customizerSetting:r,useHueMode:o,pickerComponent:a,choices:c}=t,i=()=>o?0:"#000000",u=t=>(t=(t=t||i())<0?0:t)>360?360:t,s=t=>""===t?"":o?u(t):((t,e,r)=>{let n,o,a,c;switch(e){case"HexColorPicker":c="string"==typeof t&&t.includes("#")?t:Zt(t).toHex();break;case"RgbColorPicker":c="string"==typeof t&&t.includes("rgb(")?t:Zt(t).toRgbString();break;case"RgbStringColorPicker":c="string"==typeof t&&t.includes("rgba")?t:Zt(t).toRgbString();break;case"RgbaColorPicker":n=Zt(t).toRgb(),n.a<1?c="string"==typeof t&&t.includes("rgba")?t:Zt(t).toRgbString():(c=Zt(t).toRgbString(),c.includes("rgb")&&!c.includes("rgba")&&(c=c.replace("rgb","rgba"),c=c.replace(")",", 1)")));break;case"RgbaStringColorPicker":n=Zt(t).toRgb(),1!=n.a||r?(c=Zt(t).toRgbString(),c.includes("rgb")&&!c.includes("rgba")&&(c=c.replace("rgb","rgba"),c=c.replace(")",", 1)"))):c="string"==typeof t&&t.includes("#")?t:Zt(t).toHex();break;case"HslColorPicker":case"HslStringColorPicker":c="string"==typeof t&&t.includes("hsl(")?t:Zt(t).toHslString();break;case"HslaColorPicker":case"HslaStringColorPicker":c=Zt(t).toHslString(),c.includes("hsl")&&!c.includes("hsla")&&(c=c.replace("hsl","hsla"),c=c.replace(")",", 1)"));break;case"HsvColorPicker":case"HsvStringColorPicker":o=Zt(t).toHsv(),c="hsv("+o.h+", "+o.s+"%, "+o.v+"%)";break;case"HsvaColorPicker":case"HsvaStringColorPicker":a=Zt(t).toHsv(),c="hsva("+a.h+", "+a.s+"%, "+a.v+"%, "+a.a+")";break;default:c=Zt(t).toHex()}return c})(t,a,c.formComponent).replace(";",""),l=t=>(t=t||i(),o?{h:t,s:100,l:50}:((t,e)=>{let r;switch(e){case"HexColorPicker":default:r=Zt(t).toHex();break;case"RgbColorPicker":r=Zt(t).toRgb(),delete r.a;break;case"RgbStringColorPicker":r=Zt(t).toRgbString();break;case"RgbaColorPicker":r=Zt(t).toRgb();break;case"RgbaStringColorPicker":r=Zt(t).toRgbString(),r.includes("rgb")&&!r.includes("rgba")&&(r=r.replace("rgb","rgba"),r=r.replace(")",", 1)"));break;case"HslColorPicker":r=Zt(t).toHsl(),delete r.a;break;case"HslStringColorPicker":r=Zt(t).toHslString();break;case"HslaColorPicker":r=Zt(t).toHsl();break;case"HslaStringColorPicker":r=Zt(t).toHslString(),r.includes("hsl")&&!r.includes("hsla")&&(r=r.replace("hsl","hsla"),r=r.replace(")",", 1)"));break;case"HsvColorPicker":r=Zt(t).toHsv(),delete r.a;break;case"HsvStringColorPicker":const e=Zt(t).toHsv();r="hsv("+e.h+", "+e.s+"%, "+e.v+"%)";break;case"HsvaColorPicker":r=Zt(t).toHsv();break;case"HsvaStringColorPicker":const n=Zt(t).toHsv();r="hsva("+n.h+", "+n.s+"%, "+n.v+"%, "+n.a+")"}return r})(t,a)),[f,p]=(0,n.useState)((()=>s(t.value))),[v,d]=(0,n.useState)((()=>l(t.value)));let b=f,h=v;e.updateComponentState=t=>{const e=s(t);let r=!1;r="string"==typeof e||o?e!==f:JSON.stringify(e)!==JSON.stringify(b),r&&p(e);const n=l(t);let a=!1;a="string"==typeof n||o?n!==v:JSON.stringify(n)!==JSON.stringify(h),a&&d(n)};const g=t=>{o?(t=t.h||0===t.h?t.h:t,t=u(t)):t=(t=>""===t?"":((t,e,r)=>{let n,o,a,c;switch(e){case"HexColorPicker":default:c="string"==typeof t&&t.includes("#")?t:Zt(t).toHex();break;case"RgbColorPicker":c=Zt(t).toRgb(),delete c.a;break;case"RgbStringColorPicker":c="string"==typeof t&&t.includes("rgb(")?t:Zt(t).toRgbString();break;case"RgbaColorPicker":n=Zt(t).toRgb(),c=n;break;case"RgbaStringColorPicker":n=Zt(t).toRgb(),n.a<1?c="string"==typeof t&&t.includes("rgba")?t:Zt(t).toRgbString():r?(c=Zt(t).toRgbString(),c.includes("rgb")&&!c.includes("rgba")&&(c=c.replace("rgb","rgba"),c=c.replace(")",", 1)"))):c="string"==typeof t&&t.includes("#")?t:Zt(t).toHex();break;case"HslColorPicker":c=Zt(t).toHsl(),delete c.a;break;case"HslStringColorPicker":c="string"==typeof t&&t.includes("hsl(")?t:Zt(t).toHslString();break;case"HslaColorPicker":c=Zt(t).toHsl();break;case"HslaStringColorPicker":c=Zt(t).toHslString(),c.includes("hsl")&&!c.includes("hsla")&&(c=c.replace("hsl","hsla"),c=c.replace(")",", 1)"));break;case"HsvColorPicker":c=Zt(t).toHsv(),delete c.a;break;case"HsvStringColorPicker":o=Zt(t).toHsv(),c="hsv("+o.h+", "+o.s+"%, "+o.v+"%)";break;case"HsvaColorPicker":c=Zt(t).toHsv();break;case"HsvaStringColorPicker":a=Zt(t).toHsv(),c="hsva("+a.h+", "+a.s+"%, "+a.v+"%, "+a.a+")"}return c})(t,a,c.formComponent))(t),r.set(t)},m=""!==t.default&&void 0!==t.default?t.default:t.value;let y=React.createElement("span",{className:"customize-control-title",dangerouslySetInnerHTML:{__html:t.label}}),x=React.createElement("span",{className:"description customize-control-description",dangerouslySetInnerHTML:{__html:t.description}});y=React.createElement("label",{className:"kirki-control-label"},t.label?y:"",t.description?x:""),y=t.label||t.description?y:"";const _=(0,n.useRef)(null),k=(0,n.useRef)(null),j=(0,n.useRef)(null),[C,w]=(0,n.useState)(!1),O="default"!==c.labelStyle,[A,E]=(0,n.useState)({}),S=()=>{let t={};if(!O)return t;let r=window.getComputedStyle(e.container[0].parentNode).paddingLeft;r=2*parseInt(r,10),t.width=e.container[0].parentNode.getBoundingClientRect().width-r;const n=-1*(e.container[0].offsetLeft-9);return t.left=n+"px",t},H=()=>{4===f.length&&f.includes("#")&&p(Zt(f).toHex())},P=()=>{C&&(w(!1),setTimeout(H,200))};let R;switch(a){case"HexColorPicker":default:R=J;break;case"RgbColorPicker":R=dt;break;case"RgbStringColorPicker":R=ht;break;case"RgbaColorPicker":R=lt;break;case"RgbaStringColorPicker":R=pt;break;case"HueColorPicker":case"HslColorPicker":R=Y;break;case"HslStringColorPicker":R=tt;break;case"HslaColorPicker":R=$;break;case"HslaStringColorPicker":R=Q;break;case"HsvColorPicker":R=ct;break;case"HsvStringColorPicker":R=ut;break;case"HsvaColorPicker":R=rt;break;case"HsvaStringColorPicker":R=ot}if(M=()=>{E(S())},(0,n.useEffect)((()=>{const t=t=>{M()};return window.addEventListener("resize",t,!0),()=>{window.removeEventListener("resize",t,!0)}}),[M]),((t,e)=>{(0,n.useEffect)((()=>{const r=r=>{t.current&&(t.current.contains(r.target)||e())};return document.addEventListener("focus",r,!0),()=>{document.removeEventListener("focus",r,!0)}}),[t,e])})(_,P),((t,e,r)=>{(0,n.useEffect)((()=>{let n=!1,o=!1;const a=a=>{n&&!o&&e.current&&!e.current.contains(a.target)&&t.current&&!t.current.contains(a.target)&&r()},c=r=>{n=e.current&&t.current,o=e.current&&e.current.contains(r.target)||t.current&&t.current.contains(r.target)};return document.addEventListener("mousedown",c),document.addEventListener("touchstart",c),document.addEventListener("click",a),()=>{document.removeEventListener("mousedown",c),document.removeEventListener("touchstart",c),document.removeEventListener("click",a)}}),[e,t,r])})(k,j,P),jQuery.wp&&jQuery.wp.wpColorPicker){const t=jQuery.wp.wpColorPicker.prototype.options.palettes;if(Array.isArray(t)){if(t.length<8)for(let e=t.length;e<=8;e++)t.push(c.swatches[e]);c.swatches=t}}var M;const N=React.createElement(React.Fragment,null,y,React.createElement("div",{className:"customize-control-notifications-container",ref:t.setNotificationContainer}));let B=o?"kirki-control-form use-hue-mode":"kirki-control-form";B+=" has-"+c.labelStyle+"-label-style";let z=C?a+" colorPickerContainer is-open":a+" colorPickerContainer";const I=React.createElement(React.Fragment,null,React.createElement("button",{type:"button",ref:j,className:"kirki-control-reset",onClick:()=>{m||(b="",h=""),g(m)},style:{display:C?"flex":"none"}},React.createElement("i",{className:"dashicons dashicons-image-rotate"})),React.createElement(qt,{pickerComponent:a,useHueMode:o,color:o?Zt({h:f,s:100,l:50}).toHex():f,isPickerOpen:C,togglePickerHandler:()=>{C?P():C||(E(S()),H(),w(!0))}}));let F;switch(c.labelStyle){case"tooltip":F=React.createElement(React.Fragment,null,I,!C&&React.createElement("div",{className:"kirki-label-tooltip"},N));break;case"top":F=React.createElement(React.Fragment,null,N,I);break;default:F=React.createElement(React.Fragment,null,React.createElement("div",{className:"kirki-control-cols"},React.createElement("div",{className:"kirki-control-left-col"},N),React.createElement("div",{className:"kirki-control-right-col"},I)))}return React.createElement(React.Fragment,null,React.createElement("div",{className:B,ref:_,tabIndex:"1"},F,React.createElement("div",{ref:k,className:z,style:A},!o&&React.createElement(yt,{colors:c.swatches,onClick:t=>{g(t)}}),React.createElement(R,{color:v,onChange:e=>{t.onChange&&t.onChange(e),h=e,g(e)}}),React.createElement(mt,{pickerComponent:a,useHueMode:o,color:f,onChange:t=>{b=t,g(t)}}))))};function $t(){return $t=Object.assign||function(t){for(var e=1;e{t.updateComponentState(e)}))},updateComponentState:()=>{},destroy:function(){e().unmountComponentAtNode(this.container[0]),wp.customize.Control.prototype.destroy&&wp.customize.Control.prototype.destroy.call(this)}});wp.customize.controlConstructor["kirki-react-colorful"]=Kt}()}(); -//# sourceMappingURL=control.js.map \ No newline at end of file +!function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{};function t(e){return e&&e.__esModule?e.default:e}var r={},n={},o=e.parcelRequire4303;null==o&&((o=function(e){if(e in r)return r[e].exports;if(e in n){var t=n[e];delete n[e];var o={id:e,exports:{}};return r[e]=o,t.call(o.exports,o,o.exports),o.exports}var a=new Error("Cannot find module '"+e+"'");throw a.code="MODULE_NOT_FOUND",a}).register=function(e,t){n[e]=t},e.parcelRequire4303=o),o.register("7HKs8",(function(e,t){var r=o("8ThvE"),n=o("jjS2x"),a=t&&!t.nodeType&&t,i=a&&e&&!e.nodeType&&e,c=i&&i.exports===a?r.Buffer:void 0,u=(c?c.isBuffer:void 0)||n;e.exports=u})),o.register("8ThvE",(function(e,t){var r=o("lyxRX"),n="object"==typeof self&&self&&self.Object===Object&&self,a=r||n||Function("return this")();e.exports=a})),o.register("lyxRX",(function(t,r){var n="object"==typeof e&&e&&e.Object===Object&&e;t.exports=n})),o.register("jjS2x",(function(e,t){e.exports=function(){return!1}})),o.register("7vc1R",(function(e,t){var r=o("lyxRX"),n=t&&!t.nodeType&&t,a=n&&e&&!e.nodeType&&e,i=a&&a.exports===n&&r.process,c=function(){try{var e=a&&a.require&&a.require("util").types;return e||i&&i.binding&&i.binding("util")}catch(e){}}();e.exports=c})),o.register("4vs1M",(function(e,t){var r=o("8ThvE"),n=t&&!t.nodeType&&t,a=n&&e&&!e.nodeType&&e,i=a&&a.exports===n?r.Buffer:void 0,c=i?i.allocUnsafe:void 0;e.exports=function(e,t){if(t)return e.slice();var r=e.length,n=c?c(r):new e.constructor(r);return e.copy(n),n}}));var a;function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0||(o[r]=e[r]);return o}function v(e){var t=l.useRef(e),r=l.useRef((function(e){t.current&&t.current(e)}));return t.current=e,r.current}l=React;var d=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=1),e>r?r:e0:e.buttons>0)&&a.current?i(h(a.current,e,u.current)):r(!1)},t=function(){return r(!1)};function r(r){var n=d.current,o=b(a.current),i=r?o.addEventListener:o.removeEventListener;i(n?"touchmove":"mousemove",e),i(n?"touchend":"mouseup",t)}return[function(e){var t,n=e.nativeEvent,o=a.current;if(o&&(g(n),t=n,(!d.current||p(t))&&o)){if(p(n)){d.current=!0;var c=n.changedTouches||[];c.length&&(u.current=c[0].identifier)}o.focus(),i(h(o,n,u.current)),r(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),c({left:39===t?.05:37===t?-.05:0,top:40===t?.05:38===t?-.05:0}))},r]}),[c,i]),m=y[0],_=y[1],k=y[2];return l.useEffect((function(){return k}),[k]),t(l).createElement("div",s({},o,{onTouchStart:m,onMouseDown:m,className:"react-colorful__interactive",ref:a,onKeyDown:_,tabIndex:0,role:"slider"}))})),m=function(e){return e.filter(Boolean).join(" ")},_=function(e){var r=e.color,n=e.left,o=e.top,a=void 0===o?.5:o,i=m(["react-colorful__pointer",e.className]);return t(l).createElement("div",{className:i,style:{top:100*a+"%",left:100*n+"%"}},t(l).createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:r}}))},k=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=Math.pow(10,t)),Math.round(r*e)/r},j={grad:.9,turn:360,rad:360/(2*Math.PI)},C=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},w=function(e,t){return void 0===t&&(t="deg"),Number(e)*(j[t]||1)},A=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?O({h:w(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},E=A,O=function(e){var t=e.s,r=e.l;return{h:e.h,s:(t*=(r<50?r:100-r)/100)>0?2*t/(r+t)*100:0,v:r+t,a:e.a}},S=function(e){var t=e.s,r=e.v,n=e.a,o=(200-t)*r/100;return{h:k(e.h),s:k(o>0&&o<200?t*r/100/(o<=100?o:200-o)*100:0),l:k(o/2),a:k(n,2)}},H=function(e){var t=S(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},R=function(e){var t=S(e);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},x=function(e){var t=e.h,r=e.s,n=e.v,o=e.a;t=t/360*6,r/=100,n/=100;var a=Math.floor(t),i=n*(1-r),c=n*(1-(t-a)*r),u=n*(1-(1-t+a)*r),l=a%6;return{r:k(255*[n,c,i,i,u,n][l]),g:k(255*[u,n,n,c,i,i][l]),b:k(255*[i,i,u,n,n,c][l]),a:k(o,2)}},P=function(e){var t=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?T({h:w(t[1],t[2]),s:Number(t[3]),v:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},M=P,N=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?I({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},B=N,z=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},I=function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=Math.max(t,r,n),i=a-Math.min(t,r,n),c=i?a===t?(r-n)/i:a===r?2+(n-t)/i:4+(t-r)/i:0;return{h:k(60*(c<0?c+6:c)),s:k(a?i/a*100:0),v:k(a/255*100),a:o}},T=function(e){return{h:k(e.h),s:k(e.s),v:k(e.v),a:k(e.a,2)}},F=t(l).memo((function(e){var r=e.hue,n=e.onChange,o=m(["react-colorful__hue",e.className]);return t(l).createElement("div",{className:o},t(l).createElement(y,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:d(r+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":k(r)},t(l).createElement(_,{className:"react-colorful__hue-pointer",left:r/360,color:H({h:r,s:100,v:100,a:1})})))})),U=t(l).memo((function(e){var r=e.hsva,n=e.onChange,o={backgroundColor:H({h:r.h,s:100,v:100,a:1})};return t(l).createElement("div",{className:"react-colorful__saturation",style:o},t(l).createElement(y,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:d(r.s+100*e.left,0,100),v:d(r.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+k(r.s)+"%, Brightness "+k(r.v)+"%"},t(l).createElement(_,{className:"react-colorful__saturation-pointer",top:1-r.v/100,left:r.s/100,color:H(r)})))})),L=function(e,t){if(e===t)return!0;for(var r in e)if(e[r]!==t[r])return!1;return!0},D=function(e,t){return e.replace(/\s/g,"")===t.replace(/\s/g,"")};function W(e,t,r){var n=v(r),o=l.useState((function(){return e.toHsva(t)})),a=o[0],i=o[1],c=l.useRef({color:t,hsva:a});l.useEffect((function(){if(!e.equal(t,c.current.color)){var r=e.toHsva(t);c.current={hsva:r,color:t},i(r)}}),[t,e]),l.useEffect((function(){var t;L(a,c.current.hsva)||e.equal(t=e.fromHsva(a),c.current.color)||(c.current={hsva:a,color:t},n(t))}),[a,e,n]);var u=l.useCallback((function(e){i((function(t){return Object.assign({},t,e)}))}),[]);return[a,u]}var J,q="undefined"!=typeof window?l.useLayoutEffect:l.useEffect,K=new Map,$=function(e){q((function(){var t=e.current?e.current.ownerDocument:document;if(void 0!==t&&!K.has(t)){var r=t.createElement("style");r.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',K.set(t,r);var n=J||("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0);n&&r.setAttribute("nonce",n),t.head.appendChild(r)}}),[])},G=function(e){var r=e.className,n=e.colorModel,o=e.color,a=void 0===o?n.defaultColor:o,i=e.onChange,c=f(e,["className","colorModel","color","onChange"]),u=l.useRef(null);$(u);var v=W(n,a,i),d=v[0],p=v[1],b=m(["react-colorful",r]);return t(l).createElement("div",s({},c,{ref:u,className:b}),t(l).createElement(U,{hsva:d,onChange:p}),t(l).createElement(F,{hue:d.h,onChange:p,className:"react-colorful__last-control"}))},Z={defaultColor:"000",toHsva:function(e){return I(C(e))},fromHsva:function(e){var t,r,n;return r=(t=x(e)).g,n=t.b,"#"+z(t.r)+z(r)+z(n)},equal:function(e,t){return e.toLowerCase()===t.toLowerCase()||L(C(e),C(t))}},Q=function(e){return t(l).createElement(G,s({},e,{colorModel:Z}))},V=function(e){var r=e.className,n=e.hsva,o=e.onChange,a={backgroundImage:"linear-gradient(90deg, "+R(Object.assign({},n,{a:0}))+", "+R(Object.assign({},n,{a:1}))+")"},i=m(["react-colorful__alpha",r]);return t(l).createElement("div",{className:i},t(l).createElement("div",{className:"react-colorful__alpha-gradient",style:a}),t(l).createElement(y,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:d(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":k(100*n.a)+"%"},t(l).createElement(_,{className:"react-colorful__alpha-pointer",left:n.a,color:R(n)})))},Y=function(e){var r=e.className,n=e.colorModel,o=e.color,a=void 0===o?n.defaultColor:o,i=e.onChange,c=f(e,["className","colorModel","color","onChange"]),u=l.useRef(null);$(u);var v=W(n,a,i),d=v[0],p=v[1],b=m(["react-colorful",r]);return t(l).createElement("div",s({},c,{ref:u,className:b}),t(l).createElement(U,{hsva:d,onChange:p}),t(l).createElement(F,{hue:d.h,onChange:p}),t(l).createElement(V,{hsva:d,onChange:p,className:"react-colorful__last-control"}))},X={defaultColor:{h:0,s:0,l:0,a:1},toHsva:O,fromHsva:S,equal:L},ee=function(e){return t(l).createElement(Y,s({},e,{colorModel:X}))},te={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:A,fromHsva:R,equal:D},re=function(e){return t(l).createElement(Y,s({},e,{colorModel:te}))},ne={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return O({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){var t;return{h:(t=S(e)).h,s:t.s,l:t.l}},equal:L},oe=function(e){return t(l).createElement(G,s({},e,{colorModel:ne}))},ae={defaultColor:"hsl(0, 0%, 0%)",toHsva:E,fromHsva:H,equal:D},ie=function(e){return t(l).createElement(G,s({},e,{colorModel:ae}))},ce={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:T,equal:L},ue=function(e){return t(l).createElement(Y,s({},e,{colorModel:ce}))},le={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:P,fromHsva:function(e){var t=T(e);return"hsva("+t.h+", "+t.s+"%, "+t.v+"%, "+t.a+")"},equal:D},se=function(e){return t(l).createElement(Y,s({},e,{colorModel:le}))},fe={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var t=T(e);return{h:t.h,s:t.s,v:t.v}},equal:L},ve=function(e){return t(l).createElement(G,s({},e,{colorModel:fe}))},de={defaultColor:"hsv(0, 0%, 0%)",toHsva:M,fromHsva:function(e){var t=T(e);return"hsv("+t.h+", "+t.s+"%, "+t.v+"%)"},equal:D},pe=function(e){return t(l).createElement(G,s({},e,{colorModel:de}))},be={defaultColor:{r:0,g:0,b:0,a:1},toHsva:I,fromHsva:x,equal:L},he=function(e){return t(l).createElement(Y,s({},e,{colorModel:be}))},ge={defaultColor:"rgba(0, 0, 0, 1)",toHsva:N,fromHsva:function(e){var t=x(e);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:D},ye=function(e){return t(l).createElement(Y,s({},e,{colorModel:ge}))},me={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return I({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){var t;return{r:(t=x(e)).r,g:t.g,b:t.b}},equal:L},_e=function(e){return t(l).createElement(G,s({},e,{colorModel:me}))},ke={defaultColor:"rgb(0, 0, 0)",toHsva:B,fromHsva:function(e){var t=x(e);return"rgb("+t.r+", "+t.g+", "+t.b+")"},equal:D},je=function(e){return t(l).createElement(G,s({},e,{colorModel:ke}))},Ce={};Object.defineProperty(Ce,"__esModule",{value:!0}),Ce.ReactCSS=Ce.loop=Ce.handleActive=Ce.handleHover=Ce.hover=void 0;var we={};Object.defineProperty(we,"__esModule",{value:!0}),we.flattenNames=void 0;var Ae,Ee={};Ae=(dr=o("8ThvE")).Symbol;var Oe={},Se=Object.prototype,He=Se.hasOwnProperty,Re=Se.toString,xe=Ae?Ae.toStringTag:void 0;Oe=function(e){var t=He.call(e,xe),r=e[xe];try{e[xe]=void 0;var n=!0}catch(e){}var o=Re.call(e);return n&&(t?e[xe]=r:delete e[xe]),o};var Pe={},Me=Object.prototype.toString;Pe=function(e){return Me.call(e)};var Ne=Ae?Ae.toStringTag:void 0;Ee=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":Ne&&Ne in Object(e)?Oe(e):Pe(e)};var Be={},ze=Array.isArray;Be=ze;var Ie={};Ie=function(e){return null!=e&&"object"==typeof e};var Te,Fe=co((function(e){return"string"==typeof e||!Be(e)&&Ie(e)&&"[object String]"==Ee(e)})),Ue={},Le={};var De=function(e){return function(t,r,n){for(var o=-1,a=Object(t),i=n(t),c=i.length;c--;){var u=i[e?c:++o];if(!1===r(a[u],u,a))break}return t}}();Le=De;var We={},Je={},qe={};qe=function(e,t){for(var r=-1,n=Array(e);++r-1&&e%1==0&&e-1&&e%1==0&&e<=9007199254740991};var ot={};ot["[object Float32Array]"]=ot["[object Float64Array]"]=ot["[object Int8Array]"]=ot["[object Int16Array]"]=ot["[object Int32Array]"]=ot["[object Uint8Array]"]=ot["[object Uint8ClampedArray]"]=ot["[object Uint16Array]"]=ot["[object Uint32Array]"]=!0,ot["[object Arguments]"]=ot["[object Array]"]=ot["[object ArrayBuffer]"]=ot["[object Boolean]"]=ot["[object DataView]"]=ot["[object Date]"]=ot["[object Error]"]=ot["[object Function]"]=ot["[object Map]"]=ot["[object Number]"]=ot["[object Object]"]=ot["[object RegExp]"]=ot["[object Set]"]=ot["[object String]"]=ot["[object WeakMap]"]=!1,tt=function(e){return Ie(e)&&nt(e.length)&&!!ot[Ee(e)]};var at={};at=function(e){return function(t){return e(t)}};var it=(ta=o("7vc1R"))&&ta.isTypedArray,ct=it?at(it):tt;rt=ct;var ut=Object.prototype.hasOwnProperty;Je=function(e,t){var r=Be(e),n=!r&&Ke(e),o=!r&&!n&&Ye(e),a=!r&&!n&&!o&&rt(e),i=r||n||o||a,c=i?qe(e.length,String):[],u=c.length;for(var l in e)!t&&!ut.call(e,l)||i&&("length"==l||o&&("offset"==l||"parent"==l)||a&&("buffer"==l||"byteLength"==l||"byteOffset"==l)||Xe(l,u))||c.push(l);return c};var lt={},st={},ft=Object.prototype;st=function(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ft)};var vt={},dt={};var pt=(dt=function(e,t){return function(r){return e(t(r))}})(Object.keys,Object);vt=pt;var bt=Object.prototype.hasOwnProperty;lt=function(e){if(!st(e))return vt(e);var t=[];for(var r in Object(e))bt.call(e,r)&&"constructor"!=r&&t.push(r);return t};var ht={},gt={},yt={};yt=function(e){var t=void 0===e?"undefined":u(e);return null!=e&&("object"==t||"function"==t)};gt=function(e){if(!yt(e))return!1;var t=Ee(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},ht=function(e){return null!=e&&nt(e.length)&&!gt(e)},We=function(e){return ht(e)?Je(e):lt(e)},Ue=function(e,t){return e&&Le(e,t,We)};var mt,_t={};mt=function(e){return e},_t=function(e){return"function"==typeof e?e:mt};var kt=co(Te=function(e,t){return e&&Ue(e,_t(t))}),jt={},Ct=dt(Object.getPrototypeOf,Object);jt=Ct;var wt=Function.prototype,At=Object.prototype,Et=wt.toString,Ot=At.hasOwnProperty,St=Et.call(Object);var Ht=co((function(e){if(!Ie(e)||"[object Object]"!=Ee(e))return!1;var t=jt(e);if(null===t)return!0;var r=Ot.call(t,"constructor")&&t.constructor;return"function"==typeof r&&r instanceof r&&Et.call(r)==St})),Rt={};Rt=function(e,t){for(var r=-1,n=null==e?0:e.length,o=Array(n);++r-1};var Wt;function Jt(e){var t=-1,r=null==e?0:e.length;for(this.clear();++tc))return!1;var l=a.get(e),s=a.get(t);if(l&&s)return l==t&&s==e;var f=-1,v=!0,d=2&r?new Ur:void 0;for(a.set(e,t),a.set(t,e);++f0&&void 0!==arguments[0]?arguments[0]:[],r=[];return(0,io.default)(t,(function(t){Array.isArray(t)?e(t).map((function(e){return r.push(e)})):(0,Ht.default)(t)?(0,kt.default)(t,(function(e,t){!0===e&&r.push(t),r.push(t+"-"+e)})):(0,Fe.default)(t)&&r.push(t)})),r};we.default=uo;var lo=Ta(we),so={};Object.defineProperty(so,"__esModule",{value:!0}),so.mergeClasses=void 0;var fo=sa(Te),vo={},po={};po=function(e,t){for(var r=-1,n=null==e?0:e.length;++r1&&void 0!==arguments[1]?arguments[1]:[],r=e.default&&(0,ua.default)(e.default)||{};return t.map((function(t){var n=e[t];return n&&(0,fo.default)(n,(function(e,t){r[t]||(r[t]={}),r[t]=la({},r[t],n[t])})),t})),r};so.default=fa;var va=Ta(so),da={};Object.defineProperty(da,"__esModule",{value:!0}),da.autoprefix=void 0;var pa,ba=(pa=Te)&&pa.__esModule?pa:{default:pa},ha=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:"span";return function(r){function n(){var r,o,a;Ca(this,n);for(var i=arguments.length,c=Array(i),u=0;u1&&void 0!==arguments[1]?arguments[1]:"span";return function(r){function n(){var r,o,a;xa(this,n);for(var i=arguments.length,c=Array(i),u=0;u1&&void 0!==arguments[1])||arguments[1];r[e]=t};return 0===e&&n("first-child"),e===t-1&&n("last-child"),(0===e||e%2==0)&&n("even"),1===Math.abs(e%2)&&n("odd"),n("nth-child",e),r};var Ia=Ta(za);function Ta(e){return e&&e.__esModule?e:{default:e}}Ce.hover=Oa.default,Ce.handleHover=Oa.default,Ce.handleActive=Ba.default,Ce.loop=Ia.default;var Fa=Ce.ReactCSS=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n0:"number"==typeof e},Ja=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=Math.pow(10,t)),Math.round(r*e)/r+0},qa=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=1),e>r?r:e>t?e:t},Ka=function(e){return(e=isFinite(e)?e%360:0)>0?e:e+360},$a=function(e){return{r:qa(e.r,0,255),g:qa(e.g,0,255),b:qa(e.b,0,255),a:qa(e.a)}},Ga=function(e){return{r:Ja(e.r),g:Ja(e.g),b:Ja(e.b),a:Ja(e.a,3)}},Za=/^#([0-9a-f]{3,8})$/i,Qa=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},Va=function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=Math.max(t,r,n),i=a-Math.min(t,r,n),c=i?a===t?(r-n)/i:a===r?2+(n-t)/i:4+(t-r)/i:0;return{h:60*(c<0?c+6:c),s:a?i/a*100:0,v:a/255*100,a:o}},Ya=function(e){var t=e.h,r=e.s,n=e.v,o=e.a;t=t/360*6,r/=100,n/=100;var a=Math.floor(t),i=n*(1-r),c=n*(1-(t-a)*r),u=n*(1-(1-t+a)*r),l=a%6;return{r:255*[n,c,i,i,u,n][l],g:255*[u,n,n,c,i,i][l],b:255*[i,i,u,n,n,c][l],a:o}},Xa=function(e){return{h:Ka(e.h),s:qa(e.s,0,100),l:qa(e.l,0,100),a:qa(e.a)}},ei=function(e){return{h:Ja(e.h),s:Ja(e.s),l:Ja(e.l),a:Ja(e.a,3)}},ti=function(e){var t,r,n;return Ya((r=(t=e).s,{h:t.h,s:(r*=((n=t.l)<50?n:100-n)/100)>0?2*r/(n+r)*100:0,v:n+r,a:t.a}))},ri=function(e){var t,r,n,o;return{h:(t=Va(e)).h,s:(o=(200-(r=t.s))*(n=t.v)/100)>0&&o<200?r*n/100/(o<=100?o:200-o)*100:0,l:o/2,a:t.a}},ni=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,oi=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,ai=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,ii=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,ci={string:[[function(e){var t=Za.exec(e);return t?(e=t[1]).length<=4?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?Ja(parseInt(e[3]+e[3],16)/255,2):1}:6===e.length||8===e.length?{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:8===e.length?Ja(parseInt(e.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(e){var t=ai.exec(e)||ii.exec(e);return t?t[2]!==t[4]||t[4]!==t[6]?null:$a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(e){var t=ni.exec(e)||oi.exec(e);if(!t)return null;var r,n,o=Xa({h:(r=t[1],n=t[2],void 0===n&&(n="deg"),Number(r)*(Da[n]||1)),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)});return ti(o)},"hsl"]],object:[[function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=void 0===o?1:o;return Wa(t)&&Wa(r)&&Wa(n)?$a({r:Number(t),g:Number(r),b:Number(n),a:Number(a)}):null},"rgb"],[function(e){var t=e.h,r=e.s,n=e.l,o=e.a,a=void 0===o?1:o;if(!Wa(t)||!Wa(r)||!Wa(n))return null;var i=Xa({h:Number(t),s:Number(r),l:Number(n),a:Number(a)});return ti(i)},"hsl"],[function(e){var t=e.h,r=e.s,n=e.v,o=e.a,a=void 0===o?1:o;if(!Wa(t)||!Wa(r)||!Wa(n))return null;var i,c=(i={h:Number(t),s:Number(r),v:Number(n),a:Number(a)},{h:Ka(i.h),s:qa(i.s,0,100),v:qa(i.v,0,100),a:qa(i.a)});return Ya(c)},"hsv"]]},ui=function(e,t){for(var r=0;r=.5},e.prototype.toHex=function(){var e,t,r,n,o,a;return t=(e=Ga(this.rgba)).r,r=e.g,n=e.b,a=(o=e.a)<1?Qa(Ja(255*o)):"","#"+Qa(t)+Qa(r)+Qa(n)+a},e.prototype.toRgb=function(){return Ga(this.rgba)},e.prototype.toRgbString=function(){var e,t,r,n,o;return t=(e=Ga(this.rgba)).r,r=e.g,n=e.b,(o=e.a)<1?"rgba("+t+", "+r+", "+n+", "+o+")":"rgb("+t+", "+r+", "+n+")"},e.prototype.toHsl=function(){return ei(ri(this.rgba))},e.prototype.toHslString=function(){var e,t,r,n,o;return t=(e=ei(ri(this.rgba))).h,r=e.s,n=e.l,(o=e.a)<1?"hsla("+t+", "+r+"%, "+n+"%, "+o+")":"hsl("+t+", "+r+"%, "+n+"%)"},e.prototype.toHsv=function(){var e;return e=Va(this.rgba),{h:Ja(e.h),s:Ja(e.s),v:Ja(e.v),a:Ja(e.a,3)}},e.prototype.invert=function(){var e;return pi({r:255-(e=this.rgba).r,g:255-e.g,b:255-e.b,a:e.a})},e.prototype.saturate=function(e){return void 0===e&&(e=.1),pi(si(this.rgba,e))},e.prototype.desaturate=function(e){return void 0===e&&(e=.1),pi(si(this.rgba,-e))},e.prototype.grayscale=function(){return pi(si(this.rgba,-1))},e.prototype.lighten=function(e){return void 0===e&&(e=.1),pi(vi(this.rgba,e))},e.prototype.darken=function(e){return void 0===e&&(e=.1),pi(vi(this.rgba,-e))},e.prototype.rotate=function(e){return void 0===e&&(e=15),this.hue(this.hue()+e)},e.prototype.alpha=function(e){var t;return"number"==typeof e?pi({r:(t=this.rgba).r,g:t.g,b:t.b,a:e}):Ja(this.rgba.a,3)},e.prototype.hue=function(e){var t=ri(this.rgba);return"number"==typeof e?pi({h:e,s:t.s,l:t.l,a:t.a}):Ja(t.h)},e.prototype.isEqual=function(e){return this.toHex()===pi(e).toHex()},e}(),pi=function(e){return e instanceof di?e:new di(e)},bi=function(e,t){var r;switch(t){case"HexColorPicker":default:r=pi(e).toHex();break;case"RgbColorPicker":delete(r=pi(e).toRgb()).a;break;case"RgbStringColorPicker":r=pi(e).toRgbString();break;case"RgbaColorPicker":r=pi(e).toRgb();break;case"RgbaStringColorPicker":(r=pi(e).toRgbString()).includes("rgb")&&!r.includes("rgba")&&(r=(r=r.replace("rgb","rgba")).replace(")",", 1)"));break;case"HslColorPicker":delete(r=pi(e).toHsl()).a;break;case"HslStringColorPicker":r=pi(e).toHslString();break;case"HslaColorPicker":r=pi(e).toHsl();break;case"HslaStringColorPicker":(r=pi(e).toHslString()).includes("hsl")&&!r.includes("hsla")&&(r=(r=r.replace("hsl","hsla")).replace(")",", 1)"));break;case"HsvColorPicker":delete(r=pi(e).toHsv()).a;break;case"HsvStringColorPicker":var n=pi(e).toHsv();r="hsv("+n.h+", "+n.s+"%, "+n.v+"%)";break;case"HsvaColorPicker":r=pi(e).toHsv();break;case"HsvaStringColorPicker":var o=pi(e).toHsv();r="hsva("+o.h+", "+o.s+"%, "+o.v+"%, "+o.a+")"}return r},hi=function(e,t,r){var n,o,a;switch(t){case"HexColorPicker":default:a="string"==typeof e&&e.includes("#")?e:pi(e).toHex();break;case"RgbColorPicker":delete(a=pi(e).toRgb()).a;break;case"RgbStringColorPicker":a="string"==typeof e&&e.includes("rgb(")?e:pi(e).toRgbString();break;case"RgbaColorPicker":a=pi(e).toRgb();break;case"RgbaStringColorPicker":pi(e).toRgb().a<1?a="string"==typeof e&&e.includes("rgba")?e:pi(e).toRgbString():r?(a=pi(e).toRgbString()).includes("rgb")&&!a.includes("rgba")&&(a=(a=a.replace("rgb","rgba")).replace(")",", 1)")):a="string"==typeof e&&e.includes("#")?e:pi(e).toHex();break;case"HslColorPicker":delete(a=pi(e).toHsl()).a;break;case"HslStringColorPicker":a="string"==typeof e&&e.includes("hsl(")?e:pi(e).toHslString();break;case"HslaColorPicker":a=pi(e).toHsl();break;case"HslaStringColorPicker":(a=pi(e).toHslString()).includes("hsl")&&!a.includes("hsla")&&(a=(a=a.replace("hsl","hsla")).replace(")",", 1)"));break;case"HsvColorPicker":delete(a=pi(e).toHsv()).a;break;case"HsvStringColorPicker":a="hsv("+(n=pi(e).toHsv()).h+", "+n.s+"%, "+n.v+"%)";break;case"HsvaColorPicker":a=pi(e).toHsv();break;case"HsvaStringColorPicker":a="hsva("+(o=pi(e).toHsv()).h+", "+o.s+"%, "+o.v+"%, "+o.a+")"}return a},gi=function(e,t,r){var n,o,a;switch(t){case"HexColorPicker":a="string"==typeof e&&e.includes("#")?e:pi(e).toHex();break;case"RgbColorPicker":a="string"==typeof e&&e.includes("rgb(")?e:pi(e).toRgbString();break;case"RgbStringColorPicker":a="string"==typeof e&&e.includes("rgba")?e:pi(e).toRgbString();break;case"RgbaColorPicker":pi(e).toRgb().a<1?a="string"==typeof e&&e.includes("rgba")?e:pi(e).toRgbString():(a=pi(e).toRgbString()).includes("rgb")&&!a.includes("rgba")&&(a=(a=a.replace("rgb","rgba")).replace(")",", 1)"));break;case"RgbaStringColorPicker":1!=pi(e).toRgb().a||r?(a=pi(e).toRgbString()).includes("rgb")&&!a.includes("rgba")&&(a=(a=a.replace("rgb","rgba")).replace(")",", 1)")):a="string"==typeof e&&e.includes("#")?e:pi(e).toHex();break;case"HslColorPicker":case"HslStringColorPicker":a="string"==typeof e&&e.includes("hsl(")?e:pi(e).toHslString();break;case"HslaColorPicker":case"HslaStringColorPicker":(a=pi(e).toHslString()).includes("hsl")&&!a.includes("hsla")&&(a=(a=a.replace("hsl","hsla")).replace(")",", 1)"));break;case"HsvColorPicker":case"HsvStringColorPicker":a="hsv("+(n=pi(e).toHsv()).h+", "+n.s+"%, "+n.v+"%)";break;case"HsvaColorPicker":case"HsvaStringColorPicker":a="hsva("+(o=pi(e).toHsv()).h+", "+o.s+"%, "+o.v+"%, "+o.a+")";break;default:a=pi(e).toHex()}return a},yi=function(e,t,r){l.useEffect((function(){var n=!1,o=!1,a=function(a){n&&!o&&t.current&&!t.current.contains(a.target)&&e.current&&!e.current.contains(a.target)&&r()},i=function(r){n=t.current&&e.current,o=t.current&&t.current.contains(r.target)||e.current&&e.current.contains(r.target)};return document.addEventListener("mousedown",i),document.addEventListener("touchstart",i),document.addEventListener("click",a),function(){document.removeEventListener("mousedown",i),document.removeEventListener("touchstart",i),document.removeEventListener("click",a)}}),[t,e,r])},mi=function(e,t){l.useEffect((function(){var r=function(r){e.current&&(e.current.contains(r.target)||t())};return document.addEventListener("focus",r,!0),function(){document.removeEventListener("focus",r,!0)}}),[e,t])},_i=function(e){l.useEffect((function(){var t=function(t){e()};return window.addEventListener("resize",t,!0),function(){window.removeEventListener("resize",t,!0)}}),[e])},ki=function(e){var r=e.color,n=void 0===r?"":r,o=c(l.useState((function(){return n})),2),a=o[0],i=o[1];l.useEffect((function(){i(n)}),[n]);var u=t(Ce)({default:{triggerButton:{backgroundImage:'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")'},colorPreview:{backgroundColor:a||"transparent"}}});return React.createElement("div",{className:"kirki-trigger-circle-wrapper"},React.createElement("button",{type:"button",className:"kirki-trigger-circle",onClick:e.togglePickerHandler,style:u.triggerButton},React.createElement("div",{className:"kirki-color-preview",style:u.colorPreview})))},ji=function(e){var t=e.control,r=e.customizerSetting,n=e.useHueMode,o=e.pickerComponent,a=e.choices,i=function(){return n?0:"#000000"},u=function(e){return(e=(e=e||i())<0?0:e)>360?360:e},s=function(e){return""===e?"":n?u(e):gi(e,o,a.formComponent).replace(";","")},f=function(e){return e=e||i(),n?{h:e,s:100,l:50}:bi(e,o)},v=c(l.useState((function(){return s(e.value)})),2),d=v[0],p=v[1],b=c(l.useState((function(){return f(e.value)})),2),h=b[0],g=b[1],y=d,m=h;t.updateComponentState=function(e){var t=s(e);("string"==typeof t||n?t!==d:JSON.stringify(t)!==JSON.stringify(y))&&p(t);var r=f(e);("string"==typeof r||n?r!==h:JSON.stringify(r)!==JSON.stringify(m))&&g(r)};var _=function(e){n?(e=e.h||0===e.h?e.h:e,e=u(e)):e=function(e){return""===e?"":hi(e,o,a.formComponent)}(e),r.set(e)},k=""!==e.default&&void 0!==e.default?e.default:e.value,j=React.createElement("span",{className:"customize-control-title",dangerouslySetInnerHTML:{__html:e.label}}),C=React.createElement("span",{className:"description customize-control-description",dangerouslySetInnerHTML:{__html:e.description}});j=React.createElement("label",{className:"kirki-control-label"},e.label?j:"",e.description?C:""),j=e.label||e.description?j:"";var w,A=l.useRef(null),E=l.useRef(null),O=l.useRef(null),S=c(l.useState(!1),2),H=S[0],R=S[1],x="default"!==a.labelStyle,P=c(l.useState({}),2),M=P[0],N=P[1],B=function(){var e={};if(!x)return e;var r=window.getComputedStyle(t.container[0].parentNode).paddingLeft;r=2*parseInt(r,10),e.width=t.container[0].parentNode.getBoundingClientRect().width-r;var n=-1*(t.container[0].offsetLeft-9);return e.left=n+"px",e},z=function(){4===d.length&&d.includes("#")&&p(pi(d).toHex())},I=function(){H||(N(B()),z(),R(!0))},T=function(){H&&(R(!1),setTimeout(z,200))};switch(o){case"HexColorPicker":default:w=Q;break;case"RgbColorPicker":w=_e;break;case"RgbStringColorPicker":w=je;break;case"RgbaColorPicker":w=he;break;case"RgbaStringColorPicker":w=ye;break;case"HueColorPicker":case"HslColorPicker":w=oe;break;case"HslStringColorPicker":w=ie;break;case"HslaColorPicker":w=ee;break;case"HslaStringColorPicker":w=re;break;case"HsvColorPicker":w=ve;break;case"HsvStringColorPicker":w=pe;break;case"HsvaColorPicker":w=ue;break;case"HsvaStringColorPicker":w=se}if(_i((function(){N(B())})),mi(A,T),yi(E,O,T),jQuery.wp&&jQuery.wp.wpColorPicker){var F=jQuery.wp.wpColorPicker.prototype.options.palettes;if(Array.isArray(F)){if(F.length<8)for(var U=F.length;U<=8;U++)F.push(a.swatches[U]);a.swatches=F}}var L=React.createElement(React.Fragment,null,j,React.createElement("div",{className:"customize-control-notifications-container",ref:e.setNotificationContainer})),D=n?"kirki-control-form use-hue-mode":"kirki-control-form";D+=" has-"+a.labelStyle+"-label-style";var W,J=H?o+" colorPickerContainer is-open":o+" colorPickerContainer",q=React.createElement(React.Fragment,null,React.createElement("button",{type:"button",ref:O,className:"kirki-control-reset",onClick:function(){k||(y="",m=""),_(k)},style:{display:H?"flex":"none"}},React.createElement("i",{className:"dashicons dashicons-image-rotate"})),React.createElement(ki,{pickerComponent:o,useHueMode:n,color:n?pi({h:d,s:100,l:50}).toHex():d,isPickerOpen:H,togglePickerHandler:function(){H?T():I()}}));switch(a.labelStyle){case"tooltip":W=React.createElement(React.Fragment,null,q,!H&&React.createElement("div",{className:"kirki-label-tooltip"},L));break;case"top":W=React.createElement(React.Fragment,null,L,q);break;default:W=React.createElement(React.Fragment,null,React.createElement("div",{className:"kirki-control-cols"},React.createElement("div",{className:"kirki-control-left-col"},L),React.createElement("div",{className:"kirki-control-right-col"},q)))}return React.createElement(React.Fragment,null,React.createElement("div",{className:D,ref:A,tabIndex:"1"},W,React.createElement("div",{ref:E,className:J,style:M},!n&&React.createElement(La,{colors:a.swatches,onClick:function(e){_(e)}}),React.createElement(w,{color:h,onChange:function(t){e.onChange&&e.onChange(t),m=t,_(t)}}),React.createElement(Ua,{pickerComponent:o,useHueMode:n,color:d,onChange:function(e){y=e,_(e)}}))))};function Ci(){return Ci=Object.assign||function(e){for(var t=1;t{const o=o=>"number"==typeof o||"string"==typeof o&&!isNaN(o)&&!isNaN(parseFloat(o));wp.hooks.addFilter("kirkiPostMessageStylesOutput","kirki",((a,e,l,r)=>{if("kirki-react-colorful"!==r)return a;if("string"==typeof e||"number"==typeof e)return a;const s=l.prefix?l.prefix:"",p=l.suffix?l.suffix:"";return a+=l.element+"{"+l.property+": "+s+(a=>(alphaEnabled=!1,a.r||a.g||a.b?(colorMode=void 0!==a.a?"rgba":"rgb",alphaEnabled="rgba"===colorMode||alphaEnabled,pos1=a.r,pos2=a.g,pos3=a.b,pos4="rgba"===colorMode?a.a:1):(a.h||a.s)&&(pos1=a.h,a.l?(colorMode=void 0!==a.a?"hsla":"hsl",pos2=o(a.l)?a.l+"%":a.l):a.v&&(colorMode=void 0!==a.a?"hvla":"hvl",pos2=o(a.v)?a.v+"%":a.v),alphaEnabled="hsla"===colorMode||"hsva"===colorMode||alphaEnabled,pos3=o(a)?a.s+"%":a.s,pos4=alphaEnabled?a.a:1),alphaEnabled?formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+", "+pos4+")":formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+")",formattedValue))(e)+p+";\t\t}",a}))})(); -//# sourceMappingURL=preview.js.map \ No newline at end of file +!function(){var o;o=function(o){return"number"==typeof o||"string"==typeof o&&!isNaN(o)&&!isNaN(parseFloat(o))},wp.hooks.addFilter("kirkiPostMessageStylesOutput","kirki",(function(a,e,r,l){if("kirki-react-colorful"!==l)return a;if("string"==typeof e||"number"==typeof e)return a;var s=r.prefix?r.prefix:"",p=r.suffix?r.suffix:"";return a+=r.element+"{"+r.property+": "+s+function(a){return alphaEnabled=!1,a.r||a.g||a.b?(colorMode=void 0!==a.a?"rgba":"rgb",alphaEnabled="rgba"===colorMode||alphaEnabled,pos1=a.r,pos2=a.g,pos3=a.b,pos4="rgba"===colorMode?a.a:1):(a.h||a.s)&&(pos1=a.h,a.l?(colorMode=void 0!==a.a?"hsla":"hsl",pos2=o(a.l)?a.l+"%":a.l):a.v&&(colorMode=void 0!==a.a?"hvla":"hvl",pos2=o(a.v)?a.v+"%":a.v),alphaEnabled="hsla"===colorMode||"hsva"===colorMode||alphaEnabled,pos3=o(a)?a.s+"%":a.s,pos4=alphaEnabled?a.a:1),alphaEnabled?formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+", "+pos4+")":formattedValue=colorMode+"("+pos1+", "+pos2+", "+pos3+")",formattedValue}(e)+p+";\t\t}",a}))}(); +//# sourceMappingURL=preview.js.map diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/Control/ReactColorful.php b/functions/kirki/packages/kirki-framework/control-react-colorful/src/Control/ReactColorful.php index b294ee1..c308354 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/Control/ReactColorful.php +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/Control/ReactColorful.php @@ -42,7 +42,7 @@ class ReactColorful extends Base { * @since 1.0 * @var string */ - public static $control_ver = '1.0.14'; + public static $control_ver = '1.0.15'; /** * The color mode. @@ -97,6 +97,10 @@ class ReactColorful extends Base { // Value. $this->json['value'] = empty( $this->value() ) ? '' : ( 'hue' === $this->mode ? absint( $this->value() ) : $this->value() ); + if ( is_string( $this->json['value'] ) ) { + $this->json['value'] = strtolower( $this->json['value'] ); + } + // Mode. $this->json['mode'] = $this->mode; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/Field/ReactColorful.php b/functions/kirki/packages/kirki-framework/control-react-colorful/src/Field/ReactColorful.php index 5c60516..f01ce0e 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/Field/ReactColorful.php +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/Field/ReactColorful.php @@ -217,6 +217,8 @@ class ReactColorful extends Field { */ public static function sanitize_color_string( $value ) { + $value = strtolower( $value ); + /** * This pattern will check and match 3/6/8-character hex, rgb, rgba, hsl, hsla, hsv, and hsva colors. * diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulCircle.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulCircle.js index 844704e..3df99e9 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulCircle.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulCircle.js @@ -2,49 +2,48 @@ import { useState, useEffect } from "react"; import reactCSS from "reactcss"; const KirkiReactColorfulCircle = (props) => { - const { color = "" } = props; - const [value, setValue] = useState(() => color); + const { color = "" } = props; + const [value, setValue] = useState(() => color); - // Update the local state when `color` property value is changed. - useEffect(() => { - // We don't need to convert the color since it's using the customizer value. - setValue(color); - }, [color]); + // Update the local state when `color` property value is changed. + useEffect(() => { + // We don't need to convert the color since it's using the customizer value. + setValue(color); + }, [color]); - const pickersWithAlpha = [ - "RgbaColorPicker", - "RgbaStringColorPicker", - "HslaColorPicker", - "HslaStringColorPicker", - "HsvaColorPicker", - "HsvaStringColorPicker", - ]; + const pickersWithAlpha = [ + "RgbaColorPicker", + "RgbaStringColorPicker", + "HslaColorPicker", + "HslaStringColorPicker", + "HsvaColorPicker", + "HsvaStringColorPicker", + ]; - const styles = reactCSS({ - default: { - triggerButton: { - backgroundImage: pickersWithAlpha.includes(props.pickerComponent) - ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")' - : "none", - }, - colorPreview: { - backgroundColor: value ? value : "transparent", - }, - }, - }); + const styles = reactCSS({ + default: { + triggerButton: { + backgroundImage: + 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")', + }, + colorPreview: { + backgroundColor: value ? value : "transparent", + }, + }, + }); - return ( -
- -
- ); + return ( +
+ +
+ ); }; export default KirkiReactColorfulCircle; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js index 2d5ccc7..e879e48 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulInput.js @@ -2,92 +2,92 @@ import { useState, useEffect, useCallback } from "react"; import reactCSS from "reactcss"; const KirkiReactColorfulInput = (props) => { - const { onChange, color = "" } = props; - const [value, setValue] = useState(() => color); + const { onChange, color = "" } = props; + const [value, setValue] = useState(() => color); - const handleChange = useCallback( - (e) => { - let val = e.target.value; + const handleChange = useCallback( + (e) => { + let val = e.target.value; - if (2 === val.length) { - if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) { - val = "#" + val; - } - } else if (3 === val.length || 6 === val.length) { - if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) { - val = "#" + val; - } - } + if (2 === val.length) { + if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) { + val = "#" + val; + } + } else if (3 === val.length || 6 === val.length) { + if (!val.includes("#") && !val.includes("rg") && !val.includes("hs")) { + val = "#" + val; + } + } - val = val.toLowerCase(); + val = val.toLowerCase(); - // Thank you: https://regexr.com/39cgj - const pattern = new RegExp( - /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/ - ); + // Thank you: https://regexr.com/39cgj + const pattern = new RegExp( + /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|hsl)a?\([^\)]*\)/ + ); - if (pattern.test(val)) { - onChange(val); // Run onChange handler passed by `KirkiReactColorfulForm` component. - } + if ("" === val || pattern.test(val)) { + onChange(val); // Run onChange handler passed by `KirkiReactColorfulForm` component. + } - setValue(val); - }, - [onChange] - ); + setValue(val); + }, + [onChange] + ); - // Update the local state when `color` property value is changed. - useEffect(() => { - // We don't need to convert the color since it's already handled in parent component. - setValue(color); - }, [color]); + // Update the local state when `color` property value is changed. + useEffect(() => { + // We don't need to convert the color since it's already handled in parent component. + setValue(color); + }, [color]); - const pickersWithAlpha = [ - "RgbaColorPicker", - "RgbaStringColorPicker", - "HslaColorPicker", - "HslaStringColorPicker", - "HsvaColorPicker", - "HsvaStringColorPicker", - ]; + const pickersWithAlpha = [ + "RgbaColorPicker", + "RgbaStringColorPicker", + "HslaColorPicker", + "HslaStringColorPicker", + "HsvaColorPicker", + "HsvaStringColorPicker", + ]; - const styles = reactCSS({ - default: { - colorPreviewWrapper: { - backgroundImage: pickersWithAlpha.includes(props.pickerComponent) - ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")' - : "none", - }, - colorPreview: { - backgroundColor: value, - }, - }, - }); + const styles = reactCSS({ + default: { + colorPreviewWrapper: { + backgroundImage: pickersWithAlpha.includes(props.pickerComponent) + ? 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==")' + : "none", + }, + colorPreview: { + backgroundColor: value, + }, + }, + }); - return ( -
-
- {!props.useHueMode && ( -
- -
- )} - -
-
- ); + return ( +
+
+ {!props.useHueMode && ( +
+ +
+ )} + +
+
+ ); }; export default KirkiReactColorfulInput; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js index 2d48e46..2fa1c22 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/components/KirkiReactColorfulSwatches.js @@ -1,22 +1,22 @@ const KirkiReactColorfulSwatches = ({ colors, onClick }) => { - return ( -
- {colors.map((clr, index) => { + return ( +
+ {colors.map((clr, index) => { const color = clr && clr.color ? clr.color : clr; - return ( - - ); - })} -
- ); + return ( + + ); + })} +
+ ); }; export default KirkiReactColorfulSwatches; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js index 270a286..0f00ea1 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useClickOutside.js @@ -5,41 +5,41 @@ import { useEffect } from "react"; * It was improved version of https://usehooks.com/useOnClickOutside/ */ const useClickOutside = (pickerRef, resetRef, handler) => { - useEffect(() => { - let startedWhenMounted = false; - let startedInside = false; + useEffect(() => { + let startedWhenMounted = false; + let startedInside = false; - const listener = (event) => { - // Do nothing if `mousedown` or `touchstart` started either inside resetRef or pickerRef element - if (!startedWhenMounted || startedInside) return; + const listener = (event) => { + // Do nothing if `mousedown` or `touchstart` started either inside resetRef or pickerRef element + if (!startedWhenMounted || startedInside) return; - // Do nothing if clicking resetRef's element or descendent elements - if (!resetRef.current || resetRef.current.contains(event.target)) return; + // Do nothing if clicking resetRef's element or descendent elements + if (!resetRef.current || resetRef.current.contains(event.target)) return; - // Do nothing if clicking pickerRef's element or descendent elements - if (!pickerRef.current || pickerRef.current.contains(event.target)) - return; + // Do nothing if clicking pickerRef's element or descendent elements + if (!pickerRef.current || pickerRef.current.contains(event.target)) + return; - handler(); - }; + handler(); + }; - const validateEventStart = (event) => { - startedWhenMounted = resetRef.current && pickerRef.current; - startedInside = - (resetRef.current && resetRef.current.contains(event.target)) || - (pickerRef.current && pickerRef.current.contains(event.target)); - }; + const validateEventStart = (event) => { + startedWhenMounted = resetRef.current && pickerRef.current; + startedInside = + (resetRef.current && resetRef.current.contains(event.target)) || + (pickerRef.current && pickerRef.current.contains(event.target)); + }; - document.addEventListener("mousedown", validateEventStart); - document.addEventListener("touchstart", validateEventStart); - document.addEventListener("click", listener); + document.addEventListener("mousedown", validateEventStart); + document.addEventListener("touchstart", validateEventStart); + document.addEventListener("click", listener); - return () => { - document.removeEventListener("mousedown", validateEventStart); - document.removeEventListener("touchstart", validateEventStart); - document.removeEventListener("click", listener); - }; - }, [resetRef, pickerRef, handler]); + return () => { + document.removeEventListener("mousedown", validateEventStart); + document.removeEventListener("touchstart", validateEventStart); + document.removeEventListener("click", listener); + }; + }, [resetRef, pickerRef, handler]); }; export default useClickOutside; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js index 2b137c9..6955cb3 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/hooks/useWindowResize.js @@ -1,17 +1,17 @@ import { useEffect } from "react"; const useWindowResize = (handler) => { - useEffect(() => { - const listener = (e) => { - handler(); - }; + useEffect(() => { + const listener = (e) => { + handler(); + }; - window.addEventListener("resize", listener, true); + window.addEventListener("resize", listener, true); - return () => { - window.removeEventListener("resize", listener, true); - }; - }, [handler]); + return () => { + window.removeEventListener("resize", listener, true); + }; + }, [handler]); }; export default useWindowResize; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js index bfd1b12..9981532 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForCustomizer.js @@ -20,23 +20,26 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => { * 1. When formComponent is defined with HexColorPicker as the value. * 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way). */ - case 'HexColorPicker': - convertedValue = 'string' === typeof value && value.includes('#') ? value : colord(value).toHex(); + case "HexColorPicker": + convertedValue = + "string" === typeof value && value.includes("#") + ? value + : colord(value).toHex(); break; - case 'RgbColorPicker': + case "RgbColorPicker": convertedValue = colord(value).toRgb(); delete convertedValue.a; break; - case 'RgbStringColorPicker': + case "RgbStringColorPicker": convertedValue = - "string" === typeof value && value.includes("rgb(") - ? value - : colord(value).toRgbString(); + "string" === typeof value && value.includes("rgb(") + ? value + : colord(value).toRgbString(); break; - case 'RgbaColorPicker': + case "RgbaColorPicker": rgba = colord(value).toRgb(); convertedValue = rgba; break; @@ -46,62 +49,65 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => { * 1. When formComponent is defined with RgbaColorPicker as the value. * 2. When formComponent is not defined but the "alpha" choice is set to true. */ - case 'RgbaStringColorPicker': + case "RgbaStringColorPicker": rgba = colord(value).toRgb(); if (rgba.a < 1) { convertedValue = - "string" === typeof value && value.includes("rgba") - ? value - : colord(value).toRgbString(); + "string" === typeof value && value.includes("rgba") + ? value + : colord(value).toRgbString(); } else { // When it uses the 2nd condition above, then the expected value is "hex". if (!formComponent) { convertedValue = - "string" === typeof value && value.includes("#") - ? value - : colord(value).toHex(); + "string" === typeof value && value.includes("#") + ? value + : colord(value).toHex(); } else { convertedValue = colord(value).toRgbString(); // Force to set the alpha channel value. - if (convertedValue.includes('rgb') && !convertedValue.includes('rgba')) { - convertedValue = convertedValue.replace('rgb', 'rgba'); - convertedValue = convertedValue.replace(')', ', 1)'); + if ( + convertedValue.includes("rgb") && + !convertedValue.includes("rgba") + ) { + convertedValue = convertedValue.replace("rgb", "rgba"); + convertedValue = convertedValue.replace(")", ", 1)"); } } } break; - case 'HslColorPicker': + case "HslColorPicker": convertedValue = colord(value).toHsl(); delete convertedValue.a; break; - case 'HslStringColorPicker': + case "HslStringColorPicker": convertedValue = - "string" === typeof value && value.includes("hsl(") - ? value - : colord(value).toHslString(); + "string" === typeof value && value.includes("hsl(") + ? value + : colord(value).toHslString(); break; - case 'HslaColorPicker': + case "HslaColorPicker": convertedValue = colord(value).toHsl(); break; - case 'HslaStringColorPicker': + case "HslaStringColorPicker": convertedValue = colord(value).toHslString(); // Force to set the alpha channel value. - if (convertedValue.includes('hsl') && !convertedValue.includes('hsla')) { - convertedValue = convertedValue.replace('hsl', 'hsla'); - convertedValue = convertedValue.replace(')', ', 1)'); + if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) { + convertedValue = convertedValue.replace("hsl", "hsla"); + convertedValue = convertedValue.replace(")", ", 1)"); } break; - case 'HsvColorPicker': + case "HsvColorPicker": convertedValue = colord(value).toHsv(); delete convertedValue.a; break; @@ -110,25 +116,34 @@ const convertColorForCustomizer = (value, pickerComponent, formComponent) => { * The colord library doesn't provide .toHsvString() method yet. * This manual value-building will apply to "HsvStringColorPicker" and "HsvaStringColorPicker" stuff below. */ - case 'HsvStringColorPicker': + case "HsvStringColorPicker": hsv = colord(value).toHsv(); - convertedValue = 'hsv(' + hsv.h + ', ' + hsv.s + '%, ' + hsv.v + '%)'; + convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)"; break; - case 'HsvaColorPicker': + case "HsvaColorPicker": convertedValue = colord(value).toHsv(); break; - case 'HsvaStringColorPicker': + case "HsvaStringColorPicker": hsva = colord(value).toHsv(); - convertedValue = 'hsva(' + hsva.h + ', ' + hsva.s + '%, ' + hsva.v + '%, ' + hsva.a + ')'; + convertedValue = + "hsva(" + + hsva.h + + ", " + + hsva.s + + "%, " + + hsva.v + + "%, " + + hsva.a + + ")"; break; default: convertedValue = - "string" === typeof value && value.includes("#") - ? value - : colord(value).toHex(); + "string" === typeof value && value.includes("#") + ? value + : colord(value).toHex(); break; } diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js index d4ac464..45b5e66 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForInput.js @@ -9,174 +9,174 @@ import { colord } from "colord"; * @returns {string} The converted value. */ const convertColorForInput = (value, pickerComponent, formComponent) => { - let rgba; - let hsv; - let hsva; - let convertedValue; + let rgba; + let hsv; + let hsva; + let convertedValue; - switch (pickerComponent) { - /** - * The HexColorPicker is used by these condition: - * 1. When formComponent is defined with HexColorPicker as the value. - * 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way). - */ - case "HexColorPicker": - convertedValue = - "string" === typeof value && value.includes("#") - ? value - : colord(value).toHex(); - break; + switch (pickerComponent) { + /** + * The HexColorPicker is used by these condition: + * 1. When formComponent is defined with HexColorPicker as the value. + * 2. When formComponent is not defined but the "alpha" choice is not set or set to false (the old way). + */ + case "HexColorPicker": + convertedValue = + "string" === typeof value && value.includes("#") + ? value + : colord(value).toHex(); + break; - case "RgbColorPicker": - convertedValue = - "string" === typeof value && value.includes("rgb(") - ? value - : colord(value).toRgbString(); - break; + case "RgbColorPicker": + convertedValue = + "string" === typeof value && value.includes("rgb(") + ? value + : colord(value).toRgbString(); + break; - case "RgbStringColorPicker": - convertedValue = - "string" === typeof value && value.includes("rgba") - ? value - : colord(value).toRgbString(); - break; + case "RgbStringColorPicker": + convertedValue = + "string" === typeof value && value.includes("rgba") + ? value + : colord(value).toRgbString(); + break; - case "RgbaColorPicker": - rgba = colord(value).toRgb(); + case "RgbaColorPicker": + rgba = colord(value).toRgb(); - if (rgba.a < 1) { - convertedValue = - "string" === typeof value && value.includes("rgba") - ? value - : colord(value).toRgbString(); - } else { - convertedValue = colord(value).toRgbString(); + if (rgba.a < 1) { + convertedValue = + "string" === typeof value && value.includes("rgba") + ? value + : colord(value).toRgbString(); + } else { + convertedValue = colord(value).toRgbString(); - // Force to set the alpha value. - if ( - convertedValue.includes("rgb") && - !convertedValue.includes("rgba") - ) { - convertedValue = convertedValue.replace("rgb", "rgba"); - convertedValue = convertedValue.replace(")", ", 1)"); - } - } + // Force to set the alpha value. + if ( + convertedValue.includes("rgb") && + !convertedValue.includes("rgba") + ) { + convertedValue = convertedValue.replace("rgb", "rgba"); + convertedValue = convertedValue.replace(")", ", 1)"); + } + } - break; + break; - /** - * The RgbaStringColorPicker is used by these condition: - * 1. When formComponent is defined with RgbaColorPicker as the value. - * 2. When formComponent is not defined but the "alpha" choice is set to true. - */ - case "RgbaStringColorPicker": - rgba = colord(value).toRgb(); + /** + * The RgbaStringColorPicker is used by these condition: + * 1. When formComponent is defined with RgbaColorPicker as the value. + * 2. When formComponent is not defined but the "alpha" choice is set to true. + */ + case "RgbaStringColorPicker": + rgba = colord(value).toRgb(); - // When it uses the 2nd condition above, then the expected value is "hex". - if (rgba.a == 1 && !formComponent) { - convertedValue = - "string" === typeof value && value.includes("#") - ? value - : colord(value).toHex(); - } else { - convertedValue = colord(value).toRgbString(); + // When it uses the 2nd condition above, then the expected value is "hex". + if (rgba.a == 1 && !formComponent) { + convertedValue = + "string" === typeof value && value.includes("#") + ? value + : colord(value).toHex(); + } else { + convertedValue = colord(value).toRgbString(); - // Force to set the alpha value. - if ( - convertedValue.includes("rgb") && - !convertedValue.includes("rgba") - ) { - convertedValue = convertedValue.replace("rgb", "rgba"); - convertedValue = convertedValue.replace(")", ", 1)"); - } - } + // Force to set the alpha value. + if ( + convertedValue.includes("rgb") && + !convertedValue.includes("rgba") + ) { + convertedValue = convertedValue.replace("rgb", "rgba"); + convertedValue = convertedValue.replace(")", ", 1)"); + } + } - break; + break; - case "HslColorPicker": - convertedValue = - "string" === typeof value && value.includes("hsl(") - ? value - : colord(value).toHslString(); - break; + case "HslColorPicker": + convertedValue = + "string" === typeof value && value.includes("hsl(") + ? value + : colord(value).toHslString(); + break; - case "HslStringColorPicker": - convertedValue = - "string" === typeof value && value.includes("hsl(") - ? value - : colord(value).toHslString(); - break; + case "HslStringColorPicker": + convertedValue = + "string" === typeof value && value.includes("hsl(") + ? value + : colord(value).toHslString(); + break; - case "HslaColorPicker": - convertedValue = colord(value).toHslString(); + case "HslaColorPicker": + convertedValue = colord(value).toHslString(); - // Force to set the alpha value. - if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) { - convertedValue = convertedValue.replace("hsl", "hsla"); - convertedValue = convertedValue.replace(")", ", 1)"); - } + // Force to set the alpha value. + if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) { + convertedValue = convertedValue.replace("hsl", "hsla"); + convertedValue = convertedValue.replace(")", ", 1)"); + } - break; + break; - case "HslaStringColorPicker": - convertedValue = colord(value).toHslString(); + case "HslaStringColorPicker": + convertedValue = colord(value).toHslString(); - // Force to set the alpha value. - if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) { - convertedValue = convertedValue.replace("hsl", "hsla"); - convertedValue = convertedValue.replace(")", ", 1)"); - } + // Force to set the alpha value. + if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) { + convertedValue = convertedValue.replace("hsl", "hsla"); + convertedValue = convertedValue.replace(")", ", 1)"); + } - break; + break; - /** - * The colord library doesn't provide .toHsvString() method yet. - * This manual value-building will apply to "hsv" and "hsva" stuff below. - */ - case "HsvColorPicker": - hsv = colord(value).toHsv(); - convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)"; - break; + /** + * The colord library doesn't provide .toHsvString() method yet. + * This manual value-building will apply to "hsv" and "hsva" stuff below. + */ + case "HsvColorPicker": + hsv = colord(value).toHsv(); + convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)"; + break; - case "HsvStringColorPicker": - hsv = colord(value).toHsv(); - convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)"; - break; + case "HsvStringColorPicker": + hsv = colord(value).toHsv(); + convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)"; + break; - case "HsvaColorPicker": - hsva = colord(value).toHsv(); - convertedValue = - "hsva(" + - hsva.h + - ", " + - hsva.s + - "%, " + - hsva.v + - "%, " + - hsva.a + - ")"; - break; + case "HsvaColorPicker": + hsva = colord(value).toHsv(); + convertedValue = + "hsva(" + + hsva.h + + ", " + + hsva.s + + "%, " + + hsva.v + + "%, " + + hsva.a + + ")"; + break; - case "HsvaStringColorPicker": - hsva = colord(value).toHsv(); - convertedValue = - "hsva(" + - hsva.h + - ", " + - hsva.s + - "%, " + - hsva.v + - "%, " + - hsva.a + - ")"; - break; + case "HsvaStringColorPicker": + hsva = colord(value).toHsv(); + convertedValue = + "hsva(" + + hsva.h + + ", " + + hsva.s + + "%, " + + hsva.v + + "%, " + + hsva.a + + ")"; + break; - default: - convertedValue = colord(value).toHex(); - break; - } + default: + convertedValue = colord(value).toHex(); + break; + } - return convertedValue; + return convertedValue; }; export default convertColorForInput; diff --git a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js index 7eef9f4..ac26605 100644 --- a/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js +++ b/functions/kirki/packages/kirki-framework/control-react-colorful/src/js/utils/convertColorForPicker.js @@ -12,77 +12,86 @@ const convertColorForPicker = (value, pickerComponent) => { let convertedValue; switch (pickerComponent) { - case 'HexColorPicker': + case "HexColorPicker": convertedValue = colord(value).toHex(); break; - case 'RgbColorPicker': + case "RgbColorPicker": convertedValue = colord(value).toRgb(); delete convertedValue.a; break; - case 'RgbStringColorPicker': + case "RgbStringColorPicker": convertedValue = colord(value).toRgbString(); break; - case 'RgbaColorPicker': + case "RgbaColorPicker": convertedValue = colord(value).toRgb(); break; - case 'RgbaStringColorPicker': + case "RgbaStringColorPicker": convertedValue = colord(value).toRgbString(); // Force to set the alpha channel value. - if (convertedValue.includes('rgb') && !convertedValue.includes('rgba')) { - convertedValue = convertedValue.replace('rgb', 'rgba'); - convertedValue = convertedValue.replace(')', ', 1)'); + if (convertedValue.includes("rgb") && !convertedValue.includes("rgba")) { + convertedValue = convertedValue.replace("rgb", "rgba"); + convertedValue = convertedValue.replace(")", ", 1)"); } break; - case 'HslColorPicker': + case "HslColorPicker": convertedValue = colord(value).toHsl(); delete convertedValue.a; break; - case 'HslStringColorPicker': + case "HslStringColorPicker": convertedValue = colord(value).toHslString(); break; - case 'HslaColorPicker': + case "HslaColorPicker": convertedValue = colord(value).toHsl(); break; - case 'HslaStringColorPicker': + case "HslaStringColorPicker": convertedValue = colord(value).toHslString(); // Force to set the alpha channel value. - if (convertedValue.includes('hsl') && !convertedValue.includes('hsla')) { - convertedValue = convertedValue.replace('hsl', 'hsla'); - convertedValue = convertedValue.replace(')', ', 1)'); + if (convertedValue.includes("hsl") && !convertedValue.includes("hsla")) { + convertedValue = convertedValue.replace("hsl", "hsla"); + convertedValue = convertedValue.replace(")", ", 1)"); } break; - case 'HsvColorPicker': + case "HsvColorPicker": convertedValue = colord(value).toHsv(); delete convertedValue.a; break; - case 'HsvStringColorPicker': + case "HsvStringColorPicker": const hsv = colord(value).toHsv(); - convertedValue = 'hsv(' + hsv.h + ', ' + hsv.s + '%, ' + hsv.v + '%)'; + convertedValue = "hsv(" + hsv.h + ", " + hsv.s + "%, " + hsv.v + "%)"; break; - case 'HsvaColorPicker': + case "HsvaColorPicker": convertedValue = colord(value).toHsv(); break; - case 'HsvaStringColorPicker': + case "HsvaStringColorPicker": // colord library doesn't provide .toHsvString() method yet. const hsva = colord(value).toHsv(); - convertedValue = 'hsva(' + hsva.h + ', ' + hsva.s + '%, ' + hsva.v + '%, ' + hsva.a + ')'; + convertedValue = + "hsva(" + + hsva.h + + ", " + + hsva.s + + "%, " + + hsva.v + + "%, " + + hsva.a + + ")"; break; diff --git a/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js b/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js index c5d6ce0..96eea32 100644 --- a/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js +++ b/functions/kirki/packages/kirki-framework/control-repeater/dist/control.js @@ -1,2 +1,2 @@ -!function(){var e=function(e,t,i,a){var r=this;this.rowIndex=e,this.container=t,this.label=i,this.header=this.container.find(".repeater-row-header"),this.header.on("click",(function(){r.toggleMinimize()})),this.container.on("click",".repeater-row-remove",(function(){r.remove()})),this.header.on("mousedown",(function(){r.container.trigger("row:start-dragging")})),this.container.on("keyup change","input, select, textarea",(function(e){r.container.trigger("row:update",[r.rowIndex,jQuery(e.target).data("field"),e.target])})),this.setRowIndex=function(e){this.rowIndex=e,this.container.attr("data-row",e),this.container.data("row",e),this.updateLabel()},this.toggleMinimize=function(){this.container.toggleClass("minimized"),this.header.find(".dashicons").toggleClass("dashicons-arrow-up").toggleClass("dashicons-arrow-down")},this.remove=function(){this.container.slideUp(300,(function(){jQuery(this).detach()})),this.container.trigger("row:remove",[this.rowIndex])},this.updateLabel=function(){var e,t,i;if("field"===this.label.type&&(e=this.container.find('.repeater-field [data-field="'+this.label.field+'"]'),_.isFunction(e.val)&&""!==(t=e.val())))return _.isUndefined(a.params.fields[this.label.field])||_.isUndefined(a.params.fields[this.label.field].type)||("select"===a.params.fields[this.label.field].type?_.isUndefined(a.params.fields[this.label.field].choices)||_.isUndefined(a.params.fields[this.label.field].choices[e.val()])||(t=a.params.fields[this.label.field].choices[e.val()]):"radio"!==a.params.fields[this.label.field].type&&"radio-image"!==a.params.fields[this.label.field].type||(i=a.selector+' [data-row="'+this.rowIndex+'"] .repeater-field [data-field="'+this.label.field+'"]:checked',t=jQuery(i).val())),void this.header.find(".repeater-row-label").text(t);this.header.find(".repeater-row-label").text(this.label.value+" "+(this.rowIndex+1))},this.updateLabel()};wp.customize.controlConstructor.repeater=wp.customize.Control.extend({ready:function(){!_.isUndefined(window.kirkiControlLoader)&&_.isFunction(kirkiControlLoader)?kirkiControlLoader(this):this.initKirkiControl()},initKirkiControl:function(e){var t,i,a;a=(e=e||this).params.value,e.settingField=e.container.find("[data-customize-setting-link]").first(),e.setValue([],!1),e.repeaterFieldsContainer=e.container.find(".repeater-fields").first(),e.currentIndex=0,e.rows=[],t=!1,_.isUndefined(e.params.choices.limit)||(t=!(0>=e.params.choices.limit)&&parseInt(e.params.choices.limit,10)),e.container.on("click","button.repeater-add",(function(a){a.preventDefault(),!t||e.currentIndex/g,interpolate:/\{\{\{([\s\S]+?)\}\}\}/g,escape:/\{\{([^\}]+?)\}\}(?!\})/g,variable:"data"};return function(i){return _.template(e.container.find(".customize-control-repeater-content").first().html(),null,t)(i)}})),a.length&&_.each(a,(function(t){i=e.addRow(t),e.initColorPicker(),e.initSelect(i,t)})),e.repeaterFieldsContainer.sortable({handle:".repeater-row-header",update:function(){e.sort()}})},openFrame:function(e){wp.customize.utils.isKeydownButNotEnterEvent(e)||(this.$thisButton.closest(".repeater-field").hasClass("repeater-field-cropped_image")?this.initCropperFrame():this.initFrame(),this.frame.open())},initFrame:function(){var e=this.getMimeType();this.frame=wp.media({states:[new wp.media.controller.Library({library:wp.media.query({type:e}),multiple:!1,date:!1})]}),this.frame.on("select",this.onSelect,this)},initCropperFrame:function(){var e=this.$thisButton.siblings("input.hidden-field").attr("data-field"),t=this.getMimeType();_.isString(e)&&""!==e&&_.isObject(this.params.fields[e])&&"cropped_image"===this.params.fields[e].type&&["width","height","flex_width","flex_height"].forEach(function(t){_.isUndefined(this.params.fields[e][t])||(this.params[t]=this.params.fields[e][t])}.bind(this)),this.frame=wp.media({button:{text:"Select and Crop",close:!1},states:[new wp.media.controller.Library({library:wp.media.query({type:t}),multiple:!1,date:!1,suggestedWidth:this.params.width,suggestedHeight:this.params.height}),new wp.media.controller.CustomizeImageCropper({imgSelectOptions:this.calculateImageSelectOptions,control:this})]}),this.frame.on("select",this.onSelectForCrop,this),this.frame.on("cropped",this.onCropped,this),this.frame.on("skippedcrop",this.onSkippedCrop,this)},onSelect:function(){var e=this.frame.state().get("selection").first().toJSON();this.$thisButton.closest(".repeater-field").hasClass("repeater-field-upload")?this.setFileInRepeaterField(e):this.setImageInRepeaterField(e)},onSelectForCrop:function(){var e=this.frame.state().get("selection").first().toJSON();this.params.width!==e.width||this.params.height!==e.height||this.params.flex_width||this.params.flex_height?this.frame.setState("cropper"):this.setImageInRepeaterField(e)},onCropped:function(e){this.setImageInRepeaterField(e)},calculateImageSelectOptions:function(e,t){var i,a,r,n=t.get("control"),s=!!parseInt(n.params.flex_width,10),o=!!parseInt(n.params.flex_height,10),l=e.get("width"),d=e.get("height"),h=parseInt(n.params.width,10),p=parseInt(n.params.height,10),c=h/p,u=l,f=d;return t.set("canSkipCrop",!n.mustBeCropped(s,o,h,p,l,d)),u/f>c?h=(p=f)*c:p=(h=u)/c,r={handles:!0,keys:!0,instance:!0,persistent:!0,imageWidth:l,imageHeight:d,x1:i=(u-h)/2,y1:a=(f-p)/2,x2:h+i,y2:p+a},!1===o&&!1===s&&(r.aspectRatio=h+":"+p),!1===o&&(r.maxHeight=p),!1===s&&(r.maxWidth=h),r},mustBeCropped:function(e,t,i,a,r,n){return!(!0===e&&!0===t||!0===e&&a===n||!0===t&&i===r||i===r&&a===n||r<=i)},onSkippedCrop:function(){var e=this.frame.state().get("selection").first().toJSON();this.setImageInRepeaterField(e)},setImageInRepeaterField:function(e){var t=this.$thisButton.closest(".repeater-field-image,.repeater-field-cropped_image");t.find(".kirki-image-attachment").html('').hide().slideDown("slow"),t.find(".hidden-field").val(e.id),this.$thisButton.text(this.$thisButton.data("alt-label")),t.find(".remove-button").show(),t.find("input, textarea, select").trigger("change"),this.frame.close()},setFileInRepeaterField:function(e){var t=this.$thisButton.closest(".repeater-field-upload");t.find(".kirki-file-attachment").html(' '+e.filename+"").hide().slideDown("slow"),t.find(".hidden-field").val(e.id),this.$thisButton.text(this.$thisButton.data("alt-label")),t.find(".upload-button").show(),t.find(".remove-button").show(),t.find("input, textarea, select").trigger("change"),this.frame.close()},getMimeType:function(){var e=this.$thisButton.siblings("input.hidden-field").attr("data-field");return _.isString(e)&&""!==e&&_.isObject(this.params.fields[e])&&"upload"===this.params.fields[e].type&&!_.isUndefined(this.params.fields[e].mime_type)?this.params.fields[e].mime_type:"image"},removeImage:function(e){var t,i;wp.customize.utils.isKeydownButNotEnterEvent(e)||(i=(t=this.$thisButton.closest(".repeater-field-image,.repeater-field-cropped_image,.repeater-field-upload")).find(".upload-button"),t.find(".kirki-image-attachment").slideUp("fast",(function(){jQuery(this).show().html(jQuery(this).data("placeholder"))})),t.find(".hidden-field").val(""),i.text(i.data("label")),this.$thisButton.hide(),t.find("input, textarea, select").trigger("change"))},removeFile:function(e){var t,i;wp.customize.utils.isKeydownButNotEnterEvent(e)||(i=(t=this.$thisButton.closest(".repeater-field-upload")).find(".upload-button"),t.find(".kirki-file-attachment").slideUp("fast",(function(){jQuery(this).show().html(jQuery(this).data("placeholder"))})),t.find(".hidden-field").val(""),i.text(i.data("label")),this.$thisButton.hide(),t.find("input, textarea, select").trigger("change"))},getValue:function(){return JSON.parse(decodeURI(this.setting.get()))},setValue:function(e,t,i){var a=e,r=[];i&&(jQuery.each(this.params.fields,(function(e,t){"image"!==t.type&&"cropped_image"!==t.type&&"upload"!==t.type||r.push(e)})),jQuery.each(e,(function(e,t){jQuery.each(r,(function(i,r){_.isUndefined(t[r])||_.isUndefined(t[r].id)||(a[e][r]=t[r].id)}))}))),this.setting.set(encodeURI(JSON.stringify(a))),t&&this.settingField.trigger("change")},addRow:function(t){var i,a,r,n=this,s=n.repeaterTemplate(),o=this.getValue(),l={};if(s){if(i=jQuery.extend(!0,{},n.params.fields),t)for(r in t)t.hasOwnProperty(r)&&i.hasOwnProperty(r)&&(i[r].default=t[r]);for(r in i.index=this.currentIndex,s=s(i),(a=new e(n.currentIndex,jQuery(s).appendTo(n.repeaterFieldsContainer),n.params.row_label,n)).container.on("row:remove",(function(e,t){n.deleteRow(t)})),a.container.on("row:update",(function(e,t,i,r){n.updateField.call(n,e,t,i,r),a.updateLabel()})),this.rows[this.currentIndex]=a,i)i.hasOwnProperty(r)&&(l[r]=i[r].default);return o[this.currentIndex]=l,this.setValue(o,!0),this.currentIndex++,a}},sort:function(){var e=this,t=this.repeaterFieldsContainer.find(".repeater-row"),i=[],a=e.getValue(),r=[],n=[];t.each((function(e,t){i.push(jQuery(t).data("row"))})),jQuery.each(i,(function(t,i){r[t]=e.rows[i],r[t].setRowIndex(t),n[t]=a[i]})),e.rows=r,e.setValue(n)},deleteRow:function(e){var t,i=this.getValue();for(t in i[e]&&this.rows[e]&&(delete i[e],delete this.rows[e],this.setValue(i,!0)),this.rows)this.rows.hasOwnProperty(t)&&this.rows[t]&&this.rows[t].updateLabel()},updateField:function(e,t,i,a){var r,n,s;this.rows[t]&&this.params.fields[i]&&(r=this.params.fields[i].type,n=this.rows[t],s=this.getValue(),a=jQuery(a),_.isUndefined(s[n.rowIndex][i])||(s[n.rowIndex][i]="checkbox"===r?a.is(":checked"):a.val(),this.setValue(s,!0)))},initColorPicker:function(){var e=this,t=e.container.find(".color-picker-hex"),i={},a=t.data("field");_.isUndefined(a)||_.isUndefined(e.params.fields[a])||_.isUndefined(e.params.fields[a].palettes)||!_.isObject(e.params.fields[a].palettes)||(i.palettes=e.params.fields[a].palettes),i.change=function(t,i){var a=jQuery(t.target),r=a.closest(".repeater-row").data("row"),n=e.getValue();n[r][a.data("field")]=i.color.toString(),e.setValue(n,!0)},t.length&&0!==t.length&&t.wpColorPicker(i)},initSelect:function(e,t){var i,a=this,r=e.container.find(".repeater-field select");0!==r.length&&(i=r.data("field"),multiple=jQuery(r).data("multiple"),(t=t||{})[i]=t[i]||"",jQuery(r).val(t[i]||jQuery(r).val()),this.container.on("change",".repeater-field select",(function(e){var t=jQuery(e.target),i=t.closest(".repeater-row").data("row"),r=a.getValue();r[i][t.data("field")]=jQuery(this).val(),a.setValue(r)})))}})}(); +!function(){var e=function(e,t,i,a){var r=this;this.rowIndex=e,this.container=t,this.label=i,this.header=this.container.find(".repeater-row-header"),this.header.on("click",(function(){r.toggleMinimize()})),this.container.on("click",".repeater-row-remove",(function(){r.remove()})),this.header.on("mousedown",(function(){r.container.trigger("row:start-dragging")})),this.container.on("keyup change","input, select, textarea",(function(e){r.container.trigger("row:update",[r.rowIndex,jQuery(e.target).data("field"),e.target])})),this.setRowIndex=function(e){this.rowIndex=e,this.container.attr("data-row",e),this.container.data("row",e),this.updateLabel()},this.toggleMinimize=function(){this.container.toggleClass("minimized"),this.header.find(".dashicons").toggleClass("dashicons-arrow-up").toggleClass("dashicons-arrow-down")},this.remove=function(){this.container.slideUp(300,(function(){jQuery(this).detach()})),this.container.trigger("row:remove",[this.rowIndex])},this.updateLabel=function(){var e,t,i;if("field"===this.label.type&&(e=this.container.find('.repeater-field [data-field="'+this.label.field+'"]'),_.isFunction(e.val)&&""!==(t=e.val())))return _.isUndefined(a.params.fields[this.label.field])||_.isUndefined(a.params.fields[this.label.field].type)||("select"===a.params.fields[this.label.field].type?_.isUndefined(a.params.fields[this.label.field].choices)||_.isUndefined(a.params.fields[this.label.field].choices[e.val()])||(t=a.params.fields[this.label.field].choices[e.val()]):"radio"!==a.params.fields[this.label.field].type&&"radio-image"!==a.params.fields[this.label.field].type||(i=a.selector+' [data-row="'+this.rowIndex+'"] .repeater-field [data-field="'+this.label.field+'"]:checked',t=jQuery(i).val())),void this.header.find(".repeater-row-label").text(t);this.header.find(".repeater-row-label").text(this.label.value+" "+(this.rowIndex+1))},this.updateLabel()};wp.customize.controlConstructor.repeater=wp.customize.Control.extend({ready:function(){!_.isUndefined(window.kirkiControlLoader)&&_.isFunction(kirkiControlLoader)?kirkiControlLoader(this):this.initKirkiControl()},initKirkiControl:function(e){var t,i,a;a=(e=e||this).params.value,e.settingField=e.container.find("[data-customize-setting-link]").first(),e.setValue([],!1),e.repeaterFieldsContainer=e.container.find(".repeater-fields").first(),e.currentIndex=0,e.rows=[],t=!1,_.isUndefined(e.params.choices.limit)||(t=!(0>=e.params.choices.limit)&&parseInt(e.params.choices.limit,10)),e.container.on("click","button.repeater-add",(function(a){a.preventDefault(),!t||e.currentIndex/g,interpolate:/\{\{\{([\s\S]+?)\}\}\}/g,escape:/\{\{([^\}]+?)\}\}(?!\})/g,variable:"data"};return function(i){return _.template(e.container.find(".customize-control-repeater-content").first().html(),null,t)(i)}})),a.length&&_.each(a,(function(t){i=e.addRow(t),e.initColorPicker(),e.initSelect(i,t)})),e.repeaterFieldsContainer.sortable({handle:".repeater-row-header",update:function(){e.sort()}})},openFrame:function(e){wp.customize.utils.isKeydownButNotEnterEvent(e)||(this.$thisButton.closest(".repeater-field").hasClass("repeater-field-cropped_image")?this.initCropperFrame():this.initFrame(),this.frame.open())},initFrame:function(){var e=this.getMimeType();this.frame=wp.media({states:[new wp.media.controller.Library({library:wp.media.query({type:e}),multiple:!1,date:!1})]}),this.frame.on("select",this.onSelect,this)},initCropperFrame:function(){var e=this.$thisButton.siblings("input.hidden-field").attr("data-field"),t=this.getMimeType();_.isString(e)&&""!==e&&_.isObject(this.params.fields[e])&&"cropped_image"===this.params.fields[e].type&&["width","height","flex_width","flex_height"].forEach(function(t){_.isUndefined(this.params.fields[e][t])||(this.params[t]=this.params.fields[e][t])}.bind(this)),this.frame=wp.media({button:{text:"Select and Crop",close:!1},states:[new wp.media.controller.Library({library:wp.media.query({type:t}),multiple:!1,date:!1,suggestedWidth:this.params.width,suggestedHeight:this.params.height}),new wp.media.controller.CustomizeImageCropper({imgSelectOptions:this.calculateImageSelectOptions,control:this})]}),this.frame.on("select",this.onSelectForCrop,this),this.frame.on("cropped",this.onCropped,this),this.frame.on("skippedcrop",this.onSkippedCrop,this)},onSelect:function(){var e=this.frame.state().get("selection").first().toJSON();this.$thisButton.closest(".repeater-field").hasClass("repeater-field-upload")?this.setFileInRepeaterField(e):this.setImageInRepeaterField(e)},onSelectForCrop:function(){var e=this.frame.state().get("selection").first().toJSON();this.params.width!==e.width||this.params.height!==e.height||this.params.flex_width||this.params.flex_height?this.frame.setState("cropper"):this.setImageInRepeaterField(e)},onCropped:function(e){this.setImageInRepeaterField(e)},calculateImageSelectOptions:function(e,t){var i,a,r,n=t.get("control"),s=!!parseInt(n.params.flex_width,10),o=!!parseInt(n.params.flex_height,10),l=e.get("width"),d=e.get("height"),h=parseInt(n.params.width,10),p=parseInt(n.params.height,10),c=h/p,u=l,f=d;return t.set("canSkipCrop",!n.mustBeCropped(s,o,h,p,l,d)),u/f>c?h=(p=f)*c:p=(h=u)/c,r={handles:!0,keys:!0,instance:!0,persistent:!0,imageWidth:l,imageHeight:d,x1:i=(u-h)/2,y1:a=(f-p)/2,x2:h+i,y2:p+a},!1===o&&!1===s&&(r.aspectRatio=h+":"+p),!1===o&&(r.maxHeight=p),!1===s&&(r.maxWidth=h),r},mustBeCropped:function(e,t,i,a,r,n){return!(!0===e&&!0===t||!0===e&&a===n||!0===t&&i===r||i===r&&a===n||r<=i)},onSkippedCrop:function(){var e=this.frame.state().get("selection").first().toJSON();this.setImageInRepeaterField(e)},setImageInRepeaterField:function(e){var t=this.$thisButton.closest(".repeater-field-image,.repeater-field-cropped_image");t.find(".kirki-image-attachment").html('').hide().slideDown("slow"),t.find(".hidden-field").val(e.id),this.$thisButton.text(this.$thisButton.data("alt-label")),t.find(".remove-button").show(),t.find("input, textarea, select").trigger("change"),this.frame.close()},setFileInRepeaterField:function(e){var t=this.$thisButton.closest(".repeater-field-upload");t.find(".kirki-file-attachment").html(' '+e.filename+"").hide().slideDown("slow"),t.find(".hidden-field").val(e.id),this.$thisButton.text(this.$thisButton.data("alt-label")),t.find(".upload-button").show(),t.find(".remove-button").show(),t.find("input, textarea, select").trigger("change"),this.frame.close()},getMimeType:function(){var e=this.$thisButton.siblings("input.hidden-field").attr("data-field");return _.isString(e)&&""!==e&&_.isObject(this.params.fields[e])&&"upload"===this.params.fields[e].type&&!_.isUndefined(this.params.fields[e].mime_type)?this.params.fields[e].mime_type:"image"},removeImage:function(e){var t,i;wp.customize.utils.isKeydownButNotEnterEvent(e)||(i=(t=this.$thisButton.closest(".repeater-field-image,.repeater-field-cropped_image,.repeater-field-upload")).find(".upload-button"),t.find(".kirki-image-attachment").slideUp("fast",(function(){jQuery(this).show().html(jQuery(this).data("placeholder"))})),t.find(".hidden-field").val(""),i.text(i.data("label")),this.$thisButton.hide(),t.find("input, textarea, select").trigger("change"))},removeFile:function(e){var t,i;wp.customize.utils.isKeydownButNotEnterEvent(e)||(i=(t=this.$thisButton.closest(".repeater-field-upload")).find(".upload-button"),t.find(".kirki-file-attachment").slideUp("fast",(function(){jQuery(this).show().html(jQuery(this).data("placeholder"))})),t.find(".hidden-field").val(""),i.text(i.data("label")),this.$thisButton.hide(),t.find("input, textarea, select").trigger("change"))},getValue:function(){return JSON.parse(decodeURI(this.setting.get()))},setValue:function(e,t,i){var a=e,r=[];i&&(jQuery.each(this.params.fields,(function(e,t){"image"!==t.type&&"cropped_image"!==t.type&&"upload"!==t.type||r.push(e)})),jQuery.each(e,(function(e,t){jQuery.each(r,(function(i,r){_.isUndefined(t[r])||_.isUndefined(t[r].id)||(a[e][r]=t[r].id)}))}))),this.setting.set(encodeURI(JSON.stringify(a))),t&&this.settingField.trigger("change")},addRow:function(t){var i,a,r,n=this,s=n.repeaterTemplate(),o=this.getValue(),l={};if(s){if(i=jQuery.extend(!0,{},n.params.fields),t)for(r in t)t.hasOwnProperty(r)&&i.hasOwnProperty(r)&&(i[r].default=t[r]);for(r in i.index=this.currentIndex,s=s(i),(a=new e(n.currentIndex,jQuery(s).appendTo(n.repeaterFieldsContainer),n.params.row_label,n)).container.on("row:remove",(function(e,t){n.deleteRow(t)})),a.container.on("row:update",(function(e,t,i,r){n.updateField.call(n,e,t,i,r),a.updateLabel()})),this.rows[this.currentIndex]=a,i)i.hasOwnProperty(r)&&(l[r]=i[r].default);return o[this.currentIndex]=l,this.setValue(o,!0),this.currentIndex++,a}},sort:function(){var e=this,t=this.repeaterFieldsContainer.find(".repeater-row"),i=[],a=e.getValue(),r=[],n=[];t.each((function(e,t){i.push(jQuery(t).data("row"))})),jQuery.each(i,(function(t,i){r[t]=e.rows[i],r[t].setRowIndex(t),n[t]=a[i]})),e.rows=r,e.setValue(n)},deleteRow:function(e){var t,i=this.getValue();for(t in i[e]&&this.rows[e]&&(delete i[e],delete this.rows[e],this.setValue(i,!0)),this.rows)this.rows.hasOwnProperty(t)&&this.rows[t]&&this.rows[t].updateLabel()},updateField:function(e,t,i,a){var r,n,s;this.rows[t]&&this.params.fields[i]&&(r=this.params.fields[i].type,n=this.rows[t],s=this.getValue(),a=jQuery(a),_.isUndefined(s[n.rowIndex][i])||(s[n.rowIndex][i]="checkbox"===r?a.is(":checked"):a.val(),this.setValue(s,!0)))},initColorPicker:function(){var e=this,t=e.container.find(".kirki-classic-color-picker"),i=t.data("field"),a={};_.isUndefined(i)||_.isUndefined(e.params.fields[i])||_.isUndefined(e.params.fields[i].palettes)||!_.isObject(e.params.fields[i].palettes)||(a.palettes=e.params.fields[i].palettes),a.change=function(t,i){var a=jQuery(t.target),r=a.closest(".repeater-row").data("row"),n=e.getValue(),s=i.color._alpha<1?i.color.to_s():i.color.toString();n[r][a.data("field")]=s,e.setValue(n,!0),setTimeout((function(){t.target.value=s}),50)},t.length&&0!==t.length&&t.wpColorPicker(a)},initSelect:function(e,t){var i,a=this,r=e.container.find(".repeater-field select");0!==r.length&&(i=r.data("field"),multiple=jQuery(r).data("multiple"),(t=t||{})[i]=t[i]||"",jQuery(r).val(t[i]||jQuery(r).val()),this.container.on("change",".repeater-field select",(function(e){var t=jQuery(e.target),i=t.closest(".repeater-row").data("row"),r=a.getValue();r[i][t.data("field")]=jQuery(this).val(),a.setValue(r)})))}})}(); //# sourceMappingURL=control.js.map diff --git a/functions/kirki/packages/kirki-framework/control-repeater/dist/wp-color-picker-alpha.min.js b/functions/kirki/packages/kirki-framework/control-repeater/dist/wp-color-picker-alpha.min.js new file mode 100644 index 0000000..1aeb1f2 --- /dev/null +++ b/functions/kirki/packages/kirki-framework/control-repeater/dist/wp-color-picker-alpha.min.js @@ -0,0 +1,11 @@ +/**! + * wp-color-picker-alpha + * + * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker + * Only run in input and is defined data alpha in true + * + * Version: 3.0.0 + * https://github.com/kallookoo/wp-color-picker-alpha + * Licensed under the GPLv2 license or later. + */ +!function(e,a){var l,o={version:300};if("wpColorPickerAlpha"in window&&"version"in window.wpColorPickerAlpha){var t=parseInt(window.wpColorPickerAlpha.version,10);if(!isNaN(t)&&o.version<=t)return}Color.fn.hasOwnProperty("to_s")||(Color.fn.to_s=function(o){"hex"===(o=o||"hex")&&this._alpha<1&&(o="rgba");var a="";return"hex"===o?a=this.toString():this.error||(a=this.toCSS(o).replace(/\(\s+/,"(").replace(/\s+\)/,")")),a},window.wpColorPickerAlpha=o,l="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",e.widget("a8c.iris",e.a8c.iris,{alphaOptions:{alphaEnabled:!1},_getColor:function(o){return o===a&&(o=this._color),this.alphaOptions.alphaEnabled?(o=o.to_s(this.alphaOptions.alphaColorType),this.alphaOptions.alphaColorWithSpace||(o=o.replace(/\s+/g,"")),o):o.toString()},_create:function(){try{this.alphaOptions=this.element.wpColorPicker("instance").alphaOptions}catch(o){}e.extend({},this.alphaOptions,{alphaEnabled:!1,alphaCustomWidth:130,alphaReset:!1,alphaColorType:"hex",alphaColorWithSpace:!1}),this._super()},_addInputListeners:function(i){function o(o){var a=i.val(),t=new Color(a),a=a.replace(/^(#|(rgb|hsl)a?)/,""),r=l.alphaOptions.alphaColorType;i.removeClass("iris-error"),t.error?""!==a&&i.addClass("iris-error"):"hex"===r&&"keyup"===o.type&&a.match(/^[0-9a-fA-F]{3}$/)||t.toIEOctoHex()!==l._color.toIEOctoHex()&&l._setOption("color",l._getColor(t))}var l=this;i.on("change",o).on("keyup",l._debounce(o,100)),l.options.hide&&i.one("focus",function(){l.show()})},_initControls:function(){var t,o,a,r;this._super(),this.alphaOptions.alphaEnabled&&(a=(o=(t=this).controls.strip.clone(!1,!1)).find(".iris-slider-offset"),r={stripAlpha:o,stripAlphaSlider:a},o.addClass("iris-strip-alpha"),a.addClass("iris-slider-offset-alpha"),o.appendTo(t.picker.find(".iris-picker-inner")),e.each(r,function(o,a){t.controls[o]=a}),t.controls.stripAlphaSlider.slider({orientation:"vertical",min:0,max:100,step:1,value:parseInt(100*t._color._alpha),slide:function(o,a){t.active="strip",t._color._alpha=parseFloat(a.value/100),t._change.apply(t,arguments)}}))},_dimensions:function(o){if(this._super(o),this.alphaOptions.alphaEnabled){for(var a=this,t=a.options,r=a.controls.square,o=a.picker.find(".iris-strip"),i=Math.round(a.picker.outerWidth(!0)-(t.border?22:0)),l=Math.round(r.outerWidth()),e=Math.round((i-l)/2),s=Math.round(e/2),n=Math.round(l+2*e+2*s);i'):t.toggler.append(''),t.colorAlpha=t.toggler.find("span.color-alpha").css({width:"30px",height:"100%",position:"absolute",top:0,"background-color":r.val()}),"ltr"===t.colorAlpha.css("direction")?t.colorAlpha.css({"border-bottom-left-radius":"2px","border-top-left-radius":"2px",left:0}):t.colorAlpha.css({"border-bottom-right-radius":"2px","border-top-right-radius":"2px",right:0}),r.iris({change:function(o,a){t.colorAlpha.css({"background-color":a.color.to_s(t.alphaOptions.alphaColorType)}),e.isFunction(t.options.change)&&t.options.change.call(this,o,a)}}),t.wrap.on("click.wpcolorpicker",function(o){o.stopPropagation()}),t.toggler.click(function(){t.toggler.hasClass("wp-picker-open")?t.close():t.open()}),r.change(function(o){var a=e(this).val();(r.hasClass("iris-error")||""===a||a.match(/^(#|(rgb|hsl)a?)$/))&&(i&&t.toggler.removeAttr("style"),t.colorAlpha.css("background-color",""),e.isFunction(t.options.clear)&&t.options.clear.call(this,o))}),t.button.click(function(o){e(this).hasClass("wp-picker-default")?r.val(t.options.defaultColor).change():e(this).hasClass("wp-picker-clear")&&(r.val(""),i&&t.toggler.removeAttr("style"),t.colorAlpha.css("background-color",""),e.isFunction(t.options.clear)&&t.options.clear.call(this,o),r.trigger("change"))})}}))}(jQuery); \ No newline at end of file diff --git a/functions/kirki/packages/kirki-framework/control-repeater/src/Control/Repeater.php b/functions/kirki/packages/kirki-framework/control-repeater/src/Control/Repeater.php index b358a6e..ef92f7b 100644 --- a/functions/kirki/packages/kirki-framework/control-repeater/src/Control/Repeater.php +++ b/functions/kirki/packages/kirki-framework/control-repeater/src/Control/Repeater.php @@ -72,7 +72,7 @@ class Repeater extends Base { * @since 1.0 * @var string */ - public static $control_ver = '1.0'; + public static $control_ver = '1.0.5'; /** * Constructor. @@ -212,13 +212,14 @@ class Repeater extends Base { parent::enqueue(); - // Enqueue the script. - wp_enqueue_script( 'kirki-control-repeater', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'wp-color-picker' ], self::$control_ver, false ); - // Enqueue the style. wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_style( 'kirki-control-repeater-style', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver ); + // Enqueue the script. + wp_enqueue_script( 'wp-color-picker-alpha', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/wp-color-picker-alpha.min.js' ), array( 'jquery', 'customize-base', 'wp-color-picker' ), self::$control_ver, false ); + wp_enqueue_script( 'kirki-control-repeater', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'wp-color-picker-alpha' ], self::$control_ver, false ); + } /** @@ -398,16 +399,33 @@ class Repeater extends Base { <# if ( field.label ) { #>{{{ field.label }}}<# } #> <# if ( field.description ) { #>{{{ field.description }}}<# } #> - <# var defaultValue = ''; + + <# + var defaultValue = ''; if ( field.default ) { - if ( -1 === field.default.indexOf( 'rgba' ) ) { - defaultValue = ( '#' !== field.default.substring( 0, 1 ) ) ? '#' + field.default : field.default; - defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically. + if ( -1 !== field.default.indexOf( 'rgb' ) || -1 !== field.default.indexOf( '#' ) ) { + defaultValue = field.default; + + if (-1 !== field.default.indexOf('rgba')) { + if (!field.choices) field.choices = {}; + field.choices.alpha = true; + } } else { - defaultValue = ' data-default-color="' + defaultValue + '" data-alpha="true"'; + if (field.default.length >= 3) { + defaultValue = '#' + field.default; + } } - } #> - + } + #> + + <# + var alphaEnabledAttr = ''; + if ( field.choices && field.choices.alpha ) { + alphaEnabledAttr = ' data-alpha-enabled=true'; + } + #> + + <# } else if ( 'textarea' === field.type ) { #> diff --git a/functions/kirki/packages/kirki-framework/control-repeater/src/control.js b/functions/kirki/packages/kirki-framework/control-repeater/src/control.js index c774909..48334de 100644 --- a/functions/kirki/packages/kirki-framework/control-repeater/src/control.js +++ b/functions/kirki/packages/kirki-framework/control-repeater/src/control.js @@ -3,822 +3,929 @@ import "./control.scss"; /* global kirkiControlLoader */ /* eslint max-depth: 0 */ /* eslint no-useless-escape: 0 */ -var RepeaterRow = function( rowIndex, container, label, control ) { - var self = this; - this.rowIndex = rowIndex; - this.container = container; - this.label = label; - this.header = this.container.find( '.repeater-row-header' ); +var RepeaterRow = function (rowIndex, container, label, control) { + var self = this; + this.rowIndex = rowIndex; + this.container = container; + this.label = label; + this.header = this.container.find(".repeater-row-header"); - this.header.on( 'click', function() { - self.toggleMinimize(); - } ); + this.header.on("click", function () { + self.toggleMinimize(); + }); - this.container.on( 'click', '.repeater-row-remove', function() { - self.remove(); - } ); + this.container.on("click", ".repeater-row-remove", function () { + self.remove(); + }); - this.header.on( 'mousedown', function() { - self.container.trigger( 'row:start-dragging' ); - } ); + this.header.on("mousedown", function () { + self.container.trigger("row:start-dragging"); + }); - this.container.on( 'keyup change', 'input, select, textarea', function( e ) { - self.container.trigger( 'row:update', [ self.rowIndex, jQuery( e.target ).data( 'field' ), e.target ] ); - } ); + this.container.on("keyup change", "input, select, textarea", function (e) { + self.container.trigger("row:update", [ + self.rowIndex, + jQuery(e.target).data("field"), + e.target, + ]); + }); - this.setRowIndex = function( rowNum ) { - this.rowIndex = rowNum; - this.container.attr( 'data-row', rowNum ); - this.container.data( 'row', rowNum ); - this.updateLabel(); - }; + this.setRowIndex = function (rowNum) { + this.rowIndex = rowNum; + this.container.attr("data-row", rowNum); + this.container.data("row", rowNum); + this.updateLabel(); + }; - this.toggleMinimize = function() { + this.toggleMinimize = function () { + // Store the previous state. + this.container.toggleClass("minimized"); + this.header + .find(".dashicons") + .toggleClass("dashicons-arrow-up") + .toggleClass("dashicons-arrow-down"); + }; - // Store the previous state. - this.container.toggleClass( 'minimized' ); - this.header.find( '.dashicons' ).toggleClass( 'dashicons-arrow-up' ).toggleClass( 'dashicons-arrow-down' ); - }; + this.remove = function () { + this.container.slideUp(300, function () { + jQuery(this).detach(); + }); + this.container.trigger("row:remove", [this.rowIndex]); + }; - this.remove = function() { - this.container.slideUp( 300, function() { - jQuery( this ).detach(); - } ); - this.container.trigger( 'row:remove', [ this.rowIndex ] ); - }; + this.updateLabel = function () { + var rowLabelField, rowLabel, rowLabelSelector; - this.updateLabel = function() { - var rowLabelField, - rowLabel, - rowLabelSelector; - - if ( 'field' === this.label.type ) { - rowLabelField = this.container.find( '.repeater-field [data-field="' + this.label.field + '"]' ); - if ( _.isFunction( rowLabelField.val ) ) { - rowLabel = rowLabelField.val(); - if ( '' !== rowLabel ) { - if ( ! _.isUndefined( control.params.fields[ this.label.field ] ) ) { - if ( ! _.isUndefined( control.params.fields[ this.label.field ].type ) ) { - if ( 'select' === control.params.fields[ this.label.field ].type ) { - if ( ! _.isUndefined( control.params.fields[ this.label.field ].choices ) && ! _.isUndefined( control.params.fields[ this.label.field ].choices[ rowLabelField.val() ] ) ) { - rowLabel = control.params.fields[ this.label.field ].choices[ rowLabelField.val() ]; - } - } else if ( 'radio' === control.params.fields[ this.label.field ].type || 'radio-image' === control.params.fields[ this.label.field ].type ) { - rowLabelSelector = control.selector + ' [data-row="' + this.rowIndex + '"] .repeater-field [data-field="' + this.label.field + '"]:checked'; - rowLabel = jQuery( rowLabelSelector ).val(); - } - } - } - this.header.find( '.repeater-row-label' ).text( rowLabel ); - return; - } - } - } - this.header.find( '.repeater-row-label' ).text( this.label.value + ' ' + ( this.rowIndex + 1 ) ); - }; - this.updateLabel(); + if ("field" === this.label.type) { + rowLabelField = this.container.find( + '.repeater-field [data-field="' + this.label.field + '"]' + ); + if (_.isFunction(rowLabelField.val)) { + rowLabel = rowLabelField.val(); + if ("" !== rowLabel) { + if (!_.isUndefined(control.params.fields[this.label.field])) { + if (!_.isUndefined(control.params.fields[this.label.field].type)) { + if ("select" === control.params.fields[this.label.field].type) { + if ( + !_.isUndefined( + control.params.fields[this.label.field].choices + ) && + !_.isUndefined( + control.params.fields[this.label.field].choices[ + rowLabelField.val() + ] + ) + ) { + rowLabel = + control.params.fields[this.label.field].choices[ + rowLabelField.val() + ]; + } + } else if ( + "radio" === control.params.fields[this.label.field].type || + "radio-image" === control.params.fields[this.label.field].type + ) { + rowLabelSelector = + control.selector + + ' [data-row="' + + this.rowIndex + + '"] .repeater-field [data-field="' + + this.label.field + + '"]:checked'; + rowLabel = jQuery(rowLabelSelector).val(); + } + } + } + this.header.find(".repeater-row-label").text(rowLabel); + return; + } + } + } + this.header + .find(".repeater-row-label") + .text(this.label.value + " " + (this.rowIndex + 1)); + }; + this.updateLabel(); }; -wp.customize.controlConstructor.repeater = wp.customize.Control.extend( { - - // When we're finished loading continue processing - ready: function() { - var control = this; - - // Init the control. - if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) { - kirkiControlLoader( control ); - } else { - control.initKirkiControl(); - } - }, - - initKirkiControl: function( control ) { - var limit, theNewRow, settingValue; - control = control || this; - - // The current value set in Control Class (set in Kirki_Customize_Repeater_Control::to_json() function) - settingValue = control.params.value; - - // The hidden field that keeps the data saved (though we never update it) - control.settingField = control.container.find( '[data-customize-setting-link]' ).first(); - - // Set the field value for the first time, we'll fill it up later - control.setValue( [], false ); - - // The DIV that holds all the rows - control.repeaterFieldsContainer = control.container.find( '.repeater-fields' ).first(); - - // Set number of rows to 0 - control.currentIndex = 0; - - // Save the rows objects - control.rows = []; - - // Default limit choice - limit = false; - if ( ! _.isUndefined( control.params.choices.limit ) ) { - limit = ( 0 >= control.params.choices.limit ) ? false : parseInt( control.params.choices.limit, 10 ); - } - - control.container.on( 'click', 'button.repeater-add', function( e ) { - e.preventDefault(); - if ( ! limit || control.currentIndex < limit ) { - theNewRow = control.addRow(); - theNewRow.toggleMinimize(); - control.initColorPicker(); - control.initSelect( theNewRow ); - } else { - jQuery( control.selector + ' .limit' ).addClass( 'highlight' ); - } - } ); - - control.container.on( 'click', '.repeater-row-remove', function() { - control.currentIndex--; - if ( ! limit || control.currentIndex < limit ) { - jQuery( control.selector + ' .limit' ).removeClass( 'highlight' ); - } - } ); - - control.container.on( 'click keypress', '.repeater-field-image .upload-button,.repeater-field-cropped_image .upload-button,.repeater-field-upload .upload-button', function( e ) { - e.preventDefault(); - control.$thisButton = jQuery( this ); - control.openFrame( e ); - } ); - - control.container.on( 'click keypress', '.repeater-field-image .remove-button,.repeater-field-cropped_image .remove-button', function( e ) { - e.preventDefault(); - control.$thisButton = jQuery( this ); - control.removeImage( e ); - } ); - - control.container.on( 'click keypress', '.repeater-field-upload .remove-button', function( e ) { - e.preventDefault(); - control.$thisButton = jQuery( this ); - control.removeFile( e ); - } ); - - /** - * Function that loads the Mustache template - */ - control.repeaterTemplate = _.memoize( function() { - var compiled, - - /* - * Underscore's default ERB-style templates are incompatible with PHP - * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax. - * - * @see trac ticket #22344. - */ - options = { - evaluate: /<#([\s\S]+?)#>/g, - interpolate: /\{\{\{([\s\S]+?)\}\}\}/g, - escape: /\{\{([^\}]+?)\}\}(?!\})/g, - variable: 'data' - }; - - return function( data ) { - compiled = _.template( control.container.find( '.customize-control-repeater-content' ).first().html(), null, options ); - return compiled( data ); - }; - } ); - - // When we load the control, the fields have not been filled up - // This is the first time that we create all the rows - if ( settingValue.length ) { - _.each( settingValue, function( subValue ) { - theNewRow = control.addRow( subValue ); - control.initColorPicker(); - control.initSelect( theNewRow, subValue ); - } ); - } - - control.repeaterFieldsContainer.sortable( { - handle: '.repeater-row-header', - update: function() { - control.sort(); - } - } ); - - }, - - /** - * Open the media modal. - * - * @param {Object} event - The JS event. - * @returns {void} - */ - openFrame: function( event ) { - if ( wp.customize.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - - if ( this.$thisButton.closest( '.repeater-field' ).hasClass( 'repeater-field-cropped_image' ) ) { - this.initCropperFrame(); - } else { - this.initFrame(); - } - - this.frame.open(); - }, - - initFrame: function() { - var libMediaType = this.getMimeType(); - - this.frame = wp.media( { - states: [ - new wp.media.controller.Library( { - library: wp.media.query( { type: libMediaType } ), - multiple: false, - date: false - } ) - ] - } ); - - // When a file is selected, run a callback. - this.frame.on( 'select', this.onSelect, this ); - }, - - /** - * Create a media modal select frame, and store it so the instance can be reused when needed. - * This is mostly a copy/paste of Core api.CroppedImageControl in /wp-admin/js/customize-control.js - * - * @returns {void} - */ - initCropperFrame: function() { - - // We get the field id from which this was called - var currentFieldId = this.$thisButton.siblings( 'input.hidden-field' ).attr( 'data-field' ), - attrs = [ 'width', 'height', 'flex_width', 'flex_height' ], // A list of attributes to look for - libMediaType = this.getMimeType(); - - // Make sure we got it - if ( _.isString( currentFieldId ) && '' !== currentFieldId ) { - - // Make fields is defined and only do the hack for cropped_image - if ( _.isObject( this.params.fields[ currentFieldId ] ) && 'cropped_image' === this.params.fields[ currentFieldId ].type ) { - - //Iterate over the list of attributes - attrs.forEach( function( el ) { - - // If the attribute exists in the field - if ( ! _.isUndefined( this.params.fields[ currentFieldId ][ el ] ) ) { - - // Set the attribute in the main object - this.params[ el ] = this.params.fields[ currentFieldId ][ el ]; - } - }.bind( this ) ); - } - } - - this.frame = wp.media( { - button: { - text: 'Select and Crop', - close: false - }, - states: [ - new wp.media.controller.Library( { - library: wp.media.query( { type: libMediaType } ), - multiple: false, - date: false, - suggestedWidth: this.params.width, - suggestedHeight: this.params.height - } ), - new wp.media.controller.CustomizeImageCropper( { - imgSelectOptions: this.calculateImageSelectOptions, - control: this - } ) - ] - } ); - - this.frame.on( 'select', this.onSelectForCrop, this ); - this.frame.on( 'cropped', this.onCropped, this ); - this.frame.on( 'skippedcrop', this.onSkippedCrop, this ); - - }, - - onSelect: function() { - var attachment = this.frame.state().get( 'selection' ).first().toJSON(); - - if ( this.$thisButton.closest( '.repeater-field' ).hasClass( 'repeater-field-upload' ) ) { - this.setFileInRepeaterField( attachment ); - } else { - this.setImageInRepeaterField( attachment ); - } - }, - - /** - * After an image is selected in the media modal, switch to the cropper - * state if the image isn't the right size. - */ - - onSelectForCrop: function() { - var attachment = this.frame.state().get( 'selection' ).first().toJSON(); - - if ( this.params.width === attachment.width && this.params.height === attachment.height && ! this.params.flex_width && ! this.params.flex_height ) { - this.setImageInRepeaterField( attachment ); - } else { - this.frame.setState( 'cropper' ); - } - }, - - /** - * After the image has been cropped, apply the cropped image data to the setting. - * - * @param {object} croppedImage Cropped attachment data. - * @returns {void} - */ - onCropped: function( croppedImage ) { - this.setImageInRepeaterField( croppedImage ); - }, - - /** - * Returns a set of options, computed from the attached image data and - * control-specific data, to be fed to the imgAreaSelect plugin in - * wp.media.view.Cropper. - * - * @param {wp.media.model.Attachment} attachment - The attachment from the WP API. - * @param {wp.media.controller.Cropper} controller - Media controller. - * @returns {Object} - Options. - */ - calculateImageSelectOptions: function( attachment, controller ) { - var control = controller.get( 'control' ), - flexWidth = !! parseInt( control.params.flex_width, 10 ), - flexHeight = !! parseInt( control.params.flex_height, 10 ), - realWidth = attachment.get( 'width' ), - realHeight = attachment.get( 'height' ), - xInit = parseInt( control.params.width, 10 ), - yInit = parseInt( control.params.height, 10 ), - ratio = xInit / yInit, - xImg = realWidth, - yImg = realHeight, - x1, - y1, - imgSelectOptions; - - controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) ); - - if ( xImg / yImg > ratio ) { - yInit = yImg; - xInit = yInit * ratio; - } else { - xInit = xImg; - yInit = xInit / ratio; - } - - x1 = ( xImg - xInit ) / 2; - y1 = ( yImg - yInit ) / 2; - - imgSelectOptions = { - handles: true, - keys: true, - instance: true, - persistent: true, - imageWidth: realWidth, - imageHeight: realHeight, - x1: x1, - y1: y1, - x2: xInit + x1, - y2: yInit + y1 - }; - - if ( false === flexHeight && false === flexWidth ) { - imgSelectOptions.aspectRatio = xInit + ':' + yInit; - } - if ( false === flexHeight ) { - imgSelectOptions.maxHeight = yInit; - } - if ( false === flexWidth ) { - imgSelectOptions.maxWidth = xInit; - } - - return imgSelectOptions; - }, - - /** - * Return whether the image must be cropped, based on required dimensions. - * - * @param {bool} flexW - The flex-width. - * @param {bool} flexH - The flex-height. - * @param {int} dstW - Initial point distance in the X axis. - * @param {int} dstH - Initial point distance in the Y axis. - * @param {int} imgW - Width. - * @param {int} imgH - Height. - * @returns {bool} - Whether the image must be cropped or not based on required dimensions. - */ - mustBeCropped: function( flexW, flexH, dstW, dstH, imgW, imgH ) { - return ! ( ( true === flexW && true === flexH ) || ( true === flexW && dstH === imgH ) || ( true === flexH && dstW === imgW ) || ( dstW === imgW && dstH === imgH ) || ( imgW <= dstW ) ); - }, - - /** - * If cropping was skipped, apply the image data directly to the setting. - * - * @returns {void} - */ - onSkippedCrop: function() { - var attachment = this.frame.state().get( 'selection' ).first().toJSON(); - this.setImageInRepeaterField( attachment ); - }, - - /** - * Updates the setting and re-renders the control UI. - * - * @param {object} attachment - The attachment object. - * @returns {void} - */ - setImageInRepeaterField: function( attachment ) { - var $targetDiv = this.$thisButton.closest( '.repeater-field-image,.repeater-field-cropped_image' ); - - $targetDiv.find( '.kirki-image-attachment' ).html( '' ).hide().slideDown( 'slow' ); - - $targetDiv.find( '.hidden-field' ).val( attachment.id ); - this.$thisButton.text( this.$thisButton.data( 'alt-label' ) ); - $targetDiv.find( '.remove-button' ).show(); - - //This will activate the save button - $targetDiv.find( 'input, textarea, select' ).trigger( 'change' ); - this.frame.close(); - }, - - /** - * Updates the setting and re-renders the control UI. - * - * @param {object} attachment - The attachment object. - * @returns {void} - */ - setFileInRepeaterField: function( attachment ) { - var $targetDiv = this.$thisButton.closest( '.repeater-field-upload' ); - - $targetDiv.find( '.kirki-file-attachment' ).html( ' ' + attachment.filename + '' ).hide().slideDown( 'slow' ); - - $targetDiv.find( '.hidden-field' ).val( attachment.id ); - this.$thisButton.text( this.$thisButton.data( 'alt-label' ) ); - $targetDiv.find( '.upload-button' ).show(); - $targetDiv.find( '.remove-button' ).show(); - - //This will activate the save button - $targetDiv.find( 'input, textarea, select' ).trigger( 'change' ); - this.frame.close(); - }, - - getMimeType: function() { - - // We get the field id from which this was called - var currentFieldId = this.$thisButton.siblings( 'input.hidden-field' ).attr( 'data-field' ); - - // Make sure we got it - if ( _.isString( currentFieldId ) && '' !== currentFieldId ) { - - // Make fields is defined and only do the hack for cropped_image - if ( _.isObject( this.params.fields[ currentFieldId ] ) && 'upload' === this.params.fields[ currentFieldId ].type ) { - - // If the attribute exists in the field - if ( ! _.isUndefined( this.params.fields[ currentFieldId ].mime_type ) ) { - - // Set the attribute in the main object - return this.params.fields[ currentFieldId ].mime_type; - } - } - } - return 'image'; - }, - - removeImage: function( event ) { - var $targetDiv, - $uploadButton; - - if ( wp.customize.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - - $targetDiv = this.$thisButton.closest( '.repeater-field-image,.repeater-field-cropped_image,.repeater-field-upload' ); - $uploadButton = $targetDiv.find( '.upload-button' ); - - $targetDiv.find( '.kirki-image-attachment' ).slideUp( 'fast', function() { - jQuery( this ).show().html( jQuery( this ).data( 'placeholder' ) ); - } ); - $targetDiv.find( '.hidden-field' ).val( '' ); - $uploadButton.text( $uploadButton.data( 'label' ) ); - this.$thisButton.hide(); - - $targetDiv.find( 'input, textarea, select' ).trigger( 'change' ); - }, - - removeFile: function( event ) { - var $targetDiv, - $uploadButton; - - if ( wp.customize.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - - $targetDiv = this.$thisButton.closest( '.repeater-field-upload' ); - $uploadButton = $targetDiv.find( '.upload-button' ); - - $targetDiv.find( '.kirki-file-attachment' ).slideUp( 'fast', function() { - jQuery( this ).show().html( jQuery( this ).data( 'placeholder' ) ); - } ); - $targetDiv.find( '.hidden-field' ).val( '' ); - $uploadButton.text( $uploadButton.data( 'label' ) ); - this.$thisButton.hide(); - - $targetDiv.find( 'input, textarea, select' ).trigger( 'change' ); - - }, - - /** - * Get the current value of the setting - * - * @returns {Object} - Returns the value. - */ - getValue: function() { - - // The setting is saved in JSON - return JSON.parse( decodeURI( this.setting.get() ) ); - }, - - /** - * Set a new value for the setting - * - * @param {Object} newValue - The new value. - * @param {bool} refresh - If we want to refresh the previewer or not - * @param {bool} filtering - If we want to filter or not. - * @returns {void} - */ - setValue: function( newValue, refresh, filtering ) { - - // We need to filter the values after the first load to remove data requrired for diplay but that we don't want to save in DB - var filteredValue = newValue, - filter = []; - - if ( filtering ) { - jQuery.each( this.params.fields, function( index, value ) { - if ( 'image' === value.type || 'cropped_image' === value.type || 'upload' === value.type ) { - filter.push( index ); - } - } ); - jQuery.each( newValue, function( index, value ) { - jQuery.each( filter, function( ind, field ) { - if ( ! _.isUndefined( value[ field ] ) && ! _.isUndefined( value[ field ].id ) ) { - filteredValue[index][ field ] = value[ field ].id; - } - } ); - } ); - } - - this.setting.set( encodeURI( JSON.stringify( filteredValue ) ) ); - - if ( refresh ) { - - // Trigger the change event on the hidden field so - // previewer refresh the website on Customizer - this.settingField.trigger( 'change' ); - } - }, - - /** - * Add a new row to repeater settings based on the structure. - * - * @param {Object} data - (Optional) Object of field => value pairs (undefined if you want to get the default values) - * @returns {Object} - Returns the new row. - */ - addRow: function( data ) { - var control = this, - template = control.repeaterTemplate(), // The template for the new row (defined on Kirki_Customize_Repeater_Control::render_content() ). - settingValue = this.getValue(), // Get the current setting value. - newRowSetting = {}, // Saves the new setting data. - templateData, // Data to pass to the template - newRow, - i; - - if ( template ) { - - // The control structure is going to define the new fields - // We need to clone control.params.fields. Assigning it - // ould result in a reference assignment. - templateData = jQuery.extend( true, {}, control.params.fields ); - - // But if we have passed data, we'll use the data values instead - if ( data ) { - for ( i in data ) { - if ( data.hasOwnProperty( i ) && templateData.hasOwnProperty( i ) ) { - templateData[ i ].default = data[ i ]; - } - } - } - - templateData.index = this.currentIndex; - - // Append the template content - template = template( templateData ); - - // Create a new row object and append the element - newRow = new RepeaterRow( - control.currentIndex, - jQuery( template ).appendTo( control.repeaterFieldsContainer ), - control.params.row_label, - control - ); - - newRow.container.on( 'row:remove', function( e, rowIndex ) { - control.deleteRow( rowIndex ); - } ); - - newRow.container.on( 'row:update', function( e, rowIndex, fieldName, element ) { - control.updateField.call( control, e, rowIndex, fieldName, element ); // eslint-disable-line no-useless-call - newRow.updateLabel(); - } ); - - // Add the row to rows collection - this.rows[ this.currentIndex ] = newRow; - - for ( i in templateData ) { - if ( templateData.hasOwnProperty( i ) ) { - newRowSetting[ i ] = templateData[ i ].default; - } - } - - settingValue[ this.currentIndex ] = newRowSetting; - this.setValue( settingValue, true ); - - this.currentIndex++; - - return newRow; - } - }, - - sort: function() { - var control = this, - $rows = this.repeaterFieldsContainer.find( '.repeater-row' ), - newOrder = [], - settings = control.getValue(), - newRows = [], - newSettings = []; - - $rows.each( function( i, element ) { - newOrder.push( jQuery( element ).data( 'row' ) ); - } ); - - jQuery.each( newOrder, function( newPosition, oldPosition ) { - newRows[ newPosition ] = control.rows[ oldPosition ]; - newRows[ newPosition ].setRowIndex( newPosition ); - - newSettings[ newPosition ] = settings[ oldPosition ]; - } ); - - control.rows = newRows; - control.setValue( newSettings ); - }, - - /** - * Delete a row in the repeater setting - * - * @param {int} index - Position of the row in the complete Setting Array - * @returns {void} - */ - deleteRow: function( index ) { - var currentSettings = this.getValue(), - row, - prop; - - if ( currentSettings[ index ] ) { - - // Find the row - row = this.rows[ index ]; - if ( row ) { - - // Remove the row settings - delete currentSettings[ index ]; - - // Remove the row from the rows collection - delete this.rows[ index ]; - - // Update the new setting values - this.setValue( currentSettings, true ); - } - } - - // Remap the row numbers - for ( prop in this.rows ) { - if ( this.rows.hasOwnProperty( prop ) && this.rows[ prop ] ) { - this.rows[ prop ].updateLabel(); - } - } - }, - - /** - * Update a single field inside a row. - * Triggered when a field has changed - * - * @param {Object} e - Event Object - * @param {int} rowIndex - The row's index as an integer. - * @param {string} fieldId - The field ID. - * @param {string|Object} element - The element's identifier, or jQuery Object of the element. - * @returns {void} - */ - updateField: function( e, rowIndex, fieldId, element ) { - var type, - row, - currentSettings; - - if ( ! this.rows[ rowIndex ] ) { - return; - } - - if ( ! this.params.fields[ fieldId ] ) { - return; - } - - type = this.params.fields[ fieldId].type; - row = this.rows[ rowIndex ]; - currentSettings = this.getValue(); - - element = jQuery( element ); - - if ( _.isUndefined( currentSettings[ row.rowIndex ][ fieldId ] ) ) { - return; - } - - if ( 'checkbox' === type ) { - currentSettings[ row.rowIndex ][ fieldId ] = element.is( ':checked' ); - } else { - - // Update the settings - currentSettings[ row.rowIndex ][ fieldId ] = element.val(); - } - this.setValue( currentSettings, true ); - }, - - /** - * Init the color picker on color fields - * Called after AddRow - * - * @returns {void} - */ - initColorPicker: function() { - var control = this, - colorPicker = control.container.find( '.color-picker-hex' ), - options = {}, - fieldId = colorPicker.data( 'field' ); - - // We check if the color palette parameter is defined. - if ( ! _.isUndefined( fieldId ) && ! _.isUndefined( control.params.fields[ fieldId ] ) && ! _.isUndefined( control.params.fields[ fieldId ].palettes ) && _.isObject( control.params.fields[ fieldId ].palettes ) ) { - options.palettes = control.params.fields[ fieldId ].palettes; - } - - // When the color picker value is changed we update the value of the field - options.change = function( event, ui ) { - - var currentPicker = jQuery( event.target ), - row = currentPicker.closest( '.repeater-row' ), - rowIndex = row.data( 'row' ), - currentSettings = control.getValue(); - - currentSettings[ rowIndex ][ currentPicker.data( 'field' ) ] = ui.color.toString(); - control.setValue( currentSettings, true ); - - }; - - // Init the color picker - if ( colorPicker.length && 0 !== colorPicker.length ) { - colorPicker.wpColorPicker( options ); - } - }, - - /** - * Init the dropdown-pages field. - * Called after AddRow - * - * @param {object} theNewRow the row that was added to the repeater - * @param {object} data the data for the row if we're initializing a pre-existing row - * @returns {void} - */ - initSelect: function( theNewRow, data ) { - var control = this, - dropdown = theNewRow.container.find( '.repeater-field select' ), - dataField; - - if ( 0 === dropdown.length ) { - return; - } - - dataField = dropdown.data( 'field' ); - multiple = jQuery( dropdown ).data( 'multiple' ); - - data = data || {}; - data[ dataField ] = data[ dataField ] || ''; - - jQuery( dropdown ).val( data[ dataField ] || jQuery( dropdown ).val() ); - - this.container.on( 'change', '.repeater-field select', function( event ) { - - var currentDropdown = jQuery( event.target ), - row = currentDropdown.closest( '.repeater-row' ), - rowIndex = row.data( 'row' ), - currentSettings = control.getValue(); - - currentSettings[ rowIndex ][ currentDropdown.data( 'field' ) ] = jQuery( this ).val(); - control.setValue( currentSettings ); - } ); - } -} ); +wp.customize.controlConstructor.repeater = wp.customize.Control.extend({ + // When we're finished loading continue processing + ready: function () { + var control = this; + + // Init the control. + if ( + !_.isUndefined(window.kirkiControlLoader) && + _.isFunction(kirkiControlLoader) + ) { + kirkiControlLoader(control); + } else { + control.initKirkiControl(); + } + }, + + initKirkiControl: function (control) { + var limit, theNewRow, settingValue; + control = control || this; + + // The current value set in Control Class (set in Kirki_Customize_Repeater_Control::to_json() function) + settingValue = control.params.value; + + // The hidden field that keeps the data saved (though we never update it) + control.settingField = control.container + .find("[data-customize-setting-link]") + .first(); + + // Set the field value for the first time, we'll fill it up later + control.setValue([], false); + + // The DIV that holds all the rows + control.repeaterFieldsContainer = control.container + .find(".repeater-fields") + .first(); + + // Set number of rows to 0 + control.currentIndex = 0; + + // Save the rows objects + control.rows = []; + + // Default limit choice + limit = false; + if (!_.isUndefined(control.params.choices.limit)) { + limit = + 0 >= control.params.choices.limit + ? false + : parseInt(control.params.choices.limit, 10); + } + + control.container.on("click", "button.repeater-add", function (e) { + e.preventDefault(); + if (!limit || control.currentIndex < limit) { + theNewRow = control.addRow(); + theNewRow.toggleMinimize(); + control.initColorPicker(); + control.initSelect(theNewRow); + } else { + jQuery(control.selector + " .limit").addClass("highlight"); + } + }); + + control.container.on("click", ".repeater-row-remove", function () { + control.currentIndex--; + if (!limit || control.currentIndex < limit) { + jQuery(control.selector + " .limit").removeClass("highlight"); + } + }); + + control.container.on( + "click keypress", + ".repeater-field-image .upload-button,.repeater-field-cropped_image .upload-button,.repeater-field-upload .upload-button", + function (e) { + e.preventDefault(); + control.$thisButton = jQuery(this); + control.openFrame(e); + } + ); + + control.container.on( + "click keypress", + ".repeater-field-image .remove-button,.repeater-field-cropped_image .remove-button", + function (e) { + e.preventDefault(); + control.$thisButton = jQuery(this); + control.removeImage(e); + } + ); + + control.container.on( + "click keypress", + ".repeater-field-upload .remove-button", + function (e) { + e.preventDefault(); + control.$thisButton = jQuery(this); + control.removeFile(e); + } + ); + + /** + * Function that loads the Mustache template + */ + control.repeaterTemplate = _.memoize(function () { + var compiled, + /* + * Underscore's default ERB-style templates are incompatible with PHP + * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax. + * + * @see trac ticket #22344. + */ + options = { + evaluate: /<#([\s\S]+?)#>/g, + interpolate: /\{\{\{([\s\S]+?)\}\}\}/g, + escape: /\{\{([^\}]+?)\}\}(?!\})/g, + variable: "data", + }; + + return function (data) { + compiled = _.template( + control.container + .find(".customize-control-repeater-content") + .first() + .html(), + null, + options + ); + return compiled(data); + }; + }); + + // When we load the control, the fields have not been filled up + // This is the first time that we create all the rows + if (settingValue.length) { + _.each(settingValue, function (subValue) { + theNewRow = control.addRow(subValue); + control.initColorPicker(); + control.initSelect(theNewRow, subValue); + }); + } + + control.repeaterFieldsContainer.sortable({ + handle: ".repeater-row-header", + update: function () { + control.sort(); + }, + }); + }, + + /** + * Open the media modal. + * + * @param {Object} event - The JS event. + * @returns {void} + */ + openFrame: function (event) { + if (wp.customize.utils.isKeydownButNotEnterEvent(event)) { + return; + } + + if ( + this.$thisButton + .closest(".repeater-field") + .hasClass("repeater-field-cropped_image") + ) { + this.initCropperFrame(); + } else { + this.initFrame(); + } + + this.frame.open(); + }, + + initFrame: function () { + var libMediaType = this.getMimeType(); + + this.frame = wp.media({ + states: [ + new wp.media.controller.Library({ + library: wp.media.query({ type: libMediaType }), + multiple: false, + date: false, + }), + ], + }); + + // When a file is selected, run a callback. + this.frame.on("select", this.onSelect, this); + }, + + /** + * Create a media modal select frame, and store it so the instance can be reused when needed. + * This is mostly a copy/paste of Core api.CroppedImageControl in /wp-admin/js/customize-control.js + * + * @returns {void} + */ + initCropperFrame: function () { + // We get the field id from which this was called + var currentFieldId = this.$thisButton + .siblings("input.hidden-field") + .attr("data-field"), + attrs = ["width", "height", "flex_width", "flex_height"], // A list of attributes to look for + libMediaType = this.getMimeType(); + + // Make sure we got it + if (_.isString(currentFieldId) && "" !== currentFieldId) { + // Make fields is defined and only do the hack for cropped_image + if ( + _.isObject(this.params.fields[currentFieldId]) && + "cropped_image" === this.params.fields[currentFieldId].type + ) { + //Iterate over the list of attributes + attrs.forEach( + function (el) { + // If the attribute exists in the field + if (!_.isUndefined(this.params.fields[currentFieldId][el])) { + // Set the attribute in the main object + this.params[el] = this.params.fields[currentFieldId][el]; + } + }.bind(this) + ); + } + } + + this.frame = wp.media({ + button: { + text: "Select and Crop", + close: false, + }, + states: [ + new wp.media.controller.Library({ + library: wp.media.query({ type: libMediaType }), + multiple: false, + date: false, + suggestedWidth: this.params.width, + suggestedHeight: this.params.height, + }), + new wp.media.controller.CustomizeImageCropper({ + imgSelectOptions: this.calculateImageSelectOptions, + control: this, + }), + ], + }); + + this.frame.on("select", this.onSelectForCrop, this); + this.frame.on("cropped", this.onCropped, this); + this.frame.on("skippedcrop", this.onSkippedCrop, this); + }, + + onSelect: function () { + var attachment = this.frame.state().get("selection").first().toJSON(); + + if ( + this.$thisButton + .closest(".repeater-field") + .hasClass("repeater-field-upload") + ) { + this.setFileInRepeaterField(attachment); + } else { + this.setImageInRepeaterField(attachment); + } + }, + + /** + * After an image is selected in the media modal, switch to the cropper + * state if the image isn't the right size. + */ + + onSelectForCrop: function () { + var attachment = this.frame.state().get("selection").first().toJSON(); + + if ( + this.params.width === attachment.width && + this.params.height === attachment.height && + !this.params.flex_width && + !this.params.flex_height + ) { + this.setImageInRepeaterField(attachment); + } else { + this.frame.setState("cropper"); + } + }, + + /** + * After the image has been cropped, apply the cropped image data to the setting. + * + * @param {object} croppedImage Cropped attachment data. + * @returns {void} + */ + onCropped: function (croppedImage) { + this.setImageInRepeaterField(croppedImage); + }, + + /** + * Returns a set of options, computed from the attached image data and + * control-specific data, to be fed to the imgAreaSelect plugin in + * wp.media.view.Cropper. + * + * @param {wp.media.model.Attachment} attachment - The attachment from the WP API. + * @param {wp.media.controller.Cropper} controller - Media controller. + * @returns {Object} - Options. + */ + calculateImageSelectOptions: function (attachment, controller) { + var control = controller.get("control"), + flexWidth = !!parseInt(control.params.flex_width, 10), + flexHeight = !!parseInt(control.params.flex_height, 10), + realWidth = attachment.get("width"), + realHeight = attachment.get("height"), + xInit = parseInt(control.params.width, 10), + yInit = parseInt(control.params.height, 10), + ratio = xInit / yInit, + xImg = realWidth, + yImg = realHeight, + x1, + y1, + imgSelectOptions; + + controller.set( + "canSkipCrop", + !control.mustBeCropped( + flexWidth, + flexHeight, + xInit, + yInit, + realWidth, + realHeight + ) + ); + + if (xImg / yImg > ratio) { + yInit = yImg; + xInit = yInit * ratio; + } else { + xInit = xImg; + yInit = xInit / ratio; + } + + x1 = (xImg - xInit) / 2; + y1 = (yImg - yInit) / 2; + + imgSelectOptions = { + handles: true, + keys: true, + instance: true, + persistent: true, + imageWidth: realWidth, + imageHeight: realHeight, + x1: x1, + y1: y1, + x2: xInit + x1, + y2: yInit + y1, + }; + + if (false === flexHeight && false === flexWidth) { + imgSelectOptions.aspectRatio = xInit + ":" + yInit; + } + if (false === flexHeight) { + imgSelectOptions.maxHeight = yInit; + } + if (false === flexWidth) { + imgSelectOptions.maxWidth = xInit; + } + + return imgSelectOptions; + }, + + /** + * Return whether the image must be cropped, based on required dimensions. + * + * @param {bool} flexW - The flex-width. + * @param {bool} flexH - The flex-height. + * @param {int} dstW - Initial point distance in the X axis. + * @param {int} dstH - Initial point distance in the Y axis. + * @param {int} imgW - Width. + * @param {int} imgH - Height. + * @returns {bool} - Whether the image must be cropped or not based on required dimensions. + */ + mustBeCropped: function (flexW, flexH, dstW, dstH, imgW, imgH) { + return !( + (true === flexW && true === flexH) || + (true === flexW && dstH === imgH) || + (true === flexH && dstW === imgW) || + (dstW === imgW && dstH === imgH) || + imgW <= dstW + ); + }, + + /** + * If cropping was skipped, apply the image data directly to the setting. + * + * @returns {void} + */ + onSkippedCrop: function () { + var attachment = this.frame.state().get("selection").first().toJSON(); + this.setImageInRepeaterField(attachment); + }, + + /** + * Updates the setting and re-renders the control UI. + * + * @param {object} attachment - The attachment object. + * @returns {void} + */ + setImageInRepeaterField: function (attachment) { + var $targetDiv = this.$thisButton.closest( + ".repeater-field-image,.repeater-field-cropped_image" + ); + + $targetDiv + .find(".kirki-image-attachment") + .html('') + .hide() + .slideDown("slow"); + + $targetDiv.find(".hidden-field").val(attachment.id); + this.$thisButton.text(this.$thisButton.data("alt-label")); + $targetDiv.find(".remove-button").show(); + + //This will activate the save button + $targetDiv.find("input, textarea, select").trigger("change"); + this.frame.close(); + }, + + /** + * Updates the setting and re-renders the control UI. + * + * @param {object} attachment - The attachment object. + * @returns {void} + */ + setFileInRepeaterField: function (attachment) { + var $targetDiv = this.$thisButton.closest(".repeater-field-upload"); + + $targetDiv + .find(".kirki-file-attachment") + .html( + ' ' + + attachment.filename + + "" + ) + .hide() + .slideDown("slow"); + + $targetDiv.find(".hidden-field").val(attachment.id); + this.$thisButton.text(this.$thisButton.data("alt-label")); + $targetDiv.find(".upload-button").show(); + $targetDiv.find(".remove-button").show(); + + //This will activate the save button + $targetDiv.find("input, textarea, select").trigger("change"); + this.frame.close(); + }, + + getMimeType: function () { + // We get the field id from which this was called + var currentFieldId = this.$thisButton + .siblings("input.hidden-field") + .attr("data-field"); + + // Make sure we got it + if (_.isString(currentFieldId) && "" !== currentFieldId) { + // Make fields is defined and only do the hack for cropped_image + if ( + _.isObject(this.params.fields[currentFieldId]) && + "upload" === this.params.fields[currentFieldId].type + ) { + // If the attribute exists in the field + if (!_.isUndefined(this.params.fields[currentFieldId].mime_type)) { + // Set the attribute in the main object + return this.params.fields[currentFieldId].mime_type; + } + } + } + return "image"; + }, + + removeImage: function (event) { + var $targetDiv, $uploadButton; + + if (wp.customize.utils.isKeydownButNotEnterEvent(event)) { + return; + } + + $targetDiv = this.$thisButton.closest( + ".repeater-field-image,.repeater-field-cropped_image,.repeater-field-upload" + ); + $uploadButton = $targetDiv.find(".upload-button"); + + $targetDiv.find(".kirki-image-attachment").slideUp("fast", function () { + jQuery(this).show().html(jQuery(this).data("placeholder")); + }); + $targetDiv.find(".hidden-field").val(""); + $uploadButton.text($uploadButton.data("label")); + this.$thisButton.hide(); + + $targetDiv.find("input, textarea, select").trigger("change"); + }, + + removeFile: function (event) { + var $targetDiv, $uploadButton; + + if (wp.customize.utils.isKeydownButNotEnterEvent(event)) { + return; + } + + $targetDiv = this.$thisButton.closest(".repeater-field-upload"); + $uploadButton = $targetDiv.find(".upload-button"); + + $targetDiv.find(".kirki-file-attachment").slideUp("fast", function () { + jQuery(this).show().html(jQuery(this).data("placeholder")); + }); + $targetDiv.find(".hidden-field").val(""); + $uploadButton.text($uploadButton.data("label")); + this.$thisButton.hide(); + + $targetDiv.find("input, textarea, select").trigger("change"); + }, + + /** + * Get the current value of the setting + * + * @returns {Object} - Returns the value. + */ + getValue: function () { + // The setting is saved in JSON + return JSON.parse(decodeURI(this.setting.get())); + }, + + /** + * Set a new value for the setting + * + * @param {Object} newValue - The new value. + * @param {bool} refresh - If we want to refresh the previewer or not + * @param {bool} filtering - If we want to filter or not. + * @returns {void} + */ + setValue: function (newValue, refresh, filtering) { + // We need to filter the values after the first load to remove data requrired for diplay but that we don't want to save in DB + var filteredValue = newValue, + filter = []; + + if (filtering) { + jQuery.each(this.params.fields, function (index, value) { + if ( + "image" === value.type || + "cropped_image" === value.type || + "upload" === value.type + ) { + filter.push(index); + } + }); + jQuery.each(newValue, function (index, value) { + jQuery.each(filter, function (ind, field) { + if (!_.isUndefined(value[field]) && !_.isUndefined(value[field].id)) { + filteredValue[index][field] = value[field].id; + } + }); + }); + } + + this.setting.set(encodeURI(JSON.stringify(filteredValue))); + + if (refresh) { + // Trigger the change event on the hidden field so + // previewer refresh the website on Customizer + this.settingField.trigger("change"); + } + }, + + /** + * Add a new row to repeater settings based on the structure. + * + * @param {Object} data - (Optional) Object of field => value pairs (undefined if you want to get the default values) + * @returns {Object} - Returns the new row. + */ + addRow: function (data) { + var control = this, + template = control.repeaterTemplate(), // The template for the new row (defined on Kirki_Customize_Repeater_Control::render_content() ). + settingValue = this.getValue(), // Get the current setting value. + newRowSetting = {}, // Saves the new setting data. + templateData, // Data to pass to the template + newRow, + i; + + if (template) { + // The control structure is going to define the new fields + // We need to clone control.params.fields. Assigning it + // ould result in a reference assignment. + templateData = jQuery.extend(true, {}, control.params.fields); + + // But if we have passed data, we'll use the data values instead + if (data) { + for (i in data) { + if (data.hasOwnProperty(i) && templateData.hasOwnProperty(i)) { + templateData[i].default = data[i]; + } + } + } + + templateData.index = this.currentIndex; + + // Append the template content + template = template(templateData); + + // Create a new row object and append the element + newRow = new RepeaterRow( + control.currentIndex, + jQuery(template).appendTo(control.repeaterFieldsContainer), + control.params.row_label, + control + ); + + newRow.container.on("row:remove", function (e, rowIndex) { + control.deleteRow(rowIndex); + }); + + newRow.container.on( + "row:update", + function (e, rowIndex, fieldName, element) { + control.updateField.call(control, e, rowIndex, fieldName, element); // eslint-disable-line no-useless-call + newRow.updateLabel(); + } + ); + + // Add the row to rows collection + this.rows[this.currentIndex] = newRow; + + for (i in templateData) { + if (templateData.hasOwnProperty(i)) { + newRowSetting[i] = templateData[i].default; + } + } + + settingValue[this.currentIndex] = newRowSetting; + this.setValue(settingValue, true); + + this.currentIndex++; + + return newRow; + } + }, + + sort: function () { + var control = this, + $rows = this.repeaterFieldsContainer.find(".repeater-row"), + newOrder = [], + settings = control.getValue(), + newRows = [], + newSettings = []; + + $rows.each(function (i, element) { + newOrder.push(jQuery(element).data("row")); + }); + + jQuery.each(newOrder, function (newPosition, oldPosition) { + newRows[newPosition] = control.rows[oldPosition]; + newRows[newPosition].setRowIndex(newPosition); + + newSettings[newPosition] = settings[oldPosition]; + }); + + control.rows = newRows; + control.setValue(newSettings); + }, + + /** + * Delete a row in the repeater setting + * + * @param {int} index - Position of the row in the complete Setting Array + * @returns {void} + */ + deleteRow: function (index) { + var currentSettings = this.getValue(), + row, + prop; + + if (currentSettings[index]) { + // Find the row + row = this.rows[index]; + if (row) { + // Remove the row settings + delete currentSettings[index]; + + // Remove the row from the rows collection + delete this.rows[index]; + + // Update the new setting values + this.setValue(currentSettings, true); + } + } + + // Remap the row numbers + for (prop in this.rows) { + if (this.rows.hasOwnProperty(prop) && this.rows[prop]) { + this.rows[prop].updateLabel(); + } + } + }, + + /** + * Update a single field inside a row. + * Triggered when a field has changed + * + * @param {Object} e - Event Object + * @param {int} rowIndex - The row's index as an integer. + * @param {string} fieldId - The field ID. + * @param {string|Object} element - The element's identifier, or jQuery Object of the element. + * @returns {void} + */ + updateField: function (e, rowIndex, fieldId, element) { + var type, row, currentSettings; + + if (!this.rows[rowIndex]) { + return; + } + + if (!this.params.fields[fieldId]) { + return; + } + + type = this.params.fields[fieldId].type; + row = this.rows[rowIndex]; + currentSettings = this.getValue(); + + element = jQuery(element); + + if (_.isUndefined(currentSettings[row.rowIndex][fieldId])) { + return; + } + + if ("checkbox" === type) { + currentSettings[row.rowIndex][fieldId] = element.is(":checked"); + } else { + // Update the settings + currentSettings[row.rowIndex][fieldId] = element.val(); + } + this.setValue(currentSettings, true); + }, + + /** + * Init the color picker on color fields + * Called after AddRow + * + * @returns {void} + */ + initColorPicker: function () { + var control = this; + var colorPicker = control.container.find(".kirki-classic-color-picker"); + var fieldId = colorPicker.data("field"); + var options = {}; + + // We check if the color palette parameter is defined. + if ( + !_.isUndefined(fieldId) && + !_.isUndefined(control.params.fields[fieldId]) && + !_.isUndefined(control.params.fields[fieldId].palettes) && + _.isObject(control.params.fields[fieldId].palettes) + ) { + options.palettes = control.params.fields[fieldId].palettes; + } + + // When the color picker value is changed we update the value of the field + options.change = function (event, ui) { + var currentPicker = jQuery(event.target); + var row = currentPicker.closest(".repeater-row"); + var rowIndex = row.data("row"); + var currentSettings = control.getValue(); + var value = ui.color._alpha < 1 ? ui.color.to_s() : ui.color.toString(); + + currentSettings[rowIndex][currentPicker.data("field")] = value; + control.setValue(currentSettings, true); + + // By default if the alpha is 1, the input will be rgb. + // We setTimeout to 50ms to prevent race value set. + setTimeout(function() { + event.target.value = value; + }, 50); + }; + + // Init the color picker + if (colorPicker.length && 0 !== colorPicker.length) { + colorPicker.wpColorPicker(options); + } + }, + + /** + * Init the dropdown-pages field. + * Called after AddRow + * + * @param {object} theNewRow the row that was added to the repeater + * @param {object} data the data for the row if we're initializing a pre-existing row + * @returns {void} + */ + initSelect: function (theNewRow, data) { + var control = this, + dropdown = theNewRow.container.find(".repeater-field select"), + dataField; + + if (0 === dropdown.length) { + return; + } + + dataField = dropdown.data("field"); + multiple = jQuery(dropdown).data("multiple"); + + data = data || {}; + data[dataField] = data[dataField] || ""; + + jQuery(dropdown).val(data[dataField] || jQuery(dropdown).val()); + + this.container.on("change", ".repeater-field select", function (event) { + var currentDropdown = jQuery(event.target), + row = currentDropdown.closest(".repeater-row"), + rowIndex = row.data("row"), + currentSettings = control.getValue(); + + currentSettings[rowIndex][currentDropdown.data("field")] = + jQuery(this).val(); + control.setValue(currentSettings); + }); + }, +}); diff --git a/functions/kirki/packages/kirki-framework/module-css/src/CSS.php b/functions/kirki/packages/kirki-framework/module-css/src/CSS.php index b1f670f..393d73c 100644 --- a/functions/kirki/packages/kirki-framework/module-css/src/CSS.php +++ b/functions/kirki/packages/kirki-framework/module-css/src/CSS.php @@ -61,6 +61,17 @@ class CSS { */ private static $css_handle = 'kirki-styles'; + /** + * The default id for kirki's inline style tag. + * + * @since 4.0.23 + * @access private + * @static + * + * @var string + */ + private static $inline_styles_id = 'kirki-inline-styles'; + /** * Constructor * @@ -181,8 +192,32 @@ class CSS { */ public function print_styles_inline() { - echo ''; } @@ -270,6 +305,10 @@ class CSS { $configs = Kirki::$config; foreach ( $configs as $config_id => $args ) { + if ( defined( 'KIRKI_NO_OUTPUT' ) && true === KIRKI_NO_OUTPUT ) { + continue; + } + if ( isset( $args['disable_output'] ) && true === $args['disable_output'] ) { continue; } diff --git a/functions/kirki/packages/kirki-framework/module-editor-styles/src/Editor_Styles.php b/functions/kirki/packages/kirki-framework/module-editor-styles/src/Editor_Styles.php index fc9fe48..0bb3a6f 100644 --- a/functions/kirki/packages/kirki-framework/module-editor-styles/src/Editor_Styles.php +++ b/functions/kirki/packages/kirki-framework/module-editor-styles/src/Editor_Styles.php @@ -141,14 +141,12 @@ class Editor_Styles { return true; } - if ( ! empty( $args ) ) { - if ( isset( $args['disable_output'] ) && true === $args['disable_output'] ) { - return true; - } - - if ( ! isset( $args['gutenberg_support'] ) || true !== $args['gutenberg_support'] ) { - return true; - } + /** + * We would prefer to use "KIRKI_GUTENBERG_OUTPUT" instead. + * For consistency however, we will use "KIRKI_NO_GUTENBERG_OUTPUT". + */ + if ( defined( 'KIRKI_NO_GUTENBERG_OUTPUT' ) && true === KIRKI_NO_GUTENBERG_OUTPUT ) { + return true; } return false; diff --git a/functions/kirki/packages/kirki-framework/module-postmessage/src/postMessage.js b/functions/kirki/packages/kirki-framework/module-postmessage/src/postMessage.js index 4f0b0e2..ea93010 100644 --- a/functions/kirki/packages/kirki-framework/module-postmessage/src/postMessage.js +++ b/functions/kirki/packages/kirki-framework/module-postmessage/src/postMessage.js @@ -166,6 +166,7 @@ var kirkiPostMessage = { if ( output.choice && key !== output.choice ) { return; } + processedValue = kirkiPostMessage.util.processValue( output, val ); if ( '' === processedValue ) { @@ -176,8 +177,10 @@ var kirkiPostMessage = { } } + var customProperty = controlType === 'kirki-sortable' ? output.property + '-' + key : output.property; + if ( false !== processedValue ) { - styles += output.property ? output.property + '-' + key + ':' + processedValue + ';' : key + ':' + processedValue + ';'; + styles += output.property ? customProperty + ":" + processedValue + ";" : key + ":" + processedValue + ";"; } } ); styles += '}'; diff --git a/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Async.php b/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Async.php index dc3dd89..139d1f4 100644 --- a/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Async.php +++ b/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Async.php @@ -86,7 +86,7 @@ final class Async { add_action( 'admin_enqueue_scripts', [ $this, 'webfont_loader' ] ); add_action( 'admin_enqueue_scripts', [ $this, 'webfont_loader_script' ], 30 ); - add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 ); + // add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 ); } /** diff --git a/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Embed.php b/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Embed.php index bd8b5c4..2cf3977 100644 --- a/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Embed.php +++ b/functions/kirki/packages/kirki-framework/module-webfonts/src/Webfonts/Embed.php @@ -70,7 +70,7 @@ final class Embed { $this->googlefonts = $googlefonts; add_action( 'wp', [ $this, 'init' ], 9 ); - add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 ); + // add_filter( 'wp_resource_hints', [ $this, 'resource_hints' ], 10, 2 ); } /** @@ -102,6 +102,7 @@ final class Embed { 'crossorigin', ]; } + return $urls; } diff --git a/functions/kirki/readme.txt b/functions/kirki/readme.txt index 90c52da..c6ada58 100644 --- a/functions/kirki/readme.txt +++ b/functions/kirki/readme.txt @@ -2,22 +2,24 @@ Contributors: davidvongries, aristath, dannycooper, wplemon, igmoweb Tags: customizer, options framework, theme, mods, toolkit, gutenberg Requires at least: 5.2 -Tested up to: 5.9 -Stable tag: 4.0.22 +Tested up to: 6 +Stable tag: 4.0.24 License: MIT License URI: https://opensource.org/licenses/MIT -The ultimate customizer framework for WordPress theme developers. +The Ultimate Customizer Framework for WordPress Theme Developers == Description == [![Build Status](https://travis-ci.org/aristath/kirki.svg?branch=develop)](https://travis-ci.org/aristath/kirki) [![Code Climate](https://codeclimate.com/github/aristath/kirki/badges/gpa.svg)](https://codeclimate.com/github/aristath/kirki) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/66d6d8b6a4654cd18686ed1cd9f1bfb3)](https://www.codacy.com/app/aristath/kirki?utm_source=github.com&utm_medium=referral&utm_content=aristath/kirki&utm_campaign=Badge_Grade) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/aristath/kirki/badges/quality-score.png?b=develop)](https://scrutinizer-ci.com/g/aristath/kirki/?branch=develop) +**NEW - [Kirki PRO](https://kirki.org/extensions/?utm_source=repo&utm_medium=description&utm_campaign=kirki) is now available!** + [Kirki](https://kirki.org/?utm_source=repo&utm_medium=description&utm_campaign=kirki) allows theme developers to build themes quicker & more easily. With over **30 custom controls** ranging from simple sliders to complex typography controls with Google-Fonts integration and features like automatic CSS & `postMessage` script generation, Kirki makes theme development a breeze. -### Features ### +### Features ✅ ### * Increased Performance * Simplified API * Automatic CSS Generation @@ -28,8 +30,7 @@ With over **30 custom controls** ranging from simple sliders to complex typograp * Improved Page Speed * & more! -### Controls ### - +### Controls 🎛️ ### * [Background Customizer Control](https://kirki.org/docs/controls/background) * [Code Customizer Control](https://kirki.org/docs/controls/code) * [Checkbox Customizer Control](https://kirki.org/docs/controls/checkbox) @@ -62,30 +63,25 @@ With over **30 custom controls** ranging from simple sliders to complex typograp * [Typography Customizer Control](https://kirki.org/docs/controls/typography) * [Upload Customizer Control](https://kirki.org/docs/controls/upload) -### Theme Example ### +### Kirki PRO Extensions 🏆 ### +Create the WordPress experience your customers deserve with [Kirki PRO Extensions](https://kirki.org/extensions/?utm_source=repo&utm_medium=description&utm_campaign=kirki). -[Page Builder Framework](https://wp-pagebuilderframework.com?utm_source=kirki&utm_medium=repo&utm_campaign=wpbf)'s customizer settings are a prime example of what can be achieved with Kirki. +## PRO Features ## +* Tabs +* Responsive Controls +* Input Slider +* Headlines & Dividers +* Margin & Padding Controls -Conditional Logic, Partial Refresh, postMessage and a variety of controls - It has all of it. - -### Documentation ### +Learn more about [Kirki PRO](https://kirki.org/extensions/?utm_source=repo&utm_medium=description&utm_campaign=kirki). +### Documentation 📖 ### You can find detailed documentation on how to use Kirki on [kirki.org](https://kirki.org/?utm_source=repo&utm_medium=description&utm_campaign=kirki) -### Kirki PRO ### - -Kirki PRO is currently in development. You can [sign up for the waiting list](https://kirki.org/pricing/?utm_source=repo&utm_medium=description&utm_campaign=kirki) here to be notified about updates. - -### Disclaimer ### - -Theme developers should be familiar with the Customizer API before starting to build a theme using Kirki. An excellent handbook for the WordPress Customizer can be found on the [developer.wordpress.org](https://developer.wordpress.org/themes/customize-api/) website. - == Installation == - Simply install as a normal WordPress plugin and activate. If you want to integrate Kirki in your theme or plugin, please read the instructions on [our documentation site](https://kirki.org/docs/integration). == Changelog == - [See the changelogs here](https://github.com/kirki-framework/kirki/blob/master/CHANGELOG.md).