Skip to content
This repository has been archived by the owner on Nov 5, 2018. It is now read-only.

Commit

Permalink
Replace Thickbox with Media Gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@megawebmaster
megawebmaster committed Aug 4, 2014
1 parent 18aefaf commit a6af678
Show file tree
Hide file tree
Showing 8 changed files with 281 additions and 304 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* New: `jigoshop_report_widgets` action to add custom report boxes.
* New: `jQuery.payment()` function to ease payment redirection.
* New: Ability to always select "All of" in country dropdown.
* New: Replaced old ThickBox with WordPress Media Gallery.
* Improved: "Edit Product Category" and "Edit Product Tag" admin bar links now works properly.
* Fix: Invalid formatting of shipping dropdown.
* Fix: Displaying multiple select fields.
Expand Down
172 changes: 77 additions & 95 deletions admin/jigoshop-admin-taxonomies.php
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<?php
/**
* Jigoshop Admin Taxonomies
*
* DISCLAIMER
*
* Do not edit or add directly to this file if you wish to upgrade Jigoshop to newer
* versions in the future. If you wish to customise Jigoshop core for your needs,
* please use our GitHub repository to publish essential changes for consideration.
Expand All @@ -18,62 +16,54 @@
/**
* Category thumbnails
*/
add_action('product_cat_add_form_fields' , 'jigoshop_add_category_thumbnail_field');
add_action('product_cat_edit_form_fields', 'jigoshop_edit_category_thumbnail_field', 10,2);
add_action('product_cat_add_form_fields', 'jigoshop_add_category_thumbnail_field');
add_action('product_cat_edit_form_fields', 'jigoshop_edit_category_thumbnail_field', 10, 2);

function jigoshop_add_category_thumbnail_field() {
$image = jigoshop::assets_url().'/assets/images/placeholder.png';
function jigoshop_add_category_thumbnail_field()
{
$image = JIGOSHOP_URL.'/assets/images/placeholder.png';
?>
<div class="form-field">
<label><?php _e('Thumbnail', 'jigoshop'); ?></label>

<div id="product_cat_thumbnail" style="float:left;margin-right:10px;"><img src="<?php echo $image; ?>" width="60px" height="60px" /></div>
<div style="line-height:60px;">
<input type="hidden" id="product_cat_thumbnail_id" name="product_cat_thumbnail_id" />
<button type="submit" class="upload_image_button button"><?php _e('Upload/Add image', 'jigoshop'); ?></button>
<button type="submit" class="remove_image_button button"><?php _e('Remove image', 'jigoshop'); ?></button>
<a id="add-image" href="#" class="button"
data-title="<?php esc_attr_e('Choose thumbnail image', 'jigoshop'); ?>"
data-button="<?php esc_attr_e('Set as thumbnail', 'jigoshop'); ?>"><?php _e('Change image', 'jigoshop'); ?>
</a>
<a id="remove-image" href="#" class="button" style="display: none;"><?php _e('Remove image', 'jigoshop'); ?></a>
</div>
<script type="text/javascript">

window.send_to_termmeta = function(html) {

jQuery('body').append('<div id="temp_image">' + html + '</div>');

var img = jQuery('#temp_image').find('img');

imgurl = img.attr('src');
imgclass = img.attr('class');
imgid = parseInt(imgclass.replace(/\D/g, ''), 10);

jQuery('#product_cat_thumbnail_id').val(imgid);
jQuery('#product_cat_thumbnail img').attr('src', imgurl);
jQuery('#temp_image').remove();

tb_remove();
}

jQuery(document.body).on('click', '.upload_image_button', function(e){
e.preventDefault();
var post_id = 0;

window.send_to_editor = window.send_to_termmeta;

tb_show('', 'media-upload.php?post_id=' + post_id + '&amp;type=image&amp;TB_iframe=true');
return false;
});

jQuery(document.body).on('click', '.remove_image_button', function(){
jQuery('#product_cat_thumbnail img').attr('src', '<?php echo $image; ?>');
jQuery('#product_cat_thumbnail_id').val('');
return false;
jQuery(function($){
$('#add-image').jigoshop_media({
field: $('#product_cat_thumbnail_id'),
thumbnail: $('#product_cat_thumbnail > img'),
callback: function(){
if($('#product_cat_thumbnail_id').val() != ''){
$('#remove-image').show()
}
},
library: {
type: 'image'
}
});
$('#remove-image').on('click', function(e){
e.preventDefault();
$('#product_cat_thumbnail_id').val('');
$('#product_cat_thumbnail > img').attr('src', '<?php echo $image; ?>');
$(this).hide();
});
});

</script>
<div class="clear"></div>
</div>
<?php
<?php
}

function jigoshop_edit_category_thumbnail_field( $term, $taxonomy ) {
function jigoshop_edit_category_thumbnail_field($term, $taxonomy)
{
$image = jigoshop_product_cat_image($term->term_id);
?>
<tr class="form-field">
Expand All @@ -82,90 +72,82 @@ function jigoshop_edit_category_thumbnail_field( $term, $taxonomy ) {
<div id="product_cat_thumbnail" style="float:left;margin-right:10px;"><img src="<?php echo $image['image']; ?>" width="60px" height="60px" /></div>
<div style="line-height:60px;">
<input type="hidden" id="product_cat_thumbnail_id" name="product_cat_thumbnail_id" value="<?php echo $image['thumb_id']; ?>" />
<button type="submit" class="upload_image_button button"><?php _e('Upload/Add image', 'jigoshop'); ?></button>
<button type="submit" class="remove_image_button button"><?php _e('Remove image', 'jigoshop'); ?></button>
<a id="add-image" href="#" class="button"
data-title="<?php esc_attr_e('Choose thumbnail image', 'jigoshop'); ?>"
data-button="<?php esc_attr_e('Set as thumbnail', 'jigoshop'); ?>"><?php _e('Change image', 'jigoshop'); ?>
</a>
<a id="remove-image" href="#" class="button" style="display: none;"><?php _e('Remove image', 'jigoshop'); ?></a>
</div>
<script type="text/javascript">

window.send_to_termmeta = function(html) {

jQuery('body').append('<div id="temp_image">' + html + '</div>');

var img = jQuery('#temp_image').find('img');

imgurl = img.attr('src');
imgclass = img.attr('class');
imgid = parseInt(imgclass.replace(/\D/g, ''), 10);

jQuery('#product_cat_thumbnail_id').val(imgid);
jQuery('#product_cat_thumbnail img').attr('src', imgurl);
jQuery('#temp_image').remove();

tb_remove();
}

jQuery(document.body).on('click', '.upload_image_button', function(e){
e.preventDefault();
var post_id = 0;

window.send_to_editor = window.send_to_termmeta;

tb_show('', 'media-upload.php?post_id=' + post_id + '&amp;type=image&amp;TB_iframe=true');
return false;
});

jQuery(document.body).on('click', '.remove_image_button', function(){
jQuery('#product_cat_thumbnail img').attr('src', '<?php echo jigoshop::assets_url().'/assets/images/placeholder.png'; ?>');
jQuery('#product_cat_thumbnail_id').val('');
return false;
jQuery(function($){
$('#add-image').jigoshop_media({
field: $('#product_cat_thumbnail_id'),
thumbnail: $('#product_cat_thumbnail > img'),
callback: function(){
if($('#product_cat_thumbnail_id').val() != ''){
$('#remove-image').show()
}
},
library: {
type: 'image'
}
});
$('#remove-image').on('click', function(e){
e.preventDefault();
$('#product_cat_thumbnail_id').val('');
$('#product_cat_thumbnail > img').attr('src', '<?php echo JIGOSHOP_URL.'/assets/images/placeholder.png'; ?>');
$(this).hide();
});
});

</script>
<div class="clear"></div>
</td>
</tr>
<?php
<?php
}

add_action('created_term', 'jigoshop_category_thumbnail_field_save', 10,3);
add_action('edit_term' , 'jigoshop_category_thumbnail_field_save', 10,3);
add_action('created_term', 'jigoshop_category_thumbnail_field_save', 10, 3);
add_action('edit_term', 'jigoshop_category_thumbnail_field_save', 10, 3);

function jigoshop_category_thumbnail_field_save( $term_id, $tt_id, $taxonomy ) {

if (!isset($_POST['product_cat_thumbnail_id']))
return false;

update_metadata( 'jigoshop_term', $term_id, 'thumbnail_id', $_POST['product_cat_thumbnail_id'] );
function jigoshop_category_thumbnail_field_save($term_id, $tt_id, $taxonomy)
{
if (!isset($_POST['product_cat_thumbnail_id'])) {
return;
}

update_metadata('jigoshop_term', $term_id, 'thumbnail_id', $_POST['product_cat_thumbnail_id']);
}

/**
* Thumbnail column for categories
*/
* Thumbnail column for categories
*/
add_filter("manage_edit-product_cat_columns", 'jigoshop_product_cat_columns');
add_filter("manage_product_cat_custom_column", 'jigoshop_product_cat_column', 10, 3);

function jigoshop_product_cat_columns( $columns ) {
function jigoshop_product_cat_columns($columns)
{

$new_columns = array(
'cb' => $columns['cb'],
'cb' => $columns['cb'],
'thumb' => null
);

unset($columns['cb']);
$columns = array_merge( $new_columns, $columns );
$columns = array_merge($new_columns, $columns);

return $columns;

}

function jigoshop_product_cat_column( $columns, $column, $id ) {
function jigoshop_product_cat_column($columns, $column, $id)
{

if ($column != 'thumb')
if ($column != 'thumb') {
return false;
}

$image = jigoshop_product_cat_image($id);
$columns .= '<a class="row-title" href="'.get_edit_term_link( $id, 'product_cat', 'product' ).'">';
$columns .= '<a class="row-title" href="'.get_edit_term_link($id, 'product_cat', 'product').'">';
$columns .= '<img src="'.$image['image'].'" alt="Thumbnail" class="wp-post-image" height="32" width="32" />';
$columns .= '</a>';

Expand Down
8 changes: 2 additions & 6 deletions admin/write-panels/product-types/variable.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -513,18 +513,14 @@ private function generate_panel($attributes, $variation = null) {
<div class="inside">
<table cellpadding="0" cellspacing="0" class="jigoshop_variable_attributes">
<tbody>

<?php do_action('jigoshop_variable_product_table_begin', $variation, $attributes)?>

<tr>
<td class="upload_image" rowspan="2">
<a href="#" class="upload_image_button <?php if (isset($image_id)) echo 'remove'; ?>" rel="<?php echo $variation->ID; ?>">
<a href="#" class="upload_image_button" rel="<?php echo $variation->ID; ?>">
<img src="<?php echo $image ?>" width="93px" />
<input type="hidden" name="<?php echo esc_attr( $this->field_name('_thumbnail_id', $variation) ); ?>" class="upload_image_id" value="<?php if ( isset($image_id)) echo esc_attr( $image_id ); ?>" />
<!-- TODO: APPEND THIS IN JS <span class="overlay"></span> -->
<input type="hidden" name="<?php echo esc_attr( $this->field_name('_thumbnail_id', $variation) ); ?>" class="upload_image_id" value="<?php isset($image_id) and print esc_attr($image_id); ?>" />
</a>
</td>

<td>
<?php
$terms = get_the_terms( $variation->ID, 'product_type' );
Expand Down
60 changes: 60 additions & 0 deletions assets/js/media.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
jQuery(function($){
$.fn.jigoshop_media = function(options){
var frame = false;
var settings = $.extend({
field: $('#media-library-file'),
thumbnail: false,
callback: false,
library: {},
bind: true
}, options);

$(this).on('jigoshop_media', function(e){
e.preventDefault();
var $el = $(this);

// If the media frame already exists, reopen it.
if(frame){
frame.open();
return;
}

// Create the media frame.
frame = wp.media({
// Set the title of the modal.
title: $el.data('title'),
// Tell the modal to show only images.
library: settings.library,
// Customize the submit button.
button: {
// Set the text of the button.
text: $el.data('button')
}
});

// When an image is selected, run a callback.
frame.on('select', function(){
// Grab the selected attachment.
var attachment = frame.state().get('selection').first();

if(settings.field){
settings.field.val(attachment.id);
}
if(settings.thumbnail){
settings.thumbnail.attr('src', attachment.changed.url);
}
if(typeof(settings.callback) == 'function'){
settings.callback(attachment);
}
});

frame.open();
});

if(settings.bind){
$(this).on('click', function(){
$(this).trigger('jigoshop_media');
});
}
};
});
Loading

0 comments on commit a6af678

Please sign in to comment.