http://drupal.org/node/525716 From: andrew morton Better selection widget for image crop effect anchor settings --- modules/image/image.admin.css | 49 +++++++++++++++++++++++++++--- modules/image/image.admin.inc | 6 ++-- modules/image/image.js | 41 +++++++++++++++++++++++++ modules/image/images/cropping-arrows.png | Bin 4 files changed, 89 insertions(+), 7 deletions(-) create mode 100644 modules/image/image.js create mode 100644 modules/image/images/cropping-arrows.png diff --git modules/image/image.admin.css modules/image/image.admin.css index 2959ee0..e638ce6 100644 --- modules/image/image.admin.css +++ modules/image/image.admin.css @@ -49,13 +49,52 @@ div.image-style-preview div.preview-image div.height span { /** * Image anchor element. */ -table.image-anchor { +.image-anchor table { width: auto; } -table.image-anchor tr.even, -table.image-anchor tr.odd { +.image-anchor table tr.even, +.image-anchor table tr.odd { background: none; } -table.image-anchor td { - border: 1px solid #CCC; +.image-anchor table tr, +.image-anchor table td { + border: 1px solid #ccc; +} +.image-crop-widget table { + height: 90px; + width: 90px; +} +.image-crop-widget td { + cursor: pointer; +} +.image-crop-widget input { + display: none; + visibility: hidden; +} +.image-crop-widget td.arrow-selected { + background: #bdf; +} +.image-crop-widget td.arrow-n { + background: url(images/cropping-arrows.png) no-repeat -60px 0; +} +.image-crop-widget td.arrow-ne { + background: url(images/cropping-arrows.png) no-repeat -90px 0; +} +.image-crop-widget td.arrow-e { + background: url(images/cropping-arrows.png) no-repeat -120px 0; +} +.image-crop-widget td.arrow-se { + background: url(images/cropping-arrows.png) no-repeat -150px 0; +} +.image-crop-widget td.arrow-s { + background: url(images/cropping-arrows.png) no-repeat -180px 0; +} +.image-crop-widget td.arrow-sw { + background: url(images/cropping-arrows.png) no-repeat -210px 0; +} +.image-crop-widget td.arrow-w { + background: url(images/cropping-arrows.png) no-repeat 0 0; +} +.image-crop-widget td.arrow-nw { + background: url(images/cropping-arrows.png) no-repeat -30px 0; } diff --git modules/image/image.admin.inc modules/image/image.admin.inc index 1aba780..9656040 100644 --- modules/image/image.admin.inc +++ modules/image/image.admin.inc @@ -494,6 +494,8 @@ function image_scale_form($data) { * The current configuration for this crop effect. */ function image_crop_form($data) { + drupal_add_js(drupal_get_path('module', 'image') . '/image.js'); + $data += array( 'width' => '', 'height' => '', @@ -737,14 +739,14 @@ function theme_image_anchor($element) { foreach (element_children($element) as $n => $key) { $element[$key]['#attributes']['title'] = $element[$key]['#title']; unset($element[$key]['#title']); - $row[] = drupal_render($element[$key]); + $row[] = array('data' => drupal_render($element[$key]), 'class' => $key); if ($n % 3 == 3 - 1) { $rows[] = $row; $row = array(); } } - return theme('table', array(), $rows, array('class' => 'image-anchor')); + return '
' . theme('table', array(), $rows, array('class' => $element['#default_value'])) . '
'; } /** diff --git modules/image/image.js modules/image/image.js new file mode 100644 index 0000000..9c5d590 --- /dev/null +++ modules/image/image.js @@ -0,0 +1,41 @@ +// $Id: +(function ($) { +Drupal.behaviors.imageCropAnchor = { + attach: function (context) { + $('.image-anchor').addClass('image-crop-widget'); + + // Change class of image anchor widget table on click so that the + // appropriate background-position is used and toggle the radio button + // contained by the clicked td. + $('.image-anchor table td').click(function() { + var selected = $(this).find('input').val(); + // Build a table of which classes to apply to the table depending on + // what's been clicked. + var classes = { + 'left-top': ['selected', 'e', null, 's', 'se', null, null, null, null], + 'center-top': [ 'w', 'selected', 'e', 'sw', 's', 'se', null, null, null], + 'right-top': [null, 'w', 'selected', null, 'sw', 's', null, null, null], + 'left-center': [ 'n', 'ne', null, 'selected', 'e', null, 's', 'se', null], + 'center-center': ['nw', 'n', 'ne', 'w', 'selected', 'e', 'sw', 's', 'se'], + 'right-center': [null, 'nw', 'n', null, 'w', 'selected', null, 'sw', 's'], + 'left-bottom': [null, null, null, 'n', 'ne', null, 'selected', 'e', null], + 'center-bottom': [null, null, null, 'nw', 'n', 'ne', 'w', 'selected', 'e'], + 'right-bottom': [null, null, null, null, 'nw', 'n', null, 'w', 'selected'] + }; + // Build a helper table to determine which class is at which index. + var mapping = [ + 'left-top', 'center-top', 'right-top', + 'left-center', 'center-center', 'right-center', + 'left-bottom', 'center-bottom', 'right-bottom' + ]; + // Assign the classes. + for (var key in classes[selected]) { + $('.image-anchor td.' + mapping[key]).attr('class', classes[selected][key] ? ' arrow-' + classes[selected][key] : ''); + } + }); + + // Set arrows for the currently selected position. + $(".image-anchor td:has(input:checked)").click(); + } +}; +})(jQuery); diff --git modules/image/images/cropping-arrows.png modules/image/images/cropping-arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..4861555b809202444025a90291fdd93341ce9dec GIT binary patch literal 1786 zcmeAS@N?(olHy`uVBq!ia0vp^Z-H2bgBeKfiao&yq?n7HJVQ7*IBq}me*ol~1^9%x z0_p$%|JT>oYiMYkIdf+J{`~;~0RjR7@87?lIdi6igM*ZmR9aeELqmgtf&x&lv9a-r z6)Rr*_3s4g>2u(7WwNKDR7Em25HP0!4;RRUV5q>!0n zs}yePYv5bpoSKp8QB{;0T;&&%T$P<{nWAKG$7NGt1=O6IT9T+xk(-lOY*k^a1UAzO z$OZ}PD=C1Llw{i~If5)xi0}D!(=#$RvNSi-Q3y^fQSeI4 zQ!p}DFfuRz5=K^rhE^tqK*xZAk{uV2wkb+UvkG!?gW3t?*(zm}loVL$>z9|8>y;bp zKhp88yV>WRp=I1=9MH?=;jqGLkxkLbb-MxJ7xz(7*!*qkctVfxe-hfj-=1phg>@pcObG@{2<9^K$V<1;M+o9|AH>zbWC2W;`tWoKb2>aKX~IB+ zJ57v-7)nb^c==z<0G1vypu!&!@j#49`A|KHTTLUhUUjI_iCV9c;-_tsW&3`u zxU}m|&EmPAWcT)8t6nVimZ`f?aqWE3X64NiVV^fD=El4$ixiGnF7(!S_E+y`&O$ne zViQ9Tr(3VK;8-2Wk?ppxZo;+p_aW~$#~n1f(RA&y{hgz$+mDnan6)IF-m+*n%=jEblV_2tVK?0E3x_Qbsr{a>Sf8v})fGN$*)S|+vp%56HmHEZGLjlQ36 z=(si}9-o?#eC(45Z@T8puo+odTMo_HL35BGmy PLSgW9^>bP0l+XkKHswnL literal 0 HcmV?d00001