From da07752d7731de16e125bcb1efeca8c7cc8459b0 Mon Sep 17 00:00:00 2001 From: pdontthink Date: Sat, 5 May 2007 18:35:46 +0000 Subject: [PATCH] Add dynamic textarea sizing slider control to compose screen (default_advanced skin). Initially based on Drupal implementation. git-svn-id: https://svn.code.sf.net/p/squirrelmail/code/trunk/squirrelmail@12365 7612ce4b-ef26-0410-bec9-ea0150e637f0 --- ChangeLog | 2 + templates/default_advanced/compose_body.tpl | 51 +++++ templates/default_advanced/js/resizing.js | 195 ++++++++++++++++++++ 3 files changed, 248 insertions(+) create mode 100644 templates/default_advanced/compose_body.tpl create mode 100644 templates/default_advanced/js/resizing.js diff --git a/ChangeLog b/ChangeLog index e3ab1207..cc243d03 100644 --- a/ChangeLog +++ b/ChangeLog @@ -191,6 +191,8 @@ Version 1.5.2 - SVN - session_id reporting session id when no active session (#1685031). - Added sq_change_text_domain() for plugins to use when switching text domains. If plugins use this function, it fixes #1434043. + - Add dynamic textarea sizing slider control to compose screen (default_advanced + skin) Version 1.5.1 (branched on 2006-02-12) -------------------------------------- diff --git a/templates/default_advanced/compose_body.tpl b/templates/default_advanced/compose_body.tpl new file mode 100644 index 00000000..372dd0b3 --- /dev/null +++ b/templates/default_advanced/compose_body.tpl @@ -0,0 +1,51 @@ + +
+ + + + + + + + + +
+ + +'; + +?> + +
+ " /> +
+
diff --git a/templates/default_advanced/js/resizing.js b/templates/default_advanced/js/resizing.js new file mode 100644 index 00000000..33f7a357 --- /dev/null +++ b/templates/default_advanced/js/resizing.js @@ -0,0 +1,195 @@ +/** + * Library functions for resizing widgets + * + */ + + + +// event handler temporary storage variables for IE 4 +// +var old_mousemove_handler; +var old_mouseup_handler; + + + +// define variables used in vertical resize handlers +// +var element_being_vert_resized; +var element_being_vert_resized_orig_opacity; +var min_vert_resize_height; +var max_vert_resize_height; +var original_vert_click_pos; +var original_vert_height; + + + +/** + * Begin a (vertical only) resize of some element + * + * Note that this event handler is only intended + * to be called for an event (usually mousedown) + * that is registered as a tag attribute (not with + * addEventListener() and ilk). + * + * @param evt The JavaScript event object + * @param resize_element The element being resized + * @param min_height The minimum allowable resize height + * @param max_height The maximum allowable resize height + * @param handle_element The handle element that was clicked + * upon to initiate the resize + * + */ +function startVertResizeDrag(evt, resize_element, min_height, + max_height, handle_element) +{ + + // assign variables used in other handlers + // + element_being_vert_resized = resize_element; + min_vert_resize_height = min_height; + max_vert_resize_height = max_height; + + + // dim element to emphasize effect + // + element_being_vert_resized_orig_opacity = element_being_vert_resized.style.opacity; + element_being_vert_resized.style.opacity = 0.25; + + + // detemine original vertical click coordinates + // + original_vert_click_pos = evt.clientY; + original_vert_height = element_being_vert_resized.offsetHeight; + + + // add drag and finish drag listeners + // + if (document.addEventListener) // DOM Level 2 Event Model + { + document.addEventListener('mousemove', continueVertResizeDrag, true); + document.addEventListener('mouseup', finishVertResizeDrag, true); + } + else if (document.attachEvent) // IE 5+ Event Model + { + document.attachEvent("onmousemove", continueVertResizeDrag); + document.attachEvent("onmouseup", finishVertResizeDrag); + } + else // IE 4 Event Model + { + old_mousemove_handler = document.onmousemove; + old_mouseup_handler = document.onmouseup; + document.onmousemove = continueVertResizeDrag; + document.onmouseup = finishVertResizeDrag; + } + + + // indicate that the event has been handled + // + if (evt.stopPropagation) evt.stopPropagation(); // DOM Level 2 + else evt.cancelBubble = true; // IE + + + // don't let any default action happen + // + if (evt.preventDefault) evt.preventDefault(); // DOM Level 2 + else evt.returnValue = false; // IE + + + // to top it all off, return false too + // + return false; + +} + + + +/** + * Continue a (vertical only) resize of some element + * + * @param evt The JavaScript event object + * + */ +function continueVertResizeDrag(evt) +{ + + // IE blows + // + if (!evt) evt = window.event; + if (!evt) return true; + + + // adjust height of resize item according to current mouse position + // + delta_resize = original_vert_click_pos - evt.clientY; + new_height = original_vert_height - delta_resize; + if (new_height >= min_vert_resize_height && new_height <= max_vert_resize_height) + element_being_vert_resized.style.height = new_height + 'px'; + + + // indicate that the event has been handled + // + if (evt.stopPropagation) evt.stopPropagation(); // DOM Level 2 + else evt.cancelBubble = true; // IE + + + // to top it all off, return false too + // + return false; + +} + + + +/** + * Finish a (vertical only) resize of some element + * + * @param evt The JavaScript event object + * + */ +function finishVertResizeDrag(evt) +{ + + // IE blows + // + if (!evt) evt = window.event; + if (!evt) return true; + + + // restore element's original opacity + // + element_being_vert_resized.style.opacity = element_being_vert_resized_orig_opacity; + + + // unregister all event listeners + // + if (document.removeEventListener) // DOM Event Model + { + document.removeEventListener("mousemove", continueVertResizeDrag, true); + document.removeEventListener("mouseup", finishVertResizeDrag, true); + } + else if (document.detachEvent) // IE 5+ Event Model + { + document.detachEvent("onmousemove", continueVertResizeDrag); + document.detachEvent("onmouseup", finishVertResizeDrag); + } + else // IE 4 Event Model + { + document.onmousemove = old_mousemove_handler; + document.onmouseup = old_mouseup_handler; + } + + + // indicate that the event has been handled + // + if (evt.stopPropagation) evt.stopPropagation(); // DOM Level 2 + else evt.cancelBubble = true; // IE + + + // to top it all off, return false too + // + return false; + +} + + + -- 2.25.1