From fe92fb6a96d8a4dccb700cfdef37e079801ed932 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Tue, 18 Dec 2012 21:56:01 +0000 Subject: [PATCH] Work on media uploader --- .../writepanel-product-type-variable.php | 91 +++++++++++------- .../writepanels/writepanels-init.php | 2 +- admin/woocommerce-admin-functions.php | 21 +---- admin/woocommerce-admin-hooks.php | 7 -- admin/woocommerce-admin-init.php | 7 +- admin/woocommerce-admin-taxonomies.php | 92 +++++++++++-------- assets/js/admin/write-panels.js | 47 ++++------ assets/js/admin/write-panels.min.js | 4 +- 8 files changed, 137 insertions(+), 134 deletions(-) diff --git a/admin/post-types/writepanels/writepanel-product-type-variable.php b/admin/post-types/writepanels/writepanel-product-type-variable.php index 5459b800be2..837599c59b1 100644 --- a/admin/post-types/writepanels/writepanel-product-type-variable.php +++ b/admin/post-types/writepanels/writepanel-product-type-variable.php @@ -464,53 +464,74 @@ function variable_product_type_options() { }); }; - var current_field_wrapper; + // Uploader + var variable_image_frame; + var setting_variation_image_id; + var setting_variation_image; + var wp_media_post_id = wp.media.model.settings.post.id; - window.send_to_editor_default = window.send_to_editor; + jQuery('#variable_product_options').on('click', '.upload_image_button', function( event ) { - jQuery('#variable_product_options').on('click', '.upload_image_button', function(){ + var $button = jQuery( this ); + var post_id = $button.attr('rel'); + var $parent = $button.closest('.upload_image'); + setting_variation_image = $parent; + setting_variation_image_id = post_id; - var post_id = jQuery(this).attr('rel'); - var parent = jQuery(this).parent(); - current_field_wrapper = parent; + event.preventDefault(); - if (jQuery(this).is('.remove')) { + if ( $button.is('.remove') ) { - jQuery('.upload_image_id', current_field_wrapper).val(''); - jQuery('img', current_field_wrapper).attr('src', ''); - jQuery(this).removeClass('remove'); + setting_variation_image.find( '.upload_image_id' ).val( '' ); + setting_variation_image.find( 'img' ).attr( 'src', '' ); + setting_variation_image.find( '.upload_image_button' ).removeClass( 'remove' ); } else { - window.send_to_editor = window.send_to_cproduct; - formfield = jQuery('.upload_image_id', parent).attr('name'); - tb_show('', 'media-upload.php?post_id=' + post_id + '&type=image&TB_iframe=true'); + // If the media frame already exists, reopen it. + if ( variable_image_frame ) { + variable_image_frame.open(); + return; + } + // Create the media frame. + variable_image_frame = wp.media.frames.variable_image = wp.media({ + // Set the title of the modal. + title: '', + button: { + text: '' + } + }); + + // When an image is selected, run a callback. + variable_image_frame.on( 'select', function() { + + attachment = variable_image_frame.state().get('selection').first().toJSON(); + + setting_variation_image.find( '.upload_image_id' ).val( attachment.id ); + setting_variation_image.find( '.upload_image_button' ).addClass( 'remove' ); + setting_variation_image.find( 'img' ).attr( 'src', attachment.url ); + + wp.media.model.settings.post.id = wp_media_post_id; + }); + + variable_image_frame.on( 'ready open', function() { + + wp.media.model.settings.post.id = setting_variation_image_id; + + }); + + console.log( variable_image_frame.uploader ); + + // Finally, open the modal. + variable_image_frame.open(); } - - return false; }); - window.send_to_cproduct = function(html) { - - jQuery('body').append('
' + html + '
'); - - var img = jQuery('#temp_image').find('img'); - - imgurl = img.attr('src'); - imgclass = img.attr('class'); - imgid = parseInt(imgclass.replace(/\D/g, ''), 10); - - jQuery('.upload_image_id', current_field_wrapper).val(imgid); - jQuery('.upload_image_button', current_field_wrapper).addClass('remove'); - - jQuery('img', current_field_wrapper).attr('src', imgurl); - tb_remove(); - jQuery('#temp_image').remove(); - - window.send_to_editor = window.send_to_editor_default; - - } + // Restore ID + jQuery('a.add_media').on('click', function() { + wp.media.model.settings.post.id = wp_media_post_id; + } ); }); id, array('edit-product_cat') )) : - wp_enqueue_script( 'media-upload' ); - wp_enqueue_script( 'thickbox' ); + wp_enqueue_media(); endif; @@ -373,8 +372,7 @@ function woocommerce_admin_scripts() { wp_enqueue_script( 'woocommerce_writepanel' ); wp_enqueue_script( 'jquery-ui-datepicker' ); - wp_enqueue_script( 'media-upload' ); - wp_enqueue_script( 'thickbox' ); + wp_enqueue_media(); wp_enqueue_script( 'ajax-chosen' ); wp_enqueue_script( 'chosen' ); wp_enqueue_script( 'plupload-all' ); @@ -474,7 +472,6 @@ function woocommerce_admin_css() { endif; if ( $typenow == '' || $typenow=="product" || $typenow=="shop_order" || $typenow=="shop_coupon" ) : - wp_enqueue_style( 'thickbox' ); wp_enqueue_style( 'woocommerce_admin_styles', $woocommerce->plugin_url() . '/assets/css/admin.css' ); wp_enqueue_style( 'jquery-ui-style', (is_ssl()) ? 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css' ); endif; diff --git a/admin/woocommerce-admin-taxonomies.php b/admin/woocommerce-admin-taxonomies.php index 6b40167e2d6..1d206a680cd 100644 --- a/admin/woocommerce-admin-taxonomies.php +++ b/admin/woocommerce-admin-taxonomies.php @@ -44,35 +44,39 @@ function woocommerce_add_category_fields() { if ( ! jQuery('#product_cat_thumbnail_id').val() ) jQuery('.remove_image_button').hide(); - window.send_to_editor_default = window.send_to_editor; + // Uploading files + var file_frame; - window.send_to_termmeta = function(html) { + jQuery('.upload_image_button').live('click', function( event ){ - jQuery('body').append('
' + html + '
'); + event.preventDefault(); - var img = jQuery('#temp_image').find('img'); + // If the media frame already exists, reopen it. + if ( file_frame ) { + file_frame.open(); + return; + } - imgurl = img.attr('src'); - imgclass = img.attr('class'); - imgid = parseInt(imgclass.replace(/\D/g, ''), 10); + // Create the media frame. + file_frame = wp.media.frames.downloadable_file = wp.media({ + title: '', + button: { + text: '', + }, + multiple: false + }); - jQuery('#product_cat_thumbnail_id').val(imgid); - jQuery('#product_cat_thumbnail img').attr('src', imgurl); - jQuery('.remove_image_button').show(); - jQuery('#temp_image').remove(); + // When an image is selected, run a callback. + file_frame.on( 'select', function() { + attachment = file_frame.state().get('selection').first().toJSON(); - tb_remove(); + jQuery('#product_cat_thumbnail_id').val( attachment.id ); + jQuery('#product_cat_thumbnail img').attr('src', attachment.url ); + jQuery('.remove_image_button').show(); + }); - window.send_to_editor = window.send_to_editor_default; - } - - jQuery('.upload_image_button').live('click', function(){ - var post_id = 0; - - window.send_to_editor = window.send_to_termmeta; - - tb_show('', 'media-upload.php?post_id=' + post_id + '&type=image&TB_iframe=true'); - return false; + // Finally, open the modal. + file_frame.open(); }); jQuery('.remove_image_button').live('click', function(){ @@ -132,35 +136,45 @@ function woocommerce_edit_category_fields( $term, $taxonomy ) {