first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,154 @@
|
||||
<?php
|
||||
/**
|
||||
* Customizer Control: oceanwp-slider.
|
||||
*
|
||||
* @package OceanWP WordPress theme
|
||||
* @subpackage Controls
|
||||
* @see https://github.com/aristath/kirki
|
||||
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttonset control
|
||||
*/
|
||||
class OceanWP_Customizer_Slider_Control extends WP_Customize_Control {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'oceanwp-slider';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
*/
|
||||
public function enqueue() {
|
||||
wp_enqueue_script( 'oceanwp-slider', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/slider.min.js', array( 'jquery', 'customize-base', 'jquery-ui-slider' ), false, true );
|
||||
wp_enqueue_style( 'oceanwp-slider', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/slider.min.css', null );
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the control wrapper and calls $this->render_content() for the internals.
|
||||
*
|
||||
* @see WP_Customize_Control::render()
|
||||
*/
|
||||
protected function render() {
|
||||
$id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
|
||||
$class = 'customize-control has-switchers customize-control-' . $this->type;
|
||||
|
||||
?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
|
||||
<?php $this->render_content(); ?>
|
||||
</li><?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @see WP_Customize_Control::to_json()
|
||||
*/
|
||||
public function to_json() {
|
||||
parent::to_json();
|
||||
|
||||
$this->json['id'] = $this->id;
|
||||
|
||||
$this->json['inputAttrs'] = '';
|
||||
foreach ( $this->input_attrs as $attr => $value ) {
|
||||
$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
|
||||
}
|
||||
|
||||
$this->json['desktop'] = array();
|
||||
$this->json['tablet'] = array();
|
||||
$this->json['mobile'] = array();
|
||||
|
||||
foreach ( $this->settings as $setting_key => $setting ) {
|
||||
$this->json[ $setting_key ] = array(
|
||||
'id' => $setting->id,
|
||||
'default' => $setting->default,
|
||||
'link' => $this->get_link( $setting_key ),
|
||||
'value' => $this->value( $setting_key ),
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">
|
||||
<span>{{{ data.label }}}</span>
|
||||
|
||||
<ul class="responsive-switchers">
|
||||
<li class="desktop">
|
||||
<button type="button" class="preview-desktop active" data-device="desktop">
|
||||
<i class="dashicons dashicons-desktop"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="tablet">
|
||||
<button type="button" class="preview-tablet" data-device="tablet">
|
||||
<i class="dashicons dashicons-tablet"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="mobile">
|
||||
<button type="button" class="preview-mobile" data-device="mobile">
|
||||
<i class="dashicons dashicons-smartphone"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.desktop ) { #>
|
||||
<div class="desktop control-wrap active">
|
||||
<div class="oceanwp-slider desktop-slider"></div>
|
||||
<div class="oceanwp-slider-input">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="slider-input desktop-input" value="{{ data.desktop.value }}" {{{ data.desktop.link }}} />
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.tablet ) { #>
|
||||
<div class="tablet control-wrap">
|
||||
<div class="oceanwp-slider tablet-slider"></div>
|
||||
<div class="oceanwp-slider-input">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="slider-input tablet-input" value="{{ data.tablet.value }}" {{{ data.tablet.link }}} />
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.mobile ) { #>
|
||||
<div class="mobile control-wrap">
|
||||
<div class="oceanwp-slider mobile-slider"></div>
|
||||
<div class="oceanwp-slider-input">
|
||||
<input {{{ data.inputAttrs }}} type="number" class="slider-input mobile-input" value="{{ data.mobile.value }}" {{{ data.mobile.link }}} />
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.customize-control-oceanwp-slider .control-wrap { display: inline-block; width: 100%; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider { display: inline-block; position: relative; width: 67%; height: 4px; margin-top: 12px; background-color: rgba(0,0,0,.15); border-radius: 5px; cursor: pointer; -webkit-transition: background .5s; -moz-transition: background .5s; transition: background .5s; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider:hover { background-color: rgba(0,0,0,.2); }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider .ui-slider-range { display: inline-block; position: absolute; top: 0; height: 100%; background-color: #13a1dc; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider .ui-slider-handle { height: 16px; width: 16px; background-color: #fff; display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%) translateX(-4px); transform: translateY(-50%) translateX(-4px); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); border-radius: 50%; cursor: pointer; }
|
||||
.customize-control-oceanwp-slider .oceanwp-slider-input { float: right; width: 33%; }
|
||||
.customize-control-oceanwp-slider input.slider-input { float: right; width: 80%; height: 28px; text-align: center; border-radius: 4px; padding: 3px; font-size: 12px; font-weight: 600; color: #555; }
|
||||
@@ -0,0 +1,103 @@
|
||||
wp.customize.controlConstructor['oceanwp-slider'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
desktop_slider = control.container.find( '.oceanwp-slider.desktop-slider' ),
|
||||
desktop_slider_input = desktop_slider.next( '.oceanwp-slider-input' ).find( 'input.desktop-input' ),
|
||||
tablet_slider = control.container.find( '.oceanwp-slider.tablet-slider' ),
|
||||
tablet_slider_input = tablet_slider.next( '.oceanwp-slider-input' ).find( 'input.tablet-input' ),
|
||||
mobile_slider = control.container.find( '.oceanwp-slider.mobile-slider' ),
|
||||
mobile_slider_input = mobile_slider.next( '.oceanwp-slider-input' ).find( 'input.mobile-input' ),
|
||||
slider_input,
|
||||
$this,
|
||||
val;
|
||||
|
||||
// Desktop slider
|
||||
desktop_slider.slider( {
|
||||
range: 'min',
|
||||
value: desktop_slider_input.val(),
|
||||
min: +desktop_slider_input.attr( 'min' ),
|
||||
max: +desktop_slider_input.attr( 'max' ),
|
||||
step: +desktop_slider_input.attr( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
desktop_slider_input.val( ui.value ).keyup();
|
||||
},
|
||||
change: function( event, ui ){
|
||||
control.settings['desktop'].set( ui.value );
|
||||
}
|
||||
} );
|
||||
|
||||
// Tablet slider
|
||||
tablet_slider.slider( {
|
||||
range: 'min',
|
||||
value: tablet_slider_input.val(),
|
||||
min: +tablet_slider_input.attr( 'min' ),
|
||||
max: +tablet_slider_input.attr( 'max' ),
|
||||
step: +desktop_slider_input.attr( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
tablet_slider_input.val( ui.value ).keyup();
|
||||
},
|
||||
change: function( event, ui ){
|
||||
control.settings['tablet'].set( ui.value );
|
||||
}
|
||||
} );
|
||||
|
||||
// Mobile slider
|
||||
mobile_slider.slider( {
|
||||
range: 'min',
|
||||
value: mobile_slider_input.val(),
|
||||
min: +mobile_slider_input.attr( 'min' ),
|
||||
max: +mobile_slider_input.attr( 'max' ),
|
||||
step: +desktop_slider_input.attr( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
mobile_slider_input.val( ui.value ).keyup();
|
||||
},
|
||||
change: function( event, ui ){
|
||||
control.settings['mobile'].set( ui.value );
|
||||
}
|
||||
} );
|
||||
|
||||
// Update the slider when the number value change
|
||||
jQuery( 'input.desktop-input' ).on( 'change keyup paste', function() {
|
||||
$this = jQuery( this );
|
||||
val = $this.val();
|
||||
slider_input = $this.parent().prev( '.oceanwp-slider.desktop-slider' );
|
||||
|
||||
slider_input.slider( 'value', val );
|
||||
} );
|
||||
|
||||
jQuery( 'input.tablet-input' ).on( 'change keyup paste', function() {
|
||||
$this = jQuery( this );
|
||||
val = $this.val();
|
||||
slider_input = $this.parent().prev( '.oceanwp-slider.tablet-slider' );
|
||||
|
||||
slider_input.slider( 'value', val );
|
||||
} );
|
||||
|
||||
jQuery( 'input.mobile-input' ).on( 'change keyup paste', function() {
|
||||
$this = jQuery( this );
|
||||
val = $this.val();
|
||||
slider_input = $this.parent().prev( '.oceanwp-slider.mobile-slider' );
|
||||
|
||||
slider_input.slider( 'value', val );
|
||||
} );
|
||||
|
||||
// Save the values
|
||||
control.container.on( 'change keyup paste', '.desktop input', function() {
|
||||
control.settings['desktop'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.tablet input', function() {
|
||||
control.settings['tablet'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
control.container.on( 'change keyup paste', '.mobile input', function() {
|
||||
control.settings['mobile'].set( jQuery( this ).val() );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user