Skip to content

Commit eddd71d

Browse files
giucu91giucu91
committed
1 parent 11ab0ee commit eddd71d

File tree

7 files changed

+356
-52
lines changed

7 files changed

+356
-52
lines changed

‎assets/js/customizer-preview.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
(function( $ ) {// jscs:ignore validateLineBreaks
2+
3+
if ( 'undefined' !== typeof( wp ) ) {
4+
if ( 'undefined' !== typeof( wp.customize ) ) {
5+
wp.customize.bind( 'preview-ready', function() {
6+
wp.customize.preview.bind( 'update-inline-css', function( object ) {
7+
var data = {
8+
'action': object.action,
9+
'args': object.data,
10+
'id': object.id
11+
};
12+
13+
jQuery.ajax({
14+
dataType: 'json',
15+
type: 'POST',
16+
url: WPUrls.ajaxurl,
17+
data: data,
18+
complete: function( json ) {
19+
var sufix = object.action + object.id;
20+
var style = $( '#shapely-style-' + sufix );
21+
22+
if ( ! style.length ) {
23+
style = $( 'head' ).append( '<style type="text/css" id="shapely-style-' + sufix + '" />' ).find( '#shapely-style-' + sufix );
24+
}
25+
26+
style.html( json.responseText );
27+
}
28+
});
29+
});
30+
});
31+
}
32+
}
33+
34+
})( jQuery );

‎assets/js/customizer.js‎

Lines changed: 139 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,141 @@
11
(function( $ ) {// jscs:ignore validateLineBreaks
22

3-
if ( 'undefined' !== typeof( wp ) ) {
4-
if ( 'undefined' !== typeof( wp.customize ) ) {
5-
wp.customize.bind( 'preview-ready', function() {
6-
wp.customize.preview.bind( 'update-inline-css', function( object ) {
7-
var data = {
8-
'action': object.action,
9-
'args': object.data,
10-
'id': object.id
11-
};
12-
13-
jQuery.ajax({
14-
dataType: 'json',
15-
type: 'POST',
16-
url: WPUrls.ajaxurl,
17-
data: data,
18-
complete: function( json ) {
19-
var sufix = object.action + object.id;
20-
var style = $( '#shapely-style-' + sufix );
21-
22-
if ( ! style.length ) {
23-
style = $( 'head' ).append( '<style type="text/css" id="shapely-style-' + sufix + '" />' ).find( '#shapely-style-' + sufix );
24-
}
25-
26-
style.html( json.responseText );
27-
}
28-
});
29-
});
30-
});
31-
}
32-
}
33-
34-
})( jQuery );
3+
var api = wp.customize;
4+
5+
api.shapelyLogoDimension = api.Control.extend({
6+
7+
ready: function () {
8+
var control = this,
9+
dimensions;
10+
control.logo = api.control( 'custom_logo' );
11+
control.values = control.setting();
12+
dimensions = control.container.find( '.shapely-dimension' );
13+
control.widthElement = $( dimensions[0] );
14+
control.heightElement = $( dimensions[1] );
15+
16+
if ( ! control.values ) {
17+
control.respectRatio = 1;
18+
}else{
19+
control.respectRatio = control.values.ratio;
20+
}
21+
22+
if ( undefined != control.logo.params.attachment ) {
23+
control.hasLogo = true;
24+
control.logoWidth = control.logo.params.attachment.width;
25+
control.logoHeight = control.logo.params.attachment.height;
26+
}else{
27+
control.hasLogo = false;
28+
control.toggle( false );
29+
}
30+
31+
control.logo.setting.bind( 'change', function(){
32+
control.updateLogo();
33+
});
34+
35+
control.widthElement.keyup( function(){
36+
if ( control.respectRatio && control.hasLogo ) {
37+
control.calculateRatio( 'width' );
38+
control.shapelyInterval = setInterval(control.updateControl, 1000, control);
39+
}
40+
});
41+
42+
control.heightElement.keyup( function(){
43+
if ( control.respectRatio && control.hasLogo ) {
44+
control.calculateRatio( 'height' );
45+
control.shapelyInterval = setInterval(control.updateControl, 1000, control);
46+
}
47+
});
48+
49+
control.container.find( '.ratio input' ).change( function(){
50+
var values = control.setting();
51+
52+
if ( ! values ) {
53+
values = {};
54+
}
55+
56+
if ( $(this).is(':checked') ) {
57+
control.respectRatio = 1;
58+
values.ratio = 1;
59+
}else{
60+
control.respectRatio = 0;
61+
values.ratio = 0;
62+
}
63+
64+
control.setting( {} );
65+
control.setting( values );
66+
});
67+
68+
},
69+
70+
updateLogo: function(){
71+
var control = this,
72+
values = control.setting();
73+
if ( undefined != control.logo.params.attachment ) {
74+
75+
control.logoWidth = control.logo.params.attachment.width;
76+
control.logoHeight = control.logo.params.attachment.height;
77+
78+
if ( ! values ) {
79+
values = {
80+
'width' : control.logoWidth,
81+
'height' : control.logoHeight,
82+
'ratio' : 1
83+
};
84+
}else{
85+
values.width = control.logoWidth;
86+
values.height = control.logoHeight;
87+
}
88+
89+
control.widthElement.val( control.logoWidth);
90+
control.heightElement.val( control.logoHeight );
91+
92+
control.setting( {} );
93+
control.setting( values );
94+
95+
control.toggle( true );
96+
}else{
97+
control.toggle( false );
98+
}
99+
},
100+
101+
calculateRatio: function( keep ){
102+
var control = this,
103+
aux;
104+
105+
if ( 'width' == keep ) {
106+
aux = control.logoHeight*control.widthElement.val()/control.logoWidth;
107+
control.heightElement.val( parseFloat( aux ).toFixed(2) );
108+
}else if ( 'height' == keep ) {
109+
aux = control.logoWidth*control.heightElement.val()/control.logoHeight;
110+
control.widthElement.val( parseFloat( aux ).toFixed(2) );
111+
}
112+
113+
clearInterval(control.shapelyInterval);
114+
},
115+
116+
updateControl: function( control ){
117+
var values = control.setting();
118+
119+
if ( ! values ) {
120+
values = {
121+
'width' : control.widthElement.val(),
122+
'height' : control.heightElement.val(),
123+
'ratio' : 1
124+
};
125+
}else{
126+
values.width = control.widthElement.val();
127+
values.height = control.heightElement.val();
128+
}
129+
control.setting( {} );
130+
control.setting( values );
131+
clearInterval(control.shapelyInterval);
132+
}
133+
134+
});
135+
136+
// Extend epsilon button constructor
137+
$.extend( api.controlConstructor, {
138+
'shapely-logo-dimension': api.shapelyLogoDimension,
139+
});
140+
141+
})( jQuery );

‎functions.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ function shapely_setup() {
3434
'height' => 55,
3535
'width' => 135,
3636
'flex-width' => true,
37+
'flex-height' => true,
3738
) );
3839

3940
add_theme_support( 'custom-header', apply_filters( 'shapely_custom_header_args', array(

‎inc/custom-controls/class-shapely-logo-dimensions.php‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<?php
2+
3+
class Shapely_Logo_Dimensions extends WP_Customize_Control {
4+
5+
public $type = 'shapely-logo-dimension';
6+
7+
public function __construct( WP_Customize_Manager $manager, $id, array $args ) {
8+
parent::__construct( $manager, $id, $args );
9+
$manager->register_control_type( 'Shapely_Logo_Dimensions' );
10+
}
11+
12+
public function get_dimensions(){
13+
14+
$current_value = $this->value();
15+
16+
if ( ! $current_value ) {
17+
$current_value = array(
18+
'width' => '',
19+
'height' => '',
20+
'ratio' => 1,
21+
);
22+
23+
$custom_logo = get_theme_mod( 'custom_logo' );
24+
if ( $custom_logo ) {
25+
$logo = wp_get_attachment_image_src( $custom_logo , 'full' );
26+
if ( is_array( $logo ) ) {
27+
28+
$current_value['width'] = $logo[1];
29+
$current_value['height'] = $logo[2];
30+
31+
}
32+
}
33+
34+
}
35+
36+
return $current_value;
37+
38+
}
39+
40+
public function json() {
41+
$json = parent::json();
42+
$json['id'] = $this->id;
43+
$json['link'] = $this->get_link();
44+
$json['value'] = $this->get_dimensions();
45+
$json['widthLabel'] = esc_attr__( 'Logo Width:', 'shapely' );
46+
$json['heightLabel'] = esc_attr__( 'Logo Height:', 'shapely' );
47+
$json['checkboxtLabel'] = esc_attr__( 'Keep logo ratio.', 'shapely' );
48+
49+
return $json;
50+
51+
}
52+
53+
public function content_template() {
54+
?>
55+
56+
<div class="shapely-logo-dimension">
57+
<div class="half">
58+
<label for="{{{ data.id }}}-width">{{ data.widthLabel }}</label>
59+
<input type="text" id="{{{ data.id }}}-width" value="{{ data.value.width }}" class="shapely-dimension">
60+
</div>
61+
<div class="half">
62+
<label for="{{{ data.id }}}-height">{{ data.heightLabel }}</label>
63+
<input type="text" id="{{{ data.id }}}-height" value="{{ data.value.height }}" class="shapely-dimension">
64+
</div>
65+
<div class="ratio">
66+
<label>
67+
<input class="shapely-ratio" type="checkbox" id="{{{ data.id }}}-ration" <# if( data.value.ratio ) { #> checked="checked" <# } #> value="1">
68+
{{ data.checkboxtLabel }}
69+
</label>
70+
</div>
71+
</div>
72+
73+
<?php
74+
}
75+
76+
}

‎inc/customizer.php‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ function shapely_customizer( $wp_customize ) {
6666
// Recomended actions
6767
global $shapely_required_actions, $shapely_recommended_plugins;
6868

69+
require_once get_template_directory() . '/inc/custom-controls/class-shapely-logo-dimensions.php';
70+
6971
$customizer_recommended_plugins = array();
7072
if ( is_array( $shapely_recommended_plugins ) ) {
7173
foreach ( $shapely_recommended_plugins as $k => $s ) {
@@ -128,6 +130,15 @@ function shapely_customizer( $wp_customize ) {
128130
'priority' => 10, // Mixed with top-level-section hierarchy.
129131
) );
130132

133+
// Logo dimensions
134+
$wp_customize->add_setting( 'shapely_logo_dimension', array(
135+
'sanitize_callback' => 'shapely_sanitize_logo_dimension',
136+
) );
137+
$wp_customize->add_control( new Shapely_Logo_Dimensions( $wp_customize, 'shapely_logo_dimension', array(
138+
'section' => 'title_tagline',
139+
'priority' => 9,
140+
) ) );
141+
131142
$title_tagline = $wp_customize->get_section( 'title_tagline' );
132143
if ( $title_tagline ) {
133144
$title_tagline->panel = 'shapely_main_options';
@@ -562,6 +573,28 @@ function shapely_customizer( $wp_customize ) {
562573

563574
add_action( 'customize_register', 'shapely_customizer' );
564575

576+
/**
577+
* Sanitize logo dimension setting.
578+
*/
579+
function shapely_sanitize_logo_dimension( $dimensions ) {
580+
$new_dimensions = array();
581+
582+
if ( isset( $dimensions['width'] ) ) {
583+
$new_dimensions['width'] = abs( floatval( $dimensions['width'] ) );
584+
}
585+
586+
if ( isset( $dimensions['height'] ) ) {
587+
$new_dimensions['height'] = abs( floatval( $dimensions['height'] ) );
588+
}
589+
590+
if ( isset( $dimensions['ratio'] ) ) {
591+
$new_dimensions['ratio'] = absint( $dimensions['ratio'] );
592+
}
593+
594+
return $new_dimensions;
595+
596+
}
597+
565598
/**
566599
* Sanitize checkbox for WordPress customizer.
567600
*/
@@ -611,6 +644,16 @@ function shapely_customizer_custom_control_css() {
611644
#customize-control-shapely-main_body_typography-size select, #customize-control-shapely-main_body_typography-face select, #customize-control-shapely-main_body_typography-style select {
612645
width: 60%;
613646
}
647+
.shapely-logo-dimension .half {
648+
width: 49%;
649+
float: left;
650+
}
651+
.shapely-logo-dimension .half:nth-child(2) {
652+
margin-left: 2%;
653+
}
654+
.shapely-logo-dimension .ratio {
655+
clear: both;
656+
}
614657
</style>
615658
<?php
616659
}
@@ -621,6 +664,11 @@ function shapely_customizer_custom_control_css() {
621664
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
622665
*/
623666
function shapely_customize_preview_js() {
624-
wp_enqueue_script( 'shapely_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview' ), '20140317', true );
667+
wp_enqueue_script( 'shapely_customizer', get_template_directory_uri() . '/assets/js/customizer-preview.js', array( 'customize-preview' ), '20140317', true );
625668
}
626669
add_action( 'customize_preview_init', 'shapely_customize_preview_js' );
670+
671+
function shapely_customize_preview() {
672+
wp_enqueue_script( 'shapely_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview' ), '20140317', true );
673+
}
674+
add_action( 'customize_controls_enqueue_scripts', 'shapely_customize_preview' );

0 commit comments

Comments
 (0)