Appendix JS_C_A10-A12

Requirement:

• A10: Maintain a logical focus order for interactive components.
• A12: Changes of context are only initiated by user request or with user control.

Details: Create custom dialogs in a device independent way.

<div id="demo">
    <a href="images/JS_C_A10-A12.jpg">
        <img src="images/JS_C_A10-A12.thumb.jpg" 
            alt="It took 20kg of soft builders' sand, 
                 an old-fashioned wooden chest and some 
                 inflatable palm-trees, to create an indoor 
                 beach in my bathroom!" />
            <span>Click to enlarge</span></a>
</div>

var container = document.getElementById('demo');
var trigger = container.getElementsByTagName('a').item(0);
var thumbnail = container.getElementsByTagName('img').item(0);
var lightbox = null;
 
trigger.addEventListener('click', function(e)
{
    if(lightbox === null)
    {
        lightbox = document.createElement('p');
        lightbox.id = 'lightbox';
 
        var button = lightbox.appendChild(
            document.createElement('button'));
        button.setAttribute('type', 'button');
        button.appendChild(document.createTextNode('Close'));
 
        var image = lightbox.appendChild(
            document.createElement('img'));
        image.setAttribute('src', 
            thumbnail.getAttribute('src')
                .replace('.thumb', ''));
        image.setAttribute('alt', '');
 
        var caption = lightbox.appendChild(
            document.createElement('em'));
        caption.appendChild(
            document.createTextNode(
                thumbnail.getAttribute('alt')));
 
        button.addEventListener('click', function(e)
        {
            container.removeChild(lightbox);
            lightbox = null;
 
            trigger.focus();
 
        }, false);
 
        container.appendChild(lightbox);
    }
    else
    {
        container.removeChild(lightbox);
        lightbox = null;
    }
 
    e.preventDefault();
 
}, false);
 
document.addEventListener('keydown', function(e)
{
    if(lightbox !== null && e.keyCode == 27)
    {
        container.removeChild(lightbox);
        lightbox = null;
 
        trigger.focus();
 
        e.preventDefault();
    }
}, false);