diff --git a/admin/css/screen.css b/admin/css/screen.css index 9b1336f45..490fd26e4 100644 --- a/admin/css/screen.css +++ b/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 .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 { -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; } .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 .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.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 .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.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 .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.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.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; } +.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; } +.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; } +.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: diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index 7d3179f3e..ae3ed3d7d 100644 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/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') - .addClass(sizeName); + this.setCurrentSizeName(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; diff --git a/admin/scss/_preview.scss b/admin/scss/_preview.scss index 483911a22..921a02b04 100644 --- a/admin/scss/_preview.scss +++ b/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; } } \ No newline at end of file diff --git a/docs/en/reference/preview.md b/docs/en/reference/preview.md index 517ab8c2b..94a3287b1 100644 --- a/docs/en/reference/preview.md +++ b/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. +## 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