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

Discussion in 'Javascript' started by lkrubner@geocities.com, Dec 9, 2004.

  1. Guest

    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);
    }
    , Dec 9, 2004
    #1
    1. Advertising

  2. sharon Guest

    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);
    > }
    sharon, Dec 9, 2004
    #2
    1. Advertising

  3. Guest

    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
    , Dec 9, 2004
    #3
  4. 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.
    Michael Winter, Dec 9, 2004
    #4
  5. Guest

    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?
    , Dec 9, 2004
    #5
  6. 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. :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.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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Dec 9, 2004
    #6
  7. Guest

    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?
    , Dec 10, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. black

    undo and redo

    black, Dec 23, 2003, in forum: Python
    Replies:
    0
    Views:
    342
    black
    Dec 23, 2003
  2. black

    undo and redo ?

    black, Jan 2, 2004, in forum: Python
    Replies:
    1
    Views:
    345
    Diez B. Roggisch
    Jan 2, 2004
  3. Robert Brewer

    RE: undo and redo ?

    Robert Brewer, Jan 2, 2004, in forum: Python
    Replies:
    0
    Views:
    340
    Robert Brewer
    Jan 2, 2004
  4. Jason Cavett
    Replies:
    0
    Views:
    309
    Jason Cavett
    Jun 15, 2007
  5. King
    Replies:
    0
    Views:
    310
Loading...

Share This Page