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

Commit

Permalink
[WIP] Schedule UI for snapshot in customizer
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatelUtkarsh
PatelUtkarsh committed Jul 28, 2016
1 parent 68e8f34 commit 30df6bd
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 12 deletions.
70 changes: 68 additions & 2 deletions css/customize-snapshots.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
#snapshot-preview-link, #snapshot-edit-link {
#snapshot-preview-link, #snapshot-toggle-button {
float: right;
margin-top: 13px;
margin-right: 4px;
color: #656a6f;
}
#snapshot-edit-link{
#snapshot-toggle-button{
display: block;
}

Expand Down Expand Up @@ -53,4 +53,70 @@
margin-top: 6px;
margin-right: 6px;
}
}

#customize-snapshot-control select,
#customize-snapshot-control input[type="text"] {
min-width: 10%;
width: auto;
}

#customize-snapshot-control{
padding: 5px;
}

#customize-snapshot-control input[type="text"].error {
border-color: #dc3232 !important;
-webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
}

#customize-schedule-box{
background: #fff !important;
margin-bottom: 10px;
padding-bottom: 10px;
}

#customize-schedule-box .accordion-section-title{
background: #fff;
color: #555;
border-left: none;
border-right: none;
border-bottom: none;
cursor: default;
}

#customize-schedule-box .accordion-section-title:after{
z-index: -1;
}
#customize-schedule-box a{
position: absolute;
top: 4px;
right: 1px;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
background: transparent;
color: #555;
border: none;
padding: 10px;
}

#customize-schedule-box span{
font-size: 13px;
line-height: 24px;
}
#customize-schedule-box .customize-snapshot-control{
padding: 5px;
}
#customize-schedule-box .accordion-section-title{
padding: 10px;
}
.in-sub-panel #customize-schedule-box {
left: -100%;
width: 100%;
position: relative;
}
32 changes: 24 additions & 8 deletions js/customize-snapshots.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,9 @@
component.addButtons = function() {
var header = $( '#customize-header-actions' ),
publishButton = header.find( '#save' ),
snapshotEditLinkTemplate = wp.template( 'snapshot-edit-link' ),
snapshotButton, submitButton, data, setPreviewLinkHref, snapshotEditLinkEl;
snapshotDropDownToggleTemplate = wp.template( 'snapshot-toggle-button' ),
snapshotScheduleBoxTemplate = wp.template( 'snapshot-schedule-accordion' ),
snapshotScheduleBox, snapshotButton, submitButton, data, setPreviewLinkHref, snapshotDropDownToggle, snapshotEditLink;

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

snapshotEditLinkEl = $( $.trim( snapshotEditLinkTemplate( component.data ) ) );
snapshotEditLinkEl.insertAfter( snapshotButton );
snapshotDropDownToggle = $( $.trim( snapshotDropDownToggleTemplate( {} ) ) );
snapshotEditLink = snapshotDropDownToggle.find( 'a' );

snapshotDropDownToggle.click( function( e ) {
var customizeInfo = $( '#customize-info' );
if ( ! snapshotScheduleBox ) {
snapshotScheduleBox = $( $.trim( snapshotScheduleBoxTemplate( component.data ) ) );
snapshotScheduleBox.insertBefore( customizeInfo );
} else {

// Todo need to update in case of dynamic section.
snapshotScheduleBox.slideToggle();
}
e.preventDefault();
} );

snapshotDropDownToggle.insertAfter( snapshotButton );
if ( ! component.data.editLink ) {
snapshotEditLinkEl.hide();
snapshotDropDownToggle.hide();
}
api.state.bind( 'change', function() {
snapshotEditLinkEl.toggle( api.state( 'snapshot-saved' ).get() && api.state( 'snapshot-exists' ).get() );
snapshotDropDownToggle.toggle( api.state( 'snapshot-saved' ).get() && api.state( 'snapshot-exists' ).get() );
} );

api.state( 'snapshot-saved' ).bind( function( saved ) {
snapshotButton.prop( 'disabled', saved );
if ( saved ) {
snapshotEditLinkEl.attr( 'href', component.data.editLink );
snapshotEditLink.attr( 'href', component.data.editLink );
}
} );

Expand All @@ -205,7 +221,7 @@
buttonText = component.data.i18n.updateButton;
permsMsg = component.data.i18n.permsMsg.update;
if ( component.data.editLink ) {
snapshotEditLinkEl.attr( 'href', component.data.editLink );
snapshotEditLink.attr( 'href', component.data.editLink );
}
} else {
buttonText = component.data.i18n.saveButton;
Expand Down
112 changes: 110 additions & 2 deletions php/class-customize-snapshot-manager.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1058,15 +1058,82 @@ public function replace_customize_link( $wp_admin_bar ) {
* Underscore (JS) templates for dialog windows.
*/
public function render_templates() {
$data = $this->data_json();
?>
<script type="text/html" id="tmpl-snapshot-preview-link">
<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' ) ?>">
<span class="screen-reader-text"><?php esc_html_e( 'View on frontend', 'customize-snapshots' ) ?></span>
</a>
</script>

<script type="text/html" id="tmpl-snapshot-edit-link">
<a href="{{ data.editLink }}" id="snapshot-edit-link" class="dashicons dashicons-calendar-alt" title="<?php esc_attr_e( 'Edit Snapshot','customize-snapshots' ); ?>"></a>
<script type="text/html" id="tmpl-snapshot-toggle-button">
<a href="#" id="snapshot-toggle-button" class="dashicons dashicons-calendar-alt" title="<?php esc_attr_e( 'Schedule Snapshot','customize-snapshots' ); ?>"></a>
</script>

<script type="text/html" id="tmpl-snapshot-schedule-accordion">
<div id="customize-schedule-box" class="accordion-section">
<div class="accordion-section-title">
<span class="preview-notice"><strong class="panel-title site-title"><?php esc_html_e( 'Schedule Snapshot', 'customize-snapshots' ); ?></strong></span>
<a href={{ data.editLink }} class="dashicons dashicons-edit" aria-expanded="false"></a>
</div>
<div class="customize-snapshot-control">
<#
_.defaults( data, <?php echo wp_json_encode( $data ) ?> );
data.input_id_post_date = 'input-' + String( Math.random() );
data.input_id_post_date_gmt = 'input-' + String( Math.random() );
#>
<# _.each( data.date_inputs, function( width, type ) { #>
<# if ( 'month' === type ) { #>
<select class="date-input {{ type }}">
<# _.each( data.month_choices, function( choice ) { #>
<# if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
text = choice.text;
value = choice.value;
} #>
<option value="{{ value }}">{{ text }}</option>
<# } ); #>
</select>
<# } else { #>
<input
type="text"
size="{{ width }}"
maxlength="{{ width }}"
autocomplete="off"
class="date-input {{ type }}"
/>
<# if ( 'year' === type ) { #>
&nbsp;@&nbsp;
<# } #>
<# } #>
<# }); #>
<input
id=""
type="hidden"
class="post-date"
<# if ( data.setting_property ) { #>
data-customize-setting-property-link="post_date"
<# } #>
/>
<input
id=""
type="hidden"
class="post-date-gmt"
value=""
<# if ( data.setting_property ) { #>
data-customize-setting-property-link="post_date_gmt"
<# } #>
/>
<input
id=""
type="hidden"
class="post-status"
value=""
<# if ( data.setting_property ) { #>
data-customize-setting-property-link="post_status"
<# } #>
/>
</div>
</div>
</script>

<script type="text/html" id="tmpl-snapshot-save">
Expand All @@ -1088,4 +1155,45 @@ public function render_templates() {
</script>
<?php
}

/**
* Get the data to export to the client via JSON.
*
* @return array Array of parameters passed to the JavaScript.
*/
public function data_json() {
$exported['month_choices'] = $this->get_month_choices();
// Type / width pairs.
$exported['date_inputs'] = array(
'month' => null,
'day' => 2,
'year' => 4,
'hour' => 2,
'min' => 2,
);
return $exported;
}

/**
* Generate options for the month Select.
*
* Based on touch_time().
*
* @see touch_time()
*
* @return array
*/
public function get_month_choices() {
global $wp_locale;
$months = array();
for ( $i = 1; $i < 13; $i = $i + 1 ) {
$month_number = zeroise( $i, 2 );
$month_text = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );

/* translators: 1: month number (01, 02, etc.), 2: month abbreviation */
$months[ $i ]['text'] = sprintf( __( '%1$s-%2$s', 'customize-snapshots' ), $month_number, $month_text );
$months[ $i ]['value'] = $month_number;
}
return $months;
}
}

0 comments on commit 30df6bd

Please sign in to comment.