tests/manual/history-hash.html

	history-hash.html revision e22b5063c722f3a7b75660ec1f291891b4a3a6f7
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<!DOCTYPE html>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<html>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<head>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    <title>history-hash test</title>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    <link rel="stylesheet" href="/assets/test.css">
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    <style>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        #critters {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            list-style: none;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            margin: 0;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            padding: 0;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        #log { margin-top: 1em; }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        #photos {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            height: 200px;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            margin-top: 1em;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        #photos img {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            margin-right: 10px;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            max-height: 200px;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    </style>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</head>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<body class="yui3-skin-sam">
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<h1>history-hash test</h1>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<form>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    <ul id="critters">
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        <li><label><input type="checkbox" id="aardvark">Aardvark</label></li>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        <li><label><input type="checkbox" id="bumblebee">Bumblebee</label></li>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        <li><label><input type="checkbox" id="cheetah">Cheetah</label></li>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    </ul>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</form>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<p>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<a href="http://www.yahoo.com">Yahoo!</a>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</p>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<div id="photos"></div>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<div id="log"></div>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<script src="/build/yui/yui.js"></script>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<script>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grovevar Y = YUI({
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    filter: 'raw',
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    filters: {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        history: 'debug'
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    },
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    useBrowserConsole: false
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove}).use('console-filters', 'event-delegate', 'history', 'json-stringify', function (Y) {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    new Y.Console({
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        style: 'block',
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        width: 'inherit',
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        entryTemplate:
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            '<div class="{entry_class} {cat_class} {src_class}">' +
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                '<pre class="{entry_content_class}">{message}</pre>' +
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            '</div>',
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        after: {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            render: function () {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                this.get('contentBox').insertBefore(this._foot, this._body);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    }).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    var history    = new Y.History(),
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        bookmarked = history.get(),
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        images  = {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            aardvark : 'http://farm3.static.flickr.com/2380/3530738527_4d1e318df2.jpg', // http://www.flickr.com/photos/dipthongasaurus_rex/3530738527/
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            bumblebee: 'http://farm4.static.flickr.com/3293/2923728081_8c78210921.jpg', // http://www.flickr.com/photos/vickisnature/2923728081/
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            cheetah  : 'http://farm4.static.flickr.com/3287/2380266276_570418b291.jpg'  // http://www.flickr.com/photos/80835774@N00/2380266276/
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        },
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        crittersNode = Y.one('#critters'),
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        photosNode   = Y.one('#photos');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    function refresh(state) {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        crittersNode.all('input[type="checkbox"]').set('checked', false);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        photosNode.setContent('');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        Y.Object.each(state, function (value, key) {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            if (Y.Object.owns(images, key)) {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                var img = new Image();
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                img.src = images[key];
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                img.alt = key;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                crittersNode.one('#' + key).set('checked', true);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove                photosNode.append(img);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove            }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        });
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    }
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    Y.on('history:change', function (e) {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        refresh(e.newVal);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    });
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    Y.one('#critters').delegate('click', function (e) {
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        var node = e.currentTarget;
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        history.add(node.get('id'), node.get('checked') ? '1' : null);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    }, 'input');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    // Refresh with the bookmarked state, if any.
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    Y.log('bookmarked state: ' + Y.JSON.stringify(bookmarked));
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    refresh(bookmarked);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove});
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</script>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</body>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</html>