Skip to content
This repository
Browse code

ENHANCEMENT Added .cms-panel-deferred for lazy loading of CMS panels …

…(for performance reasons)
  • Loading branch information...
commit d6eb1b6fffaacbc016cbec69a0633f6646c017a6 1 parent 3777761
Ingo Schommer authored April 17, 2012

Showing 1 changed file with 46 additions and 1 deletion. Show diff stats Hide diff stats

  1. 47  admin/javascript/LeftAndMain.js
47  admin/javascript/LeftAndMain.js
@@ -330,7 +330,7 @@ jQuery.noConflict();
330 330
 		 */
331 331
 		$('.cms .cms-panel-link').entwine({
332 332
 			onclick: function(e) {
333  
-				var href = this.attr('href'), url = href ? href : this.data('href'),
  333
+				var href = this.attr('href'), url = (href && !href.match(/^#/)) ? href : this.data('href'),
334 334
 					data = (this.data('targetPanel')) ? {selector: this.data('targetPanel')} : null;
335 335
 
336 336
 				$('.cms-container').loadPanel(url, null, data);
@@ -561,6 +561,51 @@ jQuery.noConflict();
561 561
 			e.preventDefault();
562 562
 		}
563 563
 	});
  564
+
  565
+	/**
  566
+	 * Allows to lazy load a panel, by leaving it empty
  567
+	 * and declaring a URL to load its content via a 'url' HTML5 data attribute.
  568
+	 * The loaded HTML is cached, with cache key being the 'url' attribute.
  569
+	 * In order for this to work consistently, we assume that the responses are stateless.
  570
+	 * To avoid caching, add a 'deferred-no-cache' to the node.
  571
+	 */
  572
+	window._panelDeferredCache = {};
  573
+	$('.cms-panel-deferred').entwine({
  574
+		onmatch: function() {
  575
+			this._super();
  576
+			this.redraw();
  577
+		},
  578
+		onunmatch: function() {
  579
+			// Save the HTML state at the last possible moment.
  580
+			// Don't store the DOM to avoid memory leaks.
  581
+			if(!this.data('deferredNoCache')) window._panelDeferredCache[this.data('url')] = this.html();
  582
+			this._super();
  583
+		},
  584
+		redraw: function() {
  585
+			var self = this, url = this.data('url');
  586
+			if(!url) throw 'Elements of class .cms-panel-deferred need a "data-url" attribute';
  587
+
  588
+			this._super();
  589
+
  590
+			// If the node is empty, try to either load it from cache or via ajax.
  591
+			if(!this.children().length) {
  592
+				if(!this.data('deferredNoCache') && typeof window._panelDeferredCache[url] !== 'undefined') {
  593
+					this.html(window._panelDeferredCache[url]);
  594
+				} else {
  595
+					this.addClass('loading');
  596
+					$.ajax({
  597
+						url: url,
  598
+						complete: function() {
  599
+							self.removeClass('loading');
  600
+						},
  601
+						success: function(data, status, xhr) {
  602
+							self.html(data);
  603
+						}
  604
+					});
  605
+				}
  606
+			}
  607
+		}
  608
+	});
564 609
 	
565 610
 }(jQuery));
566 611
 

5 notes on commit d6eb1b6

Mateusz U
Collaborator

@chillu why this has been added into global entwine namespace? Is there a reason behind that?

Sam Minnée
Owner

WOOHOO - this has to be a first: someone nitpicking Ingo's CMS work rather than vice-versa :-P

Sean Harvey
Owner

Hah :P

Mateusz U
Collaborator

You enjoying yourselves? :) Here is my latest on putting everything on 'ss' namespace, adding missing this._super() and adding missing onunmatch that cause entwine to throw exceptions:
https://github.com/mateusz/sapphire/commits/entwines
https://github.com/mateusz/silverstripe-cms/commits/entwines

I think it will fix some of the weird navigation issues Sean was reporting, but it's not yet entirely stable. For example top right tabs on pages still don't work, and the large site tree does not show checkboxes when switched to multi-selection. Work in progress.

Ingo Schommer
Owner
chillu commented on d6eb1b6 May 11, 2012

Haha, shush Sam! :D
Mateusz, yep that was an oversight, thanks for fixing that in your topic branch

Please sign in to comment.
Something went wrong with that request. Please try again.