113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
if (isJsEnabled()) {
|
|
addLoadEvent(function() {
|
|
// Attach to all visible textareas
|
|
textareas = document.getElementsByTagName('textarea');
|
|
var textarea;
|
|
for (var i = 0; textarea = textareas[i]; ++i) {
|
|
if (hasClass(textarea, 'resizable')) {
|
|
if (typeof dimensions(textarea).width != 'undefined' && dimensions(textarea).width != 0) {
|
|
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); };
|
|
|
|
// 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) {
|
|
if (document.isDragging) {
|
|
return;
|
|
}
|
|
document.isDragging = true;
|
|
|
|
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;
|
|
document.isDragging = false;
|
|
}
|
|
|