history-html5.html revision 8cd254d0dce086b53ca23716e564309f8da89edd
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove list-style: none;
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove #log { margin-top: 1em; }
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove height: 200px;
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove margin-top: 1em;
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove #photos img {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove margin-right: 10px;
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove max-height: 200px;
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove <li><label><input type="checkbox" id="aardvark">Aardvark</label></li>
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove <li><label><input type="checkbox" id="bumblebee">Bumblebee</label></li>
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove <li><label><input type="checkbox" id="cheetah">Cheetah</label></li>
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grovevar Y = YUI({
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove filter: 'raw',
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove history: 'debug'
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove useBrowserConsole: false
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove}).use('console-filters', 'event-delegate', 'history-html5', 'json-stringify', function (Y) {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove style: 'block',
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove width: Y.UA.ie ? '100%' : 'inherit',
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove entryTemplate:
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove '<div class="{entry_class} {cat_class} {src_class}">' +
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove '<pre class="{entry_content_class}">{message}</pre>' +
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove render: function () {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove this.get('contentBox').insertBefore(this._foot, this._body);
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove }).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove var history = new Y.History(),
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove bookmarked = history.get(),
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove aardvark : 'http://farm3.static.flickr.com/2380/3530738527_4d1e318df2.jpg', // http://www.flickr.com/photos/dipthongasaurus_rex/3530738527/
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove bumblebee: 'http://farm4.static.flickr.com/3293/2923728081_8c78210921.jpg', // http://www.flickr.com/photos/vickisnature/2923728081/
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove cheetah : 'http://farm4.static.flickr.com/3287/2380266276_570418b291.jpg' // http://www.flickr.com/photos/80835774@N00/2380266276/
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove crittersNode = Y.one('#critters'),
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove photosNode = Y.one('#photos');
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove function refresh(state) {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove crittersNode.all('input[type="checkbox"]').set('checked', false);
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove Y.Object.each(state, function (value, key) {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove if (Y.Object.owns(images, key)) {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove var img = new Image();
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove img.src = images[key];
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove crittersNode.one('#' + key).set('checked', true);
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove Y.on('history:change', function (e) {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove Y.one('#critters').delegate('click', function (e) {
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove history.addValue(node.get('id'), node.get('checked') ? '1' : null);
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove }, 'input');
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove // Refresh with the bookmarked state, if any.
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove Y.log('Bookmarked state: ' + Y.JSON.stringify(bookmarked));
8cd254d0dce086b53ca23716e564309f8da89eddRyan Grove refresh(bookmarked);