mirror of
https://ghproxy.net/https://github.com/AlxMedia/magaziner.git
synced 2025-08-28 09:43:30 +08:00
Update to Kirki 4.0.22
This commit is contained in:
AlxMedia
parent
2b6ac38550
commit
78edeb1b25
492 changed files with 29668 additions and 39884 deletions
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"]
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
# kirki-framework/control-slider
|
||||
A slider control package for Kirki Customizer Framework.
|
||||
|
||||
## Table of Contents
|
||||
- [kirki-framework/control-slider](#kirki-frameworkcontrol-slider)
|
||||
- [Table of Contents](#table-of-contents)
|
||||
- [Installation](#installation)
|
||||
- [Usage](#usage)
|
||||
- [Using the simplified API](#using-the-simplified-api)
|
||||
- [Using the Customizer API](#using-the-customizer-api)
|
||||
- [Development](#development)
|
||||
- [License](#license)
|
||||
|
||||
## Installation
|
||||
First, install the package using composer:
|
||||
|
||||
```bash
|
||||
composer require kirki-framework/control-slider
|
||||
```
|
||||
|
||||
Then make sure you have included the autoloader:
|
||||
|
||||
```php
|
||||
require_once "your/path/to/vendor/autoload.php";
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
This control can be consumed using Kirki API or using WordPress Customizer API.
|
||||
|
||||
### Using the simplified API
|
||||
|
||||
```php
|
||||
new \Kirki\Field\Slider(
|
||||
[
|
||||
'settings' => 'your_control_setting_id',
|
||||
'label' => esc_html__( 'Your Control Label', 'your-text-domain' ),
|
||||
'description' => esc_html__( 'Your control description.', 'your-text-domain' ),
|
||||
'section' => 'your_section_id',
|
||||
'default' => 5,
|
||||
'choices' => [
|
||||
'min' => 0,
|
||||
'max' => 100,
|
||||
'step' => 1,
|
||||
],
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
### Using the Customizer API
|
||||
|
||||
```php
|
||||
/**
|
||||
* Register customizer settings and controls.
|
||||
*
|
||||
* @param \WP_Customize_Manager $wp_customize The Customizer object.
|
||||
*/
|
||||
function your_customize_register_function( $wp_customize ) {
|
||||
|
||||
// Add setting.
|
||||
$wp_customize->add_setting(
|
||||
'your_control_setting_id',
|
||||
[
|
||||
'type' => 'theme_mod', // Or 'option'.
|
||||
'capability' => 'edit_theme_options',
|
||||
'default' => 5,
|
||||
'transport' => 'postMessage', // Or 'refresh'.
|
||||
'sanitize' => 'intval', // Or 'absint' or other int sanitization.
|
||||
]
|
||||
);
|
||||
|
||||
// Add control.
|
||||
$wp_customize->add_control(
|
||||
new \Kirki\Control\Slider(
|
||||
$wp_customize,
|
||||
'your_control_setting_id',
|
||||
[
|
||||
'label' => esc_html__( 'Your Control Label', 'your-text-domain' ),
|
||||
'description' => esc_html__( 'Your control description.', 'your-text-domain' ),
|
||||
'section' => 'your_section_id',
|
||||
'choices' => [
|
||||
'min' => 0,
|
||||
'max' => 100,
|
||||
'step' => 1,
|
||||
],
|
||||
]
|
||||
)
|
||||
);
|
||||
|
||||
// Add more settings...
|
||||
|
||||
// Add more controls...
|
||||
|
||||
}
|
||||
add_action( 'customize_register', 'your_customize_register_function' );
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
If you want to make changes to this control, you can edit the JS files in the `src` folder.
|
||||
- If you haven't installed the packages, then run `npm install`
|
||||
- After done editing, run `npm run build`
|
||||
|
||||
## License
|
||||
[MIT License](https://oss.ninja/mit?organization=Kirki%20Framework)
|
||||
3
functions/kirki/packages/kirki-framework/control-slider/dist/control.css
vendored
Normal file
3
functions/kirki/packages/kirki-framework/control-slider/dist/control.css
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.customize-control-kirki-slider .kirki-control-label{position:relative;display:block}.customize-control-kirki-slider .customize-control-description{padding-right:30px}.customize-control-kirki-slider .kirki-control-form{position:relative;margin-bottom:12px}.customize-control-kirki-slider .kirki-control-form:hover .kirki-control-reset{opacity:1}.customize-control-kirki-slider .kirki-control-reset{display:flex;align-items:center;justify-content:center;right:0;bottom:22px;position:absolute;padding:0;width:16px;height:16px;color:#50575e;background-color:transparent;border-radius:50%;border-width:0;opacity:0;cursor:pointer;transition:all .3s;z-index:3}.customize-control-kirki-slider .kirki-control-reset:focus{opacity:1}.customize-control-kirki-slider .kirki-control-reset:hover i{color:red;transform:rotate(-45deg)}.customize-control-kirki-slider .kirki-control-reset i{font-size:12px;width:auto;height:auto;transform:rotate(45deg);transition:transform .3s}.customize-control-kirki-slider .kirki-control-cols{display:flex;align-items:center;justify-content:space-between}.customize-control-kirki-slider .kirki-control-left-col{width:90%;padding-right:13px}.customize-control-kirki-slider .kirki-control-right-col{width:10%;text-align:right}.customize-control-kirki-slider .kirki-control-input{font-size:12px;text-align:center;background-color:#f7f7f7;border-color:#bbb;border-radius:4px;z-index:2}.customize-control-kirki-slider .kirki-control-slider{position:relative;top:-1px;padding:0;margin:0;width:100%;height:5px;border-radius:2.5px;background-color:#bdc3c7;outline:none;-webkit-appearance:none}.customize-control-kirki-slider .kirki-control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#f0f0f0;cursor:pointer;border:1px solid #999;box-shadow:none;-webkit-transition:background-color .15s ease-in-out,box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color .15s ease-in-out,box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.customize-control-kirki-slider .kirki-control-slider::-webkit-slider-thumb:hover,.customize-control-kirki-slider .kirki-control-slider::-webkit-slider-thumb:focus{background-color:#e7e7e7}.customize-control-kirki-slider .kirki-control-slider:active::-webkit-slider-thumb{background-color:#e7e7e7}.customize-control-kirki-slider .kirki-control-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background-color:#f0f0f0;cursor:pointer;border:1px solid #999;box-shadow:none;-moz-transition:background-color .15s ease-in-out,box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color .15s ease-in-out,box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.customize-control-kirki-slider .kirki-control-slider::-moz-range-thumb:hover,.customize-control-kirki-slider .kirki-control-slider::-moz-range-thumb:focus{background-color:#e7e7e7}.customize-control-kirki-slider ::-moz-range-track{background-color:#bdc3c7;border:0}.customize-control-kirki-slider input::-moz-focus-inner,.customize-control-kirki-slider input::-moz-focus-outer{border:0}
|
||||
|
||||
/*# sourceMappingURL=control.css.map*/
|
||||
2
functions/kirki/packages/kirki-framework/control-slider/dist/control.js
vendored
Normal file
2
functions/kirki/packages/kirki-framework/control-slider/dist/control.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
(()=>{"use strict";const t=React,e=function(e){var n=e.control,o=e.customizerSetting,a=e.choices,i="";n.updateComponentState=function(t){"slider"===i?s.current.textContent=t:"input"===i?l.current.value=t:"reset"===i&&(s.current.textContent=t,l.current.value=t)};var r="kirki-control-input-".concat(o.id),c=""!==e.value?e.value:0,l=(0,t.useRef)(null),s=(0,t.useRef)(null);return React.createElement("div",{className:"kirki-control-form",tabIndex:"1"},React.createElement("label",{className:"kirki-control-label",htmlFor:r},React.createElement("span",{className:"customize-control-title"},e.label),React.createElement("span",{className:"customize-control-description description",dangerouslySetInnerHTML:{__html:e.description}})),React.createElement("div",{className:"customize-control-notifications-container",ref:e.setNotificationContainer}),React.createElement("button",{type:"button",className:"kirki-control-reset",onClick:function(t){""!==e.default&&void 0!==e.default?(l.current.value=e.default,s.current.textContent=e.default):""!==e.value?(l.current.value=e.value,s.current.textContent=e.value):(l.current.value=a.min,s.current.textContent=""),i="reset",o.set(l.current.value)}},React.createElement("i",{className:"dashicons dashicons-image-rotate"})),React.createElement("div",{className:"kirki-control-cols"},React.createElement("div",{className:"kirki-control-left-col"},React.createElement("input",{ref:l,type:"range",id:r,defaultValue:c,min:a.min,max:a.max,step:a.step,className:"kirki-control-slider",onChange:function(t){i="range"===t.target.type?"slider":"input";var e=t.target.value;e<a.min&&(e=a.min),e>a.max&&(e=a.max),"input"===i&&(t.target.value=e),o.set(e)}})),React.createElement("div",{className:"kirki-control-right-col"},React.createElement("div",{className:"kirki-control-value",ref:s},c))))};function n(){return n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},n.apply(this,arguments)}const o=wp.customize.Control.extend({initialize:function(t,e){var n=this;n.setNotificationContainer=n.setNotificationContainer.bind(n),wp.customize.Control.prototype.initialize.call(n,t,e),wp.customize.control.bind("removed",(function t(e){n===e&&(n.destroy(),n.container.remove(),wp.customize.control.unbind("removed",t))}))},setNotificationContainer:function(t){this.notifications.container=jQuery(t),this.notifications.render()},renderContent:function(){var t=this;ReactDOM.render(React.createElement(e,n({},t.params,{control:t,customizerSetting:t.setting,setNotificationContainer:t.setNotificationCotainer,value:t.params.value})),t.container[0]),!1!==t.params.choices.allowCollapse&&t.container.addClass("allowCollapse")},ready:function(){var t=this;t.setting.bind((function(e){t.updateComponentState(e)}))},updateComponentState:function(t){},destroy:function(){ReactDOM.unmountComponentAtNode(this.container[0]),wp.customize.Control.prototype.destroy&&wp.customize.Control.prototype.destroy.call(this)}});wp.customize.controlConstructor["kirki-slider"]=o})();
|
||||
//# sourceMappingURL=control.js.map
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<?php
|
||||
/**
|
||||
* The slider control.
|
||||
*
|
||||
* Creates a slider control.
|
||||
*
|
||||
* @package kirki-framework/control-slider
|
||||
* @license MIT (https://oss.ninja/mit?organization=Kirki%20Framework)
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Control;
|
||||
|
||||
use Kirki\Control\Base;
|
||||
use Kirki\URL;
|
||||
|
||||
/**
|
||||
* Slider control.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Slider extends Base {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @since 1.0
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-slider';
|
||||
|
||||
/**
|
||||
* The control version.
|
||||
*
|
||||
* @since 1.0
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public static $control_ver = '1.0.4';
|
||||
|
||||
/**
|
||||
* Enqueue control related styles/scripts.
|
||||
*
|
||||
* @since 1.0
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
|
||||
parent::enqueue();
|
||||
|
||||
// Enqueue the style.
|
||||
wp_enqueue_style( 'kirki-control-slider', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
|
||||
|
||||
// Enqueue the script.
|
||||
wp_enqueue_script( 'kirki-control-slider', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-controls', 'customize-base', 'react-dom' ], self::$control_ver, false );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*
|
||||
* @since 1.0
|
||||
* @access public
|
||||
*/
|
||||
public function to_json() {
|
||||
|
||||
parent::to_json();
|
||||
|
||||
$this->json['choices'] = wp_parse_args(
|
||||
$this->json['choices'],
|
||||
[
|
||||
'min' => 0,
|
||||
'max' => 100,
|
||||
'step' => 1,
|
||||
]
|
||||
);
|
||||
|
||||
if ( isset( $this->json['label'] ) ) {
|
||||
$this->json['label'] = html_entity_decode( $this->json['label'] );
|
||||
}
|
||||
|
||||
if ( isset( $this->json['description'] ) ) {
|
||||
$this->json['description'] = html_entity_decode( $this->json['description'] );
|
||||
}
|
||||
|
||||
$this->json['choices']['min'] = (float) $this->json['choices']['min'];
|
||||
$this->json['choices']['max'] = (float) $this->json['choices']['max'];
|
||||
$this->json['choices']['step'] = (float) $this->json['choices']['step'];
|
||||
|
||||
$this->json['value'] = $this->json['value'] < $this->json['choices']['min'] ? $this->json['choices']['min'] : $this->json['value'];
|
||||
$this->json['value'] = $this->json['value'] > $this->json['choices']['max'] ? $this->json['choices']['max'] : $this->json['value'];
|
||||
$this->json['value'] = (float) $this->json['value'];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 WP_Customize_Control::to_json().
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
protected function content_template() {}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?php
|
||||
/**
|
||||
* Override field methods.
|
||||
*
|
||||
* @package kirki-framework/control-slider
|
||||
* @license MIT (https://oss.ninja/mit?organization=Kirki%20Framework)
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Field;
|
||||
|
||||
use Kirki\Field;
|
||||
|
||||
/**
|
||||
* Field overrides.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Slider extends Field {
|
||||
|
||||
/**
|
||||
* The field type.
|
||||
*
|
||||
* @since 1.0
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-slider';
|
||||
|
||||
/**
|
||||
* The control class-name.
|
||||
*
|
||||
* @since 1.0
|
||||
* @access protected
|
||||
* @var string
|
||||
*/
|
||||
protected $control_class = '\Kirki\Control\Slider';
|
||||
|
||||
/**
|
||||
* Whether we should register the control class for JS-templating or not.
|
||||
*
|
||||
* @since 1.0
|
||||
* @access protected
|
||||
* @var bool
|
||||
*/
|
||||
protected $control_has_js_template = true;
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the setting.
|
||||
*
|
||||
* @param array $args The field arguments.
|
||||
* @param \WP_Customize_Manager $wp_customize The customizer instance.
|
||||
*
|
||||
* @return array $args The maybe-filtered arguments.
|
||||
*/
|
||||
public function filter_setting_args( $args, $wp_customize ) {
|
||||
|
||||
if ( $args['settings'] === $this->args['settings'] ) {
|
||||
$args = parent::filter_setting_args( $args, $wp_customize );
|
||||
|
||||
// Set the sanitize_callback if none is defined.
|
||||
if ( ! isset( $args['sanitize_callback'] ) || ! $args['sanitize_callback'] ) {
|
||||
$args['sanitize_callback'] = function ( $value ) {
|
||||
return filter_var( $value, FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the control.
|
||||
*
|
||||
* @param array $args The field arguments.
|
||||
* @param \WP_Customize_Manager $wp_customize The customizer instance.
|
||||
*
|
||||
* @return array $args The maybe-filtered arguments.
|
||||
*/
|
||||
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-slider';
|
||||
}
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import KirkiSliderForm from './KirkiSliderForm';
|
||||
|
||||
/**
|
||||
* KirkiSliderControl.
|
||||
*
|
||||
* Global objects brought:
|
||||
* - wp
|
||||
* - jQuery
|
||||
* - React
|
||||
* - ReactDOM
|
||||
*
|
||||
* @class
|
||||
* @augments wp.customize.Control
|
||||
* @augments wp.customize.Class
|
||||
*/
|
||||
const KirkiSliderControl = wp.customize.Control.extend({
|
||||
|
||||
/**
|
||||
* Initialize.
|
||||
*
|
||||
* @param {string} id - Control ID.
|
||||
* @param {object} params - Control params.
|
||||
*/
|
||||
initialize: function (id, params) {
|
||||
const control = this;
|
||||
|
||||
// Bind functions to this control context for passing as React props.
|
||||
control.setNotificationContainer = control.setNotificationContainer.bind(control);
|
||||
|
||||
wp.customize.Control.prototype.initialize.call(control, id, params);
|
||||
|
||||
// The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.
|
||||
function onRemoved(removedControl) {
|
||||
if (control === removedControl) {
|
||||
control.destroy();
|
||||
control.container.remove();
|
||||
wp.customize.control.unbind('removed', onRemoved);
|
||||
}
|
||||
}
|
||||
wp.customize.control.bind('removed', onRemoved);
|
||||
},
|
||||
|
||||
/**
|
||||
* Set notification container and render.
|
||||
*
|
||||
* This is called when the React component is mounted.
|
||||
*
|
||||
* @param {Element} element - Notification container.
|
||||
* @returns {void}
|
||||
*/
|
||||
setNotificationContainer: function setNotificationContainer(element) {
|
||||
const control = this;
|
||||
|
||||
control.notifications.container = jQuery(element);
|
||||
control.notifications.render();
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the control into the DOM.
|
||||
*
|
||||
* This is called from the Control#embed() method in the parent class.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
renderContent: function renderContent() {
|
||||
const control = this;
|
||||
|
||||
ReactDOM.render(
|
||||
<KirkiSliderForm
|
||||
{...control.params}
|
||||
control={control}
|
||||
customizerSetting={control.setting}
|
||||
setNotificationContainer={control.setNotificationCotainer}
|
||||
value={control.params.value}
|
||||
/>,
|
||||
control.container[0]
|
||||
);
|
||||
|
||||
if (false !== control.params.choices.allowCollapse) {
|
||||
control.container.addClass('allowCollapse');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* After control has been first rendered, start re-rendering when setting changes.
|
||||
*
|
||||
* React is able to be used here instead of the wp.customize.Element abstraction.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
ready: function ready() {
|
||||
const control = this;
|
||||
|
||||
/**
|
||||
* Update component value's state when customizer setting's value is changed.
|
||||
*/
|
||||
control.setting.bind((val) => {
|
||||
control.updateComponentState(val);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* This method will be overriden by the rendered component.
|
||||
*/
|
||||
updateComponentState: (val) => { },
|
||||
|
||||
/**
|
||||
* Handle removal/de-registration of the control.
|
||||
*
|
||||
* This is essentially the inverse of the Control#embed() method.
|
||||
*
|
||||
* @link https://core.trac.wordpress.org/ticket/31334
|
||||
* @returns {void}
|
||||
*/
|
||||
destroy: function destroy() {
|
||||
const control = this;
|
||||
|
||||
// Garbage collection: undo mounting that was done in the embed/renderContent method.
|
||||
ReactDOM.unmountComponentAtNode(control.container[0]);
|
||||
|
||||
// Call destroy method in parent if it exists (as of #31334).
|
||||
if (wp.customize.Control.prototype.destroy) {
|
||||
wp.customize.Control.prototype.destroy.call(control);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default KirkiSliderControl;
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import { useRef } from "react";
|
||||
|
||||
const KirkiSliderForm = (props) => {
|
||||
const { control, customizerSetting, choices } = props;
|
||||
|
||||
let trigger = "";
|
||||
|
||||
control.updateComponentState = (val) => {
|
||||
if ("slider" === trigger) {
|
||||
valueRef.current.textContent = val;
|
||||
} else if ("input" === trigger) {
|
||||
sliderRef.current.value = val;
|
||||
} else if ("reset" === trigger) {
|
||||
valueRef.current.textContent = val;
|
||||
sliderRef.current.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
trigger = "range" === e.target.type ? "slider" : "input";
|
||||
|
||||
let value = e.target.value;
|
||||
|
||||
if (value < choices.min) value = choices.min;
|
||||
|
||||
if (value > choices.max) value = choices.max;
|
||||
|
||||
if ("input" === trigger) e.target.value = value;
|
||||
customizerSetting.set(value);
|
||||
};
|
||||
|
||||
const handleReset = (e) => {
|
||||
if ("" !== props.default && "undefined" !== typeof props.default) {
|
||||
sliderRef.current.value = props.default;
|
||||
valueRef.current.textContent = props.default;
|
||||
} else {
|
||||
if ("" !== props.value) {
|
||||
sliderRef.current.value = props.value;
|
||||
valueRef.current.textContent = props.value;
|
||||
} else {
|
||||
sliderRef.current.value = choices.min;
|
||||
valueRef.current.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
trigger = "reset";
|
||||
customizerSetting.set(sliderRef.current.value);
|
||||
};
|
||||
|
||||
// Preparing for the template.
|
||||
const fieldId = `kirki-control-input-${customizerSetting.id}`;
|
||||
const value = "" !== props.value ? props.value : 0;
|
||||
|
||||
const sliderRef = useRef(null);
|
||||
const valueRef = useRef(null);
|
||||
|
||||
return (
|
||||
<div className="kirki-control-form" tabIndex="1">
|
||||
<label className="kirki-control-label" htmlFor={fieldId}>
|
||||
<span className="customize-control-title">{props.label}</span>
|
||||
<span
|
||||
className="customize-control-description description"
|
||||
dangerouslySetInnerHTML={{ __html: props.description }}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div
|
||||
className="customize-control-notifications-container"
|
||||
ref={props.setNotificationContainer}
|
||||
></div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="kirki-control-reset"
|
||||
onClick={handleReset}
|
||||
>
|
||||
<i className="dashicons dashicons-image-rotate"></i>
|
||||
</button>
|
||||
|
||||
<div className="kirki-control-cols">
|
||||
<div className="kirki-control-left-col">
|
||||
<input
|
||||
ref={sliderRef}
|
||||
type="range"
|
||||
id={fieldId}
|
||||
defaultValue={value}
|
||||
min={choices.min}
|
||||
max={choices.max}
|
||||
step={choices.step}
|
||||
className="kirki-control-slider"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="kirki-control-right-col">
|
||||
<div className="kirki-control-value" ref={valueRef}>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KirkiSliderForm;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import "./control.scss";
|
||||
import KirkiSliderControl from './KirkiSliderControl';
|
||||
|
||||
|
||||
// Register control type with Customizer.
|
||||
wp.customize.controlConstructor['kirki-slider'] = KirkiSliderControl;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
module.exports = {
|
||||
externals: {
|
||||
"jquery": "jQuery",
|
||||
"react": "React",
|
||||
"react-dom": "ReactDOM"
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: "./control.css"
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader"
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
// Extracts CSS into separate files
|
||||
MiniCssExtractPlugin.loader,
|
||||
// Translates CSS into CommonJS
|
||||
"css-loader",
|
||||
// Compiles Sass to CSS
|
||||
"sass-loader",
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
entry: "./src/control.js",
|
||||
output: {
|
||||
filename: "control.js",
|
||||
},
|
||||
devtool: "source-map"
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue
