вторник, 17 июня 2008 г.

Write simple expander for text area(Very simple effect).

Today I started to recollect my knowledge in javascript and for simple training I wrote expander for html element textarea.

// library/expander.js
expander = {
_init : function() {
var elements = document.getElementsByTagName('textarea');
for(var i = 0; i < elements.length; i++)
{
var area = elements[i];
if (area.className.search(/\bexpander\b/) != -1)
{
expander.addActions(area);
}
}
},

addActions : function(area) {
area._rows = area.rows;
area._cols = area.cols;

area.onkeyup = expander._onkeyup;
area.onfocus = expander._onfocus;
},
_onkeyup : function(e) {
var area = e.target;
if ((area.value.length - area.rows) / area.cols > area.rows)
{
var count = (area.value.length - area.rows) / (area.cols * area.rows);
var lines = area.value.split('\n');
var line = lines[lines.length - 1];
if (line.length > area.cols)
{
var n = Math.floor(line.length / area.cols);
for(var i = 0; i < n; i++)
{
lines[lines.length - 1 + i] = line.substring(0, area.cols);
line = line.substring(area.cols, line.length);
}
if (line.length != 0)
{
lines[lines.length - 1 + i] = line;
}
area.value = lines.join('\n');
}
else
{
area.value += '\n';
}
area.rows += count;
}
else
{
if (area.value.length + area.cols <= area.cols * area.rows)
{
var count = area.cols * area.rows / (area.value.length + area.cols);
area.rows -= count - 1;
}
}

area._rows = area.rows;
area._cols = area.cols;
},
_onfocus : function(e) {
var area = e.target;

area.rows = area._rows;
area.cols = area._cols;
}
};

window.onload = expander._init;



// test.html

.html.
.head.
.title. Test page ./title.
.script. type="text/javascript" language="javascript" src="library/expander.js"../script.
./head.
.body.
.textarea id="area1" class="simple-text expander" rows="1" cols="20"../textarea.
.textarea id="area2" class="simple-text expander" rows="1" cols="20"../textarea.
./body.
./html.

Комментариев нет: