tests/manual/history-hash.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<!DOCTYPE html>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<html>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove<head>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    <title>history-hash test</title>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    <style>
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        #menu {
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>
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove    <ul id="menu">
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        <li><label><input type="checkbox" id="asparagus">Asparagus</label></li>
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        <li><label><input type="checkbox" id="bluebird">Bluebird</label></li>
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        <li><label><input type="checkbox" id="coffee">Coffee</label></li>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    </ul>
813664623d90aab5b72760adaf668d7c53228968Ryan Grove
813664623d90aab5b72760adaf668d7c53228968Ryan Grove    <p>
813664623d90aab5b72760adaf668d7c53228968Ryan Grove        <label><input type="radio" name="mode" id="add" checked>addValue</label>
813664623d90aab5b72760adaf668d7c53228968Ryan Grove        <label><input type="radio" name="mode" id="replace">replaceValue</label>
813664623d90aab5b72760adaf668d7c53228968Ryan Grove    </p>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove</form>
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
45b049d4232108bbc0a2a4b70218006543f494a6Ryan Grove<ul>
45b049d4232108bbc0a2a4b70218006543f494a6Ryan Grove    <li><a href="http://www.yahoo.com">Yahoo!</a></li>
45b049d4232108bbc0a2a4b70218006543f494a6Ryan Grove    <li><a href="#foo=bar/baz">#foo=bar/baz</a></li>
45b049d4232108bbc0a2a4b70218006543f494a6Ryan Grove</ul>
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: {
dea2fd181c43d8942071d1385c4936b3753d097cRyan Grove        history: 'debug',
dea2fd181c43d8942071d1385c4936b3753d097cRyan Grove        'history-hash': 'debug',
dea2fd181c43d8942071d1385c4936b3753d097cRyan Grove        'history-hash-ie': 'debug'
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    },
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    useBrowserConsole: false
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove}).use('console', 'event-delegate', 'history-hash', 'json-stringify', function (Y) {
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove    new Y.Console().render('#log');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    var history    = new Y.History(),
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        bookmarked = history.get(),
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        images  = {
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove            asparagus: 'http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg', // http://www.flickr.com/photos/allenr/4686935131/
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove            bluebird : 'http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg',     // http://www.flickr.com/photos/allenr/66307916/
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove            coffee   : 'http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg'  // http://www.flickr.com/photos/allenr/4638474362/
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove        },
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        menuNode   = Y.one('#menu'),
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        photosNode = Y.one('#photos');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    function refresh(state) {
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove        menuNode.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
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove                menuNode.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
d7da83936765176d7b96362d930f5ee3577ff4a2Ryan Grove    menuNode.delegate('click', function (e) {
813664623d90aab5b72760adaf668d7c53228968Ryan Grove        var node = e.currentTarget,
813664623d90aab5b72760adaf668d7c53228968Ryan Grove            add  = Y.one('#add');
813664623d90aab5b72760adaf668d7c53228968Ryan Grove
813664623d90aab5b72760adaf668d7c53228968Ryan Grove        history[add.get('checked') ? 'addValue' : 'replaceValue'](
813664623d90aab5b72760adaf668d7c53228968Ryan Grove                node.get('id'), node.get('checked') ? '1' : null);
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    }, 'input');
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove
e22b5063c722f3a7b75660ec1f291891b4a3a6f7Ryan Grove    // Refresh with the bookmarked state, if any.
fff436c1083b8b7797a5722b6569974acd2530d3Ryan 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>