Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Final image handling tweaks.

This commit is contained in:
Mike Jolley 2012-10-05 19:02:02 +01:00
parent 7c724f4ea4
commit ead3e8313e
7 changed files with 399 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
admin/post-types/writepanels/writepanel-product_images.php
View File

@ -18,33 +18,51 @@
*/
function woocommerce_product_images_box() {
global $post;
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$ajax_nonce = wp_create_nonce( "set_post_thumbnail-$post->ID" );
?>
<div id="product_images_container">
<ul>
<!-- Current images -->
<ul class="product_images">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
if ( $thumbnail_id )
echo '<li class="image" data-post_id="' . $thumbnail_id . '">
' . wp_get_attachment_image( $thumbnail_id, 'full' ) . '
<span class="loading"></span>
<ul class="actions">
<li><a href="#" class="delete">' . __( 'Delete', 'woocommerce' ) . '</a></li>
<li><a href="' . admin_url( 'media-upload.php?post_id=' . $post->ID . '&attachment_id=' . $thumbnail_id . '&tab=library&width=640&height=553&TB_iframe=1' ) . '" class="view thickbox" onclick="return false;">' . __( 'View', 'woocommerce' ) . '</a></li>
</ul>
</li>';
$attachments =& get_children( 'post_parent=' . $post->ID . '&numberposts=-1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image' );
foreach ( $attachments as $attachment_id => $attachment ) {
if ( $thumbnail_id == $attachment_id )
continue;
$exclude_class = get_post_meta( $attachment_id, '_woocommerce_exclude_image', true ) == 1 ? 'excluded' : '';
echo '<li class="image" data-post_id="' . $attachment_id . '"><a href="' . admin_url( 'media-upload.php?post_id=' . $post->ID . '&attachment_id=' . $attachment_id . '&tab=library&width=640&height=553&TB_iframe=1' ) . '" class="thickbox" onclick="return false;">' . wp_get_attachment_image( $attachment_id, 'full' ) . '<span class="loading"></span></a></li>';
echo '<li class="image ' . $exclude_class . '" data-post_id="' . $attachment_id . '">
' . wp_get_attachment_image( $attachment_id, 'full' ) . '
<span class="loading"></span>
<ul class="actions">
<li><a href="#" class="delete">' . __( 'Delete', 'woocommerce' ) . '</a></li>
<li><a href="' . admin_url( 'media-upload.php?post_id=' . $post->ID . '&attachment_id=' . $attachment_id . '&tab=library&width=640&height=553&TB_iframe=1' ) . '" class="view thickbox" onclick="return false;">' . __( 'View', 'woocommerce' ) . '</a></li>
</ul>
</li>';
}
?>
<!-- Uploader section -->
<li id="plupload-upload-ui" class="hide-if-no-js add">
<div id="drag-drop-area">
<p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
<p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
<p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
</div>
</li>
</ul>
</div>
<!-- Uploader section -->
<div id="plupload-upload-ui" class="hide-if-no-js">
<div id="drag-drop-area">
<p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
<p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
<p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
</div>
</div>
<?php
// Drag and drop code adapted from Drag & Drop Featured Image by Jonathan Lundström
$plupload_init = array(
@ -73,51 +91,90 @@ function woocommerce_product_images_box() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// Attribute ordering
$('#product_images_container ul').sortable({
items: 'li.image',
cursor: 'move',
scrollSensitivity:40,
forcePlaceholderSize: true,
forceHelperSize: false,
helper: 'clone',
opacity: 0.65,
placeholder: 'wc-metabox-sortable-placeholder',
start:function(event,ui){
ui.item.css('background-color','#f6f6f6');
},
stop:function(event,ui){
ui.item.removeAttr('style');
},
update: function(event, ui) {
$('#product_images_container ul li').css('cursor','default');
$('#product_images_container ul').sortable('disable');
function product_images_container_init() {
// Attribute ordering
$('#product_images_container ul.product_images').sortable({
items: 'li.image',
cursor: 'move',
scrollSensitivity:40,
forcePlaceholderSize: true,
forceHelperSize: false,
helper: 'clone',
opacity: 0.65,
placeholder: 'wc-metabox-sortable-placeholder',
start:function(event,ui){
ui.item.css('background-color','#f6f6f6');
},
stop:function(event,ui){
ui.item.removeAttr('style');
},
update: function(event, ui) {
$('#product_images_container ul li.image').css('cursor','default');
$('#product_images_container ul.product_images').sortable('disable');
var post_id = <?php echo $post->ID; ?>;
var attachment_id = ui.item.attr( 'data-post_id' );
var prev_attachment_id = ui.item.prev().attr( 'data-post_id' );
var next_attachment_id = ui.item.next().attr( 'data-post_id' );
// show spinner
ui.item.addClass('loading');
// go do the sorting stuff via ajax
jQuery.post( ajaxurl, {
action: 'woocommerce_product_image_ordering',
post_id: post_id,
attachment_id: attachment_id,
prev_attachment_id: prev_attachment_id,
next_attachment_id: next_attachment_id,
_ajax_nonce: '<?php echo wp_create_nonce( 'product-image-ordering' ); ?>'
}, function( response ) {
ui.item.removeClass('loading');
$('#product_images_container ul li.image').css('cursor','move');
$('#product_images_container ul.product_images').sortable('enable');
}
);
}
});
}
product_images_container_init();
// Delete images
$('#product_images_container').on( 'click', 'a.delete', function() {
$image = $(this).closest('li.image');
var attachment_id = $image.attr('data-post_id');
if ( attachment_id ) {
$image.addClass('loading');
var answer = confirm('<?php _e( 'Are you sure you want to remove this attachment?', 'woocommerce' ); ?>');
var post_id = <?php echo $post->ID; ?>;
var attachment_id = ui.item.attr( 'data-post_id' );
var prev_attachment_id = ui.item.prev().attr( 'data-post_id' );
var next_attachment_id = ui.item.next().attr( 'data-post_id' );
// show spinner
ui.item.addClass('loading');
// go do the sorting stuff via ajax
jQuery.post( ajaxurl, {
action: 'woocommerce_product_image_ordering',
post_id: post_id,
attachment_id: attachment_id,
prev_attachment_id: prev_attachment_id,
next_attachment_id: next_attachment_id,
_ajax_nonce: '<?php echo wp_create_nonce( 'product-image-ordering' ); ?>'
}, function( response ) {
ui.item.removeClass('loading');
$('#product_images_container ul li').css('cursor','move');
$('#product_images_container ul').sortable('enable');
}
);
if ( answer ) {
jQuery.post( ajaxurl, {
action: 'woocommerce_product_image_delete',
post_id: <?php echo $post->ID; ?>,
attachment_id: attachment_id,
_ajax_nonce: '<?php echo wp_create_nonce( 'product-image-delete' ); ?>'
}, function( response ) {
$image.remove();
}
);
} else {
$image.removeClass('loading');
}
}
});
return false;
} );
// Drag and drop uploading of images
var uploader = new plupload.Uploader(<?php echo json_encode( $plupload_init ); ?>);
@ -163,23 +220,63 @@ function woocommerce_product_images_box() {
// Handle new uploads
uploader.bind( 'FileUploaded', function( up, file, response ) {
response = $.parseJSON( response.response );
if ( response.error ) {
alert( response.error );
} else {
$('#plupload-upload-ui').before('<li class="image" data-post_id="' + response.post_id + '"><img src="' + response.src + '" /><span class="loading"></span></li>');
$('#product_images_container ul').append('<li class="image" data-post_id="' + response.post_id + '">\
<img src="' + response.src + '" />\
<span class="loading"></span>\
<ul class="actions">\
<li><a href="#" class="delete"><?php _e( 'Delete', 'woocommerce' ) ?></a></li>\
<li><a href="' + response.edit_url + '" class="view thickbox" onclick="return false;"><?php _e( 'View', 'woocommerce' ) ?></a></li>\
</ul>\
</li>');
}
$('#product_images_container').unblock();
});
// Refresh images when a thickbox (images) closes
var loading_product_images = false;
jQuery(document).bind( 'tb_unload', function() {
if ( loading_product_images )
return;
loading_product_images = true;
// Block
$('#product_images_container').block({ message: null, overlayCSS: { background: '#fff url(' + woocommerce_writepanel_params.plugin_url + '/assets/images/ajax-loader.gif) no-repeat center', opacity: 0.6 } });
// Re-load images
jQuery.post( ajaxurl, {
action: 'woocommerce_product_image_refresh',
post_id: <?php echo $post->ID; ?>,
_ajax_nonce: '<?php echo wp_create_nonce( 'product-image-refresh' ); ?>'
}, function( response ) {
if ( response ) {
$("#product_images_container").html(response);
}
// Re-init
product_images_container_init();
// Unblock
$('#product_images_container').unblock();
loading_product_images = false;
}
);
} );
});
</script>
<?php

2
assets/css/admin.css
View File

File diff suppressed because one or more lines are too long

322
assets/css/admin.less
View File

@ -1431,6 +1431,140 @@ img.help_tip {
#product_variation-parent #parent_id {
width: 100%;
}
#woocommerce-product-images {
.inside {
margin: 0;
padding: 0;
#product_images_container {
padding: 9px 0 0 9px;
ul {
overflow: hidden;
margin: 0;
padding: 0;
li.image, li.add, li.wc-metabox-sortable-placeholder {
width: 80px;
height: 80px;
overflow: hidden;
float: left;
cursor: move;
border: 1px solid #d5d5d5;
margin: 0 9px 9px 0;
background: #f7f7f7;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
position: relative;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
img {
width: 100%;
height: auto;
display: block;
}
.loading {
background: #fff url(../images/ajax-loader.gif) no-repeat center;
width: 100%;
height: 100%;
opacity: 0.5;
position: absolute;
display: none;
top:0;
left: 0;
}
}
li.excluded {
opacity: 0.2;
}
li.loading {
.loading {
display: block;
}
}
li.image:first-child {
margin: 0 0 9px 0;
width: 258px;
height: auto;
overflow: visible;
opacity: 1;
}
li.wc-metabox-sortable-placeholder {
border: 4px dashed #dddddd;
background: #f7f7f7 url(../images/image_watermark.png) no-repeat center;
}
li.wc-metabox-sortable-placeholder:first-child {
background: #f7f7f7 url(../images/star_watermark.png) no-repeat center;
width: 258px;
height: 258px;
}
ul.actions {
position: absolute;
top:0;
right: 0;
padding: 2px;
display: none;
li {
background: #eee;
border: 1px solid #ddd;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 1px;
float: right;
margin: 0 0 0 2px;
a {
width: 10px;
padding: 10px 0 0 0;
margin: 0;
height: 0;
display: block;
overflow: hidden;
}
a.view {
background: url(../images/icons/image_10.png) no-repeat top left;
}
a.delete {
background: url(../images/icons/delete_10.png) no-repeat top left;
}
}
}
li:hover ul.actions {
display: block;
}
}
}
#plupload-upload-ui {
text-align: center;
color: #999;
background: none;
cursor: default !important;
border: 0;
width: 258px;
height: auto;
margin: 0;
padding: 0 0 9px 9px;
#drag-drop-area {
padding: 20px 0;
height: auto;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
line-height: 1.4em;
p {
color: #AAA;
font-size: 14px;
margin: 5px 0;
}
p.drag-drop-info {
font-size: 20px;
}
}
}
}
}
#woocommerce-product-data {
h3.hndle {
padding: 4px 10px;
@ -2278,190 +2412,4 @@ table.bar_chart {
}
}
@import 'chosen.less';
#woocommerce-product-images {
.inside {
margin: 0;
padding: 0;
#product_images_container {
padding: 9px 0 9px 9px;
ul {
overflow: hidden;
margin: 0;
padding: 0;
li {
width: 80px;
height: 80px;
overflow: hidden;
float: left;
cursor: move;
border: 1px solid #d5d5d5;
margin: 0 9px 9px 0;
background: #f7f7f7;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
position: relative;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
img {
width: 100%;
height: auto;
display: block;
}
.loading {
background: #fff url(../images/ajax-loader.gif) no-repeat center;
width: 100%;
height: 100%;
opacity: 0.5;
position: absolute;
display: none;
top:0;
left: 0;
}
}
li.wc-metabox-sortable-placeholder {
border: 4px dashed #dddddd;
background: #f7f7f7 url(../images/image_watermark.png) no-repeat center;
}
li.wc-metabox-sortable-placeholder:first-child {
background: #f7f7f7 url(../images/star_watermark.png) no-repeat center;
}
li.ui-sortable-helper {
width: 80px !important;
height: 80px !important;
}
li.add {
text-align: center;
color: #999;
background: none;
cursor: default !important;
border: 0;
width: 258px;
height: auto;
margin: 0;
#drag-drop-area {
padding: 20px 0;
height: auto;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
line-height: 1.4em;
p {
color: #AAA;
font-size: 14px;
margin: 5px 0;
}
p.drag-drop-info {
font-size: 20px;
}
}
}
li.loading {
.loading {
display: block;
}
}
}
li:first-child {
margin: 0 0 9px 0;
width: 258px;
height: 258px;
}
}
}
}
div#current-uploaded-image {
width: 100%;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
div#current-uploaded-image.closed {
display: none;
}
div#current-uploaded-image p.hide-if-no-js {
width: 100%;
margin: -8px 0px 0px 0px;
position: absolute;
top: 50%; left: 0;
text-align: center;
display: none;
}
div#current-uploaded-image:hover p.hide-if-no-js { display: block; }
div#current-uploaded-image p.hide-if-no-js a {
border: none;
box-shadow: none;
}
div#current-uploaded-image img {
width: 100%;
height: auto !important;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
div#uploaderSection div.loading {
width: 32px;
height: 32px;
position: absolute;
top: 50%; left: 50%;
margin: -16px 0px 0px -16px;
display: none;
}
div#drag-drop-area {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
div.objectRow {
overflow: hidden;
padding-top: 5px;
}
div.toggleObject {
float: left;
width: auto;
height: auto;
margin: 0px 20px 0px 0px;
font-size: 12px;
font-weight: bold;
text-align: center;
}
div.toggleObject p { margin-top: -14px; }
input.filesizeLimit {
width: 260px;
padding: 6px 6px;
margin-top: 10px;
}
div.blobContainer { overflow: hidden; }
div.blobContainer img {
float: left;
margin-left: -2px;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;
}
@import 'chosen.less';

BIN
assets/images/icons/delete_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 B

BIN
assets/images/icons/image_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 B

2
assets/js/frontend/add-to-cart-variation.js
View File

@ -15,7 +15,7 @@ jQuery(document).ready(function($) {
// Upon changing an option
.on( 'change', '.variations select', function( event ) {
$variation_form = $(this).closest('form.variations_form');
$variation_form.find('input[name=variation_id]').val('').change();

110
woocommerce-ajax.php
View File

@ -1272,7 +1272,7 @@ function woocommerce_product_ordering() {
WHERE posts.post_type = 'product'
AND posts.post_status IN ( 'publish', 'pending', 'draft', 'future', 'private' )
AND posts.ID NOT IN ( {$post->ID} )
ORDER BY posts.menu_order ASC, posts.post_title ASC
ORDER BY posts.menu_order ASC, posts.ID DESC
");
$menu_order = 0;
@ -1344,8 +1344,12 @@ function woocommerce_product_images_box_upload() {
check_ajax_referer( 'product-images-box-upload' );
// Get posted data
$file = $_FILES['async-upload'];
$post_id = absint( $_POST['post_id'] );
$file = $_FILES['async-upload'];
$post_id = absint( $_POST['post_id'] );
// Get size
$attachments =& get_children( 'post_parent=' . $post_id . '&numberposts=-1&post_type=attachment&post_mime_type=image' );
$gallery_size = absint( sizeof( $attachments ) );
// Upload
$upload = wp_handle_upload( $file, array( 'test_form' => false ) );
@ -1359,7 +1363,8 @@ function woocommerce_product_images_box_upload() {
'post_mime_type' => $upload['type'],
'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $upload['file'] ) ),
'post_content' => '',
'post_status' => 'inherit'
'post_status' => 'inherit',
'menu_order' => ( $gallery_size + 1 )
), $upload['file'], $post_id );
$attachment_data = wp_generate_attachment_metadata( $attachment_id, $upload['file'] );
@ -1370,7 +1375,8 @@ function woocommerce_product_images_box_upload() {
$result = array(
'src' => $image[0],
'post_id' => $post_id
'post_id' => $attachment_id,
'edit_url' => admin_url( 'media-upload.php?post_id=' . $post_id . '&attachment_id=' . $attachment_id . '&tab=library&width=640&height=553&TB_iframe=1' )
);
} else {
@ -1407,7 +1413,7 @@ function woocommerce_product_image_ordering() {
$siblings = get_children( 'post_parent=' . $post_id . '&numberposts=-1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image' );
$new_positions = array(); // store new positions for ajax
$menu_order = 0;
$menu_order = 1;
foreach( $siblings as $sibling_id => $sibling ) {
@ -1457,10 +1463,98 @@ function woocommerce_product_image_ordering() {
// Set featured image
$new_positions = array_flip( $new_positions );
if ( isset( $new_positions[0] ) )
update_post_meta( $post_id, '_thumbnail_id', $new_positions[0] );
if ( isset( $new_positions[1] ) )
update_post_meta( $post_id, '_thumbnail_id', $new_positions[1] );
die();
}
add_action( 'wp_ajax_woocommerce_product_image_ordering', 'woocommerce_product_image_ordering' );
/**
* woocommerce_product_image_delete function.
*
* @access public
* @return void
*/
function woocommerce_product_image_delete() {
check_ajax_referer( 'product-image-delete' );
$post_id = isset( $_POST['post_id'] ) ? absint( $_POST['post_id'] ) : false;
$attachment_id = isset( $_POST['attachment_id'] ) ? absint( $_POST['attachment_id'] ) : false;
if ( ! $post_id || ! $attachment_id )
die( -1 );
wp_delete_attachment( $attachment_id );
$thumbnail_id = get_post_thumbnail_id( $post_id );
if ( $thumbnail_id == $attachment_id ) {
$attachments = get_children( 'post_parent=' . $post_id . '&numberposts=1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image' );
foreach ( $attachments as $attachment_id => $attachment ) {
update_post_meta( $post_id, '_thumbnail_id', $attachment_id );
}
}
die();
}
add_action( 'wp_ajax_woocommerce_product_image_delete', 'woocommerce_product_image_delete' );
/**
* woocommerce_product_image_refresh function.
*
* @access public
* @return void
*/
function woocommerce_product_image_refresh() {
check_ajax_referer( 'product-image-refresh' );
$post_id = isset( $_POST['post_id'] ) ? absint( $_POST['post_id'] ) : false;
if ( ! $post_id )
die();
?>
<ul class="product_images">
<?php
$thumbnail_id = get_post_thumbnail_id( $post_id );
if ( $thumbnail_id )
echo '<li class="image" data-post_id="' . $thumbnail_id . '">
' . wp_get_attachment_image( $thumbnail_id, 'full' ) . '
<span class="loading"></span>
<ul class="actions">
<li><a href="#" class="delete">' . __( 'Delete', 'woocommerce' ) . '</a></li>
<li><a href="' . admin_url( 'media-upload.php?post_id=' . $post_id . '&attachment_id=' . $thumbnail_id . '&tab=library&width=640&height=553&TB_iframe=1' ) . '" class="view thickbox" onclick="return false;">' . __( 'View', 'woocommerce' ) . '</a></li>
</ul>
</li>';
$attachments =& get_children( 'post_parent=' . $post_id . '&numberposts=-1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image' );
foreach ( $attachments as $attachment_id => $attachment ) {
if ( $thumbnail_id == $attachment_id )
continue;
$exclude_class = get_post_meta( $attachment_id, '_woocommerce_exclude_image', true ) == 1 ? 'excluded' : '';
echo '<li class="image ' . $exclude_class . '" data-post_id="' . $attachment_id . '">
' . wp_get_attachment_image( $attachment_id, 'full' ) . '
<span class="loading"></span>
<ul class="actions">
<li><a href="#" class="delete">' . __( 'Delete', 'woocommerce' ) . '</a></li>
<li><a href="' . admin_url( 'media-upload.php?post_id=' . $post_id . '&attachment_id=' . $attachment_id . '&tab=library&width=640&height=553&TB_iframe=1' ) . '" class="view thickbox" onclick="return false;">' . __( 'View', 'woocommerce' ) . '</a></li>
</ul>
</li>';
}
?>
</ul>
<?php
die();
}
add_action( 'wp_ajax_woocommerce_product_image_refresh', 'woocommerce_product_image_refresh' );