trying to implement undo and redo for textareas

Discussion in 'Javascript' started by lkrubner, Dec 17, 2004.

  1. lkrubner

    lkrubner Guest

    I know I'm getting it wrong in these few lines, but I can't figure out
    where:

    var newLength = currentFormIndexValue + 1;
    arrayOfPastWork.length = newLength;

    var newValue = myField.value;
    var currentLength = arrayOfPastFormWork.length;
    var indexForNewItems = currentLength - 1;

    arrayOfPastFormWork[indexForNewItems] = newValue;
    currentFormIndexValue = indexForNewItems;


    If you've been adding items to an array then its current index should
    be it's length minus 1, yes?

    I've a form with a text area where people can write what they want and
    then hit submit and their text gets transformed into a webpage (with
    some PHP code). I've a bunch of formatting buttons that writes some
    basic HTML for them. The idea here is to offer an HTML editor like what
    Blogger offers to its customers or like what TypePad offers to its
    customers. When I've got this portion of things debugged, I'll offer a
    live preview, like Blogger and TypePad do.

    All the HTML buttons are working fine, save for the undo and redo
    buttons.

    I'm including a portion of the form, and the relevant Javascript below.
    Any help would be much appreciated.

    For now I'm creating these variables as globals:


    arrayOfPastFormWork = new Array();
    arrayOfPastFormWork[0] = "";
    currentFormIndexValue = 0;

    I'll make them non-global when my understanding of Javascript is more
    solid.



    -------------------------------------

    Please type the text you'd like to have appear on this web page:

    <input class="formattingButtons" type="button" value="save your
    work" onclick="saveYourWork(this.form.inputId4)" />
    <input class="formattingButtons" type="button" value="undo"
    onclick="undoFormWork(this.form.inputId4)" />
    <input class="formattingButtons" type="button" value="redo"
    onclick="redoFormWork(this.form.inputId4)" />

    <input class="formattingButtons" type="button" value="bold"
    onclick="insertAtCursor(this.form.inputId4, 'b');" />
    <input class="formattingButtons" type="button" value="italic"
    onclick="insertAtCursor(this.form.inputId4, 'i');" />
    <input class="formattingButtons" type="button" value="blockquote"
    onclick="insertAtCursor(this.form.inputId4, 'blockquote');" />
    <input class="formattingButtons" type="button" value="big headline"
    onclick="insertAtCursor(this.form.inputId4, 'h2');" />
    <input class="formattingButtons" type="button" value="small
    headline" onclick="insertAtCursor(this.form.inputId4, 'h5');" />
    <input class="formattingButtons" type="button" value="make a link"
    onclick="insertAtCursorLink(this.form.inputId4)" />
    <input class="formattingButtons" type="button" value="add an image"
    onclick="insertAtCursorImage(this.form.inputId4)" />

    Add an image: <select id="imagesToInsert"
    onChange="insertImageFromSelect(this.form.inputId4);">

    <option value=""></option>
    <option value="">No choice made</option>
    <option value="DSCN3581.JPG">Lawrence at work</option>
    </select>



    <div class="formInput"><textarea id="inputId4"
    name="formInputs[cbMainContent]" style="height:200px; width:100%;"
    class="textareaInput"
    onkeypress="addToArrayOfPastWork(this)"></textarea>
    <p><a href="#inputId4" onclick="makeBigger();">Make box
    larger?</a></p></div>

    </div>






    // 12-04-04 - our form functions, especially
    McFormsPrintNow, will output text boxes and textareas
    // that call addToArrayOfPastWork() whenever the event
    onkeypress is called.
    // Then elementsAdminShowFormattingButtons() contains an
    undo and a
    // redo button that lets users step through the array and
    bring back
    // previous versions of their work.
    arrayOfPastFormWork = new Array();
    arrayOfPastFormWork[0] = "";
    currentFormIndexValue = 0;

    function addToArrayOfPastWork(myField) {

    // 12-09-04 - the next two lines truncate the array to
    whatever the current
    // index is. Thus if the user does 9 things and then
    goes back 4 and then does
    // something new, we want to have an array that is 6
    elements long.
    //
    // 12-17-04 - this needs to happen here and not in the
    function undoFormWork()
    // because you don't want to erase future states of
    work until a new state
    // is being added. A user should be able to type 10
    things, then hit the undo
    // button 10 times, then hit the redo button 10 times,
    but they can't do that
    // if the undo button erases all the stuff the redo
    button would want to redo.
    var newLength = currentFormIndexValue + 1;
    arrayOfPastWork.length = newLength;

    var newValue = myField.value;
    var currentLength = arrayOfPastFormWork.length;
    var indexForNewItems = currentLength - 1;

    arrayOfPastFormWork[indexForNewItems] = newValue;
    currentFormIndexValue = indexForNewItems;
    }


    function undoFormWork(myField) {
    // 12-09-04 - this next line should take us back one
    step
    // in the array of work done so far. It should also
    force a cast to an
    // integer, good in case this variable has somehow been
    turned into
    // a string.
    currentFormIndexValue = currentFormIndexValue - 1;

    if (currentFormIndexValue < 0) currentFormIndexValue =
    0;
    myField.value =
    arrayOfPastFormWork[currentFormIndexValue];
    }


    function redoFormWork(myField) {
    currentFormIndexValue = currentFormIndexValue + 1;
    myField.value =
    arrayOfPastFormWork[currentFormIndexValue];
    }
     
    lkrubner, Dec 17, 2004
    #1
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.