Permalink
Browse files

ENHANCEMENT $('.cms-preview').block()/unblock() for blocking preview …

…window when unavailable. Fixed duplicate addition of GET parameters in preview with new jQuery.query library for parameter parsing.
  • Loading branch information...
1 parent bc9fb12 commit e40d3d45c077c044b1f5fd1ab1da5740de7356c2 @chillu chillu committed Jul 15, 2011
Showing with 288 additions and 9 deletions.
  1. +2 −0 admin/code/LeftAndMain.php
  2. +62 −9 admin/javascript/LeftAndMain.Preview.js
  3. +224 −0 thirdparty/jquery-query/jquery.query.js
@@ -252,6 +252,7 @@ function init() {
Requirements::javascript(THIRDPARTY_DIR . '/behaviour/behaviour.js');
Requirements::javascript(THIRDPARTY_DIR . '/jquery-cookie/jquery.cookie.js');
+ Requirements::javascript(THIRDPARTY_DIR . '/jquery-query/jquery.query.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-notice/jquery.notice.js');
Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery-ondemand/jquery.ondemand.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/jquery-changetracker/lib/jquery.changetracker.js');
@@ -304,6 +305,7 @@ function init() {
THIRDPARTY_DIR . '/json-js/json2.js',
THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js',
THIRDPARTY_DIR . '/jquery-cookie/jquery.cookie.js',
+ THIRDPARTY_DIR . '/jquery-query/jquery.query.js',
SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-notice/jquery.notice.js',
THIRDPARTY_DIR . '/jquery-metadata/jquery.metadata.js',
SAPPHIRE_ADMIN_DIR . '/thirdparty/jsizes/lib/jquery.sizes.js',
@@ -2,6 +2,19 @@
$.entwine('ss', function($){
+ /**
+ * Shows a previewable website state alongside its editable version in backend UI, typically a page.
+ * This allows CMS users to seamlessly switch between preview and edit mode in the same browser window.
+ * The preview panel is embedded in the layout of the backend UI, and loads its content via an iframe.
+ *
+ * The admin UI itself is collapsible, leaving most screen space to this panel.
+ * Relies on the server responses to indicate if a preview URL is available for the currently loaded
+ * admin interface. If no preview is available, the panel is "blocked" automatically.
+ *
+ * When a CMS user is logged in, all page views are redirected to the same view in the CMS,
+ * with the preview window expanded. All internal links in the preview iframe are
+ * automatically rewritten to point to the version without the CMS via ?cms-preview-expanded=1.
+ */
$('.cms-preview').entwine({
// Minimum width to keep the CMS operational
@@ -30,21 +43,39 @@
});
self._fixIframeLinks();
- // Limit to CMS forms for the moment
- $('.cms-edit-form').bind('loadnewpage', function(e, ui) {
+ var updateAfterXhr = function() {
// var url = ui.xmlhttp.getResponseHeader('x-frontend-url');
- var url = $(this).find(':input[name=StageURLSegment]').val();
- if(url) self.loadUrl(url + '&cms-preview-disabled=1');
+ var url = $('.cms-edit-form').find(':input[name=StageURLSegment]').val();
+ if(url) {
+ url = url.replace(/\?.*/, '') + jQuery.query.load(url).set('cms-preview-disabled', '1').toString();
+ self.loadUrl(url);
+ self.unblock();
+ } else {
+ self.block();
+ }
+ }
+
+ // Listen to form loads. Limit to CMS forms for the moment
+ $('.cms-edit-form').bind('loadnewpage', function(e, ui) {
+ updateAfterXhr();
});
+ // Listen to history state changes
$('.cms-container').bind('afterstatechange', function(e) {
- // var url = ui.xmlhttp.getResponseHeader('x-frontend-url');
- var url = $('.cms-edit-form').find(':input[name=StageURLSegment]').val();
- if(url) self.loadUrl(url + '&cms-preview-disabled=1');
+ updateAfterXhr();
+ });
+
+ // Toggle preview when new menu entry is selected
+ $('.cms-menu-list li').bind('select', function(e) {
+ self.collapse();
});
if(this.hasClass('is-expanded')) this.expand();
else this.collapse();
+
+ // Preview might not be available in all admin interfaces - block/disable when necessary
+ this.append('<div class="cms-preview-overlay ui-widget-overlay"></div>');
+ this.find('.cms-preview-overlay').hide();
this._super();
},
@@ -76,10 +107,15 @@
var links = doc.getElementsByTagName('A');
for (var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
- if (href && href.match(/^http:\/\//)) {
+ if(!href) continue;
+
+ if (href.match(/^http:\/\//)) {
+ // Disable external links
links[i].setAttribute('href', 'javascript:false');
} else {
- links[i].setAttribute('href', href + '?cms-preview-disabled=1');
+ // Add GET parameter to internal links to avoid double redirects and infinitely nested CMS UIs
+ var previewUrl = href.replace(/\?.*/, '') + jQuery.query.load(href).set('cms-preview-disabled', '1').toString();
+ links[i].setAttribute('href', previewUrl);
}
}
},
@@ -106,6 +142,14 @@
containerEl.redraw();
},
+ block: function() {
+ this.addClass('blocked');
+ },
+
+ unblock: function() {
+ this.removeClass('blocked');
+ },
+
getLayoutContainer: function() {
return this.parents('.cms-container');
},
@@ -121,6 +165,15 @@
}
});
+ $('.cms-preview.blocked').entwine({
+ onmatch: function() {
+ this.find('.cms-preview-overlay').show();
+ },
+ onunmatch: function() {
+ this.find('.cms-preview-overlay').hide();
+ }
+ });
+
$('.cms-preview.expanded').entwine({
onmatch: function() {
this.find('a').text('>');
@@ -0,0 +1,224 @@
+/**
+ * jQuery.query - Query String Modification and Creation for jQuery
+ * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
+ * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
+ * Date: 2009/8/13
+ *
+ * @author Blair Mitchelmore
+ * @version 2.1.7
+ *
+ **/
+new function(settings) {
+ // Various Settings
+ var $separator = settings.separator || '&';
+ var $spaces = settings.spaces === false ? false : true;
+ var $suffix = settings.suffix === false ? '' : '[]';
+ var $prefix = settings.prefix === false ? false : true;
+ var $hash = $prefix ? settings.hash === true ? "#" : "?" : "";
+ var $numbers = settings.numbers === false ? false : true;
+
+ jQuery.query = new function() {
+ var is = function(o, t) {
+ return o != undefined && o !== null && (!!t ? o.constructor == t : true);
+ };
+ var parse = function(path) {
+ var m, rx = /\[([^[]*)\]/g, match = /^([^[]+)(\[.*\])?$/.exec(path), base = match[1], tokens = [];
+ while (m = rx.exec(match[2])) tokens.push(m[1]);
+ return [base, tokens];
+ };
+ var set = function(target, tokens, value) {
+ var o, token = tokens.shift();
+ if (typeof target != 'object') target = null;
+ if (token === "") {
+ if (!target) target = [];
+ if (is(target, Array)) {
+ target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
+ } else if (is(target, Object)) {
+ var i = 0;
+ while (target[i++] != null);
+ target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
+ } else {
+ target = [];
+ target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
+ }
+ } else if (token && token.match(/^\s*[0-9]+\s*$/)) {
+ var index = parseInt(token, 10);
+ if (!target) target = [];
+ target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
+ } else if (token) {
+ var index = token.replace(/^\s*|\s*$/g, "");
+ if (!target) target = {};
+ if (is(target, Array)) {
+ var temp = {};
+ for (var i = 0; i < target.length; ++i) {
+ temp[i] = target[i];
+ }
+ target = temp;
+ }
+ target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
+ } else {
+ return value;
+ }
+ return target;
+ };
+
+ var queryObject = function(a) {
+ var self = this;
+ self.keys = {};
+
+ if (a.queryObject) {
+ jQuery.each(a.get(), function(key, val) {
+ self.SET(key, val);
+ });
+ } else {
+ jQuery.each(arguments, function() {
+ var q = "" + this;
+ q = q.replace(/^[?#]/,''); // remove any leading ? || #
+ q = q.replace(/[;&]$/,''); // remove any trailing & || ;
+ if ($spaces) q = q.replace(/[+]/g,' '); // replace +'s with spaces
+
+ jQuery.each(q.split(/[&;]/), function(){
+ var key = decodeURIComponent(this.split('=')[0] || "");
+ var val = decodeURIComponent(this.split('=')[1] || "");
+
+ if (!key) return;
+
+ if ($numbers) {
+ if (/^[+-]?[0-9]+\.[0-9]*$/.test(val)) // simple float regex
+ val = parseFloat(val);
+ else if (/^[+-]?[0-9]+$/.test(val)) // simple int regex
+ val = parseInt(val, 10);
+ }
+
+ val = (!val && val !== 0) ? true : val;
+
+ if (val !== false && val !== true && typeof val != 'number')
+ val = val;
+
+ self.SET(key, val);
+ });
+ });
+ }
+ return self;
+ };
+
+ queryObject.prototype = {
+ queryObject: true,
+ has: function(key, type) {
+ var value = this.get(key);
+ return is(value, type);
+ },
+ GET: function(key) {
+ if (!is(key)) return this.keys;
+ var parsed = parse(key), base = parsed[0], tokens = parsed[1];
+ var target = this.keys[base];
+ while (target != null && tokens.length != 0) {
+ target = target[tokens.shift()];
+ }
+ return typeof target == 'number' ? target : target || "";
+ },
+ get: function(key) {
+ var target = this.GET(key);
+ if (is(target, Object))
+ return jQuery.extend(true, {}, target);
+ else if (is(target, Array))
+ return target.slice(0);
+ return target;
+ },
+ SET: function(key, val) {
+ var value = !is(val) ? null : val;
+ var parsed = parse(key), base = parsed[0], tokens = parsed[1];
+ var target = this.keys[base];
+ this.keys[base] = set(target, tokens.slice(0), value);
+ return this;
+ },
+ set: function(key, val) {
+ return this.copy().SET(key, val);
+ },
+ REMOVE: function(key) {
+ return this.SET(key, null).COMPACT();
+ },
+ remove: function(key) {
+ return this.copy().REMOVE(key);
+ },
+ EMPTY: function() {
+ var self = this;
+ jQuery.each(self.keys, function(key, value) {
+ delete self.keys[key];
+ });
+ return self;
+ },
+ load: function(url) {
+ var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
+ var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, "$1");
+ return new queryObject(url.length == search.length ? '' : search, url.length == hash.length ? '' : hash);
+ },
+ empty: function() {
+ return this.copy().EMPTY();
+ },
+ copy: function() {
+ return new queryObject(this);
+ },
+ COMPACT: function() {
+ function build(orig) {
+ var obj = typeof orig == "object" ? is(orig, Array) ? [] : {} : orig;
+ if (typeof orig == 'object') {
+ function add(o, key, value) {
+ if (is(o, Array))
+ o.push(value);
+ else
+ o[key] = value;
+ }
+ jQuery.each(orig, function(key, value) {
+ if (!is(value)) return true;
+ add(obj, key, build(value));
+ });
+ }
+ return obj;
+ }
+ this.keys = build(this.keys);
+ return this;
+ },
+ compact: function() {
+ return this.copy().COMPACT();
+ },
+ toString: function() {
+ var i = 0, queryString = [], chunks = [], self = this;
+ var encode = function(str) {
+ str = str + "";
+ if ($spaces) str = str.replace(/ /g, "+");
+ return encodeURIComponent(str);
+ };
+ var addFields = function(arr, key, value) {
+ if (!is(value) || value === false) return;
+ var o = [encode(key)];
+ if (value !== true) {
+ o.push("=");
+ o.push(encode(value));
+ }
+ arr.push(o.join(""));
+ };
+ var build = function(obj, base) {
+ var newKey = function(key) {
+ return !base || base == "" ? [key].join("") : [base, "[", key, "]"].join("");
+ };
+ jQuery.each(obj, function(key, value) {
+ if (typeof value == 'object')
+ build(value, newKey(key));
+ else
+ addFields(chunks, newKey(key), value);
+ });
+ };
+
+ build(this.keys);
+
+ if (chunks.length > 0) queryString.push($hash);
+ queryString.push(chunks.join($separator));
+
+ return queryString.join("");
+ }
+ };
+
+ return new queryObject(location.search, location.hash);
+ };
+}(jQuery.query || {}); // Pass in jQuery.query as settings object

0 comments on commit e40d3d4

Please sign in to comment.