From 8c87ea6b79fc6298008cdfc956d0a1cd733d8d87 Mon Sep 17 00:00:00 2001 From: Damian Mooyman Date: Fri, 21 Oct 2016 16:15:34 +1300 Subject: [PATCH] API Update listview / treeview to use pjax instead of deferred loading Fixes #1645 --- client/dist/js/bundle.js | 9 +- client/src/legacy/CMSMain.js | 13 +++ code/Controllers/CMSMain.php | 82 ++++++++++++++++--- code/Controllers/CMSPagesController.php | 7 -- .../Controllers/Includes/CMSMain_ListView.ss | 2 +- .../Controllers/Includes/CMSMain_PageList.ss | 7 ++ .../Includes/CMSMain_PageList_Sidebar.ss | 3 + .../CMS/Controllers/Includes/CMSMain_Tools.ss | 13 +-- .../Controllers/Includes/CMSMain_TreeView.ss | 52 ++++++------ .../Includes/CMSMain_ViewControls.ss | 15 ++++ .../Includes/CMSPagesController_Content.ss | 34 +------- 11 files changed, 147 insertions(+), 90 deletions(-) create mode 100644 templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList.ss create mode 100644 templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList_Sidebar.ss create mode 100644 templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ViewControls.ss diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js index 0ef8ccb4..394ff734 100644 --- a/client/dist/js/bundle.js +++ b/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 -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")) diff --git a/client/src/legacy/CMSMain.js b/client/src/legacy/CMSMain.js index aa18956a..b6725a5f 100644 --- a/client/src/legacy/CMSMain.js +++ b/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 () { diff --git a/code/Controllers/CMSMain.php b/code/Controllers/CMSMain.php index 4b3a63eb..b9d9a3b5 100644 --- a/code/Controllers/CMSMain.php +++ b/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) { @@ -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'; + } } /** diff --git a/code/Controllers/CMSPagesController.php b/code/Controllers/CMSPagesController.php index 07ae0e92..019fb4f2 100644 --- a/code/Controllers/CMSPagesController.php +++ b/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; } diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ListView.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ListView.ss index e9c6f3a7..9824a3fa 100644 --- a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ListView.ss +++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ListView.ss @@ -1,4 +1,4 @@ -<% include SilverStripe\CMS\Controllers\CMSPagesController_ContentToolActions %> +<% include SilverStripe\\CMS\\Controllers\\CMSPagesController_ContentToolActions %>
$AddForm diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList.ss new file mode 100644 index 00000000..1fbea925 --- /dev/null +++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList.ss @@ -0,0 +1,7 @@ +
+ <% if $ViewState == 'listview' %> + <% include SilverStripe\\CMS\\Controllers\\CMSMain_ListView %> + <% else %> + <% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeView %> + <% end_if %> +
diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList_Sidebar.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList_Sidebar.ss new file mode 100644 index 00000000..15c64942 --- /dev/null +++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_PageList_Sidebar.ss @@ -0,0 +1,3 @@ +
+ <% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeView %> +
diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss index 0b3ced23..085f88f8 100644 --- a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss +++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss @@ -5,23 +5,14 @@ <% include SilverStripe\\Admin\\CMSSectionIcon %> {$MenuCurrentItem.Title}
- -
- -
- -
-
+ <% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content' %>
$SearchForm
- -
- <%-- Lazy-loaded via ajax --%> -
+ $PageListSidebar

$SiteConfig.Title

diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_TreeView.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_TreeView.ss index 888d85aa..001358e4 100644 --- a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_TreeView.ss +++ b/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' %>
$AddForm @@ -6,14 +6,32 @@ $ExtraTreeTools -<% if $TreeIsFiltered %> + <% if $TreeIsFiltered %>
- <% _t('CMSMain.TreeFiltered', 'Showing search results.') %> - - <% _t('CMSMain.TreeFilteredClear', 'Clear') %> - + <% _t('CMSMain.TreeFiltered', 'Showing search results.') %> + + <% _t('CMSMain.TreeFilteredClear', 'Clear') %> + -
+ $SiteTreeAsUL +
+
+ + <% else %> + +
$SiteTreeAsUL
-
-<% else %> - -
- $SiteTreeAsUL -
- -<% end_if %> + <% end_if %> diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ViewControls.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ViewControls.ss new file mode 100644 index 00000000..a1bf8010 --- /dev/null +++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ViewControls.ss @@ -0,0 +1,15 @@ +
+ +
+ <%-- Change to data-pjax-target="Content-PageList" to enable in-edit listview --%> + +
+
diff --git a/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss b/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss index 8d5b0aae..f9deb86a 100644 --- a/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss +++ b/templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss @@ -1,41 +1,15 @@ -
+
-
+
<% include SilverStripe\\Admin\\CMSBreadcrumbs %> -
- -
- -
-
    -
  • - -
    • -
  • - -
    • -
-
+ <% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
$Tools - -
- <%-- Lazy-loaded via ajax --%> -
- -
- <%-- Lazy-loaded via ajax --%> -
- - + $PageList