tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-06-26 14:39:25 +02:00
Code Issues Projects Releases Wiki Activity

FEATURE Preview changes of page edits in CMS on website (through <iframe> sidebar)

Browse Source
This commit is contained in:
Ingo Schommer 2011-04-28 22:36:28 +12:00
parent afa05f93dd
commit 0fd6924fe1
7 changed files with 168 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/code/LeftAndMain.php
View File

@ -232,6 +232,7 @@ class LeftAndMain extends Controller {
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js');
Requirements::themedCSS('typography');
@ -286,6 +287,7 @@ class LeftAndMain extends Controller {
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js',
)
);

36
admin/css/screen.css
View File

@ -29,36 +29,43 @@ a img { border: none; }
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
/* line 17, ../scss/_layout.scss */
.cms-preview { width: 1px; overflow: hidden; }
/* line 21, ../scss/_layout.scss */
.cms-preview .cms-preview-toggle { width: 10px; }
/* line 25, ../scss/_layout.scss */
.cms-preview iframe { width: 100%; height: 100%; }
/* line 31, ../scss/_layout.scss */
.cms-container { height: 100%; }
/* line 21, ../scss/_layout.scss */
/* line 35, ../scss/_layout.scss */
.cms-menu { width: 250px; overflow: auto; }
/* line 33, ../scss/_layout.scss */
/* line 47, ../scss/_layout.scss */
.cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
/* line 7, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
.cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { *display: inline; }
/* line 37, ../scss/_layout.scss */
/* line 51, ../scss/_layout.scss */
.cms-content-tools { width: 250px; overflow: auto; }
/* line 42, ../scss/_layout.scss */
/* line 56, ../scss/_layout.scss */
.cms-content-form { overflow: auto; }
/* line 46, ../scss/_layout.scss */
/* line 60, ../scss/_layout.scss */
.cms-content-header { height: 40px; }
/* line 49, ../scss/_layout.scss */
/* line 63, ../scss/_layout.scss */
.cms-content-header h2 { width: 226px; }
/* line 53, ../scss/_layout.scss */
/* line 67, ../scss/_layout.scss */
.cms-content-header > div { width: 9999em; overflow: hidden; }
/* line 59, ../scss/_layout.scss */
/* line 73, ../scss/_layout.scss */
.cms-content-actions { padding: 10px; }
/* line 63, ../scss/_layout.scss */
/* line 77, ../scss/_layout.scss */
.cms-logo { height: 30px; overflow: hidden; vertical-align: middle; }
/* line 69, ../scss/_layout.scss */
/* line 83, ../scss/_layout.scss */
.cms-login-status { height: 30px; overflow: hidden; vertical-align: middle; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
@ -241,7 +248,7 @@ li.jstree-closed > ul { display: none; }
/* line 20, ../scss/_menu.scss */
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #aaaaaa 1px 1px 1px; color: #333333; padding: 5px; }
/* line 29, ../scss/_menu.scss */
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303602411') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1303890208') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
/* line 37, ../scss/_menu.scss */
.cms-menu-list li a .text { display: block; padding-top: 10px; }
/* line 43, ../scss/_menu.scss */
@ -427,3 +434,10 @@ strong { font-weight: bold; }
/* line 280, ../scss/_style.scss */
.cms-preview-header { background-color: #FFBE66; padding: 10px; font-weight: bold; }
/* line 287, ../scss/_style.scss */
.cms-preview { background-color: #b0bfc6; }
/* line 290, ../scss/_style.scss */
.cms-preview .cms-preview-toggle { cursor: pointer; }
/* line 293, ../scss/_style.scss */
.cms-preview .cms-preview-toggle a { color: white; font-weight: bold; text-decoration: none; }

2
admin/javascript/LeftAndMain.EditForm.js
View File

@ -351,7 +351,7 @@
// focus input on first form element
this.find(':input:visible:first').focus();
this.trigger('loadnewpage', {data: data, origData: origData});
this.trigger('loadnewpage', {data: data, origData: origData, xmlhttp: xmlhttp});
}
// set status message based on response

102
admin/javascript/LeftAndMain.Preview.js Normal file
View File

@ -0,0 +1,102 @@
(function($) {
$.entwine('ss', function($){
$('.LeftAndMain .cms-preview').entwine({
onmatch: function() {
var self = this, layoutContainer = this.parent();
// this.resizable({
// handles: 'w',
// stop: function(e, ui) {
// $('.cms-container').layout({resize: false});
// }
// });
// Create layout and controls
this.prepend('<div class="cms-preview-toggle west"><a href="#">&lt;</a></div>');
this.find('iframe').addClass('center');
this.layout({type: 'border'});
this.find('iframe').bind('load', function() {self._fixIframeLinks();});
self._fixIframeLinks();
$('.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);
});
this._super();
},
loadUrl: function(url) {
this.find('iframe').attr('src', url);
},
_fixIframeLinks: function() {
var doc = this.find('iframe')[0].contentDocument;
// Block outside links from going anywhere
var links = doc.getElementsByTagName('A');
for (var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
if (href && href.match(/^http:\/\//)) {
links[i].setAttribute('href', 'javascript:false');
}
}
// 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);
},
toggle: function() {
var self = this,
width = this.width(),
relayout = function() {$('.cms-container').layout({resize: false});},
minWidth = this.find('.cms-preview-toggle').width(),
wasCollapsed = (width <= minWidth),
sharedWidth = $('.cms-content').width() / 2, // half of content area by default
newWidth = wasCollapsed ? sharedWidth : 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
// }
// );
}
});
$('.LeftAndMain .cms-preview.collapsed').entwine({
onmatch: function() {
this.find('a').text('<');
}
});
$('.LeftAndMain .cms-preview.expanded').entwine({
onmatch: function() {
this.find('a').text('>');
}
});
$('.LeftAndMain .cms-preview .cms-preview-toggle').entwine({
onclick: function(e) {
e.preventDefault();
this.parents('.cms-preview').toggle();
}
});
});
}(jQuery));

14
admin/scss/_layout.scss
View File

@ -14,6 +14,20 @@ html, body {
overflow: hidden; // avoid jlayout jitter when resizing
}
.cms-preview {
width: 1px; // collapsed by default
overflow: hidden;
.cms-preview-toggle {
width: 10px;
}
iframe {
width: 100%;
height: 100%;
}
}
.cms-container {
height: 100%
}

15
admin/scss/_style.scss
View File

@ -281,4 +281,19 @@ strong {
background-color: #FFBE66;
padding: 10px;
font-weight: bold;
}
// ######################### Other #########################
.cms-preview {
background-color: $color-base;
.cms-preview-toggle {
cursor: pointer;
a {
color: $color-text-light;
font-weight: bold;
text-decoration: none;
}
}
}

12
admin/templates/LeftAndMain.ss
View File

@ -11,8 +11,8 @@
<% include CMSLoadingScreen %>
<div class="cms-container" data-layout="{type: 'border'}">
<div class="cms-container center" data-layout="{type: 'border'}">
<div class="cms-preview-header north">
Caution! The CMS is in alpha stage, and might not behave as expected. Get updates on the
<a href="https://groups.google.com/forum/#!forum/silverstripe-dev">developer mailinglist</a>
@ -24,9 +24,15 @@
$Menu
$Content
<% if currentPage %>
<div class="cms-preview east">
<iframe src="$currentPage.Link"></iframe>
</div>
<% end_if %>
</div>
<div id="cms-editor-dialogs">
<% control EditorToolbar %>
$ImageForm