From a6e23167668775ba152a06a466981cb45f9d26c6 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Thu, 15 Dec 2011 12:16:54 +0100
Subject: [PATCH] ENHANCEMENT Created $('.cms-container').loadPanel() as a
 wrapper around History.pushState() to allow for global change tracking

---
 admin/javascript/LeftAndMain.Content.js |  8 ++-----
 admin/javascript/LeftAndMain.Preview.js |  2 +-
 admin/javascript/LeftAndMain.js         | 28 ++++++++++++++++++++++++-
 admin/javascript/ModelAdmin.js          |  2 +-
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js
index 3b94861b0..919d4b7d3 100644
--- a/admin/javascript/LeftAndMain.Content.js
+++ b/admin/javascript/LeftAndMain.Content.js
@@ -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:
diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js
index 10d2c7690..91a03d87e 100644
--- a/admin/javascript/LeftAndMain.Preview.js
+++ b/admin/javascript/LeftAndMain.Preview.js
@@ -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);
 				}
 			},
 			
diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js
index 9fd997209..2c22320dd 100644
--- a/admin/javascript/LeftAndMain.js
+++ b/admin/javascript/LeftAndMain.js
@@ -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,
diff --git a/admin/javascript/ModelAdmin.js b/admin/javascript/ModelAdmin.js
index aac1c6d3a..5bc0cc6f0 100644
--- a/admin/javascript/ModelAdmin.js
+++ b/admin/javascript/ModelAdmin.js
@@ -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;
 				} 
 			}