diff options
author | Steven Wittens <steven@10.no-reply.drupal.org> | 2005-12-29 03:59:30 +0000 |
---|---|---|
committer | Steven Wittens <steven@10.no-reply.drupal.org> | 2005-12-29 03:59:30 +0000 |
commit | 5e49dd2a68aaa18db498b6b139e76c19f5c32fda (patch) | |
tree | 8c9fbd18a703f3c6bc419c68b981ce38cc8cfba9 /misc | |
parent | afd8ccaf7e64aad714702d1246569088ed2c893d (diff) | |
download | brdo-5e49dd2a68aaa18db498b6b139e76c19f5c32fda.tar.gz brdo-5e49dd2a68aaa18db498b6b139e76c19f5c32fda.tar.bz2 |
- #42446: Resizable textareas.
Diffstat (limited to 'misc')
-rw-r--r-- | misc/drupal.css | 14 | ||||
-rw-r--r-- | misc/drupal.js | 18 | ||||
-rw-r--r-- | misc/textarea.js | 105 |
3 files changed, 137 insertions, 0 deletions
diff --git a/misc/drupal.css b/misc/drupal.css index 18c37bfd1..63813ddab 100644 --- a/misc/drupal.css +++ b/misc/drupal.css @@ -618,3 +618,17 @@ html.js fieldset.collapsed legend a { * html.js fieldset.collapsible legend a { display: block; } + +/* +** Resizable text areas +*/ +.resizable-textarea { + width: 95%; +} +.resizable-textarea .grippie { + height: 14px; + background: #eee url('grippie.png') no-repeat 100% 100%; + border: 1px solid #ddd; + border-top-width: 0px; + cursor: ns-resize; +} diff --git a/misc/drupal.js b/misc/drupal.js index e64d3bc60..c19dc565a 100644 --- a/misc/drupal.js +++ b/misc/drupal.js @@ -211,6 +211,10 @@ function absolutePosition(el) { return r; }; +function dimensions(el) { + return { width: el.offsetWidth, height: el.offsetHeight }; +} + /** * Returns true if an element has a specified class name */ @@ -280,6 +284,20 @@ function removeNode(node) { } /** + * Prevents an event from propagating. + */ +function stopEvent(event) { + if (event.preventDefault) { + event.preventDefault(); + event.stopPropagation(); + } + else { + event.returnValue = false; + event.cancelBubble = true; + } +} + +/** * Wrapper around document.getElementById(). */ function $(id) { diff --git a/misc/textarea.js b/misc/textarea.js new file mode 100644 index 000000000..32efb3305 --- /dev/null +++ b/misc/textarea.js @@ -0,0 +1,105 @@ +if (isJsEnabled()) { + addLoadEvent(function() { + // Attach to all textareas + textareas = document.getElementsByTagName('textarea'); + var textarea; + for (var i = 0; textarea = textareas[i]; ++i) { + if (hasClass(textarea, 'resizable')) { + new textArea(textarea); + } + } + }); +} + +function textArea(element) { + var ta = this; + this.element = element; + this.parent = this.element.parentNode; + this.dimensions = dimensions(element); + + // Prepare wrapper + this.wrapper = document.createElement('div'); + this.wrapper.className = 'resizable-textarea'; + this.parent.insertBefore(this.wrapper, this.element); + + // Add grippie and measure it + this.grippie = document.createElement('div'); + this.grippie.className = 'grippie'; + this.wrapper.appendChild(this.grippie); + this.grippie.dimensions = dimensions(this.grippie); + this.grippie.onmousedown = function (e) { ta.beginDrag(e); }; + this.element.onmouseup = function (e) { ta.endDrag(e); }; + + // Set wrapper and textarea dimensions + this.wrapper.style.height = this.dimensions.height + this.grippie.dimensions.height + 1 +'px'; + this.element.style.marginBottom = '0px'; + this.element.style.width = '100%'; + this.element.style.height = this.dimensions.height +'px'; + + // Wrap textarea + removeNode(this.element); + this.wrapper.insertBefore(this.element, this.grippie); + + // Measure difference between desired and actual textarea dimensions to account for padding/borders + this.widthOffset = dimensions(this.wrapper).width - this.dimensions.width; + + // Make the grippie line up in various browsers + if (window.opera) { + // Opera + this.grippie.style.marginRight = this.widthOffset +'px'; + } + if (document.all && !window.opera) { + // IE + this.grippie.style.width = '100%'; + this.grippie.style.paddingLeft = '2px'; + } + // Mozilla + this.element.style.MozBoxSizing = 'border-box'; + + this.heightOffset = absolutePosition(this.grippie).y - absolutePosition(this.element).y - this.dimensions.height; +} + +textArea.prototype.beginDrag = function (event) { + event = event || window.event; + // Capture mouse + var cp = this; + this.oldMoveHandler = document.onmousemove; + document.onmousemove = function(e) { cp.handleDrag(e); }; + this.oldUpHandler = document.onmouseup; + document.onmouseup = function(e) { cp.endDrag(e); }; + + // Store drag offset from grippie top + var pos = absolutePosition(this.grippie); + this.dragOffset = event.clientY - pos.y; + + // Make transparent + this.element.style.opacity = 0.5; + + // Process + this.handleDrag(event); +} + +textArea.prototype.handleDrag = function (event) { + event = event || window.event; + // Get coordinates relative to text area + var pos = absolutePosition(this.element); + var y = event.clientY - pos.y; + + // Set new height + var height = Math.max(32, y - this.dragOffset - this.heightOffset); + this.wrapper.style.height = height + this.grippie.dimensions.height + 1 + 'px'; + this.element.style.height = height + 'px'; + + // Avoid text selection + stopEvent(event); +} + +textArea.prototype.endDrag = function (event) { + // Uncapture mouse + document.onmousemove = this.oldMoveHandler; + document.onmouseup = this.oldUpHandler; + + // Restore opacity + this.element.style.opacity = 1.0; +} + |