← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to www/media/tutorial/tutorial.js

  • Committer: mattgiuca
  • Date: 2008-03-15 14:46:09 UTC
  • Revision ID: svn-v3-trunk0:2b9c9e99-6f39-0410-b283-7f802c844ae2:trunk:711
Tutorial: Tabs now correctly indent code in exercise boxes.
    Added an ID to the text boxes so they can be manipulated in the DOM,
    and added a key event handler function (copied from console).
    Wrote tab indenting code here (copied from console).
    Note: This is a fairly different algorithm, as it needs to be able to
    indent blocks of code spanning multiple lines, rather than just one.

Quite an awesome algorithm too, if I do say so myself :)

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/media/tutorial/tutorial.js
350
350
    li.appendChild(document.createTextNode(detail));
351
351
    return li;
352
352
}
 
353
 
 
354
/** Special key handlers for exercise text boxes */
 
355
function catch_textbox_input(exerciseid, filename, key)
 
356
{
 
357
    /* NOTE: Copied and modified from console/console.js:catch_input. */
 
358
    /* Always update the saved status, so it will enable the save button and
 
359
     * auto-save timer. */
 
360
    set_saved_status(exerciseid, filename, "Save");
 
361
    var inp = document.getElementById('textarea_' + exerciseid);
 
362
    switch (key)
 
363
    {
 
364
    case 9:                 /* Tab key */
 
365
        var selstart = inp.selectionStart;
 
366
        var selend = inp.selectionEnd;
 
367
        var chars_added;
 
368
        if (selstart == selend)
 
369
        {
 
370
            /* No selection, just a carat. Insert a tab here. */
 
371
            inp.value = inp.value.substr(0, selstart)
 
372
                + TAB_STRING + inp.value.substr(selstart);
 
373
            chars_added = TAB_STRING.length;
 
374
        }
 
375
        else
 
376
        {
 
377
            /* Text is selected.
 
378
             * Indent each line that is selected.
 
379
             */
 
380
            var pre_sel = inp.value.substr(0, selstart);
 
381
            var in_sel = inp.value.substr(selstart, selend-selstart);
 
382
            var post_sel = inp.value.substr(selend);
 
383
            console.log("pre_sel = " + repr(pre_sel));
 
384
            console.log("in_sel = " + repr(in_sel));
 
385
            console.log("post_sel = " + repr(post_sel));
 
386
            /* Move everything after the last newline in pre_sel to in_sel,
 
387
             * so it will be indented too (ie. the first line
 
388
             * partially-selected). */
 
389
            var pre_sel_newline = pre_sel.lastIndexOf('\n')+1;
 
390
            in_sel = pre_sel.substr(pre_sel_newline) + in_sel;
 
391
            pre_sel = pre_sel.substr(0, pre_sel_newline);
 
392
            /* Now insert TAB_STRING before each line of in_sel */
 
393
            in_sel = in_sel.split('\n');
 
394
            var new_in_sel = TAB_STRING + in_sel[0]
 
395
            for (var i=1; i<in_sel.length; i++)
 
396
                new_in_sel += '\n' + TAB_STRING + in_sel[i];
 
397
            chars_added = TAB_STRING.length * in_sel.length;
 
398
 
 
399
            inp.value = pre_sel + new_in_sel + post_sel;
 
400
        }
 
401
        /* Update the selection so the same characters as before are selected
 
402
         */
 
403
        inp.selectionStart = selstart + chars_added;
 
404
        inp.selectionEnd = inp.selectionStart + (selend - selstart);
 
405
        /* Cancel the event, so the TAB key doesn't move focus away from this
 
406
         * box */
 
407
        return false;
 
408
        /* Note: If it happens that some browsers don't support event
 
409
         * cancelling properly, this hack might work instead:
 
410
        setTimeout(
 
411
            "document.getElementById('console_inputText').focus()",
 
412
            0);
 
413
         */
 
414
        break;
 
415
    }
 
416
}