public
Last active

  • Download Gist
HistoryManagerSample.js
JavaScript
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 112 113 114 115 116 117 118
window.addEvent('domready', function(){
/**
* First Pagination class
*/
var pagi = new PaginationClass('products', 10);
$('b1-1').addEvent('click', function(e) {
e.stop();
pagi.by(-1);
}.bindWithEvent());
$('b1-2').addEvent('click', function(e) {
e.stop();
pagi.by(1);
}.bindWithEvent());
/**
* Second Pagination class
*/
var pagi2 = new PaginationClass('images', 10);
$('b2-1').addEvent('click', function(e) {
new Event(e).stop();
pagi2.by(-1);
});
$('b2-2').addEvent('click', function(e) {
new Event(e).stop();
pagi2.by(1);
});
/**
* The holy Accordion
*/
var accordion1 = new Accordion(
$$('#demo-accordion h5'),
$$('#demo-accordion div'),
{id: 'abstract', useHistory: true}
);
/**
* Simple example how to save Ajax
*
* This adds Ajax content loading to all ajaxified links.
* All allowed links are saved in hrefs, so we can validate
* the data from HistoryManager
*/
var ajaxs = $$('a.ajaxified');
// all possible hrefs are here, we use the index
var hrefs = ajaxs.getProperty('href');
// no index now
var currentIndex = -1;
var req = new Ajax('', {
method: 'get',
update: $('ajaxified-target'),
autoCancel: true
});
var reqHistory = HistoryManager.register(
'page-index',
[0], // default, page 0
function(values) {
ajaxUpdate(values[0]);
},
function(values) {
return 'page-index(' + values[0] + ')';
},
/page-index\((\d+)\)/ // the regexp to match "page-index(0)"
);
 
/**
* Loads the url (by index) if the index is valid and not the current page
*/
function ajaxUpdate(index) {
var url = hrefs[index] || null;
if (!url || (currentIndex == index)) return;
// fancy state change with classes
if (currentIndex != -1) ajaxs[currentIndex].removeClass('ajaxified-selected');
ajaxs[index].addClass('ajaxified-selected');
currentIndex = index;
// updating the history
reqHistory.setValue(0, index);
// request
req.url = url;
req.request();
};
ajaxs.each(function(el, i) {
el.addEvent('click', function(e) {
if (e) new Event(e).stop();
ajaxUpdate(i);
});
});
// load first panel
ajaxs[0].fireEvent('click');
/**
* This is an example how to generate a bookmarkable/sendable link on every change
*/
var bmLink = $E('a#bookmark');
HistoryManager.addEvent('onStateChange', function(state) {
bmLink.setProperty('href', '#' + state).getFirst().setHTML('#' + state);
});
/**
* on start it start checking the hash
*/
HistoryManager.start();
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.