Merge pull request #1665 from open-sausages/pulls/4.0/fix-listview

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

client/dist/js/bundle.js

@@ -92,12 +92,15 @@ 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(e){this.siblings().removeClass("active"),
+this.addClass("active")
+var n=t(".cms-content-filters input[type='hidden'][name='view']")
+return n.val(t(this).data("view")),this._super(e)}}),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
-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)
+e.unbindActionButtonEvents(n)})},bindActionButtonEvents:function o(t){var e=this
+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,24 @@ $.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');
+
+      // Toggle 'view' parameter in search form to keep same view type
+      var viewField = $(".cms-content-filters input[type='hidden'][name='view']");
+      viewField.val($(this).data('view'));
+
+      // 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) {
-			return $controller->ListViewForm()->forTemplate();
+
+		// ListViewForm
+		$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'));
-	}
-
-	public function LinkGalleryView() {
-		return $this->LinkWithSearch($this->Link('galleryview'));
+		// Note : Force redirect to top level page controller
+		return $this->LinkWithSearch(CMSMain::singleton()->Link('listview'));
 	}
 
 	public function LinkPageEdit($id = null) {
@@ -394,12 +435,16 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 		);
 		$dateGroup->setTitle(_t('CMSSearch.PAGEFILTERDATEHEADING', 'Last edited'));
 
+		// view mode
+		$viewMode = HiddenField::create('view', false, $this->ViewState());
+
 		// Create the Field list
 		$fields = new FieldList(
 			$content,
 			$pageFilter,
 			$pageClasses,
-			$dateGroup
+			$dateGroup,
+			$viewMode
 		);
 
 		// Create the Search and Reset action
@@ -761,7 +806,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 +814,22 @@ 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() {
+		$mode = $this->getRequest()->requestVar('view')
+			?: $this->getRequest()->param('Action');
+		switch($mode) {
+			case 'listview':
+			case 'treeview':
+				return $mode;
+			default:
+				return 'treeview';
+		}
 	}
 
 	/**
@@ -854,7 +914,7 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 		);
 		if($parentID){
 			$linkSpec = $this->Link();
-			$linkSpec = $linkSpec . (strstr($linkSpec, '?') ? '&' : '?') . 'ParentID=%d&view=list';
+			$linkSpec = $linkSpec . (strstr($linkSpec, '?') ? '&' : '?') . 'ParentID=%d&view=listview';
 			$gridFieldConfig->addComponent(
 				GridFieldLevelup::create($parentID)
 					->setLinkSpec($linkSpec)
@@ -897,7 +957,7 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 						'<a class="btn btn-secondary btn--no-text btn--icon-large font-icon-right-dir cms-panel-link list-children-link" data-pjax-target="ListViewForm,Breadcrumbs" href="%s"><span class="sr-only">%s child pages</span></a>',
 						Controller::join_links(
 							$controller->Link(),
-							sprintf("?ParentID=%d&view=list", (int)$item->ID)
+							sprintf("?ParentID=%d&view=listview", (int)$item->ID)
 						),
 						$num
 					);

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_Content.ss

@@ -1,5 +1,5 @@
 <div id="pages-controller-cms-content" class="has-panel cms-content flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">
-	<div class="fill-width flexbox-area-grow">
+	<div class="fill-width fill-height flexbox-area-grow">
 		$Tools
 
 		<div class="fill-height flexbox-area-grow">
@@ -29,7 +29,7 @@
 				</div>
 			</div>
 
-			<div class="flexbox-area-grow fill-width">
+			<div class="flexbox-area-grow fill-height fill-width">
 				$EditForm
 			</div>
 		</div>

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>
-
-			<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>
+			<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content' %>
 		</div>
 	</div>
 	<div class="panel panel--scrollable flexbox-area-grow fill-height cms-panel-content">
 		<div class="cms-content-filters">
 			$SearchForm
 		</div>
-
-		<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>
+		$PageListSidebar
 	</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
@@ -6,14 +6,32 @@
 
 $ExtraTreeTools
 
-<% if $TreeIsFiltered %>
+	<% if $TreeIsFiltered %>
 <div class="cms-tree-filtered cms-notice flexbox-area-grow">
-	<strong><% _t('CMSMain.TreeFiltered', 'Showing search results.') %></strong>
-	<a href="javascript:void(0)" class="clear-filter">
-		<% _t('CMSMain.TreeFilteredClear', 'Clear') %>
-	</a>
+		<strong><% _t('CMSMain.TreeFiltered', 'Showing search results.') %></strong>
+		<a href="javascript:void(0)" class="clear-filter">
+			<% _t('CMSMain.TreeFilteredClear', 'Clear') %>
+		</a>
 
-	<div class="cms-tree <% if $TreeIsFiltered %>filtered-list<% end_if %>"
+		<div class="cms-tree <% if $TreeIsFiltered %>filtered-list<% end_if %>"
+			data-url-tree="$LinkWithSearch($Link(getsubtree)).ATT"
+			data-url-savetreenode="$Link(savetreenode).ATT"
+			data-url-updatetreenodes="$Link(updatetreenodes).ATT"
+			data-url-addpage="{$LinkPageAdd('AddForm/?action_doAdd=1', 'ParentID=%s&amp;PageType=%s').ATT}"
+			data-url-editpage="$LinkPageEdit('%s').ATT"
+			data-url-duplicate="{$Link('duplicate/%s').ATT}"
+			data-url-duplicatewithchildren="{$Link('duplicatewithchildren/%s').ATT}"
+			data-url-listview="{$Link('?view=list').ATT}"
+			data-hints="$SiteTreeHints.ATT"
+			data-childfilter="$Link('childfilter').ATT"
+			data-extra-params="SecurityID=$SecurityID.ATT">
+			$SiteTreeAsUL
+	</div>
+	</div>
+
+	<% else %>
+
+<div class="cms-tree flexbox-area-grow <% if $TreeIsFiltered %>filtered-list<% end_if %>"
 		data-url-tree="$LinkWithSearch($Link(getsubtree)).ATT"
 		data-url-savetreenode="$Link(savetreenode).ATT"
 		data-url-updatetreenodes="$Link(updatetreenodes).ATT"
@@ -27,23 +45,5 @@ $ExtraTreeTools
 		data-extra-params="SecurityID=$SecurityID.ATT">
 		$SiteTreeAsUL
 	</div>
-</div>
 
-<% else %>
-
-<div class="cms-tree flexbox-area-grow <% if $TreeIsFiltered %>filtered-list<% end_if %>"
-	data-url-tree="$LinkWithSearch($Link(getsubtree)).ATT"
-	data-url-savetreenode="$Link(savetreenode).ATT"
-	data-url-updatetreenodes="$Link(updatetreenodes).ATT"
-	data-url-addpage="{$LinkPageAdd('AddForm/?action_doAdd=1', 'ParentID=%s&amp;PageType=%s').ATT}"
-	data-url-editpage="$LinkPageEdit('%s').ATT"
-	data-url-duplicate="{$Link('duplicate/%s').ATT}"
-	data-url-duplicatewithchildren="{$Link('duplicatewithchildren/%s').ATT}"
-	data-url-listview="{$Link('?view=list').ATT}"
-	data-hints="$SiteTreeHints.ATT"
-	data-childfilter="$Link('childfilter').ATT"
-	data-extra-params="SecurityID=$SecurityID.ATT">
-	$SiteTreeAsUL
-</div>
-
-<% end_if %>
+	<% end_if %>

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

@@ -0,0 +1,17 @@
+<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-view="treeview"
+			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-view="listview"
+			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>
-
-		<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>
+			<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
 		</div>
 	</div>
 
 	<div class="cms-content-fields center ui-widget-content cms-panel-padded flexbox-area-grow fill-height">
 		$Tools
-
-		<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>
-		-->
-
+		$PageList
 	</div>
 
 </div>