Skip to content

Commit

Permalink
Clean up the edit sticky section in the publish meta box. Utilize a c…
Browse files Browse the repository at this point in the history 
…heckbox rather than a select drop-down.
  • Loading branch information
Justin Tadlock committed Oct 30, 2015
1 parent b4b6e13 commit 557c3d8
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 51 deletions.
40 changes: 25 additions & 15 deletions admin/class-project-edit.php
View file
Expand Up @@ -113,24 +113,27 @@ public function submitbox_misc_actions( $post = '' ) {

$post_type_object = get_post_type_object( ccp_get_project_post_type() );
$is_sticky = ccp_is_project_sticky( $post->ID );
$label = $is_sticky ? esc_html__( 'Sticky', 'custom-content-portfolio' ) : esc_html__( 'Normal', 'custom-content-portfolio' ); ?>
$label = $is_sticky ? esc_html__( 'Sticky', 'custom-content-portfolio' ) : esc_html__( 'Not Sticky', 'custom-content-portfolio' ); ?>

<div class="misc-pub-section curtime misc-pub-project-sticky">

<?php wp_nonce_field( 'ccp_project_publish_box_nonce', 'ccp_project_publish_box' ); ?>

<div class="misc-pub-section curtime misc-pub-project-type">
<i class="dashicons dashicons-sticky"></i>
<?php printf( esc_html__( 'Sticky: %s', 'custom-content-portfolio' ), "<strong class='ccp-current-project-type'>{$label}</strong>" ); ?>
<?php printf( esc_html__( 'Sticky: %s', 'custom-content-portfolio' ), "<strong class='ccp-sticky-status'>{$label}</strong>" ); ?>

<?php if ( current_user_can( $post_type_object->cap->publish_posts ) ) : ?>

<a href="#ccp-project-type-select" class="ccp-edit-project-type"><span aria-hidden="true"><?php esc_html_e( 'Edit', 'custom-content-portfolio' ); ?></span> <span class="screen-reader-text"><?php esc_html_e( 'Edit sticky status', 'custom-content-portfolio' ); ?></span></a>
<a href="#ccp-sticky-edit" class="ccp-edit-sticky"><span aria-hidden="true"><?php esc_html_e( 'Edit', 'custom-content-portfolio' ); ?></span> <span class="screen-reader-text"><?php esc_html_e( 'Edit sticky status', 'custom-content-portfolio' ); ?></span></a>

<div id="ccp-project-type-select" class="hide-if-js">
<select name="ccp_project_type" id="ccp-project-type">
<option value="" <?php selected( ! $is_sticky ); ?>><?php esc_html_e( 'Normal', 'custom-content-portfolio' ); ?></option>
<option value="sticky" <?php selected( $is_sticky ); ?>><?php esc_html_e( 'Sticky', 'custom-content-portfolio' ); ?></option>
</select>
<a href="#ccp-project-type" class="ccp-save-project-type hide-if-no-js button"><?php esc_html_e( 'OK', 'custom-content-portolio' ); ?></a>
<a href="#ccp-project-type" class="ccp-cancel-project-type hide-if-no-js button-cancel"><?php esc_html_e( 'Cancel', 'custom-content-portolio' ); ?></a>
</div><!-- #ccp-project-type-select -->
<div id="ccp-sticky-edit" class="hide-if-js">
<label>
<input type="checkbox" name="ccp_project_sticky" id="ccp-project-sticky" <?php checked( $is_sticky ); ?> value="true" />
<?php esc_html_e( 'Stick to the portfolio page', 'custom-content-portfolio' ); ?>
</label>
<a href="#ccp-project-sticky" class="ccp-save-sticky hide-if-no-js button"><?php esc_html_e( 'OK', 'custom-content-portolio' ); ?></a>
<a href="#ccp-project-sticky" class="ccp-cancel-sticky hide-if-no-js button-cancel"><?php esc_html_e( 'Cancel', 'custom-content-portolio' ); ?></a>
</div><!-- #ccp-sticky-edit -->

<?php endif; ?>

Expand Down Expand Up @@ -196,12 +199,19 @@ public function update( $post_id ) {

$this->manager->update( $post_id );

$should_stick = sanitize_key( $_POST['ccp_project_type'] );
// Verify the nonce.
if ( ! isset( $_POST['ccp_project_publish_box'] ) || ! wp_verify_nonce( $_POST['ccp_project_publish_box'], 'ccp_project_publish_box_nonce' ) )
return;

// Is the sticky checkbox checked?
$should_stick = ! empty( $_POST['ccp_project_sticky'] );

if ( 'sticky' === $should_stick && ! ccp_is_project_sticky( $post_id ) )
// If checked, add the project if it is not sticky.
if ( $should_stick && ! ccp_is_project_sticky( $post_id ) )
ccp_add_sticky_project( $post_id );

elseif ( '' === $should_stick && ccp_is_project_sticky( $post_id ) )
// If not checked, remove the project if it is sticky.
elseif ( ! $should_stick && ccp_is_project_sticky( $post_id ) )
ccp_remove_sticky_project( $post_id );
}

Expand Down
8 changes: 8 additions & 0 deletions admin/functions-admin.php
View file
Expand Up @@ -34,6 +34,14 @@ function ccp_admin_register_scripts() {
$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

wp_register_script( 'ccp-edit-project', ccp_plugin()->js_uri . "edit-project{$min}.js", array( 'jquery' ), '', true );

// Localize our script with some text we want to pass in.
$i18n = array(
'label_sticky' => esc_html__( 'Sticky', 'custom-content-portfolio' ),
'label_not_sticky' => esc_html__( 'Not Sticky', 'custom-content-portfolio' ),
);

wp_localize_script( 'ccp-edit-project', 'ccp_i18n', $i18n );
}

/**
Expand Down
7 changes: 6 additions & 1 deletion css/admin.css
View file
@@ -1,10 +1,15 @@

/* ====== Edit/New Role Screen. ====== */

.misc-pub-project-type .dashicons {
.misc-pub-project-sticky .dashicons {
color: rgb( 130, 135, 140 );
}

.misc-pub-project-sticky label {
display: block;
margin: 8px 0 8px 2px;
}

/* === Edit Capabilities Tabs === */

/* Wrapper box */
Expand Down
2 changes: 1 addition & 1 deletion css/admin.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 27 additions & 33 deletions js/edit-project.js
View file
@@ -1,70 +1,64 @@
jQuery( document ).ready( function() {

/* === Edit sticky status in the "Publish" meta box. === */

/* Get the original post status in the case the user clicks "Cancel". */
var orig_status = jQuery( 'select[name=ccp_project_type] option:selected' ).val();
var sticky_checkbox = jQuery( 'input[name=ccp_project_sticky]' );
var is_sticky = jQuery( sticky_checkbox ).prop( 'checked' );

/* When user clicks the "Edit" post status link. */
jQuery( 'a.ccp-edit-project-type' ).click(
// When user clicks the "Edit" sticky link.
jQuery( 'a.ccp-edit-sticky' ).click(
function( j ) {
j.preventDefault();

/* Grab the original status again in case user clicks "OK" or "Cancel" more than once. */
orig_status = jQuery( 'select[name=ccp_project_type] option:selected' ).val();
// Grab the original status again in case user clicks "OK" or "Cancel" more than once.
is_sticky = jQuery( sticky_checkbox ).prop( 'checked' );

/* Hide this link. */
// Hide this link.
jQuery( this ).hide();

/* Open the post status select section. */
jQuery( '#ccp-project-type-select' ).slideToggle();
// Open the sticky edit.
jQuery( '#ccp-sticky-edit' ).slideToggle();
}
);

/* When the user clicks the "OK" post status button. */
jQuery( 'a.ccp-save-project-type' ).click(
jQuery( 'a.ccp-save-sticky' ).click(
function( j ) {
j.preventDefault();

/* Close the post status select section. */
jQuery( '#ccp-project-type-select' ).slideToggle();
// Close the sticky edit.
jQuery( '#ccp-sticky-edit' ).slideToggle();

/* Show the hidden "Edit" link. */
jQuery( 'a.ccp-edit-project-type' ).show();
// Show the hidden "Edit" link.
jQuery( 'a.ccp-edit-sticky' ).show();
}
);

/* When the user clicks the "Cancel" post status link. */
jQuery( 'a.ccp-cancel-project-type' ).click(
// When the user clicks the "Cancel" edit sticky link.
jQuery( 'a.ccp-cancel-sticky' ).click(
function( j ) {
j.preventDefault();

/* Close the post status select section. */
jQuery( '#ccp-project-type-select' ).slideToggle();
// Close the sticky edit.
jQuery( '#ccp-sticky-edit' ).slideToggle();

/* Show the hidden "Edit" link. */
jQuery( 'a.ccp-edit-project-type' ).show();
// Show the hidden "Edit" link.
jQuery( 'a.ccp-edit-sticky' ).show();

/* Check the original status radio since we're canceling. */
jQuery( 'option[value="' + orig_status + '"]' ).prop( 'selected', true ).trigger( 'change' );

/* Change the post status text. */
/*jQuery( 'strong.ccp-current-project-type' ).text(
jQuery( 'option[value="' + orig_status + '"]' ).text()
);*/
// Set the original checked/not-checked since we're canceling.
jQuery( sticky_checkbox ).prop( 'checked', is_sticky ).trigger( 'change' );
}
);

/* When a new status is selected, change the post status text to match the selected status. */
jQuery( 'select[name=ccp_project_type]' ).change(
// When the sticky status changes.
jQuery( sticky_checkbox ).change(
function() {
jQuery( 'strong.ccp-current-project-type' ).text(
jQuery( 'option:selected', this ).text()
jQuery( 'strong.ccp-sticky-status' ).text(
jQuery( sticky_checkbox ).prop( 'checked' ) ? ccp_i18n.label_sticky : ccp_i18n.label_not_sticky
);
}
);



/* ====== Tabs ====== */

// Hides the tab content.
Expand Down
2 changes: 1 addition & 1 deletion js/edit-project.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 557c3d8

Please sign in to comment.