tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Ingo Schommer 2011-05-15 15:43:21 +12:00
parent 6649d69b39
commit 2b56d2a8d8
8 changed files with 125 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
admin/code/LeftAndMain.php
View File

@ -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'

2
admin/css/layout.css
View File

@ -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%; }

5
admin/css/screen.css
View File

@ -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; }

17
admin/javascript/LeftAndMain.Menu.js Normal file
View File

@ -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));

100
admin/javascript/LeftAndMain.Preview.js
View File

@ -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('<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
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('&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,
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));

10
admin/javascript/LeftAndMain.js
View File

@ -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();
}
});

18
admin/scss/_style.scss
View File

@ -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
}
}
}
}

6
admin/templates/LeftAndMain.ss
View File

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