FEATURE Preview panel to show CMS changes on actual website. Navigating in preview loads new page for editing in CMS.

admin/code/LeftAndMain.php

@@ -1074,12 +1074,17 @@ class LeftAndMain extends Controller {
 	}
 	
 	/**
-	 * Get the staus of a certain page and version.
+	 * URL to a previewable record which is shown through this controller.
+	 * The controller might not have any previewable content, in which case 
+	 * this method returns FALSE.
 	 * 
-	 * This function is used for concurrent editing, and providing alerts
+	 * @return String|boolean
-	 * when multiple users are editing a single page. It echoes a json
-	 * encoded string to the UA.
 	 */
+	public function PreviewLink() {
+		$record = $this->getRecord($this->currentPageID());
+		$baseLink = ($record && $record instanceof Page) ? $record->Link('?stage=Stage') : Director::absoluteBaseURL();
+		return Controller::join_links($baseLink, '?cms-preview-disabled=1');
+	}
 
 	/**
 	 * Return the version number of this application.
@@ -1166,6 +1171,10 @@ class LeftAndMain extends Controller {
 		return MCE_ROOT;
 	}
 	
+	function IsPreviewExpanded() {
+		return ($this->request->getVar('cms-preview-expanded'));
+	}
+	
 	/**
 	 * Register the given javascript file as required in the CMS.
 	 * Filenames should be relative to the base, eg, SAPPHIRE_DIR . '/javascript/loader.js'

admin/css/layout.css

@@ -17,7 +17,7 @@ a img { border: none; }
 @charset "UTF-8";
 html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
 
-.cms-preview { width: 1px; overflow: hidden; }
+.cms-preview { width: 1px; }
 .cms-preview .cms-preview-toggle { width: 10px; }
 .cms-preview iframe { width: 100%; height: 100%; }
 

admin/css/screen.css

@@ -297,7 +297,7 @@ form.member-profile-form .formattingHelpText ul { padding: 0; }
 form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; margin-bottom: 2px; }
 
 .cms-panel { overflow: hidden; }
-.cms-panel .toggle-expand, .cms-panel .toggle-collapse { display: block; position: absolute; bottom: 0; text-align: right; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbfc7), color-stop(100%, #91a7b2)); background-image: -moz-linear-gradient(top, #afbfc7 0%, #91a7b2 100%); background-image: linear-gradient(top, #afbfc7 0%, #91a7b2 100%); }
+.cms-panel .toggle-expand, .cms-panel .toggle-collapse { display: block; position: absolute; bottom: 0; text-align: right; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbfc7), color-stop(100%, #91a7b2)); background-image: -moz-linear-gradient(top, #afbfc7 0%, #91a7b2 100%); background-image: linear-gradient(top, #afbfc7 0%, #91a7b2 100%); text-decoration: none; }
 .cms-panel .toggle-expand span, .cms-panel .toggle-collapse span { display: inline-block; margin: 5px; color: #333333; font-size: 16px; }
 .cms-panel .toggle-collapse { width: 100%; }
 .cms-panel .toggle-expand { width: 40px; }
@@ -308,6 +308,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333;
 
 .cms-preview { background-color: #b0bfc6; }
 .cms-preview .cms-preview-toggle { cursor: pointer; }
-.cms-preview .cms-preview-toggle a { color: white; font-weight: bold; text-decoration: none; }
+.cms-preview .cms-preview-toggle a { display: block; width: 15px; height: 15px; position: relative; left: 10px; top: 48%; background-color: #b0bfc6; color: white; font-weight: bold; text-decoration: none; z-index: 2000; }
+.cms-preview.is-collapsed .cms-preview-toggle a { left: -15px; }
 
 .cms-switch-view a { padding-right: 1em; }

admin/javascript/LeftAndMain.Menu.js

@@ -0,0 +1,17 @@
+(function($) {
+	
+	$.entwine('ss', function($){
+		
+		$('.cms-menu').entwine({
+			
+		});
+		
+		$('.cms-menu.collapsed li').entwine({
+			onclick: function() {
+				// the container is overflow: hidden, so we need to break the subnavigation out of it	
+				// return false;
+			}
+		});
+		
+	});
+}(jQuery));

admin/javascript/LeftAndMain.Preview.js

@@ -1,7 +1,10 @@
 (function($) {
+	
 	$.entwine('ss', function($){
+
 		$('.LeftAndMain .cms-preview').entwine({
 			
+			// Minimum width to keep the CMS operational
 			SharedWidth: null,
 			
 			onmatch: function() {
@@ -17,19 +20,26 @@
 				this.setSharedWidth(500);
 				
 				// Create layout and controls
-				this.prepend('<div class="cms-preview-toggle west"><a href="#">&lt;</a></div>');
+				this.prepend('<div class="cms-preview-toggle west"><a href="#">&laquo;</a></div>');
 				this.find('iframe').addClass('center');
 				this.layout({type: 'border'});
 		
-				this.find('iframe').bind('load', function() {self._fixIframeLinks();});
+				this.find('iframe').bind('load', function() {
+					self._fixIframeLinks();
+					self.loadCurrentPage();
+				});
 				self._fixIframeLinks();
 				
-				$('.cms-edit-form').bind('loadnewpage', function(e, ui) {
+				// Limit to CMS forms for the moment
+				$('.CMSMain .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);
+					if(url) self.loadUrl(url + '&cms-preview-disabled=1');
 				});
 
+				if(this.hasClass('is-expanded')) this.expand();
+				else this.collapse();
+		
 				this._super();
 			},
 			
@@ -37,6 +47,18 @@
 				this.find('iframe').attr('src', url);
 			},
 			
+			loadCurrentPage: function() {				
+				var doc = this.find('iframe')[0].contentDocument, container = this.getLayoutContainer();
+
+				// Only load if we're in the "edit page" view
+				if(!container.hasClass('CMSMain')) return;
+
+				// 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);
+			},
+			
 			_fixIframeLinks: function() {
 				var doc = this.find('iframe')[0].contentDocument;
 
@@ -46,41 +68,40 @@
 					var href = links[i].getAttribute('href');
 					if (href && href.match(/^http:\/\//)) {
 						links[i].setAttribute('href', 'javascript:false');
+					} else {
+						links[i].setAttribute('href', href + '?cms-preview=1');
 					}
 				}
+			},
 			
-				// Load this page in the admin interface if appropriate
+			expand: function() {
-				var id = $(doc).find('meta[name=x-page-id]').attr('content'), form = $('.cms-edit-form');
+				var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
-				// TODO Remove hardcoding
+				this.removeClass('east').addClass('center').removeClass('is-collapsed');
-				if(id && form.find(':input[name=ID]').val() != id) form.loadForm('admin/page/edit/show/' + id);
+				// this.css('overflow', 'auto');
+				contentEl.removeClass('center').hide();
+				this.find('iframe').show();
+				containerEl.find('.cms-menu').collapsePanel();
+				this.find('.cms-preview-toggle a').html('&raquo;');
+				containerEl.redraw();
+			},
+			
+			collapse: function() {
+				var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content');
+				this.addClass('east').removeClass('center').addClass('is-collapsed').width(10);
+				// this.css('overflow', 'hidden');
+				contentEl.addClass('center').show();
+				this.find('iframe').hide();
+				containerEl.find('.cms-menu').expandPanel();
+				this.find('.cms-preview-toggle a').html('&laquo;');
+				containerEl.redraw();
+			},
+			
+			getLayoutContainer: function() {
+				return this.parents('.LeftAndMain');
 			},
 			
 			toggle: function(bool) {
-				var self = this, 
+				this[this.hasClass('is-collapsed') ? 'expand' : 'collapse']();
-					width = this.width(), 
-					relayout = function() {$('.cms-container').layout({resize: false});},
-					minWidth = this.find('.cms-preview-toggle').width(),
-					wasCollapsed = (bool === true || bool === false) ? bool : (width <= minWidth), 
-					newWidth = wasCollapsed ? this.getSharedWidth() : 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
-				// 	}
-				// );
 			}
 		});
 		
@@ -111,5 +132,16 @@
 				preview.loadUrl($(e.target).attr('href'));
 			}
 		});
+		
+		$('.LeftAndMain .cms-menu li').entwine({
+			onclick: function(e) {
+				// Prevent reloading of interface when opening the edit panel
+				if(this.hasClass('Menu-CMSMain')) {
+					var preview = $('.cms-preview');
+					preview.toggle(true);
+					e.preventDefault();
+				}
+			}
+		});
 	});
 }(jQuery));

admin/javascript/LeftAndMain.js

@@ -65,8 +65,8 @@
 				}
 				
 				// Initialize layouts, inner to outer
-				this.updateLayout();
+				this.redraw();
-				$(window).resize(function() {self.updateLayout()});
+				$(window).resize(function() {self.redraw()});
 				
 				// Remove loading screen
 				$('.ss-loading-screen').hide();
@@ -75,12 +75,12 @@
 
 				this._setupPinging();
 
-				$('.cms-edit-form').live('loadnewpage', function() {self.updateLayout()});
+				$('.cms-edit-form').live('loadnewpage', function() {self.redraw()});
 
 				this._super();
 			},
 			
-			updateLayout: function() {
+			redraw: function() {
 				$('.cms-content').layout();
 				$('.cms-container').layout({resize: false})
 			},
@@ -120,7 +120,7 @@
 		 */
 		$('.LeftAndMain .cms-panel').entwine({
 			ontoggle: function(e) {
-				this.parents('.LeftAndMain').updateLayout();
+				this.parents('.LeftAndMain').redraw();
 			}
 		});
 

admin/scss/_style.scss

@@ -342,7 +342,6 @@ strong {
 // ######################### Preview header (remove before release) #########################
 .cms-preview {
 	width: 1px; // collapsed by default
-	overflow: hidden;
 		
 	.cms-preview-toggle {
 		width: 10px;
@@ -424,6 +423,7 @@ form.member-profile-form {
 			darken($color-widget-bg, 20%),
 			darken($color-widget-bg, 30%)
 		));
+		text-decoration: none;
 		
 		span {
 			display: inline-block;
@@ -469,9 +469,25 @@ form.member-profile-form {
 		cursor: pointer;
 		
 		a {
+			display: block;
+			width: 15px;
+			height: 15px;
+			position: relative;
+			left: 10px; // point right (width of toggle)
+			top: 48%;
+			background-color: $color-base;
 			color: $color-text-light;
 			font-weight: bold;
 			text-decoration: none;
+			z-index: 2000;
+		}
+	}
+	
+	&.is-collapsed {
+		.cms-preview-toggle {
+			a {
+				left: -15px; // point left
+			}
 		}
 	}
 }

admin/templates/LeftAndMain.ss

@@ -25,11 +25,9 @@
 
 		$Content
 		
-		<% if currentPage %>
+		<div class="cms-preview east <% if IsPreviewExpanded %>is-expanded<% else %>is-collapsed<% end_if %>">
-		<div class="cms-preview east">
+			<iframe src="$PreviewLink"></iframe>
-			<iframe src="$currentPage.Link/?stage=Stage"></iframe>
 		</div>
-		<% end_if %>
 
 	</div>