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="addToArrayOfPastWork()";

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 currentFormIndexValue 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 addToArrayOfPastWork() whenever anything changes.
Then elementsAdminShowFormattingButtons
// contains an undo and a redo button that lets users step
through the array and bring back
// past iterations of work.
arrayOfPastFormWork = new Array();
currentFormIndexValue = 0;

function undoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue - 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}

function redoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue + 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}


function addToArrayOfPastWork(myField) {
var newValue = myField.value;
arrayOfPastFormWork.push(newValue);
}

 

[sharon]

few comments:

1. you need to catch the onpropertychange and not the onchange event
(at least in IE). in addToArrayOfPastWork you'll need to check if the
value property was changed (using event.propertyValue).
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)

 

[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_info/private_static.html

 

[Michael Winter]

[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

 

[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]

[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. 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.prototype) {
if(!Array.prototype.push) {
Array.prototype.push = function() {
for(var i = 0, n = arguments.length; i < n; ++i) {
this[this.length] = arguments;
}
return this.length;
};
}
if(!Array.prototype.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

 

[lkrubner]

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

<textarea id=\"$inputId\" name=\"$inputName\" style=\"height:200px;
width:100%;\" class=\"$class\" onChange=\"addToArrayOfPastWork(this)\"
onPropertyChange=\"addToArrayOfPastWork(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?