From b5464d5d5d71ff0ac257bbbcac96751643630d32 Mon Sep 17 00:00:00 2001 From: Robin Cornett Date: Mon, 13 May 2019 10:26:50 -0400 Subject: [PATCH] Update image uploader markup, script --- .../class-displayfeaturedimagegenesis.php | 13 +- includes/js/settings-upload.js | 133 ++++++++++-------- includes/js/settings-upload.min.js | 1 + ...ass-displayfeaturedimagegenesis-helper.php | 17 +-- 4 files changed, 96 insertions(+), 68 deletions(-) create mode 100644 includes/js/settings-upload.min.js diff --git a/includes/class-displayfeaturedimagegenesis.php b/includes/class-displayfeaturedimagegenesis.php index 151ae23..f7a37f3 100644 --- a/includes/class-displayfeaturedimagegenesis.php +++ b/includes/class-displayfeaturedimagegenesis.php @@ -232,9 +232,10 @@ class Display_Featured_Image_Genesis { public function enqueue_scripts() { $version = $this->common->version; + $minify = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; - wp_register_script( 'displayfeaturedimage-upload', plugins_url( '/includes/js/settings-upload.js', dirname( __FILE__ ) ), array( 'jquery', 'media-upload', 'thickbox' ), $version ); wp_register_script( 'widget_selector', plugins_url( '/includes/js/widget-selector.js', dirname( __FILE__ ) ), array( 'jquery' ), $version ); + wp_register_script( 'displayfeaturedimage-upload', plugins_url( "/includes/js/settings-upload{$minify}.js", dirname( __FILE__ ) ), array( 'jquery', 'media-upload', 'thickbox' ), $version, true ); $screen = get_current_screen(); $screen_ids = array( @@ -246,9 +247,13 @@ class Display_Featured_Image_Genesis { if ( in_array( $screen->id, $screen_ids, true ) || ! empty( $screen->taxonomy ) ) { wp_enqueue_media(); wp_enqueue_script( 'displayfeaturedimage-upload' ); - wp_localize_script( 'displayfeaturedimage-upload', 'objectL10n', array( - 'text' => __( 'Select Image', 'display-featured-image-genesis' ), - ) ); + wp_localize_script( + 'displayfeaturedimage-upload', + 'DisplayFeaturedImageGenesis', + array( + 'text' => __( 'Select Image', 'display-featured-image-genesis' ), + ) + ); } } diff --git a/includes/js/settings-upload.js b/includes/js/settings-upload.js index c491097..e574bcb 100644 --- a/includes/js/settings-upload.js +++ b/includes/js/settings-upload.js @@ -1,70 +1,91 @@ -jQuery( document ).ready( function ( $ ) { +;(function ( document, $, undefined ) { 'use strict'; var custom_uploader, + targetInputClass = '.upload-image-id', + previewClass = 'upload-image-preview', target_input, - preview; + DFIG = {}; - $( '.upload_default_image' ).click(function(e) { + DFIG.upload = function () { + $( '.upload-image' ).on( 'click.upload', _uploadMedia ); + $( '.delete-image' ).on( 'click.delete', _deleteMedia ); + $( '#submit' ).on( 'click.term', _termImages ); - target_input = $(this).prev( '.upload_image_id' ); + function _uploadMedia( e ) { + e.preventDefault(); + target_input = $( this ).prev( targetInputClass ); - e.preventDefault(); - - //If the uploader object has already been created, reopen the dialog - if ( custom_uploader ) { - custom_uploader.open(); - return; - } - - //Extend the wp.media object - custom_uploader = wp.media.frames.file_frame = wp.media({ - title: ( [ objectL10n.text ] ), - button: { - text: ( [ objectL10n.text ] ) - }, - multiple: false, - library: { type : 'image' } - }); - - //When a file is selected, grab the URL and set it as the text field's value - custom_uploader.on( 'select', function() { - - var attachment = custom_uploader.state().get( 'selection' ).first().toJSON(), - preview = $( target_input ).prevAll( '.upload_logo_preview' ), - previewImage = $( '
' ); - $( target_input ).val( attachment.id ); - if ( preview.length ) { - preview.remove(); + //If the uploader object has already been created, reopen the dialog + if ( custom_uploader ) { + custom_uploader.reset(); } - $( target_input ).before( previewImage ); - }); - //Open the uploader dialog - custom_uploader.open(); + //Extend the wp.media object + custom_uploader = wp.media.frames.file_frame = wp.media( { + title: ([DFIG.params.text]), + button: { + text: ([DFIG.params.text]) + }, + multiple: false, + library: {type: 'image'} + } ); - }); + //When a file is selected, grab the URL and set it as the text field's value + custom_uploader.on( 'select', function () { - $( '.delete_image' ).click( function() { + var attachment = custom_uploader.state().get( 'selection' ).first().toJSON(), + preview = $( target_input ).prevAll( '.' + previewClass ), + deleteButton = $( target_input ).siblings( '.delete-image' ), + previewImage = $( '
', { + class: previewClass + } ).append( $( '', { + style: 'max-width:100%;', + width: '300px', + src: attachment.url, + alt: '' + } ) ); + $( target_input ).val( attachment.id ); + if ( preview.length ) { + preview.remove(); + } + $( target_input ).before( previewImage ); + $( deleteButton ).show(); + } ); - target_input = $( this ).prevAll( '.upload_image_id' ); - var previewView = $( this ).prevAll( '.upload_logo_preview' ); + //Open the uploader dialog + custom_uploader.open(); - $( target_input ).val( '' ); - $( previewView ).remove(); - - }); - - $( '#submit' ).click( function() { - var submitButton = $( this ).parentsUntil( '#addtag' ), - previewView = submitButton.siblings( '.term-image-wrap' ).children( '.upload_logo_preview' ), - clearInput = submitButton.siblings( '.term-image-wrap' ).children( '.upload_image_id' ); - - if ( $( previewView ).length && $( submitButton ).length ) { - $( previewView ).delay( 1000 ).fadeOut( 200, function() { - $(this).remove(); - $( clearInput ).val( '' ); - }); } - }); -}); + + function _deleteMedia( e ) { + e.preventDefault(); + target_input = $( this ).prevAll( targetInputClass ); + var previewView = $( this ).prevAll( '.' + previewClass ); + + $( target_input ).val( '' ); + $( previewView ).remove(); + $( this ).hide(); + } + + function _termImages( e ) { + e.preventDefault(); + var submitButton = $( this ).parentsUntil( '#addtag' ), + previewView = submitButton.siblings( '.term-image-wrap' ).children( '.' + previewClass ), + clearInput = submitButton.siblings( '.term-image-wrap' ).children( targetInputClass ); + + if ( $( previewView ).length && $( submitButton ).length ) { + $( previewView ).delay( 1000 ).fadeOut( 200, function () { + $( this ).remove(); + $( clearInput ).val( '' ); + } ); + } + } + }; + + DFIG.params = typeof DisplayFeaturedImageGenesis === 'undefined' ? '' : DisplayFeaturedImageGenesis; + if ( typeof DFIG.params !== 'undefined' ) { + DFIG.upload(); + } + +})( document, jQuery ); diff --git a/includes/js/settings-upload.min.js b/includes/js/settings-upload.min.js new file mode 100644 index 0000000..ae8133b --- /dev/null +++ b/includes/js/settings-upload.min.js @@ -0,0 +1 @@ +!function(e,t,i){"use strict";var a,l,n=".upload-image-id",r="upload-image-preview",s={upload:function(){t(".upload-image").on("click.upload",function(e){e.preventDefault(),l=t(this).prev(n),a&&a.reset();(a=wp.media.frames.file_frame=wp.media({title:[s.params.text],button:{text:[s.params.text]},multiple:!1,library:{type:"image"}})).on("select",function(){var e=a.state().get("selection").first().toJSON(),i=t(l).prevAll("."+r),n=t(l).siblings(".delete-image"),s=t("
",{class:r}).append(t("",{style:"max-width:100%;",width:"300px",src:e.url,alt:""}));t(l).val(e.id),i.length&&i.remove(),t(l).before(s),t(n).show()}),a.open()}),t(".delete-image").on("click.delete",function(e){e.preventDefault(),l=t(this).prevAll(n);var i=t(this).prevAll("."+r);t(l).val(""),t(i).remove(),t(this).hide()}),t("#submit").on("click.term",function(e){e.preventDefault();var i=t(this).parentsUntil("#addtag"),a=i.siblings(".term-image-wrap").children("."+r),l=i.siblings(".term-image-wrap").children(n);t(a).length&&t(i).length&&t(a).delay(1e3).fadeOut(200,function(){t(this).remove(),t(l).val("")})})}};s.params="undefined"==typeof DisplayFeaturedImageGenesis?"":DisplayFeaturedImageGenesis,void 0!==s.params&&s.upload()}(document,jQuery); \ No newline at end of file diff --git a/includes/settings/class-displayfeaturedimagegenesis-helper.php b/includes/settings/class-displayfeaturedimagegenesis-helper.php index 06aa96a..eb344c6 100644 --- a/includes/settings/class-displayfeaturedimagegenesis-helper.php +++ b/includes/settings/class-displayfeaturedimagegenesis-helper.php @@ -237,7 +237,7 @@ class Display_Featured_Image_Genesis_Helper extends DisplayFeaturedImageGenesisG $alt_text = sprintf( __( '%s featured image', 'display-featured-image-genesis' ), esc_attr( $alt ) ); $preview = wp_get_attachment_image_src( (int) $id, 'medium' ); - return sprintf( '
%s
', esc_url( $preview[0] ), esc_attr( $alt_text ) ); + return sprintf( '
%s
', esc_url( $preview[0] ), esc_attr( $alt_text ) ); } /** @@ -250,16 +250,17 @@ class Display_Featured_Image_Genesis_Helper extends DisplayFeaturedImageGenesisG */ public function render_buttons( $id, $name ) { $id = $id ? (int) $id : ''; - printf( '', esc_attr( $name ), esc_attr( $id ) ); - printf( '', + printf( '', esc_attr( $name ), esc_attr( $id ) ); + printf( + '', esc_attr( $name ), esc_attr__( 'Select Image', 'display-featured-image-genesis' ) ); - if ( ! empty( $id ) ) { - printf( ' ', - esc_attr__( 'Delete Image', 'display-featured-image-genesis' ) - ); - } + printf( + ' ', + empty( $id ) ? 'style="display:none;"' : '', + esc_attr__( 'Delete Image', 'display-featured-image-genesis' ) + ); } /**