From 2b56d2a8d864c00c9e7b9777e914e6d0f0198dd1 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sun, 15 May 2011 15:43:21 +1200 Subject: [PATCH] FEATURE Preview panel to show CMS changes on actual website. Navigating in preview loads new page for editing in CMS. --- admin/code/LeftAndMain.php | 19 +++-- admin/css/layout.css | 2 +- admin/css/screen.css | 5 +- admin/javascript/LeftAndMain.Menu.js | 17 ++++ admin/javascript/LeftAndMain.Preview.js | 100 ++++++++++++++++-------- admin/javascript/LeftAndMain.js | 10 +-- admin/scss/_style.scss | 18 ++++- admin/templates/LeftAndMain.ss | 6 +- 8 files changed, 125 insertions(+), 52 deletions(-) create mode 100644 admin/javascript/LeftAndMain.Menu.js diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index df50f0fd5..79241a516 100755 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -1074,12 +1074,17 @@ class LeftAndMain extends Controller { } /** - * Get the staus of a certain page and version. - * - * This function is used for concurrent editing, and providing alerts - * when multiple users are editing a single page. It echoes a json - * encoded string to the UA. + * 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. + * + * @return String|boolean */ + 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' diff --git a/admin/css/layout.css b/admin/css/layout.css index bae19c120..de4a5a1c4 100755 --- a/admin/css/layout.css +++ b/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%; } diff --git a/admin/css/screen.css b/admin/css/screen.css index 2a0c09228..06e3d7c45 100755 --- a/admin/css/screen.css +++ b/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; } diff --git a/admin/javascript/LeftAndMain.Menu.js b/admin/javascript/LeftAndMain.Menu.js new file mode 100644 index 000000000..401c71b6f --- /dev/null +++ b/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)); \ No newline at end of file diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index a6ab43c28..c4507a300 100755 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/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,18 +20,25 @@ this.setSharedWidth(500); // Create layout and controls - this.prepend('
<
'); + this.prepend('
«
'); 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 - 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); + }, + + expand: function() { + var self = this, containerEl = this.getLayoutContainer(), contentEl = containerEl.find('.cms-content'); + this.removeClass('east').addClass('center').removeClass('is-collapsed'); + // this.css('overflow', 'auto'); + contentEl.removeClass('center').hide(); + this.find('iframe').show(); + containerEl.find('.cms-menu').collapsePanel(); + this.find('.cms-preview-toggle a').html('»'); + 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('«'); + containerEl.redraw(); + }, + + getLayoutContainer: function() { + return this.parents('.LeftAndMain'); }, toggle: function(bool) { - var self = this, - 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 - // } - // ); + this[this.hasClass('is-collapsed') ? 'expand' : 'collapse'](); } }); @@ -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)); \ No newline at end of file diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index ef57b1c28..868d4606b 100755 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -65,8 +65,8 @@ } // Initialize layouts, inner to outer - this.updateLayout(); - $(window).resize(function() {self.updateLayout()}); + this.redraw(); + $(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(); } }); diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 656e262ec..bfae6200b 100755 --- a/admin/scss/_style.scss +++ b/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 + } } } } diff --git a/admin/templates/LeftAndMain.ss b/admin/templates/LeftAndMain.ss index 165b9938a..cdfbc5ba1 100755 --- a/admin/templates/LeftAndMain.ss +++ b/admin/templates/LeftAndMain.ss @@ -25,11 +25,9 @@ $Content - <% if currentPage %> -
- +
+
- <% end_if %>