API Update listview / treeview to use pjax instead of deferred loading

Fixes #1645

client/dist/js/bundle.js

@@ -92,12 +92,13 @@ n.data("button")&&n.button("option","showingAlternate",!1),this._super(t)}}),t("
 })},function(t,e){t.exports=i18n},function(t,e,n){"use strict"
 function i(t){return t&&t.__esModule?t:{"default":t}}var a=n(2),o=i(a)
 o["default"].entwine("ss",function(t){t(".cms-content-header-info").entwine({"from .cms-panel":{ontoggle:function e(t){var e=this.closest(".cms-content").find(t.target)
-0!==e.length&&this.parent()[e.hasClass("collapsed")?"addClass":"removeClass"]("collapsed")}}}),t(".cms-content-toolbar").entwine({onmatch:function n(){var e=this
+0!==e.length&&this.parent()[e.hasClass("collapsed")?"addClass":"removeClass"]("collapsed")}}}),t(".cms .cms-panel-link.page-view-link").entwine({onclick:function n(t){return this.siblings().removeClass("active"),
+this.addClass("active"),this._super(t)}}),t(".cms-content-toolbar").entwine({onmatch:function i(){var e=this
 this._super(),t.each(this.find(".cms-actions-buttons-row .tool-button"),function(){var n=t(this),i=n.data("toolid"),a=n.hasClass("active")
-void 0!==i&&(n.data("active",!1).removeClass("active"),t("#"+i).hide(),e.bindActionButtonEvents(n))})},onunmatch:function i(){var e=this
+void 0!==i&&(n.data("active",!1).removeClass("active"),t("#"+i).hide(),e.bindActionButtonEvents(n))})},onunmatch:function a(){var e=this
 this._super(),t.each(this.find(".cms-actions-buttons-row .tool-button"),function(){var n=t(this)
-e.unbindActionButtonEvents(n)})},bindActionButtonEvents:function a(t){var e=this
+e.unbindActionButtonEvents(n)})},bindActionButtonEvents:function o(t){var e=this
-t.on("click.cmsContentToolbar",function(n){e.showHideTool(t)})},unbindActionButtonEvents:function o(t){t.off(".cmsContentToolbar")},showHideTool:function s(e){var n=e.data("active"),i=e.data("toolid"),a=t("#"+i)
+t.on("click.cmsContentToolbar",function(n){e.showHideTool(t)})},unbindActionButtonEvents:function s(t){t.off(".cmsContentToolbar")},showHideTool:function r(e){var n=e.data("active"),i=e.data("toolid"),a=t("#"+i)
 
 
 t.each(this.find(".cms-actions-buttons-row .tool-button"),function(){var e=t(this),n=t("#"+e.data("toolid"))

client/src/legacy/CMSMain.js

@@ -24,6 +24,19 @@ $.entwine('ss', function ($) {
 		}
 	});
 
+  // Customise tree / list view pjax tab loading
+  // See $('.cms .cms-panel-link') in LeftAndMain.js
+  $('.cms .cms-panel-link.page-view-link').entwine({
+    onclick: function(e){
+      // Toggle 'active' flag
+      this.siblings().removeClass('active');
+      this.addClass('active');
+      // Does pjax load
+      return this._super(e);
+    }
+  });
+
+
 	$('.cms-content-toolbar').entwine({
 
 		onmatch: function () {

code/Controllers/CMSMain.php

@@ -46,6 +46,7 @@ use SilverStripe\ORM\ArrayList;
 use SilverStripe\ORM\DataList;
 use SilverStripe\ORM\DataObject;
 use SilverStripe\ORM\DB;
+use SilverStripe\ORM\FieldType\DBHTMLText;
 use SilverStripe\ORM\HiddenClass;
 use SilverStripe\ORM\SS_List;
 use SilverStripe\ORM\Versioning\Versioned;
@@ -131,6 +132,8 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 		'Link' => 'Text',
 		'ListViewForm' => 'HTMLFragment',
 		'ExtraTreeTools' => 'HTMLFragment',
+		'PageList' => 'HTMLFragment',
+		'PageListSidebar' => 'HTMLFragment',
 		'SiteTreeHints' => 'HTMLFragment',
 		'SecurityID' => 'Text',
 		'SiteTreeAsUL' => 'HTMLFragment',
@@ -168,13 +171,43 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 
 	public function getResponseNegotiator() {
 		$negotiator = parent::getResponseNegotiator();
-		$controller = $this;
+
-		$negotiator->setCallback('ListViewForm', function() use($controller) {
+		// ListViewForm
-			return $controller->ListViewForm()->forTemplate();
+		$negotiator->setCallback('ListViewForm', function()  {
+			return $this->ListViewForm()->forTemplate();
 		});
+
+		// PageList view
+		$negotiator->setCallback('Content-PageList', function () {
+			return $this->PageList()->forTemplate();
+		});
+
+		// PageList view for edit controller
+		$negotiator->setCallback('Content-PageList-Sidebar', function() {
+			return $this->PageListSidebar()->forTemplate();
+		});
+
 		return $negotiator;
 	}
 
+	/**
+	 * Get pages listing area
+	 *
+	 * @return DBHTMLText
+	 */
+	public function PageList() {
+		return $this->renderWith($this->getTemplatesWithSuffix('_PageList'));
+	}
+
+	/**
+	 * Page list view for edit-form
+	 *
+	 * @return DBHTMLText
+	 */
+	public function PageListSidebar() {
+		return $this->renderWith($this->getTemplatesWithSuffix('_PageList_Sidebar'));
+	}
+
 	/**
 	 * If this is set to true, the "switchView" context in the
 	 * template is shown, with links to the staging and publish site.
@@ -234,16 +267,24 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 		return $this->LinkWithSearch($this->LinkPages());
 	}
 
+	/**
+	 * Get link to tree view
+	 *
+	 * @return string
+	 */
 	public function LinkTreeView() {
-		return $this->LinkWithSearch($this->Link('treeview'));
+		// Tree view is just default link to main pages section (no /treeview suffix)
+		return $this->LinkWithSearch(CMSMain::singleton()->Link());
 	}
 
+	/**
+	 * Get link to list view
+	 *
+	 * @return string
+	 */
 	public function LinkListView() {
-		return $this->LinkWithSearch($this->Link('listview'));
+		// Note : Force redirect to top level page controller
-	}
+		return $this->LinkWithSearch(CMSMain::singleton()->Link('listview'));
-
-	public function LinkGalleryView() {
-		return $this->LinkWithSearch($this->Link('galleryview'));
 	}
 
 	public function LinkPageEdit($id = null) {
@@ -761,7 +802,7 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 	 * @return string HTML
 	 */
 	public function treeview($request) {
-		return $this->renderWith($this->getTemplatesWithSuffix('_TreeView'));
+		return $this->getResponseNegotiator()->respond($request);
 	}
 
 	/**
@@ -769,7 +810,26 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 	 * @return string HTML
 	 */
 	public function listview($request) {
-		return $this->renderWith($this->getTemplatesWithSuffix('_ListView'));
+		return $this->getResponseNegotiator()->respond($request);
+	}
+
+	/**
+	 * @return string
+	 */
+	public function ViewState() {
+		$view = $this->getRequest()->getVar('view');
+		if ($view) {
+			$mode = "{$view}view";
+		} else {
+			$mode = $this->getRequest()->param('Action');
+		}
+		switch($mode) {
+			case 'listview':
+			case 'treeview':
+				return $mode;
+			default:
+				return 'treeview';
+		}
 	}
 
 	/**

code/Controllers/CMSPagesController.php

@@ -24,13 +24,6 @@ class CMSPagesController extends CMSMain {
 		return false;
 	}
 
-	/**
-	 * @return string
-	 */
-	public function ViewState() {
-		return $this->getRequest()->getVar('view');
-	}
-
 	public function isCurrentPage(DataObject $record) {
 		return false;
 	}

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ListView.ss

@@ -1,4 +1,4 @@
-<% include SilverStripe\CMS\Controllers\CMSPagesController_ContentToolActions %>
+<% include SilverStripe\\CMS\\Controllers\\CMSPagesController_ContentToolActions %>
 
 <div class="ss-dialog cms-page-add-form-dialog cms-dialog-content" id="cms-page-add-form" title="<% _t('CMSMain.AddNew', 'Add new page') %>">
 	$AddForm

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList.ss

@@ -0,0 +1,7 @@
+<div class="cms-content-view fill-height flexbox-display" data-pjax-fragment="Content-PageList">
+	<% if $ViewState == 'listview' %>
+		<% include SilverStripe\\CMS\\Controllers\\CMSMain_ListView %>
+	<% else %>
+		<% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeView %>
+	<% end_if %>
+</div>

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList_Sidebar.ss

@@ -0,0 +1,3 @@
+<div class="panel panel--padded panel--scrollable flexbox-area-grow fill-height cms-content-view cms-tree-view-sidebar" data-pjax-fragment="Content-PageList-Sidebar">
+	<% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeView %>
+</div>

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss

@@ -5,23 +5,14 @@
 			<% include SilverStripe\\Admin\\CMSSectionIcon %>
 				<span class="section-label"><a href="$LinkPages">{$MenuCurrentItem.Title}</a></span>
 			</div>
-
+			<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content' %>
-			<div class="view-controls">
-				<button id="filters-button" class="icon-button font-icon-search no-text" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
-				<div class="icon-button-group">
-					<a href="$LinkPages#cms-content-treeview" class="icon-button font-icon-tree active" title="<% _t('CMSPagesController.TreeView', 'Tree View') %>"></a><a href="$LinkPages#cms-content-listview" class="icon-button font-icon-list" title="<% _t('CMSPagesController.ListView', 'List View') %>"></a>
-				</div>
-			</div>
 		</div>
 	</div>
 	<div class="panel panel--scrollable flexbox-area-grow fill-height cms-panel-content">
 		<div class="cms-content-filters">
 			$SearchForm
 		</div>
-
+		$PageListSidebar
-		<div class="panel panel--padded panel--scrollable flexbox-area-grow fill-height cms-content-view cms-tree-view-sidebar cms-panel-deferred" id="cms-content-treeview" data-url="$LinkTreeView">
-			<%-- Lazy-loaded via ajax --%>
-		</div>
 	</div>
 	<div class="cms-panel-content-collapsed">
 		<h3 class="cms-panel-header">$SiteConfig.Title</h3>

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_TreeView.ss

@@ -1,4 +1,4 @@
-<% include SilverStripe\CMS\Controllers\CMSPagesController_ContentToolActions View='Tree' %>
+<% include SilverStripe\\CMS\\Controllers\\CMSPagesController_ContentToolActions View='Tree' %>
 
 <div class="ss-dialog cms-page-add-form-dialog cms-dialog-content" id="cms-page-add-form" title="<% _t('CMSMain.AddNew', 'Add new page') %>">
 	$AddForm

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ViewControls.ss

@@ -0,0 +1,15 @@
+<div class="view-controls">
+	<button id="filters-button" class="icon-button font-icon-search no-text" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
+	<div class="icon-button-group">
+		<%-- Change to data-pjax-target="Content-PageList" to enable in-edit listview --%>
+		<a class="cms-panel-link icon-button font-icon-tree page-view-link <% if $ViewState == 'treeview' %>active<% end_if %>"
+	   		href="$LinkTreeView.ATT"
+		   	data-pjax-target="$PJAXTarget.ATT"
+		   	title="<% _t('CMSPagesController.TreeView', 'Tree View') %>"
+		></a><a class="cms-panel-link icon-button font-icon-list page-view-link <% if $ViewState == 'listview' %>active<% end_if %>"
+		   	href="$LinkListView.ATT"
+		   	data-pjax-target="$PJAXTarget.ATT"
+		   	title="<% _t('CMSPagesController.ListView', 'List View') %>"
+		></a>
+	</div>
+</div>

templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss

@@ -1,41 +1,15 @@
-<div id="pages-controller-cms-content" class="flexbox-area-grow fill-height cms-content cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
+<div id="pages-controller-cms-content" class="flexbox-area-grow fill-height cms-content $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
 
 	<div class="cms-content-header north">
-		<div class="cms-content-header-info">
+		<div class="cms-content-header-info fill-width">
 			<% include SilverStripe\\Admin\\CMSBreadcrumbs %>
-		</div>
+			<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
-
-		<div class="cms-content-header-tabs">
-			<button id="filters-button" class="icon-button font-icon-search no-text" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
-			<div class="icon-button-group">
-				<ul class="cms-tabset-nav-primary ss-tabset">
-					<li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon tree">
-						<a href="#cms-content-treeview" class="cms-panel-link icon-button font-icon-tree" data-href="$LinkTreeView" title="<% _t('CMSPagesController.TreeView', 'Tree View') %>"></a>
-					</li>
-					<li class="content-listview<% if ViewState == list %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon list">
-						<a href="#cms-content-listview" class="cms-panel-link icon-button font-icon-list" data-href="$LinkListView" title="<% _t('CMSPagesController.ListView', 'List View') %>"></a>
-					</li>
-				</ul>
-			</div>
 		</div>
 	</div>
 
 	<div class="cms-content-fields center ui-widget-content cms-panel-padded flexbox-area-grow fill-height">
 		$Tools
-
+		$PageList
-		<div class="cms-content-view cms-panel-deferred fill-height flexbox-display" id="cms-content-treeview" data-url="$LinkTreeView" data-deferred-no-cache="true">
-			<%-- Lazy-loaded via ajax --%>
-		</div>
-
-		<div class="cms-content-view cms-panel-deferred" id="cms-content-listview" data-url="$LinkListView" data-deferred-no-cache="true">
-			<%-- Lazy-loaded via ajax --%>
-		</div>
-		<!--
-		<div id="cms-content-galleryview">
-			<i>Not implemented yet</i>
-		</div>
-		-->
-
 	</div>
 
 </div>