Skip to content

Commit b381e16

Browse files
westonruterwestonruter
committed
Merge pull request #12 from x-team/widget-accordion
Implement: Show widget form controls initially in collapsed state Props @johnregan3 @westonruter
2 parents 9d958bf + 7d31496 commit b381e16

File tree

3 files changed

+93
-30
lines changed

3 files changed

+93
-30
lines changed

‎class-widget-form-wp-customize-control.php‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,35 +24,44 @@ public function render_content() {
2424
$multi_number = isset($sidebar_args['_multi_num']) ? $sidebar_args['_multi_num'] : '';
2525
$add_new = '';
2626
?>
27-
<label>
28-
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
29-
</label>
30-
<div class="customize-control-content">
31-
<fieldset class="widget-content">
32-
<?php
33-
if ( isset( $control['callback'] ) ) {
34-
$has_form = call_user_func_array( $control['callback'], $control['params'] );
35-
}
36-
else {
37-
echo "\t\t<p>" . __( 'There are no options for this widget.', 'widget-customizer' ) . "</p>\n";
38-
}
39-
?>
40-
</fieldset>
41-
<input type="hidden" name="widget-id" class="widget-id" value="<?php echo esc_attr( $this->widget_id ); ?>" />
42-
<input type="hidden" name="id_base" class="id_base" value="<?php echo esc_attr($id_base); ?>" />
43-
<input type="hidden" name="sidebar" class="sidebar" value="<?php echo esc_attr($this->sidebar_id); ?>" />
44-
<input type="hidden" name="widget-width" class="widget-width" value="<?php if (isset( $control['width'] )) echo esc_attr($control['width']); ?>" />
45-
<input type="hidden" name="widget-height" class="widget-height" value="<?php if (isset( $control['height'] )) echo esc_attr($control['height']); ?>" />
46-
<input type="hidden" name="widget_number" class="widget_number" value="<?php echo esc_attr($widget_number); ?>" />
47-
<input type="hidden" name="multi_number" class="multi_number" value="<?php echo esc_attr($multi_number); ?>" />
48-
<input type="hidden" name="add_new" class="add_new" value="<?php echo esc_attr($add_new); ?>" />
27+
<div class="widget">
28+
<div class="widget-top">
29+
<div class="widget-title-action">
30+
<a class="widget-action"></a>
31+
</div>
32+
<div class="widget-title">
33+
<h4 class="customize-control-title">
34+
<?php echo esc_html( $this->label ); ?><span class="in-widget-title"></span>
35+
</h4>
36+
</div>
37+
</div>
38+
<div class="customize-control-content widget-inside">
39+
<fieldset class="widget-content">
40+
<?php
41+
if ( isset( $control['callback'] ) ) {
42+
$has_form = call_user_func_array( $control['callback'], $control['params'] );
43+
}
44+
else {
45+
echo "\t\t<p>" . __( 'There are no options for this widget.', 'widget-customizer' ) . "</p>\n";
46+
}
47+
?>
48+
</fieldset>
49+
<input type="hidden" name="widget-id" class="widget-id" value="<?php echo esc_attr( $this->widget_id ); ?>" />
50+
<input type="hidden" name="id_base" class="id_base" value="<?php echo esc_attr($id_base); ?>" />
51+
<input type="hidden" name="sidebar" class="sidebar" value="<?php echo esc_attr($this->sidebar_id); ?>" />
52+
<input type="hidden" name="widget-width" class="widget-width" value="<?php if (isset( $control['width'] )) echo esc_attr($control['width']); ?>" />
53+
<input type="hidden" name="widget-height" class="widget-height" value="<?php if (isset( $control['height'] )) echo esc_attr($control['height']); ?>" />
54+
<input type="hidden" name="widget_number" class="widget_number" value="<?php echo esc_attr($widget_number); ?>" />
55+
<input type="hidden" name="multi_number" class="multi_number" value="<?php echo esc_attr($multi_number); ?>" />
56+
<input type="hidden" name="add_new" class="add_new" value="<?php echo esc_attr($add_new); ?>" />
4957

50-
<div class="widget-control-actions">
51-
<div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
52-
<input type="button" name="updatewidget" id="updatewidget" class="button button-secondary widget-control-update right" value="<?php esc_attr_e( 'Update', 'widget-customizer' ) ?>">
53-
<span class="spinner"></span>
58+
<div class="widget-control-actions">
59+
<div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">
60+
<input type="button" name="updatewidget" id="updatewidget" class="button button-secondary widget-control-update right" value="<?php esc_attr_e( 'Update', 'widget-customizer' ) ?>">
61+
<span class="spinner"></span>
62+
</div>
63+
<br class="clear" />
5464
</div>
55-
<br class="clear" />
5665
</div>
5766
</div>
5867
<?php

‎widget-customizer.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,15 @@
99
-ms-user-select: none;
1010
user-select: none;
1111
}
12+
13+
.customize-control-widget_form .widget {
14+
margin-bottom: 0;
15+
}
16+
17+
.customize-control-widget_form .widget .widget-top {
18+
cursor: default;
19+
}
20+
21+
.customize-control-widget_form .widget .widget-top a {
22+
cursor: pointer;
23+
}

‎widget-customizer.js‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,26 @@ var WidgetCustomizer = (function ($) {
1616
var control = this;
1717

1818
control.setting.bind( function( to ) {
19-
control.update_widget( to );
19+
control.updateWidget( to );
2020
});
2121

2222
control.container.find( '.widget-control-update' ).on( 'click', function (e) {
23-
control.update_widget();
23+
control.updateWidget();
2424
});
2525

2626
control.setting.previewer.channel.bind( 'synced', function () {
2727
control.container.removeClass( 'previewer-loading' );
2828
});
29+
30+
control.setupControlToggle();
31+
32+
control.setupWidgetTitle();
2933
},
3034

3135
/**
3236
* @param {object} instance_override When the model changes, the instance is sent this way
3337
*/
34-
update_widget: function ( instance_override ) {
38+
updateWidget: function ( instance_override ) {
3539
var control = this;
3640
var data = control.container.find(':input').serialize();
3741
control.container.addClass( 'widget-form-loading' );
@@ -68,6 +72,44 @@ var WidgetCustomizer = (function ($) {
6872
control.container.find( '.widget-content' ).prop( 'disabled', false );
6973
control.container.removeClass( 'widget-form-loading' );
7074
});
75+
},
76+
77+
setupControlToggle: function() {
78+
var control = this;
79+
control.container.find('.widget-top').on( 'click', function (e) {
80+
// Copied from wpWidgets.init() in wp-admin/js/widgets.js
81+
var target = $(this);
82+
var widget = target.closest('div.widget');
83+
var inside = widget.children('.widget-inside');
84+
if ( inside.is(':hidden') ) {
85+
inside.slideDown('fast');
86+
} else {
87+
inside.slideUp('fast', function() {
88+
widget.css({'width':'', margin:''});
89+
});
90+
}
91+
e.preventDefault();
92+
} );
93+
},
94+
95+
setupWidgetTitle: function () {
96+
var control = this;
97+
control.setting.bind( function( to ) {
98+
control.updateInWidgetTitle();
99+
});
100+
control.updateInWidgetTitle();
101+
},
102+
103+
updateInWidgetTitle: function () {
104+
var control = this;
105+
var title = control.setting().title;
106+
var in_widget_title = control.container.find('.in-widget-title');
107+
if ( title ) {
108+
in_widget_title.text( ': ' + title );
109+
}
110+
else {
111+
in_widget_title.text( '' );
112+
}
71113
}
72114
});
73115

0 commit comments

Comments
 (0)