Merge pull request #1101 from chillu/pulls/preview-configuration

NEW Preview size and default mode configurability

admin/css/screen.css

@@ -925,17 +925,17 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; }
 .cms-preview.mobile .preview-scroll, .cms-preview.mobileLandscape .preview-scroll, .cms-preview.tablet .preview-scroll, .cms-preview.tabletLandscape .preview-scroll, .cms-preview.desktop .preview-scroll { background-color: #eceff1; /* cover website preview icon */ }
 .cms-preview.mobile .preview-scroll .preview-device-outer, .cms-preview.mobileLandscape .preview-scroll .preview-device-outer, .cms-preview.tablet .preview-scroll .preview-device-outer, .cms-preview.tabletLandscape .preview-scroll .preview-device-outer, .cms-preview.desktop .preview-scroll .preview-device-outer { -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; background: #d5dde2; border: 1px solid transparent; border-left: 1px solid #cfd9de; padding: 0 16px 16px; }
 .cms-preview.mobile .preview-scroll .preview-device-outer .preview-device-inner, .cms-preview.mobileLandscape .preview-scroll .preview-device-outer .preview-device-inner, .cms-preview.tablet .preview-scroll .preview-device-outer .preview-device-inner, .cms-preview.tabletLandscape .preview-scroll .preview-device-outer .preview-device-inner, .cms-preview.desktop .preview-scroll .preview-device-outer .preview-device-inner { border-top: 2px solid #e1e7ea; border-right: 1px solid transparent; border-bottom: 1px solid #e1e7ea; border-left: 1px solid #c3cfd6; }
-.cms-preview.mobile .preview-scroll .preview-device-outer { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease-in; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-in 1s; -o-transition: all 0.3s ease-in 1s; transition: all 0.3s ease-in 1s; height: 568px; margin: 20px auto 20px; overflow: hidden; padding-top: 16px; width: 335px; }
+.cms-preview.mobile .preview-scroll .preview-device-outer { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease-in; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-in 1s; -o-transition: all 0.3s ease-in 1s; transition: all 0.3s ease-in 1s; margin: 20px auto 20px; overflow: hidden; padding-top: 16px; }
-.cms-preview.mobile .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; width: 335px; }
+.cms-preview.mobile .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; }
 .cms-preview.mobile .preview-scroll .preview-device-outer.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.3s ease-in; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-in 1s; -o-transition: all 0.3s ease-in 1s; transition: all 0.3s ease-in 1s; height: 583px; margin: 0px auto 0px; width: 320px; }
 .cms-preview.mobile .preview-scroll .preview-device-outer.rotate .preview-device-inner { -webkit-transform-origin: 160px 160px; -moz-transform-origin: 160px 160px; -ms-transform-origin: 160px 160px; -o-transform-origin: 160px 160px; transform-origin: 160px 160px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 320px; width: 583px; }
-.cms-preview.mobileLandscape .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 320px; margin: 12% auto; padding-top: 16px; width: 583px; }
+.cms-preview.mobileLandscape .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; margin: 12% auto; padding-top: 16px; }
-.cms-preview.mobileLandscape .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; width: 583px; }
+.cms-preview.mobileLandscape .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; }
-.cms-preview.tablet .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 1024px; margin: 0 auto; width: 783px; }
+.cms-preview.tablet .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; margin: 0 auto; }
-.cms-preview.tablet .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; width: 783px; }
+.cms-preview.tablet .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; }
-.cms-preview.tabletLandscape .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 768px; margin: 0 auto; width: 1039px; }
+.cms-preview.tabletLandscape .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; margin: 0 auto; }
-.cms-preview.tabletLandscape .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; width: 1039px; }
+.cms-preview.tabletLandscape .preview-scroll .preview-device-outer .preview-device-inner { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; }
-.cms-preview.desktop .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 800px; margin: 0 auto; width: 1024px; }
+.cms-preview.desktop .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; margin: 0 auto; }
 
 /********************************************
 * Defines the styles for .ss-ui-action-tabset:

admin/javascript/LeftAndMain.Preview.js

@@ -36,6 +36,34 @@
 			 */
 			IsPreviewEnabled: false,
 
+			/**
+			 * Mode in which the preview will be enabled.
+			 */
+			DefaultMode: 'split',
+
+			Sizes: {
+				mobile: {
+					width: '335px', // add 15px for approx desktop scrollbar 
+					height: '568px' 
+				},
+				mobileLandscape: {
+					width: '583px', // add 15px for approx desktop scrollbar
+					height: '320px'
+				},
+				tablet: {
+					width: '783px', // add 15px for approx desktop scrollbar
+					height: '1024px'
+				},
+				tabletLandscape: {
+					width: '1039px', // add 15px for approx desktop scrollbar
+					height: '768px'
+				},
+				desktop: {
+					width: '1024px',
+					height: '800px'
+				}
+			},
+
 			/**
 			 * API
 			 * Switch the preview to different state.
@@ -76,10 +104,15 @@
 			 * sizeName can be: auto, desktop, tablet, mobile.
 			 */
 			changeSize: function(sizeName) {
-				this.setCurrentSizeName(sizeName);
+				var sizes = this.getSizes();
 
-				this.removeClass('auto desktop tablet mobile')
+				this.setCurrentSizeName(sizeName);
-					.addClass(sizeName);
+				this.removeClass('auto desktop tablet mobile').addClass(sizeName);
+				this.find('.preview-device-outer')
+					.width(sizes[sizeName].width)
+					.height(sizes[sizeName].height);
+				this.find('.preview-device-inner')
+					.width(sizes[sizeName].width);
 
 				this.redraw();
 
@@ -140,7 +173,7 @@
 						// We do not support the split mode in IE < 8.
 						this.changeMode('content');
 					} else {
-						this.changeMode('split');
+						this.changeMode(this.getDefaultMode());
 					}
 				}
 				return this;

admin/scss/_preview.scss

@@ -284,15 +284,12 @@
 		.preview-scroll .preview-device-outer {
 			@include rotate(0deg);
 			@include transition(all 0.3s ease-in 1s);
-			height: 568px;
 			margin: 20px auto 20px;
 			overflow:hidden;
 			padding-top: 16px;			
-			width: 335px; // add 15px for approx desktop scrollbar 
 			.preview-device-inner {
 				@include rotate(0deg);
 				@include transition(all 0.3s ease-out 1s);				
-				width: 335px;
 			}
 			&.rotate {				
 				@include rotate(-90deg); 
@@ -312,39 +309,28 @@
 	}
 	&.mobileLandscape .preview-scroll .preview-device-outer {
 		@include transition(all 0.3s ease-out 1s);
-		height: 320px;
 		margin: 12% auto;
 		padding-top: 16px;
-		width: 583px; // add 15px for approx desktop scrollbar 		
 		.preview-device-inner {			
 			@include transition(all 0.3s ease-out 1s);
-			width: 583px;
 		}
 	}
 	&.tablet .preview-scroll .preview-device-outer { 
 		@include transition(all 0.3s ease-out 1s);			
-		height: 1024px;
 		margin: 0 auto;
-		width: 783px; // add 15px for approx desktop scrollbar 
 		.preview-device-inner {			
 			@include transition(all 0.3s ease-out 1s);
-			width: 783px;
 		}
 	}
 	&.tabletLandscape .preview-scroll .preview-device-outer {
 		@include transition(all 0.3s ease-out 1s);	
-		height: 768px;
 		margin: 0 auto;
-		width: 1039px;// add 15px for approx desktop scrollbar 	
 		.preview-device-inner {			
 			@include transition(all 0.3s ease-out 1s);
-			width: 1039px;
 		}
 	}
 	&.desktop .preview-scroll .preview-device-outer {
 		@include transition(all 0.3s ease-out 1s);		
-		height: 800px;
 		margin: 0 auto;
-		width: 1024px;
 	}
 }

docs/en/reference/preview.md

@@ -22,6 +22,57 @@ _Versioned_.  They are not general enough for using on any other DataObject. Tha
 of the feature.
 </div>
 
+## Configuration and Defaults
+
+Like most of the CMS, the preview UI is powered by 
+[jQuery entwine](https://github.com/hafriedlander/jquery.entwine).
+This means its defaults are configured through JavaScript, by setting entwine properties.
+In order to achieve this, create a new file `mysite/javascript/MyLeftAndMain.Preview.js`.
+
+In the following example we configure three aspects:
+ 
+ * Set the default mode from "split view" to a full "edit view"
+ * Make a wider mobile preview
+ * Increase minimum space required by preview before auto-hiding
+
+Note how the configuration happens in different entwine namespaces
+("ss.preview" and "ss"), as well as applies to different selectors
+(".cms-preview" and ".cms-container").
+
+	:::js
+	(function($) {
+		$.entwine('ss.preview', function($){
+			$('.cms-preview').entwine({
+				DefaultMode: 'content',
+				getSizes: function() {
+					var sizes = this._super();
+					sizes.mobile.width = '400px';
+					return sizes;
+				}
+			});
+		});
+		$.entwine('ss', function($){
+			$('.cms-container').entwine({
+				getLayoutOptions: function() {
+					var opts = this._super();
+					opts.minPreviewWidth = 600;
+					return opts;
+				}
+			});
+		});
+	});
+	}(jQuery));
+
+Load the file in the CMS via an addition to `mysite/_config.php`:
+
+	:::php
+	LeftAndMain::require_javascript('mysite/javascript/MyLeftAndMain.Preview.js');
+
+In order to find out which configuration values are available, the source code
+is your best reference at the moment - have a look in `framework/admin/javascript/LeftAndMain.Preview.js`.
+To understand how layouts are handled in the CMS UI, have a look at the
+[CMS Architecture](/reference/cms-architecture) guide.
+
 ## Enabling preview
 
 The frontend decides on the preview being enabled or disabled based on the presnce of the `.cms-previewable` class. If