Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > implementing undo and redo for textarea's - does Javascript support static variables?

Reply
Thread Tools

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

 
 
lkrubner@geocities.com
Guest
Posts: n/a
 
      12-09-2004
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);
}

 
Reply With Quote
 
 
 
 
sharon
Guest
Posts: n/a
 
      12-09-2004
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)

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


 
Reply With Quote
 
 
 
 
lkrubner@geocities.com
Guest
Posts: n/a
 
      12-09-2004
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

 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      12-09-2004
On 9 Dec 2004 11:52:49 -0800, <> 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.
 
Reply With Quote
 
lkrubner@geocities.com
Guest
Posts: n/a
 
      12-09-2004
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?

 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      12-09-2004
On 9 Dec 2004 14:40:54 -0800, <> 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. 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[i];
}
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
lkrubner@geocities.com
Guest
Posts: n/a
 
      12-10-2004
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?

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Undo-Redo, copy instance, custom events and a problem King Python 0 07-26-2010 05:32 AM
Undo/Redo, Subclasses and Lots of Listeners Jason Cavett Java 0 06-15-2007 08:26 PM
RE: undo and redo ? Robert Brewer Python 0 01-02-2004 06:31 PM
undo and redo ? black Python 1 01-02-2004 01:53 PM
undo and redo black Python 0 12-23-2003 03:56 AM



Advertisments