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