first commit
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 kirki-framework
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
# control-palette
|
||||
|
||||
## Installation
|
||||
|
||||
First, install the package using composer:
|
||||
|
||||
```bash
|
||||
composer require kirki-framework/control-palette
|
||||
```
|
||||
|
||||
Make sure you include the autoloader:
|
||||
```php
|
||||
require_once get_parent_theme_file_path( 'vendor/autoload.php' );
|
||||
```
|
||||
|
||||
To add a control using the customizer API:
|
||||
|
||||
```php
|
||||
/**
|
||||
* Registers the control and whitelists it for JS templating.
|
||||
*
|
||||
* @since 1.0
|
||||
* @param WP_Customize_Manager $wp_customize The WP_Customize_Manager object.
|
||||
* @return void
|
||||
*/
|
||||
add_action( 'customize_register', function( $wp_customize ) {
|
||||
$wp_customize->register_control_type( '\Kirki\Control\Palette' );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Add Customizer settings & controls.
|
||||
*
|
||||
* @since 1.0
|
||||
* @param WP_Customize_Manager $wp_customize The WP_Customize_Manager object.
|
||||
* @return void
|
||||
*/
|
||||
add_action( 'customize_register', function( $wp_customize ) {
|
||||
|
||||
// Add settings.
|
||||
$wp_customize->add_setting( 'my_control_code', [
|
||||
'type' => 'theme_mod',
|
||||
'capability' => 'edit_theme_options',
|
||||
'default' => '',
|
||||
'transport' => 'refresh', // Or postMessage.
|
||||
'sanitize_callback' => 'sanitize_text_field', // Or a custom sanitization callback.
|
||||
] );
|
||||
|
||||
// Add controls.
|
||||
$wp_customize->add_control( new \Kirki\Control\Palette( $wp_customize, 'my_control_code', [
|
||||
'label' => esc_html__( 'My Control', 'theme_textdomain' ),
|
||||
'section' => 'my_section',
|
||||
'choices' => [
|
||||
'green' => [ '#E8F5E9', '#C8E6C9', '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50', '#43A047', '#388E3C', '#2E7D32', '#1B5E20', '#B9F6CA', '#69F0AE', '#00E676', '#00C853' ],
|
||||
'bnw' => [ '#000000', '#ffffff' ],
|
||||
],
|
||||
] ) );
|
||||
} );
|
||||
```
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "kirki-framework/control-palette",
|
||||
"type": "library",
|
||||
"description": "Palette control for the Kirki Customizer framework.",
|
||||
"keywords": [
|
||||
"wordpress",
|
||||
"customizer",
|
||||
"framework"
|
||||
],
|
||||
"homepage": "https://kirki.org",
|
||||
"license": "MIT",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Kirki Framework",
|
||||
"email": "connect@mapsteps.com"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"php": ">=7.0",
|
||||
"kirki-framework/url-getter": "*",
|
||||
"kirki-framework/control-radio": "*"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Kirki\\Control\\": "src/Control",
|
||||
"Kirki\\Field\\": "src/Field"
|
||||
}
|
||||
}
|
||||
}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
.customize-control-kirki-palette{position:relative}.customize-control-kirki-palette input[type=radio]{display:none}.customize-control-kirki-palette input[type=radio]:checked+label{border:3px solid rgba(0,0,0,.4)}.customize-control-kirki-palette label{background:none;border-bottom:3px solid transparent;border-top:3px solid transparent;display:flex;margin-bottom:5px;padding:0}.customize-control-kirki-palette label span{border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);color:transparent;flex-grow:1;font-size:0;line-height:10px;padding:10px 0;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.customize-control-kirki-palette label span:first-child{border-left:1px solid rgba(0,0,0,.1)}.customize-control-kirki-palette label span:last-child{border-right:1px solid rgba(0,0,0,.1)}.customize-control-kirki-palette label span:hover{color:#000;flex-grow:3;font-size:10px;line-height:10px;min-width:60px;padding:10px}
|
||||
/*# sourceMappingURL=control.css.map */
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"mappings":"AAAA,iCACE,iBCCF,CDCE,mDACE,YCCJ,CDEM,iEACE,+BCAR,CDKE,uCACE,eAAA,CAGA,mCAAA,CADA,gCAAA,CAGA,YAAA,CADA,iBAAA,CAHA,SCCJ,CDKI,4CAYE,sCAAA,CADA,mCAAA,CANA,iBAAA,CAHA,WAAA,CACA,WAAA,CACA,gBAAA,CAHA,cAAA,CAKA,sCAAA,CACA,mCAAA,CACA,kCAAA,CACA,iCAAA,CACA,8BCDN,CDKM,wDACE,oCCHR,CDMM,uDACE,qCCJR,CDOM,kDAME,UAAA,CAJA,WAAA,CAEA,cAAA,CACA,gBAAA,CAFA,cAAA,CAFA,YCAR","sources":["packages/kirki-framework/control-palette/src/control.scss","%3Cinput%20css%20BymBeB%3E"],"sourcesContent":[".customize-control-kirki-palette {\r\n position: relative;\r\n\r\n input[type=\"radio\"] {\r\n display: none;\r\n\r\n &:checked {\r\n + label {\r\n border: 3px solid rgba(0,0,0,.4);\r\n }\r\n }\r\n }\r\n\r\n label {\r\n background: none;\r\n padding: 0;\r\n border-top: 3px solid transparent;\r\n border-bottom: 3px solid transparent;\r\n margin-bottom: 5px;\r\n display: flex;\r\n\r\n span {\r\n padding: 10px 0;\r\n flex-grow: 1;\r\n font-size: 0;\r\n line-height: 10px;\r\n color: rgba(0,0,0,0);\r\n -webkit-transition: all 200ms ease-in-out;\r\n -moz-transition: all 200ms ease-in-out;\r\n -ms-transition: all 200ms ease-in-out;\r\n -o-transition: all 200ms ease-in-out;\r\n transition: all 200ms ease-in-out;\r\n border-top: 1px solid rgba(0,0,0,.1);\r\n border-bottom: 1px solid rgba(0,0,0,.1);\r\n\r\n &:first-child {\r\n border-left: 1px solid rgba(0,0,0,.1);\r\n }\r\n\r\n &:last-child {\r\n border-right: 1px solid rgba(0,0,0,.1);\r\n }\r\n\r\n &:hover {\r\n padding: 10px;\r\n flex-grow: 3;\r\n min-width: 60px;\r\n font-size: 10px;\r\n line-height: 10px;\r\n color: #000;\r\n }\r\n }\r\n }\r\n}\r\n",".customize-control-kirki-palette {\n position: relative;\n}\n.customize-control-kirki-palette input[type=radio] {\n display: none;\n}\n.customize-control-kirki-palette input[type=radio]:checked + label {\n border: 3px solid rgba(0, 0, 0, 0.4);\n}\n.customize-control-kirki-palette label {\n background: none;\n padding: 0;\n border-top: 3px solid transparent;\n border-bottom: 3px solid transparent;\n margin-bottom: 5px;\n display: flex;\n}\n.customize-control-kirki-palette label span {\n padding: 10px 0;\n flex-grow: 1;\n font-size: 0;\n line-height: 10px;\n color: rgba(0, 0, 0, 0);\n -webkit-transition: all 200ms ease-in-out;\n -moz-transition: all 200ms ease-in-out;\n -ms-transition: all 200ms ease-in-out;\n -o-transition: all 200ms ease-in-out;\n transition: all 200ms ease-in-out;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n.customize-control-kirki-palette label span:first-child {\n border-left: 1px solid rgba(0, 0, 0, 0.1);\n}\n.customize-control-kirki-palette label span:last-child {\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n}\n.customize-control-kirki-palette label span:hover {\n padding: 10px;\n flex-grow: 3;\n min-width: 60px;\n font-size: 10px;\n line-height: 10px;\n color: #000;\n}\n/*# sourceMappingURL=control.css.map */\n"],"names":[],"version":3,"file":"control.css.map"}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
wp.customize.controlConstructor["kirki-palette"]=wp.customize.kirkiDynamicControl.extend({});
|
||||
//# sourceMappingURL=control.js.map
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"mappings":"AAEAA,GAAGC,UAAUC,mBAAmB,iBAAmBF,GAAGC,UAAUE,oBAAoBC,OAAQ","sources":["packages/kirki-framework/control-palette/src/control.js"],"sourcesContent":["import \"./control.scss\";\n\nwp.customize.controlConstructor['kirki-palette'] = wp.customize.kirkiDynamicControl.extend( {} );\n"],"names":["wp","customize","controlConstructor","kirkiDynamicControl","extend"],"version":3,"file":"control.js.map"}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: palette.
|
||||
*
|
||||
* @package kirki-framework/control-palette
|
||||
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Control;
|
||||
|
||||
use Kirki\Control\Radio;
|
||||
use Kirki\URL;
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Palette control (modified radio).
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Palette extends Radio {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-palette';
|
||||
|
||||
/**
|
||||
* The version. Used in scripts & styles for cache-busting.
|
||||
*
|
||||
* @static
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public static $control_ver = '0.1.1';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @return void
|
||||
*/
|
||||
public function enqueue() {
|
||||
|
||||
parent::enqueue();
|
||||
|
||||
// Enqueue the style.
|
||||
wp_enqueue_style( 'kirki-control-palette', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
|
||||
|
||||
// Enqueue the script.
|
||||
wp_enqueue_script( 'kirki-control-palette', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'kirki-dynamic-control' ], self::$control_ver, false );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
* @since 1.0
|
||||
* @return void
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( ! data.choices ) { return; } #>
|
||||
<span class="customize-control-title">
|
||||
{{{ data.label }}}
|
||||
</span>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div id="input_{{ data.id }}" class="buttonset">
|
||||
<# for ( key in data.choices ) { #>
|
||||
<input {{{ data.inputAttrs }}} type="radio" value="{{ key }}" name="_customize-palette-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( data.value == key ) { #> checked<# } #>>
|
||||
<label for="{{ data.id }}{{ key }}">
|
||||
<# for ( color in data.choices[ key ] ) { #>
|
||||
<span style='background: {{ data.choices[ key ][ color ] }}'>{{ data.choices[ key ][ color ] }}</span>
|
||||
<# } #>
|
||||
</label>
|
||||
</input>
|
||||
<# } #>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
/**
|
||||
* Override field methods
|
||||
*
|
||||
* @package kirki-framework/control-palette
|
||||
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Field;
|
||||
|
||||
/**
|
||||
* Field overrides.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Palette extends Radio {
|
||||
|
||||
/**
|
||||
* The field type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-palette';
|
||||
|
||||
/**
|
||||
* The control class-name.
|
||||
*
|
||||
* @access protected
|
||||
* @since 0.1
|
||||
* @var string
|
||||
*/
|
||||
protected $control_class = '\Kirki\Control\Palette';
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the control.
|
||||
*
|
||||
* @access public
|
||||
* @since 0.1
|
||||
* @param array $args The field arguments.
|
||||
* @param WP_Customize_Manager $wp_customize The customizer instance.
|
||||
* @return array
|
||||
*/
|
||||
public function filter_control_args( $args, $wp_customize ) {
|
||||
if ( $args['settings'] === $this->args['settings'] ) {
|
||||
$args = parent::filter_control_args( $args, $wp_customize );
|
||||
$args['type'] = 'kirki-palette';
|
||||
}
|
||||
return $args;
|
||||
}
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import "./control.scss";
|
||||
|
||||
wp.customize.controlConstructor['kirki-palette'] = wp.customize.kirkiDynamicControl.extend( {} );
|
||||
Reference in New Issue
Block a user