implementing undo and redo for textarea's - does Javascript support static variables?

[lkrubner]

I'm offering users the ability to type weblog posts into a form and
post them. They type the text into a TEXTAREA which is on a form. The
form, when submitted, hits a PHP script. Before it is submitted, while
they are typing, I'm trying to offer them some common word processing
functions.

I want to implement unlimited undo and redo for the textarea. I've set
the textarea to onChange="addTo ArrayOfPastWork ()";

My undo button gives me "undefined" , but I suppose I can fix that with
a check on the index. My redo button seems to work.

Here is my question:
Currently I'm implementing currentFormInde xValue as a global variable,
but really I want it to be a static variable in a function that
handles both the undo and redo. Does Javascript allow static variables?
I checked here: http://developer.irt.org/script/vfaq.htm
but it didn't mention static variables.


// 12-04-04 - our form functions, especially McFormsPrintNow ,
will output text boxes and textareas
// that call addToArrayOfPas tWork() whenever anything changes.
Then elementsAdminSh owFormattingBut tons
// contains an undo and a redo button that lets users step
through the array and bring back
// past iterations of work.
arrayOfPastForm Work = new Array();
currentFormInde xValue = 0;

function undoFormWork(my Field) {
currentFormInde xValue = currentFormInde xValue - 1;
myField.value =
arrayOfPastForm Work[currentFormInde xValue];
}

function redoFormWork(my Field) {
currentFormInde xValue = currentFormInde xValue + 1;
myField.value =
arrayOfPastForm Work[currentFormInde xValue];
}
function addToArrayOfPas tWork(myField) {
var newValue = myField.value;
arrayOfPastForm Work.push(newVa lue);
}

[sharon]

few comments:

1. you need to catch the onpropertychang e and not the onchange event
(at least in IE). in addToArrayOfPas tWork you'll need to check if the
value property was changed (using event.propertyV alue).
2. in redoFormWork and undoFormWork you'll need to detach the event
before assiging the value and attach back at the end of the functions
(or use some kind of a flag)
3. currently you do not clean the array from the current point to the
end once the user make a change (to prevent the redo action after a
change)
4. you cannot create a real static variable in javascript (you can use
prototype but it will not prevent you from changing the variable in a
specific instance of an object)

lk******@geocit ies.com wrote:

I'm offering users the ability to type weblog posts into a form and
post them. They type the text into a TEXTAREA which is on a form. The
form, when submitted, hits a PHP script. Before it is submitted, while they are typing, I'm trying to offer them some common word processing
functions.

I want to implement unlimited undo and redo for the textarea. I've set the textarea to onChange="addTo ArrayOfPastWork ()";

My undo button gives me "undefined" , but I suppose I can fix that with a check on the index. My redo button seems to work.

Here is my question:
Currently I'm implementing currentFormInde xValue as a global variable, but really I want it to be a static variable in a function that
handles both the undo and redo. Does Javascript allow static variables? I checked here: http://developer.irt.org/script/vfaq.htm
but it didn't mention static variables.


// 12-04-04 - our form functions, especially McFormsPrintNow ,
will output text boxes and textareas
// that call addToArrayOfPas tWork() whenever anything changes.
Then elementsAdminSh owFormattingBut tons
// contains an undo and a redo button that lets users step
through the array and bring back
// past iterations of work.
arrayOfPastForm Work = new Array();
currentFormInde xValue = 0;

function undoFormWork(my Field) {
currentFormInde xValue = currentFormInde xValue - 1;
myField.value =
arrayOfPastForm Work[currentFormInde xValue];
}

function redoFormWork(my Field) {
currentFormInde xValue = currentFormInde xValue + 1;
myField.value =
arrayOfPastForm Work[currentFormInde xValue];
}
function addToArrayOfPas tWork(myField) {
var newValue = myField.value;
arrayOfPastForm Work.push(newVa lue);
}

[lkrubner]

Thank you, that is some very valuable feedback.

To clean the array from the current point to the end once a user makes
a change, to prevent redo, do I simply use array.pop() on all the
elements above the current index? Is there simpler way to do it than a
for loop?

As to static variables, I noticed this article by Richard Conford on
the subject:
http://www.litotes.demon.co.uk/js_in...te_static.html

[Michael Winter]

On 9 Dec 2004 11:52:49 -0800, <lk******@geoci ties.com> wrote:

[snip]

To clean the array from the current point to the end once a user makes a
change, to prevent redo, do I simply use array.pop() on all the elements
above the current index? Is there simpler way to do it than a for loop?

Yes. Assign a value to the length property of the array. If the number is
smaller than the current length, the array will be truncated.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[lkrubner]

Hot tip. So if I have this:

var myArray = new Array();
myArray[0] = 'Napoleon';
myArray[1] = 'Hannibal';
myArray[2] = 'Rommel';
myArray[3] = 'Caesar';
myArray[4] = 'Patton';

then if I go like this:

myArray.length = 3;

then the last two items, holding the names of Caesar and Patton, are
gone? If I then use push(), I'm placing something into the 4th
position, which will have an index of 3?

[Michael Winter]

On 9 Dec 2004 14:40:54 -0800, <lk******@geoci ties.com> wrote:

[array, length 5]

myArray.length = 3;

then the last two items, holding the names of Caesar and Patton, are
gone?
You could have just tried it, you know. :P But yes, only the first three
will remain in the array.
If I then use push(), I'm placing something into the 4th position, which
will have an index of 3?

Yes.

As an aside, you might want to be careful using push and pop; versions of
IE earlier than IE5.5 don't implement it (unless the user updated their
JScript implementation separately).

If this is a concern, you can test for them and write your own versions if
they're not available:

if(Array.protot ype) {
if(!Array.proto type.push) {
Array.prototype .push = function() {
for(var i = 0, n = arguments.lengt h; i < n; ++i) {
this[this.length] = arguments[i];
}
return this.length;
};
}
if(!Array.proto type.pop) {
Array.prototype .pop = function() {var e, n;
if((n = this.length)) {
e = this[--n]; this.length = n; return e;
}
};
}
}

or, as far as pushing is concerned, it may be easier to write

arr[arr.length] = ...;

if only one value is concerned.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[lkrubner]

Can I call both the onChange and the onPropertyChang e events, like
this? (Please ignore the escapes, this is PHP code):

<textarea id=\"$inputId\" name=\"$inputNa me\" style=\"height: 200px;
width:100%;\" class=\"$class\ " onChange=\"addT oArrayOfPastWor k(this)\"
onPropertyChang e=\"addToArrayO fPastWork(this) \">

Also, when you write this:
"in redoFormWork and undoFormWork you'll need to detach the event
before assiging the value and attach back at the end of the functions
(or use some kind of a flag)"

Do you mean I need to protect against multiple events happening at
once? Do you mean I should set a flag to lock in the array to just one
function till a value has been assigned? If you meant something else,
could you elaborate?