Add dynamic textarea sizing slider control to compose screen (default_advanced skin). Initially based on Drupal implementation.

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)
 --------------------------------------

templates/default_advanced/compose_body.tpl

@@ -0,0 +1,51 @@
+<?php
+/**
+ * compose_body.tpl
+ *
+ * Description
+ * 
+ * The following variables are available in this template:
+ *
+ * @copyright &copy; 1999-2006 The SquirrelMail Project Team
+ * @license http://opensource.org/licenses/gpl-license.php GNU Public License
+ * @version $Id: compose_body.tpl 11743 2006-09-27 21:54:14Z stevetruckstuff $
+ * @package squirrelmail
+ * @subpackage templates
+ */
+
+/** add required includes **/
+
+/** extract template variables **/
+extract($t);
+
+/** Begin template **/
+?>
+<div class="compose">
+<table cellspacing="0" class="table1">
+ <tr>
+  <td style="text-align: center">
+   <textarea name="body" id="body" rows="<?php echo $editor_height; ?>" cols="<?php echo $editor_width; ?>" <?php echo $input_onfocus; ?>><?php echo $body; ?></textarea>
+
+<?php if (checkForJavascript()) // Display text area resizing handle
+
+    // FIXME: There should be a better way (probably best to be javascript only, although trying to avoid unnecessary js) to calculate resize_handle width to match $editor_width 
+    //$_total_width_ = 700;
+    echo '<div class="resize_handle" ' /* style="width: ' . ($editor_width * 8.3) . 'px; margin-left: ' . (($_total_width_ - ($editor_width * 8.3)) / 2) . 'px;" */ . 'onmousedown="startVertResizeDrag(event, document.forms[0].body, 40, 9000, this);"></div>';
+
+?>
+
+  </td>
+ </tr>
+ <?php
+    if ($show_bottom_send) {
+        ?>
+ <tr>
+  <td class="bottomSend">
+   <input type="submit" name="send" value="<?php echo _("Send"); ?>" />
+  </td>
+ </tr>
+        <?php
+    }
+ ?>
+</table>
+</div>

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;
+
+}
+
+
+