Change shortcode buttons

Instead of enabling individually, enable the buttons all at once, and use js to hide them behind one master button, kind of a dropdown menu style.
This commit is contained in:
Robin Cornett
2017-11-02 09:20:02 -04:00
parent d7425656d9
commit abc943d8a8
4 changed files with 66 additions and 17 deletions
@@ -340,6 +340,9 @@ class Display_Featured_Image_Genesis {
add_filter( 'sixtenpress_shortcode_inline_css', array( $shortcode_class, 'inline_css' ) );
add_action( 'sixtenpress_shortcode_init', array( $shortcode_class, 'shortcode_buttons' ) );
add_action( 'sixtenpress_shortcode_modal', array( $shortcode_class, 'do_modal' ) );
add_action( 'sixtenpress_shortcode_before_media_button', array( $shortcode_class, 'button_open' ) );
add_action( 'sixtenpress_shortcode_after_media_button', array( $shortcode_class, 'button_close' ) );
add_action( 'admin_enqueue_scripts', array( $shortcode_class, 'inline_script_style' ), 1000 );
}
/**
@@ -30,11 +30,7 @@ class DisplayFeaturedImageGenesisGetSetting {
'centeredX' => 1,
'centeredY' => 1,
'fade' => 750,
'shortcode' => array(
'displayfeaturedimagegenesis_term' => 0,
'displayfeaturedimagegenesis_author' => 0,
'displayfeaturedimagegenesis_post_type' => 0,
),
'shortcodes' => 0,
'backstretch_hook' => 'genesis_after_header',
'backstretch_priority' => 10,
'large_hook' => 'genesis_before_loop',
@@ -123,15 +123,11 @@ class Display_Featured_Image_Genesis_Settings_Define extends Display_Featured_Im
'label' => __( 'Use term/post type fallback images for content archives?', 'display-featured-image-genesis' ),
),
array(
'id' => 'shortcode',
'id' => 'shortcodes',
'title' => __( 'Add Shortcode Buttons', 'display-featured-image-genesis' ),
'callback' => 'do_checkbox_array',
'callback' => 'do_checkbox',
'section' => 'main',
'options' => array(
'displayfeaturedimagegenesis_term' => __( 'Featured Term Widget', 'display-featured-image-genesis' ),
'displayfeaturedimagegenesis_author' => __( 'Featured Author Widget', 'display-featured-image-genesis' ),
'displayfeaturedimagegenesis_post_type' => __( 'Featured Post Type Widget', 'display-featured-image-genesis' ),
),
'label' => __( 'Add optional shortcode buttons to the post editor', 'display-featured-image-genesis' ),
),
);
}
@@ -57,21 +57,21 @@ class DisplayFeaturedImageGenesisWidgetsShortcodes {
* Add media shortcode buttons to the editor.
*/
public function shortcode_buttons() {
$setting = displayfeaturedimagegenesis_get_setting();
if ( ! $setting['shortcodes'] ) {
return;
}
$widgets = array(
'displayfeaturedimagegenesis_term' => __( 'Add Featured Term Widget', 'display-featured-image-genesis' ),
'displayfeaturedimagegenesis_author' => __( 'Add Featured Author Widget', 'display-featured-image-genesis' ),
'displayfeaturedimagegenesis_post_type' => __( 'Add Featured Post Type Widget', 'display-featured-image-genesis' ),
);
$setting = displayfeaturedimagegenesis_get_setting();
foreach ( $widgets as $widget => $button_label ) {
if ( ! $setting['shortcode'][ $widget ] ) {
continue;
}
sixtenpress_shortcode_register( $widget, array(
'modal' => $widget,
'button' => array(
'id' => "{$widget}-create",
'class' => "{$widget}-create",
'class' => "{$widget} create",
'label' => $button_label,
),
'self' => true,
@@ -81,10 +81,63 @@ class DisplayFeaturedImageGenesisWidgetsShortcodes {
),
) );
}
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
}
/**
* Enqueue the script needed for the term widget.
*/
public function enqueue_scripts() {
$screen = get_current_screen();
if ( 'post' !== $screen->id ) {
return;
}
wp_enqueue_script( 'widget_selector' );
wp_localize_script( 'widget_selector', 'displayfeaturedimagegenesis_ajax_object', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
/**
* Opening markup to wrap all featured image buttons in one div element.
*
* @param $args
*/
public function button_open( $args ) {
if ( 'displayfeaturedimagegenesis_term' !== $args['modal'] ) {
return;
}
printf( '<div class="displayfeaturedimage-wrapper"><button class="button show-buttons"><span class="wp-media-buttons-icon dashicons dashicons-camera"></span> %s</button><div class="buttons-wrap">',
esc_html__( 'Image Shortcodes', 'display-featured-image-genesis' )
);
}
/**
* Closing div tag.
*
* @param $args
*/
public function button_close( $args ) {
if ( 'displayfeaturedimagegenesis_post_type' !== $args['modal'] ) {
return;
}
echo '</div></div>';
}
/**
* Add inline script/style to 6/10 Press shortcode editor.
*/
public function inline_script_style() {
$script = 'jQuery( \'.displayfeaturedimage-wrapper button\' ).on( \'click\', function( e ) { e.preventDefault(); jQuery( \'.displayfeaturedimage-wrapper .buttons-wrap\' ).toggle(); } );';
wp_add_inline_script( 'sixtenpress-shortcode-editor', $script );
$style = '.displayfeaturedimage-wrapper { display: inline-block; position: relative; } .displayfeaturedimage-wrapper .buttons-wrap { display: none; width: 200px; position: absolute; z-index: 100; left: 50%; margin-left: -100px; } .displayfeaturedimage-wrapper .button.create { width: 100%; }';
wp_add_inline_style( 'sixtenpress-shortcode-editor', $style );
}
/**
* Add the widget forms to the modal.
*
* @param $shortcode
*/
public function do_modal( $shortcode ) {
@@ -128,6 +181,7 @@ class DisplayFeaturedImageGenesisWidgetsShortcodes {
/**
* Return the shortcode output.
*
* @param $atts
* @param $class
*