diff -uprB img_assist-6.x-3.x-dev-2010-jul-11//img_assist.admin.inc img_assist//img_assist.admin.inc --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist.admin.inc 2009-08-13 14:32:44.000000000 -0500 +++ img_assist//img_assist.admin.inc 2010-07-13 15:55:33.000000000 -0500 @@ -117,13 +117,11 @@ function img_assist_admin_settings() { $max_size = explode('x', variable_get('img_assist_max_size', '640x640')); $oversize_count = 0; foreach (image_get_sizes() as $key => $size) { - $dimensions = $size['width'] .'x'. $size['height']; - if ((!empty($size['width']) && $size['width'] <= $max_size[0]) || (!empty($size['height']) && $size['height'] <= $max_size[1])) { - $derivatives[$dimensions] = $size['label']; - } - elseif ($key == IMAGE_THUMBNAIL) { - // Thumbnail option is shown even if it is larger than maximum size. - $derivatives[$dimensions] = $size['label']; + if ((!empty($size['width']) && $size['width'] <= $max_size[0]) + || (!empty($size['height']) && $size['height'] <= $max_size[1]) + // Thumbnail option is shown even if it is larger than maximum size. + || $key == IMAGE_THUMBNAIL) { + $derivatives[$key] = $size['label']; } else { $oversize_count++; @@ -143,7 +141,7 @@ function img_assist_admin_settings() { $form['image']['img_assist_default_label'] = array( '#type' => 'select', '#title' => t('Default size for inline images'), - '#default_value' => variable_get('img_assist_default_label', '100x100'), + '#default_value' => variable_get('img_assist_default_label', IMAGE_PREVIEW), '#options' => $derivatives, '#description' => t('Select a derivative to be used by default for inline images.') . $oversize_alert, ); diff -uprB img_assist-6.x-3.x-dev-2010-jul-11//img_assist.module img_assist//img_assist.module --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist.module 2009-08-13 14:32:44.000000000 -0500 +++ img_assist//img_assist.module 2010-07-13 17:11:29.000000000 -0500 @@ -636,9 +636,15 @@ function img_assist_properties_form($for // administrators and those with the proper permissions, images don't have to // snap to the nearest standard size. You can create any arbitrary size you // choose. + /* Update: Now it will include the size in pixels and the derivative name, + * so that it is possible to show the image in WYSIWYG mode and also remember + * the derivative name. The derivative's original size is also stored so its + * possible to know if the size was changed and a different derivative or a custom + * size (if allowed) should be used */ $max_size = explode('x', variable_get('img_assist_max_size', '640x640')); - foreach (image_get_sizes(NULL, $image_info['aspect_ratio']) as $key => $size) { + $image_sizes= img_assist_get_sizes($image_info['aspect_ratio']); + foreach ($image_sizes as $key => $size) { // Sizes are strings, may contain '' for 0; convert to integers. settype($size['width'], 'int'); settype($size['height'], 'int'); @@ -646,12 +652,12 @@ function img_assist_properties_form($for $added_to_derivatives = FALSE; if ($key == IMAGE_ORIGINAL) { if (user_access('use original size') && $image_info['width'] <= $max_size[0] && $image_info['height'] <= $max_size[1]) { - $derivatives[$image_info['width'] .'x'. $image_info['height']] = $size['label']; + $derivatives[$image_info['width'] .'x'. $image_info['height'].'|'.IMAGE_ORIGINAL] = $size['label']; $added_to_derivatives = TRUE; } } elseif ($size['width'] <= $max_size[0] && $size['height'] <= $max_size[1]) { - $derivatives[$size['width'] .'x'. $size['height']] = $size['label']; + $derivatives[$size['width'] .'x'. $size['height'].'|'.$key] = $size['label']; $added_to_derivatives = TRUE; } @@ -659,7 +665,7 @@ function img_assist_properties_form($for // The thumbnail option will be shown even if it is larger than the // maximum size. if ($key == IMAGE_THUMBNAIL) { - $derivatives[$size['width'] .'x'. $size['height']] = $size['label']; + $derivatives[$size['width'] .'x'. $size['height'].'|'.IMAGE_THUMBNAIL] = $size['label']; } } } @@ -734,9 +740,11 @@ function img_assist_properties_form($for $form[] = array('#value' => ''); $form[] = array('#value' => '
'); $form[] = array('#value' => ''); + $def_size= variable_get('img_assist_default_label', IMAGE_PREVIEW); + $default_size_label= $image_sizes[$def_size]['width'].'x'.$image_sizes[$def_size]['height'].'|'.$def_size; $form['size_label'] = array( '#type' => 'select', - '#default_value' => variable_get('img_assist_default_label', '100x100'), + '#default_value' => $default_size_label, '#options' => $derivatives, '#attributes' => array('onchange' => 'parent.onChangeSizeLabel()'), ); @@ -784,7 +792,7 @@ function img_assist_properties_form($for '#type' => 'textfield', '#default_value' => variable_get('img_assist_default_link_url', 'http://'), '#size' => 25, - '#maxlength' => 255, + '#maxlength' => 255, '#description' => NULL, ); $form['link_options_visible'] = array( @@ -996,12 +1004,10 @@ function img_assist_display(&$node, $siz // Also, when one predefined size has changed, the derivative sizes need to // be updated. if (!is_array($size)) { - foreach (image_get_sizes() as $std_size) { - if (isset($std_size['key']) && $std_size['key'] == $label) { - $size = $std_size; - break; - } - } + $info = image_get_info(file_create_path($node->images[IMAGE_ORIGINAL])); + $sizes= img_assist_get_sizes($info['height']/$info['width']); + $size= $sizes[$label]; + $size['key']= $label; } if (is_array($size)) { $info = image_get_info(file_create_path($node->images[$label])); @@ -1044,7 +1050,7 @@ function _img_assist_build_derivatives(& if (is_array($size)) { $size = $size['key']; } - $sizes = image_get_sizes(); + $sizes = img_assist_get_sizes(); $sizes = array($size => $sizes[$size]); } // No size given: rebuild derivatives for all standard sizes. @@ -1100,145 +1106,106 @@ function img_assist_render_image($attrib if ($attributes['nid']) { $node = node_load($attributes['nid']); - - // Get image size. - $width = (int) $attributes['width']; - $height = (int) $attributes['height']; - $default_sizes = image_get_sizes(); - if ($width || $height) { - // Check to ensure that the dimensions don't exceed the max set in the + + /* Since now we're getting the selected preset this are the rules: + * + * - If "other" was selected at image insertion then the user who + * created this node has the proper permitions to generate custom size + * versions of the image. So there should be no problem in generating the + * image if it does not exists. + * + * - If a preset was selected at insert time and the current dimensions + * differ from the preset dimensions then the size was changed in the editor + * after insertion and a near sized preset must be selected. + */ + + // Get width and height of the original image. + $original_size = image_get_info(file_create_path($node->images[IMAGE_ORIGINAL])); + $default_sizes = img_assist_get_sizes($original_size['height']/$original_size['width']); + + // Find the selected preset + if ($attributes['preset']) { + $preset= $attributes['preset']; + $presetw= $attributes['presetw']; + $preseth= $attributes['preseth']; + } + elseif ($attributes['size_label']) { + if ($attributes['size_label'] == 'other') { + $preset= 'other'; + $presetw= ''; + $preseth= ''; + } + else { + // size label format: 'width'x'height'|'preset' + $xpos= strpos($attributes['size_label'], 'x'); + $barpos= strpos($attributes['size_label'], '|'); + if ($xpos !== FALSE && $barpos !== FALSE) { + $preset= substr($attributes['size_label'], $barpos + 1); + $presetw= substr($attributes['size_label'], 0, $xpos); + $preseth= substr($attributes['size_label'], $xpos + 1, $barpos - $xpos - 1); + } + } + } + // Fall back to default preset + if (!$preset) { + $preset= variable_get('img_assist_default_label', IMAGE_PREVIEW); + $presetw= $default_sizes[$preset]['width']; + $preseth= $default_sizes[$preset]['height']; + } + + // Get image size. + $width = (int) $attributes['width']; + $height = (int) $attributes['height']; + // Check to ensure that the dimensions don't exceed the max set in the // img_assist settings. $max_size = explode('x', variable_get('img_assist_max_size', '640x640')); $width = ($width <= $max_size[0]) ? $width : $max_size[0]; $height = ($height <= $max_size[1]) ? $height : $max_size[1]; - - // Get width and height of original size. - $original_size = image_get_info(file_create_path($node->images[IMAGE_ORIGINAL])); - if ($width == $original_size['width'] && $height == $original_size['height']) { - // Nothing to process, this is the original image size. - $closest_std_size = IMAGE_ORIGINAL; - $create_custom = FALSE; - } - else { - // Get width and height of preview size. - $preview_size = image_get_info(file_create_path($node->images[IMAGE_PREVIEW])); - $preview_width = $preview_size['width']; - $preview_height = $preview_size['height']; - - if ($preview_width && $preview_height) { - // Get aspect ratio from preview image dimensions. - $aspect_ratio = round($preview_width / $preview_height, 6); - - // Get new width and height for this inline image. - // If height is either left out or larger than width then - // Width is controlling factor. - if (!$height || ($width && round($width / $aspect_ratio) <= $height)) { - $height = round($width / $aspect_ratio); - } - // Else, width is either left out or larger than height so - // Height is controlling factor. - else { - $width = round($height * $aspect_ratio); - } - - // Find out whether the given width/height is the same as (or extremely - // close to) a default image derivative size; if so, we will use the - // default size instead of generating a custom image. - $diag_size_new = sqrt(pow($width, 2) + pow($height, 2)); - $closest_difference = 9999; - - foreach ($default_sizes as $key => $stdsize) { - $width_std = $stdsize['width']; - $height_std = $stdsize['height']; - // Diagonal size calculations require a width or height. - if (!$height_std && !$width_std) { - // For the original image, we can fall back to actual dimensions - // though. In fact, IMAGE_ORIGINAL can either have maximum - // dimensions (so aspect ratio based calculations below will apply) - // or the real dimensions (which must be considered as valid - // "derivative size"). - // Note that this annuls the 'use original size' user permission. - if ($key !== IMAGE_ORIGINAL) { - continue; - } - else { - $width_std = $original_size['width']; - $height_std = $original_size['height']; - } - } - // Calculate default width and height based on aspect ratio. - // Width is controlling factor. - if (!$height_std && ($width_std && round($width_std / $aspect_ratio) <= $height_std)) { - $height_std = round($width_std / $aspect_ratio); - } - // Height is controlling factor. - else { - $width_std = round($height_std * $aspect_ratio); - } - // Calculate diagonal size of this default size. - $diag_size_std = sqrt(pow($width_std, 2) + pow($height_std, 2)); - $difference = abs($diag_size_new - $diag_size_std); - if ($difference < $closest_difference) { - $closest_std_size = $key; - $closest_difference = $difference; - } - } - // If, for any reason, no default image derivative size has a width or - // height, fall back to IMAGE_THUMBNAIL. - if (!isset($closest_std_size)) { - $closest_std_size = IMAGE_THUMBNAIL; - } - - if ($closest_difference < 3) { - $create_custom = FALSE; - } - else { - $img_assist_create_derivatives = variable_get('img_assist_create_derivatives', array()); - // If all users are allowed to create custom sized images. - if ($img_assist_create_derivatives['custom_all']) { - $create_custom = TRUE; - } - elseif ($img_assist_create_derivatives['custom_advanced']) { - // Note: The following line is NOT the right way to do this. - // The user acount passed to user_access() should be the user who - // CREATED this node, not the CURRENT user. I'm not sure how to - // get the user who created the node, because this function - // doesn't have access to the node object. I could probably figure - // out some hack, but I think I'm going to completely rethink the - // 'img_assist_create_derivatives' option. When I started it this - // method made sense, but the more I've worked on this, the more - // confusing it gets. - if (user_access('access advanced options', $user)) { - $create_custom = TRUE; - } - else { - $create_custom = TRUE; - } - } - else { - $create_custom = FALSE; - } - } - } - } - - if ($create_custom) { + + + // If we aren't using a custom size + if ($preset != 'other') { + // check for size not changed + if ($width == (int)$presetw && $height == (int)$preseth) { + $size= $default_sizes[$preset]; + $size['key']= $preset; + } + else + $find_nearest= TRUE; + } + // Create or use custom size + else { $size['label'] = t('Custom'); // Add width and height to make it possible to have multiple custom // sizes of the same image. $size['key'] = 'img_assist_custom-' . $width . 'x' . $height; $size['width'] = $width; $size['height'] = $height; - } - else { - $size['key'] = $closest_std_size; - } - } - // Default to thumbnail if width and height is missing. - else { - $size = $default_sizes[IMAGE_THUMBNAIL]; - $size['key'] = IMAGE_THUMBNAIL; - } + } + + // No size defined yet? then find nearest match in presets + if (!$size) { + $keys= array_keys($default_sizes); + $idx= 0; + while ($default_sizes[$keys[$idx]]['width'] > $max_size[0] + || $default_sizes[$keys[$idx]]['operation'] != 'scale') + ++$idx; + $size= $default_sizes[$keys[$idx]]; + $size['key']= $keys[$idx]; + $min_error= abs($width - $default_sizes[$keys[$idx]]['width']); + for ($i = $idx+1; $i < count($keys); ++$i) { + if ($default_sizes[$keys[$i]]['width'] <= $max_size[0] + && $default_sizes[$keys[$idx]]['operation'] == 'scale') { + $error= abs($width - $default_sizes[$keys[$i]]['width']); + if ($error < $min_error) { + $size= $default_sizes[$keys[$i]]; + $size['key']= $keys[$i]; + $min_error= $error; + } + } + } + } + return theme('img_assist_inline', $node, $size, $attributes); } // Legacy img_assist filter tag. @@ -1638,6 +1605,55 @@ function img_assist_views_api() { } /** + * Helper function to return the defined sizes (or proper defaults). + * + * @param $aspect_ratio + * Float value with the ratio of image height / width. Used to calculate the + * dimensions of the generated images. + * @return + * An associative array with width, height, label, operation and link type fields. + */ +function img_assist_get_sizes($aspect_ratio = NULL) { + $defaults = array( + IMAGE_ORIGINAL => array('width' => '', 'height' => '', 'label' => t('Original'), 'operation' => 'scale', 'link' => IMAGE_LINK_SHOWN), + IMAGE_THUMBNAIL => array('width' => 100, 'height' => 100, 'label' => t('Thumbnail'), 'operation' => 'scale', 'link' => IMAGE_LINK_SHOWN), + IMAGE_PREVIEW => array('width' => 640, 'height' => 640, 'label' => t('Preview'), 'operation' => 'scale', 'link' => IMAGE_LINK_SHOWN), + ); + + $sizes = array(); + foreach (variable_get('image_sizes', $defaults) as $key => $val) { + // Only return sizes with a label. + if (!empty($val['label'])) { + /* If operation is scale and both sizes are set compute the produced + * image size */ + if ($aspect_ratio && !empty($val['width']) && !empty($val['height']) && $val['operation'] == 'scale') { + $width= $val['width']; + $height= (int)round($width * $aspect_ratio); + if ($height > $val['height']) { + $height= $val['height']; + $width= (int)round($height / $aspect_ratio); + } + $val['width']= $width; + $val['height']= $height; + } + // For a size with only one dimension specified, compute the other + // dimension based on an aspect ratio. + if ($aspect_ratio && (empty($val['width']) || empty($val['height']))) { + if (empty($val['height']) && !empty($val['width'])) { + $val['height'] = (int)round($val['width'] * $aspect_ratio); + } + elseif (empty($val['width']) && !empty($val['height'])) { + $val['width'] = (int)round($val['height'] / $aspect_ratio); + } + } + $sizes[$key] = $val; + } + } + + return $sizes; +} + +/** * @defgroup img_assist_legacy Image Assist Legacy functions * @{ * Used for backwards compatibility with original img_assist module. diff -uprB img_assist-6.x-3.x-dev-2010-jul-11//img_assist_popup.js img_assist//img_assist_popup.js --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist_popup.js 2009-02-01 04:21:08.000000000 -0500 +++ img_assist//img_assist_popup.js 2010-07-13 17:13:07.000000000 -0500 @@ -57,24 +57,12 @@ function onChangeSizeLabel() { } else { hideElement('size-other'); - // get the new width and height - var size = formObj['edit-size-label'].value.split('x'); - // this array is probably a bounding box size, not an actual image - // size, so now we use the known aspect ratio to find the actual size - var aspect = formObj['edit-aspect'].value; - var width = size[0]; - var height = size[1]; - if (Math.round(width / aspect) <= height) { - // width is controlling factor - height = Math.round(width / aspect); - } - else { - // height is controlling factor - width = Math.round(height * aspect); - } - // fill the hidden width and height textboxes with these values - formObj['edit-width'].value = width; - formObj['edit-height'].value = height; + // Get the new width and height + // Format for value: widthxheight|preset name + var size = formObj['edit-size-label'].value.match(/^(\d+)x(\d+)/); + // Fill the hidden width and height textboxes with these values + formObj['edit-width'].value = size[1]; + formObj['edit-height'].value = size[2]; } } diff -uprB img_assist-6.x-3.x-dev-2010-jul-11//img_assist_textarea.js img_assist//img_assist_textarea.js --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist_textarea.js 2009-02-01 04:21:08.000000000 -0500 +++ img_assist//img_assist_textarea.js 2010-07-13 15:42:43.000000000 -0500 @@ -68,9 +68,21 @@ function getFilterTag(formObj) { var align = formObj['edit-align'].value; var width = formObj['edit-width'].value; var height = formObj['edit-height'].value; + var size = formObj['edit-size-label'].value; + if (size == 'other') { + preset= size; + presetw= ''; + preseth= ''; + } + else { + var preset_vals= size.match(/^(\d+)x(\d+)\|(.*)$/); + preset= preset_vals[3]; + presetw= preset_vals[1]; + preseth= preset_vals[2]; + } // Create the image placeholder tag - var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link; + var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link + '|preset=' + preset + '|presetw=' + presetw + '|preseth=' + preseth; if (url != formObj['edit-default-url'].value) { miscAttribs += '|url=' + url; } @@ -82,21 +94,21 @@ function getFilterTag(formObj) { function insertToEditor(content) { // Insert the image if (myDoc.selection) { - // IE + // IE myTextarea.focus(); cursor = myDoc.selection.createRange(); cursor.text = content; } else if (myTextarea.selectionStart || myTextarea.selectionStart == "0") { - // Gecko-based engines: Mozilla, Camino, Firefox, Netscape + // Gecko-based engines: Mozilla, Camino, Firefox, Netscape var startPos = myTextarea.selectionStart; var endPos = myTextarea.selectionEnd; var body = myTextarea.value; myTextarea.value = body.substring(0, startPos) + content + body.substring(endPos, body.length); } else { - // Worst case scenario: browsers that don't know about cursor position: - // Safari, OmniWeb, Konqueror + // Worst case scenario: browsers that don't know about cursor position: + // Safari, OmniWeb, Konqueror myTextarea.value += content; } diff -uprB img_assist-6.x-3.x-dev-2010-jul-11//img_assist_tinymce.js img_assist//img_assist_tinymce.js --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist_tinymce.js 2009-02-01 04:21:08.000000000 -0500 +++ img_assist//img_assist_tinymce.js 2010-07-13 15:42:43.000000000 -0500 @@ -16,7 +16,7 @@ // document.write('<\/script>'); // get variables that were passed to this window from the tinyMCE editor -var nid, captionTitle, captionDesc, link, url, align, width, height; +var nid, captionTitle, captionDesc, link, url, align, width, height, preset, presetw, preseth; function initLoader() { nid = tinyMCEPopup.getWindowArg('nid'); @@ -27,6 +27,9 @@ function initLoader() { align = '' + tinyMCEPopup.getWindowArg('align'); width = '' + tinyMCEPopup.getWindowArg('width'); height = '' + tinyMCEPopup.getWindowArg('height'); + preset = '' + tinyMCEPopup.getWindowArg('preset'); + presetw = '' + tinyMCEPopup.getWindowArg('presetw'); + preseth = '' + tinyMCEPopup.getWindowArg('preseth'); if (nid > 0) { frames['img_assist_main'].window.location.href = Drupal.settings.basePath + 'index.php?q=img_assist/properties/' + nid + '/update'; @@ -63,7 +66,12 @@ function initProperties() { // just set the size to "other". Of course, if custom // isn't an option then I guess the image size will default // back to thumbnail. - formObj['edit-size-label'].value = "other"; + /* If there is a preset value and the size has not changed + * then use that preset. Otherwise use "other" */ + if (preset && width == presetw && height == preseth) + formObj['edit-size-label'].value = presetw+'x'+preseth+'|'+preset; + else + formObj['edit-size-label'].value = "other"; formObj['edit-width'].value = width; formObj['edit-height'].value = height; } @@ -94,11 +102,22 @@ function getFilterTag(formObj) { width = formObj['edit-width'].value; height = formObj['edit-height'].value; var size = formObj['edit-size-label'].value; + if (size == 'other') { + preset= size; + presetw= ''; + preseth= ''; + } + else { + var preset_vals= size.match(/^(\d+)x(\d+)\|(.*)$/); + preset= preset_vals[3]; + presetw= preset_vals[1]; + preseth= preset_vals[2]; + } // Create the image placeholder tag // @see TinyMCE_drupalimage_cleanup() in drupalimage plugin. // Backwards compatibility: Also parse link/url in the format link=url,foo. - var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link; + var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link + '|preset=' + preset + '|presetw=' + presetw + '|preseth=' + preseth; if(typeof url != 'undefined' && url != formObj['edit-default-url'].value) { miscAttribs += '|url=' + url; } diff -uprB img_assist-6.x-3.x-dev-2010-jul-11//plugins/img_assist/img_assist.js img_assist//plugins/img_assist/img_assist.js --- img_assist-6.x-3.x-dev-2010-jul-11//plugins/img_assist/img_assist.js 2009-06-12 20:17:21.000000000 -0500 +++ img_assist//plugins/img_assist/img_assist.js 2010-07-13 15:42:43.000000000 -0500 @@ -15,13 +15,15 @@ Drupal.wysiwyg.plugins.img_assist = { invoke: function (data, settings, instanceId) { if (data.format == 'html') { // captionTitle and captionDesc for backwards compatibility. - var options = {nid: '', title: '', captionTitle: '', desc: '', captionDesc: '', link: '', url: '', align: '', width: '', height: '', id: instanceId, action: 'insert'}; + var options = {nid: '', title: '', captionTitle: '', desc: '', captionDesc: '', link: '', url: '', align: '', width: '', height: '', id: instanceId, action: 'insert', preset: '', presetw: '', preseth: ''}; + /* In the following the functions width() and height() can not be used + * because they refer to the css value instead of the tag attribute */ if ($(data.node).is('img.img-assist')) { - options.width = data.node.width; - options.height = data.node.height; - options.align = data.node.align; + options.width = this.getWidthAttr(data.node); + options.height = this.getHeightAttr(data.node); + options.align = $(data.node).attr('align'); // Expand inline tag in alt attribute - data.node.alt = decodeURIComponent(data.node.alt); + data.node.alt = decodeURIComponent($(data.node).attr('alt')); var chunks = data.node.alt.split('|'); for (var i in chunks) { chunks[i].replace(/([^=]+)=(.*)/g, function(o, property, value) { @@ -55,7 +57,11 @@ Drupal.wysiwyg.plugins.img_assist = { // 'class' is a predefined token in JavaScript. node['class'] = 'img-assist drupal-content'; node.src = Drupal.settings.basePath + 'index.php?q=image/view/' + node.nid; - node.alt = 'nid=' + node.nid + '|title=' + node.title + '|desc=' + node.desc; + node.alt = 'nid=' + node.nid; + var keys= ['title', 'desc', 'preset', 'presetw', 'preseth']; + for (var i= 0; i < keys.length; ++i) + if (typeof node[keys[i]] != 'undefined') + node.alt += '|'+keys[i]+'='+node[keys[i]]; if (node.link.indexOf(',') != -1) { var link = node.link.split(',', 2); node.alt += '|link=' + link[0] + '|url=' + link[1]; @@ -67,12 +73,12 @@ Drupal.wysiwyg.plugins.img_assist = { node.alt += '|url=' + node.url; } node.alt = encodeURIComponent(node.alt); - var element = '
'); + var img= $('img', element); for (var property in node) { - element += property + '="' + node[property] + '" '; + img.attr(''+property, ''+node[property]); } - element += '/>'; - return element; + return element.html(); }); return content; }, @@ -81,11 +87,51 @@ Drupal.wysiwyg.plugins.img_assist = { * Replace images with inline tags in content upon detaching editor. */ detach: function (content, settings, instanceId) { - var $content = $('
' + content + '
'); // No .outerHTML() in jQuery :( - $('img.img-assist', $content).each(function(node) { - var inlineTag = '[img_assist|' + decodeURIComponent(this.alt) + '|align=' + this.align + '|width=' + this.width + '|height=' + this.height + ']'; + var div = $('
' + content + '
'); + var plugin= this; + $('img.img-assist', div).each(function(index) { + var inlineTag = '[img_assist|' + + decodeURIComponent($(this).attr('alt')) + + '|align=' + $(this).attr('align') + + '|width=' + plugin.getWidthAttr(this) + + '|height=' + plugin.getHeightAttr(this) + + ']'; $(this).replaceWith(inlineTag); }); - return $content.html(); - } + return div.html(); + }, + + /** + * Get the right value of the width attribute. + */ + getWidthAttr: function (el) { + /* In the following the functions width() and height() can not be used + * because they refer to the css value instead of the tag attribute */ + var width= $(el).attr('width'); + /* If it fails => on IE */ + if (!width) { + var div= $('
'); + div.append($(el).clone()); + var values= div.html().match(/width="?(\d+)/i); + if (values.length > 1) + width= values[1]; + } + return width; + }, + + /** + * Get the right value of the height attribute. + */ + getHeightAttr: function (el) { + var height= $(el).attr('height'); + /* If it fails => on IE */ + if (!height) { + var div= $('
'); + div.append($(el).clone()); + var values= div.html().match(/height="?(\d+)/i); + if (values.length > 1) + height= values[1]; + } + return height; + } };