mirror of
https://ghproxy.net/https://github.com/AlxMedia/curver.git
synced 2025-08-29 01:13:18 +08:00
Update to Kirki 4.0.22
This commit is contained in:
AlxMedia
parent
4ff905c2c6
commit
a02e711106
493 changed files with 29670 additions and 39886 deletions
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue
