Open2 Engine: Bookworm - part 3 - Saving Notes

    Okay, now that I've gotten the core of Bookworm up and running, the ability to load documents, time to start adding features.  The next thing I want is to let the user add notes to the document.  Here are some screenshots:

    So what I've done is add a jQuery UI "Accordion" panel to the bottom of the display area, and buttons to load and save a text file for notes.  The user can also click on the accordion to close it if they don't want to make notes.

Adding the Accordion
    To add the accordion, here's the HTML code...

    Basically, the accordion is just an <h3> header with a <div> for the body.  In there is a <textarea> for the notes and two buttons, one to load a text file and one to save it.  The buttons use this JavaScript...

    This function is almost identical to the one that loads the document, it just puts the contents of the file in a different place.

    Saving the file is the new thing of the day.  It's a little complicated, and is more of the code from the "This Could Be Better" blog I referenced earlier.  Basically there are two parts to saving the file.  First, you create a "blob" or "binary object."  That's basically fancy-speak for a file.  You set the contents of the <textarea> as the contents of the file.  Then you create an "object URL" to make a download link to the file.  And I added a line that sets the filename when you save the file to be the same as the file you loaded, which I thought would be convenient to let you quickly over-write the existing file, but instead you get a "filename (1).txt" because Windows will add a number to keep you from overwriting an existing file.  So that didn't work exactly as I'd hoped.
    The second part, now that the file has been made, is to actually download it.  Here you create a hidden anchor link and add it to the document, then call the "click" event on it (since you can't see it to click on it), and finally destroy the hidden link once it's been used.

    I did notice some spacing issues when adding the accordion.  The buttons were appearing before the textarea instead of after it, so I added the "clear: both" to the textarea and a "clear: left" to the load button to make sure everybody was on separate lines.  The accordion itself was being clipped, so I also added the "min-height" to the tabs to make sure there was enough room to see the accordion (I think the trouble came from the fact that the accordion is under the display area, which is hidden and dynamically populated with the document, so the browser didn't know how much space to reserve for everything).

    So there is one more feature added to my little program, it's slowly but surely growing in power :)