Permalink
Browse files

FEATURE Preview changes of page edits in CMS on website (through <ifr…

…ame> sidebar)
  • Loading branch information...
1 parent afa05f9 commit 0fd6924fe1748b3b4c7ea3eae2d30c862025b3a2 @chillu chillu committed Apr 28, 2011
@@ -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');
@@ -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',
)
);
View
@@ -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; }
@@ -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
@@ -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));
View
@@ -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%
}
View
@@ -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;
+ }
+ }
}
@@ -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

0 comments on commit 0fd6924

Please sign in to comment.