mirror of
https://ghproxy.net/https://github.com/AlxMedia/curver.git
synced 2025-08-28 09:25:45 +08:00
Update to Kirki 4.2.0
This commit is contained in:
AlxMedia
parent
cbfd4f27e4
commit
77ecd4ca69
440 changed files with 6230 additions and 5211 deletions
3
functions/kirki/kirki-packages/control-slider/dist/control.css
vendored
Normal file
3
functions/kirki/kirki-packages/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*/
|
||||
1
functions/kirki/kirki-packages/control-slider/dist/control.css.map
vendored
Normal file
1
functions/kirki/kirki-packages/control-slider/dist/control.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"./control.css","mappings":"AAEE,qDACE,kBACA,cAGF,+DACE,mBAGF,oDACE,kBACA,mBAGE,+EACE,UAKN,qDACE,aACA,mBACA,uBACA,QACA,YACA,kBACA,UACA,WACA,YACA,cACA,6BACA,kBACA,eACA,UACA,eACA,mBACA,UAGA,2DACE,UAIJ,6DACE,UACA,yBAGF,uDACE,eACA,WACA,YACA,wBACA,yBAGF,oDACE,aACA,mBACA,8BAGF,wDACE,UACA,mBAGF,yDACE,UACA,iBAGF,qDACE,eACA,kBACA,yBACA,kBACA,kBACA,UAGF,sDACE,kBACA,SACA,UACA,SACA,WACA,WACA,oBACA,yBACA,aACA,wBAGF,4EACE,wBACA,gBACA,WACA,YACA,kBACA,yBACA,eACA,sBACA,gBACA,uGAEA,+FAIF,oKAEE,yBAGF,mFACE,yBAGF,wEACE,WACA,YACA,SACA,kBACA,yBACA,eACA,sBACA,gBACA,oGAEA,+FAIF,4JAEE,yBAGF,mDACE,yBACA,SAGF,gHAEE,S","sources":["webpack://control-range-slider/./src/control.scss"],"sourcesContent":["// Range slider control.\r\n.customize-control-kirki-slider {\r\n .kirki-control-label {\r\n position: relative;\r\n display: block;\r\n }\r\n\r\n .customize-control-description {\r\n padding-right: 30px;\r\n }\r\n\r\n .kirki-control-form {\r\n position: relative;\r\n margin-bottom: 12px;\r\n\r\n &:hover {\r\n .kirki-control-reset {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n .kirki-control-reset {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n right: 0;\r\n bottom: 22px;\r\n position: absolute;\r\n padding: 0;\r\n width: 16px;\r\n height: 16px;\r\n color: #50575e;\r\n background-color: transparent;\r\n border-radius: 50%;\r\n border-width: 0;\r\n opacity: 0;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n z-index: 3;\r\n\r\n // a11y: support tab focus.\r\n &:focus {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .kirki-control-reset:hover i {\r\n color: #f00;\r\n transform: rotate(-45deg);\r\n }\r\n\r\n .kirki-control-reset i {\r\n font-size: 12px;\r\n width: auto;\r\n height: auto;\r\n transform: rotate(45deg);\r\n transition: transform 0.3s;\r\n }\r\n\r\n .kirki-control-cols {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .kirki-control-left-col {\r\n width: 90%;\r\n padding-right: 13px;\r\n }\r\n\r\n .kirki-control-right-col {\r\n width: 10%;\r\n text-align: right;\r\n }\r\n\r\n .kirki-control-input {\r\n font-size: 12px;\r\n text-align: center;\r\n background-color: #f7f7f7;\r\n border-color: #bbb;\r\n border-radius: 4px;\r\n z-index: 2;\r\n }\r\n\r\n .kirki-control-slider {\r\n position: relative;\r\n top: -1px;\r\n padding: 0;\r\n margin: 0;\r\n width: 100%;\r\n height: 5px;\r\n border-radius: 2.5px;\r\n background-color: #bdc3c7;\r\n outline: none;\r\n -webkit-appearance: none;\r\n }\r\n\r\n .kirki-control-slider::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background-color: #f0f0f0;\r\n cursor: pointer;\r\n border: 1px solid #999;\r\n box-shadow: none;\r\n -webkit-transition: background-color 0.15s ease-in-out,\r\n box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\r\n transition: background-color 0.15s ease-in-out,\r\n box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\r\n }\r\n\r\n .kirki-control-slider::-webkit-slider-thumb:hover,\r\n .kirki-control-slider::-webkit-slider-thumb:focus {\r\n background-color: #e7e7e7;\r\n }\r\n\r\n .kirki-control-slider:active::-webkit-slider-thumb {\r\n background-color: #e7e7e7;\r\n }\r\n\r\n .kirki-control-slider::-moz-range-thumb {\r\n width: 16px;\r\n height: 16px;\r\n border: 0;\r\n border-radius: 50%;\r\n background-color: #f0f0f0;\r\n cursor: pointer;\r\n border: 1px solid #999;\r\n box-shadow: none;\r\n -moz-transition: background-color 0.15s ease-in-out,\r\n box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\r\n transition: background-color 0.15s ease-in-out,\r\n box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\r\n }\r\n\r\n .kirki-control-slider::-moz-range-thumb:hover,\r\n .kirki-control-slider::-moz-range-thumb:focus {\r\n background-color: #e7e7e7;\r\n }\r\n\r\n ::-moz-range-track {\r\n background-color: #bdc3c7;\r\n border: 0;\r\n }\r\n\r\n input::-moz-focus-inner,\r\n input::-moz-focus-outer {\r\n border: 0;\r\n }\r\n}\r\n"],"names":[],"sourceRoot":""}
|
||||
2
functions/kirki/kirki-packages/control-slider/dist/control.js
vendored
Normal file
2
functions/kirki/kirki-packages/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
|
||||
1
functions/kirki/kirki-packages/control-slider/dist/control.js.map
vendored
Normal file
1
functions/kirki/kirki-packages/control-slider/dist/control.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
153
functions/kirki/kirki-packages/control-slider/src/control.scss
Normal file
153
functions/kirki/kirki-packages/control-slider/src/control.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
// Range slider control.
|
||||
.customize-control-kirki-slider {
|
||||
.kirki-control-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-control-description {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.kirki-control-form {
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:hover {
|
||||
.kirki-control-reset {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 0.3s;
|
||||
z-index: 3;
|
||||
|
||||
// a11y: support tab focus.
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.kirki-control-reset:hover i {
|
||||
color: #f00;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.kirki-control-reset i {
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.kirki-control-cols {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.kirki-control-left-col {
|
||||
width: 90%;
|
||||
padding-right: 13px;
|
||||
}
|
||||
|
||||
.kirki-control-right-col {
|
||||
width: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.kirki-control-input {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
border-color: #bbb;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 0.15s ease-in-out,
|
||||
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
transition: background-color 0.15s ease-in-out,
|
||||
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
}
|
||||
|
||||
.kirki-control-slider::-webkit-slider-thumb:hover,
|
||||
.kirki-control-slider::-webkit-slider-thumb:focus {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.kirki-control-slider:active::-webkit-slider-thumb {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.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 0.15s ease-in-out,
|
||||
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
transition: background-color 0.15s ease-in-out,
|
||||
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
}
|
||||
|
||||
.kirki-control-slider::-moz-range-thumb:hover,
|
||||
.kirki-control-slider::-moz-range-thumb:focus {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
::-moz-range-track {
|
||||
background-color: #bdc3c7;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input::-moz-focus-inner,
|
||||
input::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue
