Skip to content

Commit

Permalink
FEATURE Preview changes of page edits in CMS on website (through <ifr…
Browse files Browse the repository at this point in the history
…ame> sidebar)
  • Loading branch information
chillu committed Apr 28, 2011
1 parent afa05f9 commit 0fd6924
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 15 deletions.
2 changes: 2 additions & 0 deletions admin/code/LeftAndMain.php
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ function init() {
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');
Expand Down Expand Up @@ -286,6 +287,7 @@ function init() {
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',
)
);
Expand Down
36 changes: 25 additions & 11 deletions admin/css/screen.css
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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 changes: 1 addition & 1 deletion admin/javascript/LeftAndMain.EditForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
102 changes: 102 additions & 0 deletions admin/javascript/LeftAndMain.Preview.js
Original file line number Diff line number Diff line change
@@ -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 changes: 14 additions & 0 deletions admin/scss/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%
}
Expand Down
15 changes: 15 additions & 0 deletions admin/scss/_style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 9 additions & 3 deletions admin/templates/LeftAndMain.ss
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down

0 comments on commit 0fd6924

Please sign in to comment.