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.

admin/code/LeftAndMain.php

@@ -252,6 +252,7 @@ class LeftAndMain extends Controller {
 		
 		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 @@ class LeftAndMain extends Controller {
 				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',

admin/javascript/LeftAndMain.Preview.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
+				var updateAfterXhr = function() {
-				$('.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 + '&cms-preview-disabled=1');
-				});
-				
-				$('.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');
+					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) {
+					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('>');

thirdparty/jquery-query/jquery.query.js

@@ -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