Skip to content
This repository was archived by the owner on Dec 27, 2022. It is now read-only.

Commit 30df6bd

Browse files
PatelUtkarshPatelUtkarsh
committed
[WIP] Schedule UI for snapshot in customizer
1 parent 68e8f34 commit 30df6bd

3 files changed

+202
-12
lines changed

‎css/customize-snapshots.css

+68-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
#snapshot-preview-link, #snapshot-edit-link {
1+
#snapshot-preview-link, #snapshot-toggle-button {
22
float: right;
33
margin-top: 13px;
44
margin-right: 4px;
55
color: #656a6f;
66
}
7-
#snapshot-edit-link{
7+
#snapshot-toggle-button{
88
display: block;
99
}
1010

@@ -53,4 +53,70 @@
5353
margin-top: 6px;
5454
margin-right: 6px;
5555
}
56+
}
57+
58+
#customize-snapshot-control select,
59+
#customize-snapshot-control input[type="text"] {
60+
min-width: 10%;
61+
width: auto;
62+
}
63+
64+
#customize-snapshot-control{
65+
padding: 5px;
66+
}
67+
68+
#customize-snapshot-control input[type="text"].error {
69+
border-color: #dc3232 !important;
70+
-webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
71+
box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
72+
}
73+
74+
#customize-schedule-box{
75+
background: #fff !important;
76+
margin-bottom: 10px;
77+
padding-bottom: 10px;
78+
}
79+
80+
#customize-schedule-box .accordion-section-title{
81+
background: #fff;
82+
color: #555;
83+
border-left: none;
84+
border-right: none;
85+
border-bottom: none;
86+
cursor: default;
87+
}
88+
89+
#customize-schedule-box .accordion-section-title:after{
90+
z-index: -1;
91+
}
92+
#customize-schedule-box a{
93+
position: absolute;
94+
top: 4px;
95+
right: 1px;
96+
width: 20px;
97+
height: 20px;
98+
cursor: pointer;
99+
-webkit-box-shadow: none;
100+
box-shadow: none;
101+
-webkit-appearance: none;
102+
background: transparent;
103+
color: #555;
104+
border: none;
105+
padding: 10px;
106+
}
107+
108+
#customize-schedule-box span{
109+
font-size: 13px;
110+
line-height: 24px;
111+
}
112+
#customize-schedule-box .customize-snapshot-control{
113+
padding: 5px;
114+
}
115+
#customize-schedule-box .accordion-section-title{
116+
padding: 10px;
117+
}
118+
.in-sub-panel #customize-schedule-box {
119+
left: -100%;
120+
width: 100%;
121+
position: relative;
56122
}

‎js/customize-snapshots.js

+24-8
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,9 @@
159159
component.addButtons = function() {
160160
var header = $( '#customize-header-actions' ),
161161
publishButton = header.find( '#save' ),
162-
snapshotEditLinkTemplate = wp.template( 'snapshot-edit-link' ),
163-
snapshotButton, submitButton, data, setPreviewLinkHref, snapshotEditLinkEl;
162+
snapshotDropDownToggleTemplate = wp.template( 'snapshot-toggle-button' ),
163+
snapshotScheduleBoxTemplate = wp.template( 'snapshot-schedule-accordion' ),
164+
snapshotScheduleBox, snapshotButton, submitButton, data, setPreviewLinkHref, snapshotDropDownToggle, snapshotEditLink;
164165

165166
// Save/update button.
166167
snapshotButton = wp.template( 'snapshot-save' );
@@ -174,19 +175,34 @@
174175
snapshotButton.prop( 'disabled', true );
175176
snapshotButton.insertAfter( publishButton );
176177

177-
snapshotEditLinkEl = $( $.trim( snapshotEditLinkTemplate( component.data ) ) );
178-
snapshotEditLinkEl.insertAfter( snapshotButton );
178+
snapshotDropDownToggle = $( $.trim( snapshotDropDownToggleTemplate( {} ) ) );
179+
snapshotEditLink = snapshotDropDownToggle.find( 'a' );
180+
181+
snapshotDropDownToggle.click( function( e ) {
182+
var customizeInfo = $( '#customize-info' );
183+
if ( ! snapshotScheduleBox ) {
184+
snapshotScheduleBox = $( $.trim( snapshotScheduleBoxTemplate( component.data ) ) );
185+
snapshotScheduleBox.insertBefore( customizeInfo );
186+
} else {
187+
188+
// Todo need to update in case of dynamic section.
189+
snapshotScheduleBox.slideToggle();
190+
}
191+
e.preventDefault();
192+
} );
193+
194+
snapshotDropDownToggle.insertAfter( snapshotButton );
179195
if ( ! component.data.editLink ) {
180-
snapshotEditLinkEl.hide();
196+
snapshotDropDownToggle.hide();
181197
}
182198
api.state.bind( 'change', function() {
183-
snapshotEditLinkEl.toggle( api.state( 'snapshot-saved' ).get() && api.state( 'snapshot-exists' ).get() );
199+
snapshotDropDownToggle.toggle( api.state( 'snapshot-saved' ).get() && api.state( 'snapshot-exists' ).get() );
184200
} );
185201

186202
api.state( 'snapshot-saved' ).bind( function( saved ) {
187203
snapshotButton.prop( 'disabled', saved );
188204
if ( saved ) {
189-
snapshotEditLinkEl.attr( 'href', component.data.editLink );
205+
snapshotEditLink.attr( 'href', component.data.editLink );
190206
}
191207
} );
192208

@@ -205,7 +221,7 @@
205221
buttonText = component.data.i18n.updateButton;
206222
permsMsg = component.data.i18n.permsMsg.update;
207223
if ( component.data.editLink ) {
208-
snapshotEditLinkEl.attr( 'href', component.data.editLink );
224+
snapshotEditLink.attr( 'href', component.data.editLink );
209225
}
210226
} else {
211227
buttonText = component.data.i18n.saveButton;

‎php/class-customize-snapshot-manager.php

+110-2
Original file line numberDiff line numberDiff line change
@@ -1058,15 +1058,82 @@ public function replace_customize_link( $wp_admin_bar ) {
10581058
* Underscore (JS) templates for dialog windows.
10591059
*/
10601060
public function render_templates() {
1061+
$data = $this->data_json();
10611062
?>
10621063
<script type="text/html" id="tmpl-snapshot-preview-link">
10631064
<a href="#" target="frontend-preview" id="snapshot-preview-link" class="dashicons dashicons-welcome-view-site" title="<?php esc_attr_e( 'View on frontend', 'customize-snapshots' ) ?>">
10641065
<span class="screen-reader-text"><?php esc_html_e( 'View on frontend', 'customize-snapshots' ) ?></span>
10651066
</a>
10661067
</script>
10671068

1068-
<script type="text/html" id="tmpl-snapshot-edit-link">
1069-
<a href="{{ data.editLink }}" id="snapshot-edit-link" class="dashicons dashicons-calendar-alt" title="<?php esc_attr_e( 'Edit Snapshot','customize-snapshots' ); ?>"></a>
1069+
<script type="text/html" id="tmpl-snapshot-toggle-button">
1070+
<a href="#" id="snapshot-toggle-button" class="dashicons dashicons-calendar-alt" title="<?php esc_attr_e( 'Schedule Snapshot','customize-snapshots' ); ?>"></a>
1071+
</script>
1072+
1073+
<script type="text/html" id="tmpl-snapshot-schedule-accordion">
1074+
<div id="customize-schedule-box" class="accordion-section">
1075+
<div class="accordion-section-title">
1076+
<span class="preview-notice"><strong class="panel-title site-title"><?php esc_html_e( 'Schedule Snapshot', 'customize-snapshots' ); ?></strong></span>
1077+
<a href={{ data.editLink }} class="dashicons dashicons-edit" aria-expanded="false"></a>
1078+
</div>
1079+
<div class="customize-snapshot-control">
1080+
<#
1081+
_.defaults( data, <?php echo wp_json_encode( $data ) ?> );
1082+
data.input_id_post_date = 'input-' + String( Math.random() );
1083+
data.input_id_post_date_gmt = 'input-' + String( Math.random() );
1084+
#>
1085+
<# _.each( data.date_inputs, function( width, type ) { #>
1086+
<# if ( 'month' === type ) { #>
1087+
<select class="date-input {{ type }}">
1088+
<# _.each( data.month_choices, function( choice ) { #>
1089+
<# if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
1090+
text = choice.text;
1091+
value = choice.value;
1092+
} #>
1093+
<option value="{{ value }}">{{ text }}</option>
1094+
<# } ); #>
1095+
</select>
1096+
<# } else { #>
1097+
<input
1098+
type="text"
1099+
size="{{ width }}"
1100+
maxlength="{{ width }}"
1101+
autocomplete="off"
1102+
class="date-input {{ type }}"
1103+
/>
1104+
<# if ( 'year' === type ) { #>
1105+
&nbsp;@&nbsp;
1106+
<# } #>
1107+
<# } #>
1108+
<# }); #>
1109+
<input
1110+
id=""
1111+
type="hidden"
1112+
class="post-date"
1113+
<# if ( data.setting_property ) { #>
1114+
data-customize-setting-property-link="post_date"
1115+
<# } #>
1116+
/>
1117+
<input
1118+
id=""
1119+
type="hidden"
1120+
class="post-date-gmt"
1121+
value=""
1122+
<# if ( data.setting_property ) { #>
1123+
data-customize-setting-property-link="post_date_gmt"
1124+
<# } #>
1125+
/>
1126+
<input
1127+
id=""
1128+
type="hidden"
1129+
class="post-status"
1130+
value=""
1131+
<# if ( data.setting_property ) { #>
1132+
data-customize-setting-property-link="post_status"
1133+
<# } #>
1134+
/>
1135+
</div>
1136+
</div>
10701137
</script>
10711138

10721139
<script type="text/html" id="tmpl-snapshot-save">
@@ -1088,4 +1155,45 @@ public function render_templates() {
10881155
</script>
10891156
<?php
10901157
}
1158+
1159+
/**
1160+
* Get the data to export to the client via JSON.
1161+
*
1162+
* @return array Array of parameters passed to the JavaScript.
1163+
*/
1164+
public function data_json() {
1165+
$exported['month_choices'] = $this->get_month_choices();
1166+
// Type / width pairs.
1167+
$exported['date_inputs'] = array(
1168+
'month' => null,
1169+
'day' => 2,
1170+
'year' => 4,
1171+
'hour' => 2,
1172+
'min' => 2,
1173+
);
1174+
return $exported;
1175+
}
1176+
1177+
/**
1178+
* Generate options for the month Select.
1179+
*
1180+
* Based on touch_time().
1181+
*
1182+
* @see touch_time()
1183+
*
1184+
* @return array
1185+
*/
1186+
public function get_month_choices() {
1187+
global $wp_locale;
1188+
$months = array();
1189+
for ( $i = 1; $i < 13; $i = $i + 1 ) {
1190+
$month_number = zeroise( $i, 2 );
1191+
$month_text = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );
1192+
1193+
/* translators: 1: month number (01, 02, etc.), 2: month abbreviation */
1194+
$months[ $i ]['text'] = sprintf( __( '%1$s-%2$s', 'customize-snapshots' ), $month_number, $month_text );
1195+
$months[ $i ]['value'] = $month_number;
1196+
}
1197+
return $months;
1198+
}
10911199
}

0 commit comments

Comments
 (0)