From 0fd6924fe1748b3b4c7ea3eae2d30c862025b3a2 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Thu, 28 Apr 2011 22:36:28 +1200
Subject: [PATCH] FEATURE Preview changes of page edits in CMS on website
 (through <iframe> sidebar)

---
 admin/code/LeftAndMain.php               |   2 +
 admin/css/screen.css                     |  36 +++++---
 admin/javascript/LeftAndMain.EditForm.js |   2 +-
 admin/javascript/LeftAndMain.Preview.js  | 102 +++++++++++++++++++++++
 admin/scss/_layout.scss                  |  14 ++++
 admin/scss/_style.scss                   |  15 ++++
 admin/templates/LeftAndMain.ss           |  12 ++-
 7 files changed, 168 insertions(+), 15 deletions(-)
 create mode 100644 admin/javascript/LeftAndMain.Preview.js

diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php
index 2883bc301..d6b7e0a99 100644
--- a/admin/code/LeftAndMain.php
+++ b/admin/code/LeftAndMain.php
@@ -232,6 +232,7 @@ class LeftAndMain extends Controller {
 		Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js');
 		Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js');
 		Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js');
+		Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js');
 		Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js');
 
 		Requirements::themedCSS('typography');
@@ -286,6 +287,7 @@ class LeftAndMain extends Controller {
 				SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js',
 				SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js',
 				SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js',
+				SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js',
 				SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js',
 			)
 		);
diff --git a/admin/css/screen.css b/admin/css/screen.css
index 3a4e542a3..57979bb5f 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -29,36 +29,43 @@ a img { border: none; }
 html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
 
 /* line 17, ../scss/_layout.scss */
+.cms-preview { width: 1px; overflow: hidden; }
+/* line 21, ../scss/_layout.scss */
+.cms-preview .cms-preview-toggle { width: 10px; }
+/* line 25, ../scss/_layout.scss */
+.cms-preview iframe { width: 100%; height: 100%; }
+
+/* line 31, ../scss/_layout.scss */
 .cms-container { height: 100%; }
 
-/* line 21, ../scss/_layout.scss */
+/* line 35, ../scss/_layout.scss */
 .cms-menu { width: 250px; overflow: auto; }
 
-/* line 33, ../scss/_layout.scss */
+/* line 47, ../scss/_layout.scss */
 .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
 /* line 7, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
 .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { *display: inline; }
 
-/* line 37, ../scss/_layout.scss */
+/* line 51, ../scss/_layout.scss */
 .cms-content-tools { width: 250px; overflow: auto; }
 
-/* line 42, ../scss/_layout.scss */
+/* line 56, ../scss/_layout.scss */
 .cms-content-form { overflow: auto; }
 
-/* line 46, ../scss/_layout.scss */
+/* line 60, ../scss/_layout.scss */
 .cms-content-header { height: 40px; }
-/* line 49, ../scss/_layout.scss */
+/* line 63, ../scss/_layout.scss */
 .cms-content-header h2 { width: 226px; }
-/* line 53, ../scss/_layout.scss */
+/* line 67, ../scss/_layout.scss */
 .cms-content-header > div { width: 9999em; overflow: hidden; }
 
-/* line 59, ../scss/_layout.scss */
+/* line 73, ../scss/_layout.scss */
 .cms-content-actions { padding: 10px; }
 
-/* line 63, ../scss/_layout.scss */
+/* line 77, ../scss/_layout.scss */
 .cms-logo { height: 30px; overflow: hidden; vertical-align: middle; }
 
-/* line 69, ../scss/_layout.scss */
+/* line 83, ../scss/_layout.scss */
 .cms-login-status { height: 30px; overflow: hidden; vertical-align: middle; }
 
 /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
@@ -241,7 +248,7 @@ li.jstree-closed > ul { display: none; }
 /* line 20, ../scss/_menu.scss */
 .cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #aaaaaa 1px 1px 1px; color: #333333; padding: 5px; }
 /* line 29, ../scss/_menu.scss */
-.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303602411') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
+.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303890208') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
 /* line 37, ../scss/_menu.scss */
 .cms-menu-list li a .text { display: block; padding-top: 10px; }
 /* line 43, ../scss/_menu.scss */
@@ -427,3 +434,10 @@ strong { font-weight: bold; }
 
 /* line 280, ../scss/_style.scss */
 .cms-preview-header { background-color: #FFBE66; padding: 10px; font-weight: bold; }
+
+/* line 287, ../scss/_style.scss */
+.cms-preview { background-color: #b0bfc6; }
+/* line 290, ../scss/_style.scss */
+.cms-preview .cms-preview-toggle { cursor: pointer; }
+/* line 293, ../scss/_style.scss */
+.cms-preview .cms-preview-toggle a { color: white; font-weight: bold; text-decoration: none; }
diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js
index 889553436..de192dfb2 100644
--- a/admin/javascript/LeftAndMain.EditForm.js
+++ b/admin/javascript/LeftAndMain.EditForm.js
@@ -351,7 +351,7 @@
 					// focus input on first form element
 					this.find(':input:visible:first').focus();
 
-					this.trigger('loadnewpage', {data: data, origData: origData});
+					this.trigger('loadnewpage', {data: data, origData: origData, xmlhttp: xmlhttp});
 				}
 
 				// set status message based on response
diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js
new file mode 100644
index 000000000..d238a6d4e
--- /dev/null
+++ b/admin/javascript/LeftAndMain.Preview.js
@@ -0,0 +1,102 @@
+(function($) {
+	$.entwine('ss', function($){
+		$('.LeftAndMain .cms-preview').entwine({
+			
+			onmatch: function() {
+				var self = this, layoutContainer = this.parent();
+				// this.resizable({
+				// 	handles: 'w',
+				// 	stop: function(e, ui) {
+				// 		$('.cms-container').layout({resize: false});
+				// 	}
+				// });
+				
+				// Create layout and controls
+				this.prepend('<div class="cms-preview-toggle west"><a href="#">&lt;</a></div>');
+				this.find('iframe').addClass('center');
+				this.layout({type: 'border'});
+		
+				this.find('iframe').bind('load', function() {self._fixIframeLinks();});
+				self._fixIframeLinks();
+				
+				$('.cms-edit-form').bind('loadnewpage', function(e, ui) {
+					// var url = ui.xmlhttp.getResponseHeader('x-frontend-url');
+					var url = $(this).find(':input[name=StageURLSegment]').val();
+					if(url) self.loadUrl(url);
+				});
+		
+				this._super();
+			},
+			
+			loadUrl: function(url) {
+				this.find('iframe').attr('src', url);
+			},
+			
+			_fixIframeLinks: function() {
+				var doc = this.find('iframe')[0].contentDocument;
+
+				// Block outside links from going anywhere
+				var links = doc.getElementsByTagName('A');
+				for (var i = 0; i < links.length; i++) {
+					var href = links[i].getAttribute('href');
+					if (href && href.match(/^http:\/\//)) {
+						links[i].setAttribute('href', 'javascript:false');
+					}
+				}
+
+				// Load this page in the admin interface if appropriate
+				var id = $(doc).find('meta[name=x-page-id]').attr('content'), form = $('.cms-edit-form');
+				// TODO Remove hardcoding
+				if(id && form.find(':input[name=ID]').val() != id) form.loadForm('admin/page/edit/show/' + id);
+			},
+			
+			toggle: function() {
+				var self = this, 
+					width = this.width(), 
+					relayout = function() {$('.cms-container').layout({resize: false});},
+					minWidth = this.find('.cms-preview-toggle').width(),
+					wasCollapsed = (width <= minWidth), 
+					sharedWidth = $('.cms-content').width() / 2, // half of content area by default
+					newWidth = wasCollapsed ? sharedWidth : minWidth,
+					newOverflow = wasCollapsed ? 'auto' : 'hidden';
+					
+				this.css('overflow', newOverflow).width(newWidth);
+				this.toggleClass('collapsed', !wasCollapsed).toggleClass('expanded', wasCollapsed);
+				this.find('iframe').toggle(wasCollapsed);
+				relayout();
+				
+				// this.css('overflow', newOverflow).animate(
+				// 	{width: newWidth+'px'},
+				// 	{
+				// 		duration: 500, 
+				// 		complete: function() {
+				// 			relayout();
+				// 			self.toggleClass('collapsed', !wasCollapsed).toggleClass('expanded', wasCollapsed);
+				// 			self.find('iframe').toggle(wasCollapsed);
+				// 		}, 
+				// 		step: relayout
+				// 	}
+				// );
+			}
+		});
+		
+		$('.LeftAndMain .cms-preview.collapsed').entwine({
+			onmatch: function() {
+				this.find('a').text('<');
+			}
+		});
+		
+		$('.LeftAndMain .cms-preview.expanded').entwine({
+			onmatch: function() {
+				this.find('a').text('>');
+			}
+		});
+		
+		$('.LeftAndMain .cms-preview .cms-preview-toggle').entwine({
+			onclick: function(e) {
+				e.preventDefault();
+				this.parents('.cms-preview').toggle();
+			}
+		});
+	});
+}(jQuery));
\ No newline at end of file
diff --git a/admin/scss/_layout.scss b/admin/scss/_layout.scss
index 273ccb469..8328709d8 100644
--- a/admin/scss/_layout.scss
+++ b/admin/scss/_layout.scss
@@ -14,6 +14,20 @@ html, body {
 	overflow: hidden; // avoid jlayout jitter when resizing
 }
 
+.cms-preview {
+	width: 1px; // collapsed by default
+	overflow: hidden;
+		
+	.cms-preview-toggle {
+		width: 10px;
+	}
+	
+	iframe {
+		width: 100%;
+		height: 100%;
+	}
+}
+
 .cms-container {
 	height: 100%
 }
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 5260d6e25..d1145624d 100644
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -281,4 +281,19 @@ strong {
 	background-color: #FFBE66;
 	padding: 10px;
 	font-weight: bold;
+}
+
+// ######################### Other #########################
+.cms-preview {
+	background-color: $color-base;
+	
+	.cms-preview-toggle {
+		cursor: pointer;
+		
+		a {
+			color: $color-text-light;
+			font-weight: bold;
+			text-decoration: none;
+		}
+	}
 }
\ No newline at end of file
diff --git a/admin/templates/LeftAndMain.ss b/admin/templates/LeftAndMain.ss
index 2be4797ff..1fe5b11fb 100644
--- a/admin/templates/LeftAndMain.ss
+++ b/admin/templates/LeftAndMain.ss
@@ -11,8 +11,8 @@
 	
 	<% include CMSLoadingScreen %>
 	
-	<div class="cms-container" data-layout="{type: 'border'}">
-		
+	<div class="cms-container center" data-layout="{type: 'border'}">
+	
 		<div class="cms-preview-header north">
 			Caution! The CMS is in alpha stage, and might not behave as expected. Get updates on the 
 			<a href="https://groups.google.com/forum/#!forum/silverstripe-dev">developer mailinglist</a>
@@ -24,9 +24,15 @@
 		$Menu
 
 		$Content
+		
+		<% if currentPage %>
+		<div class="cms-preview east">
+			<iframe src="$currentPage.Link"></iframe>
+		</div>
+		<% end_if %>
 
 	</div>
-	
+		
 	<div id="cms-editor-dialogs">
 		<% control EditorToolbar %>
 			$ImageForm