Kang-min Liu - Widget.Textarea.Resizable-0.01

NAME

Widget.Textarea.Resizable - Provide resizable textareas

SYNOPSIS

  <textarea id="theArea"></textarea>
  
  <script type="text/javascript">
    JSAN.use("Widget.Textarea.Resizable");
    new Widget.Textarea.Resizable({ elementId: 'theArea'});
  </script>

DESCRIPTION

This library provides a more interactive textarea widget, which resize on the fly as user's typing. The only usage is as in synopsis, just call the constructor with one proper parameter hash. Valid configuration keys and values are described below.

CONFIGUARTIONS

The constructor takes only one hash variable. Valid keys and its description enlisted below:

elementId: Necessary. In your HTML, there must be an existing textarea with an ID. The element ID must be given here, otherwise this library simply just can't work.
inScreen: Optional, default to false. This option allows you to prevent the editing textarea from growing bigger then screen. Once set to true, a scroll bar will show up when it's about to grow bigger then screen.
resizeStep: Optional, default to 100. This option decides the resize step upon each grow or shrink. Setting larger value could help preventing from resizing too often.

AUTHOR

Kang-min Liu <gugod@gugod.org>.

COPYRIGHT

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

See <http://www.perl.com/perl/misc/Artistic.html>

/**

*/

JSAN.use('DOM.Events');
JSAN.use('DOM.Ready');

if ( typeof Widget == "undefined" )
    Widget = {};

if ( typeof Widget.Textarea == "undefined" )
    Widget.Textarea = {};

Widget.Textarea.Resizable = function(params) {
    var self = this;
    DOM.Ready.onIdReady(params['elementId'],
                  function(elem) {
                      self.area = elem;
                      self.setConfig(params);
                      self.setStyle(params);
                      self.initialize(params)
                      self.run();
                  });
}

Widget.Textarea.Resizable.VERSION = "0.01";

proto = Widget.Textarea.Resizable.prototype

proto.initialize = function(params) {
    this.area = document.getElementById(params['elementId']);
    this.size = 0;
    this.resize();
}

proto.setConfig = function (params) {
    this.inScreen = params['inScreen'] || false;
    this.debug = params['debug'];
    // this.minSize  = 0;
    this.resizeStep = params['resizeStep'] || 100;
}

proto.setStyle = function(params) {
    if ( !this.inScreen ) {
        this.area.style.overflow = 'hidden';
    }
    this.area.setAttribute("wrap","vitual");
}

proto.run = function() {
    var self = this;
    var call_resize = function(){ self.resize() };
    setInterval(call_resize, 100);
}

proto.resize = function() {
    this.shrink();
    this.grow();
    if ( this.debug ) { this.XXX("DEBUG: "); }
}

proto.shrink = function() {
    if ( this.size <= 0 )
        return;
    if ( !this.inScreen || ( this.inScreen && !this.scrollBarShowOff() ) ) {
        this.size -= 1;
        this.area.style.height = this.resizeStep * this.size;
    }
}

proto.grow = function() {
    if ( this.area.scrollHeight > this.area.clientHeight ) {
        if ( this.inScreen &&
            (20 + this.area.offsetTop + this.area.clientHeight)
            > document.body.clientHeight ) {
            return;
        }
        this.size += 1;
        this.area.style.height = this.resizeStep * this.size;
        this.grow();
    }
}

proto.getStyleHeight = function() {
    if( this.area.style.height ) {
        var r = this.area.style.height.match(/^(\d+)/);
        return r[1];
    }
    return 0;
}

proto.scrollBarShowOff = function() {
    return ( this.area.scrollHeight > this.area.clientHeight );
}

proto.XXX = function(msg) {
    var d = document.getElementById('debug');
    if ( !d ) return;
    if ( typeof(msg) == 'undefined' ) msg = ""
    msg += "<br/>\n";
    msg += "size: " + this.size + "<br/>\n";
    msg += "step: " + this.resizeStep + "<br/>\n";
    msg += "styleHeight: " + this.getStyleHeight() + "<br/>\n";
    msg += "clientHeight: " + this.area.clientHeight + "<br/>\n";
    msg += "scrollHeight: " + this.area.scrollHeight + "<br/>\n";
    msg += "docBodyHeight: " + document.body.scrollHeight + "<br/>\n";
    msg += "windowHeight: " + document.body.clientHeight + "<br/>\n";
    msg += "<hr/>"
    msg += "inScreen:" + this.inScreen + "<br/>";
    d.innerHTML = msg;
}

/**

*/