Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…(for performance reasons)
  • Loading branch information...
commit d6eb1b6fffaacbc016cbec69a0633f6646c017a6 1 parent 3777761
Ingo Schommer chillu authored
Showing with 46 additions and 1 deletion.
  1. +46 −1 admin/javascript/LeftAndMain.js
47 admin/javascript/LeftAndMain.js
View
@@ -330,7 +330,7 @@ jQuery.noConflict();
*/
$('.cms .cms-panel-link').entwine({
onclick: function(e) {
- var href = this.attr('href'), url = href ? href : this.data('href'),
+ var href = this.attr('href'), url = (href && !href.match(/^#/)) ? href : this.data('href'),
data = (this.data('targetPanel')) ? {selector: this.data('targetPanel')} : null;
$('.cms-container').loadPanel(url, null, data);
@@ -561,6 +561,51 @@ jQuery.noConflict();
e.preventDefault();
}
});
+
+ /**
+ * Allows to lazy load a panel, by leaving it empty
+ * and declaring a URL to load its content via a 'url' HTML5 data attribute.
+ * The loaded HTML is cached, with cache key being the 'url' attribute.
+ * In order for this to work consistently, we assume that the responses are stateless.
+ * To avoid caching, add a 'deferred-no-cache' to the node.
+ */
+ window._panelDeferredCache = {};
+ $('.cms-panel-deferred').entwine({
+ onmatch: function() {
+ this._super();
+ this.redraw();
+ },
+ onunmatch: function() {
+ // Save the HTML state at the last possible moment.
+ // Don't store the DOM to avoid memory leaks.
+ if(!this.data('deferredNoCache')) window._panelDeferredCache[this.data('url')] = this.html();
+ this._super();
+ },
+ redraw: function() {
+ var self = this, url = this.data('url');
+ if(!url) throw 'Elements of class .cms-panel-deferred need a "data-url" attribute';
+
+ this._super();
+
+ // If the node is empty, try to either load it from cache or via ajax.
+ if(!this.children().length) {
+ if(!this.data('deferredNoCache') && typeof window._panelDeferredCache[url] !== 'undefined') {
+ this.html(window._panelDeferredCache[url]);
+ } else {
+ this.addClass('loading');
+ $.ajax({
+ url: url,
+ complete: function() {
+ self.removeClass('loading');
+ },
+ success: function(data, status, xhr) {
+ self.html(data);
+ }
+ });
+ }
+ }
+ }
+ });
}(jQuery));

5 comments 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

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.