ENHANCEMENT Created $('.cms-container').loadPanel() as a wrapper around History.pushState() to allow for global change tracking

This commit is contained in:
Ingo Schommer 2011-12-15 12:16:54 +01:00
parent 0563018f52
commit a6e2316766
4 changed files with 31 additions and 9 deletions

View File

@ -32,11 +32,7 @@
var url = $(node).find('a:first').attr('href');
if(url && url != '#') {
if($(node).find('a:first').is(':internal')) url = $('base').attr('href') + url;
if(window.History.enabled) {
window.History.pushState({}, '', url);
} else {
window.location = url;
}
$('.cms-container').loadPanel(url);
} else {
self.removeForm();
}
@ -55,7 +51,7 @@
/**
* Function: loadForm
*
* See $('.cms-container').handleStateChange() on a frequently used alternative
* See $('.cms-container').loadPanel() on a frequently used alternative
* to direct ajax loading of content, with support for the window.History object.
*
* Parameters:

View File

@ -101,7 +101,7 @@
contentPanel = $('.cms-content');
if(id && contentPanel.find(':input[name=ID]').val() != id) {
// Ignore behaviour without history support (as we need ajax loading for the new form to load in the background)
if(window.History.enabled) window.History.pushState({}, '', editLink);
if(window.History.enabled) $('.cms-container').loadPanel(editLink);
}
},

View File

@ -80,7 +80,7 @@
$('body').removeClass('loading');
$(window).unbind('resize', positionLoadingSpinner);
History.Adapter.bind(window,'statechange',function(){
History.Adapter.bind(window,'statechange',function(){
self.handleStateChange();
});
@ -97,10 +97,36 @@
this.find('.cms-panel-layout').redraw(); // sidebar panels.
},
/**
* Proxy around History.pushState() which handles non-HTML5 fallbacks,
* as well as global change tracking. Change tracking needs to be synchronous rather than event/callback
* based because the user needs to be able to abort the action completely.
*
* See handleStateChange() for more details.
*
* Parameters:
* - {String} url
* - {String} title New window title
* - {Object} data Any additional data passed through to History.pushState()
*/
loadPanel: function(url, title, data) {
var data = data || {}, selector = data.selector || '.cms-content', contentEl = $(selector);
if(window.History.enabled) {
// Active menu item is set based on X-Controller ajax header,
// which matches one class on the menu
window.History.pushState(data, title, url);
} else {
window.location = url;
}
},
/**
* Handles ajax loading of new panels through the window.History object.
* To trigger loading, pass a new URL to window.History.pushState().
* Use loadPanel() as a pushState() wrapper as it provides some additional functionality
* like global changetracking and user aborts.
*
* Due to the nature of history management, no callbacks are allowed.
* Use the 'beforestatechange' and 'afterstatechange' events instead,

View File

@ -138,7 +138,7 @@
if(!firstLink) return;
if(window.History.enabled) {
window.History.pushState({selector: '.cms-content-fields form:first'}, '', firstLink.attr('href'));
$('.cms-container').loadPanel(firstLink.attr('href'), '', {selector: '.cms-content-fields form:first'});
return false;
}
}