API Update listview / treeview to use pjax instead of deferred loading
Fixes #1645
This commit is contained in:
Damian Mooyman
parent
c4d748cb7d
commit
8c87ea6b79
|
|
@ -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"))
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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&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&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 %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue