Your IP : 216.73.216.162
class-hestia-customize-control-tabs.php 0000666 00000005435 15113544163 0014300 0 ustar 00 <?php
/**
* The tabs customize control extends the WP_Customize_Control class. This class allows
* developers to create tabs and hide the sections' settings easily.
*
* @package Hestia
* @since 1.1.45
* @author Andrei Baicus <andrei@themeisle.com>
* @copyright Copyright (c) 2017, Themeisle
* @link http://themeisle.com/
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
/**
* Radio image customize control.
*
* @since 1.1.45
* @access public
*/
class Hestia_Customize_Control_Tabs extends WP_Customize_Control {
/**
* The type of customize control being rendered.
*
* @since 1.1.45
* @var string
*/
public $type = 'interface-tabs';
/**
* The tabs with keys of the controls that are under each tab.
*
* @since 1.1.45
* @var array
*/
public $tabs;
/**
* Controls from tabs.
*
* @var array
*/
public $controls;
/**
* Hestia_Customize_Control_Tabs constructor.
*
* @param WP_Customize_Manager $manager wp_customize manager.
* @param string $id control id.
* @param array $args public parameters for control.
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
}
/**
* Enqueue styles and scripts.
*/
public function enqueue() {
wp_enqueue_style( 'hestia-tabs-control-style', get_template_directory_uri() . '/inc/customizer/controls/ui/customizer-tabs/style.css', null, HESTIA_VERSION );
wp_enqueue_script( 'hestia-tabs-control-script', get_template_directory_uri() . '/inc/customizer/controls/ui/customizer-tabs/script.js', array( 'jquery' ), HESTIA_VERSION, true );
}
/**
* Add custom JSON parameters to use in the JS template.
*
* @return array
*/
public function json() {
$json = parent::json();
$json['tabs'] = $this->tabs;
$json['controls'] = $this->controls;
return $json;
}
/**
* Underscore JS template to handle the control's output.
*
* @return void
*/
public function content_template() {
?>
<# if ( ! data.tabs ) { return; } #>
<div class="hestia-tabs-control" id="">
<# var i = 1;
for( tab in data.tabs) { #>
<#
var allControlsInTabs = ''
_.each( data.controls[tab], function( val, key ) {
allControlsInTabs+= key + ' '
if(val){
var allvals = Object.keys(val).map(function(e) {
return val[e]
});
allvals = _.uniq(_.flatten(allvals))
allvals = allvals.join(' ')
allControlsInTabs += allvals
}
});
#>
<div class="hestia-customizer-tab <# if( i === 1 ){#> active <#}#>" data-tab="{{tab}}">
<label class="{{allControlsInTabs}}">
<i class="fa fa-{{data.tabs[tab]['icon']}}"></i>
{{data.tabs[tab]['label']}}
</label>
</div>
<# i++;} #>
</div>
<?php
}
}
script.js 0000666 00000014345 15113544163 0006424 0 ustar 00 /**
* Script for the customizer tabs control interactions.
*
* @since 1.1.43
* @package Hestia
*
* @author ThemeIsle
*/
/* global wp */
wp.customize.controlConstructor['interface-tabs'] = wp.customize.Control.extend({
ready: function() {
// Switch tab based on customizer partial edit links.
wp.customize.previewer.bind(
'tab-previewer-edit', function( data ) {
jQuery( data.selector ).trigger( 'click' );
}
);
wp.customize.previewer.bind(
'focus-control', function( data ) {
/**
* This timeout is here because in firefox this happens before customizer animation of changing panels.
* After it change panels with the input focused, the customizer was moved to right 12px. We have to make sure
* that the customizer animation of changing panels in customizer is done before focusing the input.
*/
setTimeout( function(){
var control = wp.customize.control(data);
if( typeof control !== 'undefined'){
wp.customize.control(data).focus();
}
} , 100 );
}
);
wp.customize.previewer.bind(
'focus-section', function( data ) {
/**
* This timeout is here because in firefox this happens before customizer animation of changing panels.
* After it change panels with the input focused, the customizer was moved to right 12px. We have to make sure
* that the customizer animation of changing panels in customizer is done before focusing the input.
*/
setTimeout( function(){
wp.customize.section(data).focus();
} , 100 );
}
);
wp.customize.previewer.bind( 'ready', function () {
var parts = window.location.search.substr(1).split('&');
var $_GET = {};
for (var i = 0; i < parts.length; i++) {
var temp = parts[i].split('=');
$_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}
if( typeof $_GET['autofocus[control]'] !== 'undefined' && $_GET['autofocus[control]'] !== ''){
jQuery( 'li[id^="customize-control-widget"] ,#customize-control-sidebars_widgets-sidebar-big-title, #customize-control-sidebars_widgets-sidebar-top-bar, #customize-control-sidebars_widgets-subscribe-widgets' ).live(
'DOMNodeInserted', function () {
jQuery('.hestia-customizer-tab > label.' + $_GET['autofocus[control]']).trigger('click');
});
}
} );
this.init();
this.handleClick();
},
init: function () {
var control = this;
var section = control.section();
wp.customize.bind('ready',function () {
control.hideAllControls(section);
var tab = Object.keys(control.params.controls)[0];
var controlsToShow = control.params.controls[tab];
var allControls = [];
for (var controlName in controlsToShow ){
if( controlsToShow.hasOwnProperty(controlName)) {
if (jQuery.isEmptyObject(controlsToShow[controlName]) === false &&
typeof wp.customize.control(controlName) !== 'undefined') {
var subTabValue = wp.customize.control(controlName).setting._value;
allControls = allControls.concat(controlsToShow[controlName][subTabValue]);
}
allControls.push(controlName);
}
}
control.showControls(allControls, section);
var once = 0;
jQuery( 'li[id^="customize-control-widget"] ,#customize-control-sidebars_widgets-sidebar-big-title, #customize-control-sidebars_widgets-sidebar-top-bar, #customize-control-sidebars_widgets-subscribe-widgets' ).live(
'DOMNodeInserted', function (e) {
if ( once > 0 ){
return false;
}
if( typeof e.currentTarget.previousSibling === 'undefined' ) {
return false;
}
if( jQuery(e.currentTarget.previousSibling).hasClass( 'widget-rendered' ) ) {
return false;
}
control.showControls(allControls, section);
once = 1;
});
});
},
hideAllControls: function ( section ) {
var controls = wp.customize.section(section).controls();
var tabControl = this.id;
for( var i in controls ){
var controlId = controls[i].id;
if( controlId === 'widgets' ){
var sectionContainer = wp.customize.section(section).container;
jQuery( sectionContainer ).children( 'li[class*="widget"]' ).css( 'display', 'none' );
} else {
if( controlId !== tabControl ){
var selector = wp.customize.control(controlId).selector;
jQuery(selector).hide();
}
}
}
},
handleClick: function () {
var control = this;
var section = control.section();
var container = control.container;
jQuery(container).find('.hestia-customizer-tab').on( 'click', function () {
jQuery( this ).parent().find('.hestia-customizer-tab').removeClass('active');
jQuery( this ).addClass('active');
control.hideAllControls(section);
var tab = jQuery(this).data('tab');
var controlsToShow = control.params.controls[tab];
var allControls = [];
for (var controlName in controlsToShow ){
if( jQuery.isEmptyObject(controlsToShow[controlName]) === false &&
typeof wp.customize.control(controlName) !== 'undefined' ){
var subTabValue = wp.customize.control(controlName).setting._value;
allControls = allControls.concat(controlsToShow[controlName][subTabValue]);
}
allControls.push(controlName);
}
control.showControls(allControls, section);
} );
},
showControls: function (controls, section) {
for(var i in controls ){
var controlName = controls[i];
if( controlName === 'widgets' ) {
var sectionContainer = wp.customize.section(section).container;
jQuery( sectionContainer ).children( 'li[class*="widget"]' ).css( 'display', 'list-item' );
} else {
if( typeof wp.customize.control(controlName) !== 'undefined' ) {
var selector = wp.customize.control(controlName).selector;
jQuery(selector).show();
}
}
}
}
}); style.css 0000666 00000002250 15113544163 0006424 0 ustar 00 .customize-control-interface-tabs {
display: list-item !important;
}
.hestia-tabs-control {
border-bottom: 1px solid #ddd;
width: calc(100% + 28px);
margin: -15px 0 0 -12px;
table-layout: fixed;
display: table;
}
.hestia-tabs-control .hestia-customizer-tab {
border-right: 1px solid #ddd;
display: table-cell;
text-align: center;
width: 100%;
}
.hestia-tabs-control .hestia-customizer-tab:last-child {
border-right: none;
}
.hestia-tabs-control .hestia-customizer-tab label{
text-transform: capitalize;
background: #fff;
box-shadow: inset 0 0 0 0 #0085ba;
transition: all .3s ease;
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
font-weight: 600;
color: #333;
}
.hestia-tabs-control .hestia-customizer-tab label i {
color: #333;
margin-right: 4px;
}
.hestia-tabs-control .hestia-customizer-tab label:hover {
color: #0085ba;
background: #f3f3f5;
}
.hestia-tabs-control .hestia-customizer-tab label:hover i {
color: #333;
}
.hestia-tabs-control .hestia-customizer-tab.active label{
box-shadow: inset 0 -3px 0 0 #0085ba;
color: #0085ba;
background-color: #fff;
}
.hestia-tabs-control input[type="radio"] {
display: none !important;
}