Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

FEATURE Preview panel to show CMS changes on actual website. Navigati…

…ng in preview loads new page for editing in CMS.
  • Loading branch information...
commit 2b56d2a8d864c00c9e7b9777e914e6d0f0198dd1 1 parent 6649d69
@chillu chillu authored
View
19 admin/code/LeftAndMain.php
@@ -1074,12 +1074,17 @@ public function isCurrentPage(DataObject $record) {
}
/**
- * 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 @@ function MceRoot() {
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'
View
2  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%; }
View
5 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; }
View
17 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));
View
100 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('<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));
View
10 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();
}
});
View
18 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
+ }
}
}
}
View
6 admin/templates/LeftAndMain.ss
@@ -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>
Please sign in to comment.
Something went wrong with that request. Please try again.