tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-02 22:28:37 +02:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT CMS panels restructured to use two new types of "tools" templates, fetched through LeftAndMain->Tools() and LeftAndMain->EditFormTools(). Requires less overloading of template markup.

Browse Source
This commit is contained in:
Ingo Schommer 2012-02-15 13:39:45 +01:00
parent 92d513857c
commit a1e9c0f41e
8 changed files with 133 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
admin/code/LeftAndMain.php
View File

@ -476,9 +476,11 @@ class LeftAndMain extends Controller {
* Return a list of appropriate templates for this class, with the given suffix * Return a list of appropriate templates for this class, with the given suffix
*/ */
protected function getTemplatesWithSuffix($suffix) { protected function getTemplatesWithSuffix($suffix) {
$templates = array();
$classes = array_reverse(ClassInfo::ancestry($this->class)); $classes = array_reverse(ClassInfo::ancestry($this->class));
foreach($classes as $class) { foreach($classes as $class) {
$templates[] = $class . $suffix; $template = $class . $suffix;
if(SSViewer::hasTemplate($template)) $templates[] = $template;
if($class == 'LeftAndMain') break; if($class == 'LeftAndMain') break;
} }
return $templates; return $templates;
@ -1018,6 +1020,46 @@ class LeftAndMain extends Controller {
return Object::create('HtmlEditorField_Toolbar', $this, "EditorToolbar"); return Object::create('HtmlEditorField_Toolbar', $this, "EditorToolbar");
} }
/**
* Renders a panel containing tools which apply to all displayed
* "content" (mostly through {@link EditForm()}), for example a tree navigation or a filter panel.
* Auto-detects applicable templates by naming convention: "<controller classname>_Tools.ss",
* and takes the most specific template (see {@link getTemplatesWithSuffix()}).
* To explicitly disable the panel in the subclass, simply create a more specific, empty template.
*
* @return String HTML
*/
public function Tools() {
$templates = $this->getTemplatesWithSuffix('_Tools');
if($templates) {
$viewer = new SSViewer($templates);
return $viewer->process($this);
} else {
return false;
}
}
/**
* Renders a panel containing tools which apply to the currently displayed edit form.
* The main difference to {@link Tools()} is that the panel is displayed within
* the element structure of the form panel (rendered through {@link EditForm}).
* This means the panel will be loaded alongside new forms, and refreshed upon save,
* which can mean a performance hit, depending on how complex your panel logic gets.
* Any form fields contained in the returned markup will also be submitted with the main form,
* which might be desired depending on the implementation details.
*
* @return String HTML
*/
public function EditFormTools() {
$templates = $this->getTemplatesWithSuffix('_EditFormTools');
if($templates) {
$viewer = new SSViewer($templates);
return $viewer->process($this);
} else {
return false;
}
}
/** /**
* Batch Actions Handler * Batch Actions Handler
*/ */

8
admin/javascript/LeftAndMain.Content.js
View File

@ -37,7 +37,13 @@
var url = $(node).find('a:first').attr('href'); var url = $(node).find('a:first').attr('href');
if(url && url != '#') { if(url && url != '#') {
if($(node).find('a:first').is(':internal')) url = $('base').attr('href') + url; if($(node).find('a:first').is(':internal')) url = $('base').attr('href') + url;
$('.cms-container').loadPanel(url); // Reload only edit form if it exists (side-by-side view of tree and edit view), otherwise reload whole panel
if(self.find('.cms-edit-form').length) {
url += '?cms-view-form=1';
$('.cms-container').loadPanel(url, null, {selector: '.cms-edit-form'});
} else {
$('.cms-container').loadPanel(url);
}
} else { } else {
self.removeForm(); self.removeForm();
} }

7
admin/javascript/LeftAndMain.js
View File

@ -95,8 +95,13 @@
redraw: function() { redraw: function() {
// Move from inner to outer layouts. Some of the elements might not exist. // Move from inner to outer layouts. Some of the elements might not exist.
// Not all edit forms are layouted, so qualify by their data value. // Not all edit forms are layouted, so qualify by their data value.
this.find('.cms-edit-form[data-layout]').redraw(); this.find('.cms-edit-form[data-layout]').redraw();
this.find('.cms-preview').redraw();
// Only redraw preview if its visible
var preview = this.find('.cms-preview');
if(preview.is(':visible')) preview.redraw();
// Only redraw the content area if its not the same as the edit form // Only redraw the content area if its not the same as the edit form
var contentEl = this.find('.cms-content'); var contentEl = this.find('.cms-content');
if(!contentEl.is('.cms-edit-form')) contentEl.redraw(); if(!contentEl.is('.cms-edit-form')) contentEl.redraw();

8
admin/templates/Includes/LeftAndMain_Content.ss
View File

@ -1 +1,7 @@
$EditForm <div class="cms-content center" data-layout="{type: 'border'}" style="display: inline-block;">
$Tools
$EditForm
</div>

60
admin/templates/Includes/LeftAndMain_EditForm.ss
View File

@ -24,43 +24,39 @@
</div> </div>
</div> </div>
<% if Tools %> <% control Controller %>
<div class="cms-content-tools west cms-panel cms-panel-layout collapsed" id="cms-content-tools" data-expandOnClick="true" data-layout="{type: 'border'}"> $EditFormTools
$Tools <% end_control %>
</div>
<% end_if %>
<div class="center cms-panel-layout" id="center-container-here" data-layout="{type: 'border'}"> <div class="cms-content-fields center">
<div class="cms-content-fields center"> <% if Message %>
<% if Message %> <p id="{$FormName}_error" class="message $MessageType">$Message</p>
<p id="{$FormName}_error" class="message $MessageType">$Message</p> <% else %>
<% else %> <p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p> <% end_if %>
<% end_if %>
<fieldset> <fieldset>
<% if Legend %><legend>$Legend</legend><% end_if %> <% if Legend %><legend>$Legend</legend><% end_if %>
<% control Fields %> <% control Fields %>
$FieldHolder $FieldHolder
<% end_control %> <% end_control %>
<div class="clear"><!-- --></div> <div class="clear"><!-- --></div>
</fieldset> </fieldset>
</div> </div>
<div class="cms-content-actions south"> <div class="cms-content-actions south">
<% if Actions %> <% if Actions %>
<div class="Actions"> <div class="Actions">
<% control Actions %> <% control Actions %>
$Field $Field
<% end_control %> <% end_control %>
<% if CurrentPage.PreviewLink %> <% if CurrentPage.PreviewLink %>
<a href="$CurrentPage.PreviewLink" class="cms-preview-toggle-link ss-ui-button"> <a href="$CurrentPage.PreviewLink" class="cms-preview-toggle-link ss-ui-button">
<% _t('LeftAndMain.PreviewButton', 'Preview') %> &raquo; <% _t('LeftAndMain.PreviewButton', 'Preview') %> &raquo;
</a> </a>
<% end_if %>
</div>
<% end_if %> <% end_if %>
</div> </div>
<% end_if %>
</div> </div>
<% if IncludeFormTag %> <% if IncludeFormTag %>
</form> </form>

34
admin/templates/Includes/ModelAdmin_Content.ss
View File

@ -6,39 +6,7 @@
</div> </div>
</div> </div>
<div class="cms-content-tools west cms-panel cms-panel-layout" data-expandOnClick="true" data-layout="{type: 'border'}"> $Tools
<div class="cms-panel-content center">
<h3 class="cms-panel-header"><% _t('Filter', 'Filter') %></h3>
<div id="SearchForm_holder" class="leftbottom ss-tabset">
<% if SearchClassSelector = tabs %>
<ul>
<% control ModelForms %>
<li class="$FirstLast"><a id="tab-ModelAdmin_$Title.HTMLATT" href="#{$Form.Name}_$ClassName">$Title</a></li>
<% end_control %>
</ul>
<% end_if %>
<% if SearchClassSelector = dropdown %>
<div id="ModelClassSelector" class="ui-widget-container">
Search for:
<select>
<% control ModelForms %>
<option value="{$Form.Name}_$ClassName">$Title</option>
<% end_control %>
</select>
</div>
<% end_if %>
<% control ModelForms %>
<div class="tab" id="{$Form.Name}_$ClassName">
$Content
</div>
<% end_control %>
</div>
</div>
</div>
<div class="cms-content-fields center ui-widget-content"> <div class="cms-content-fields center ui-widget-content">
$EditForm $EditForm

33
admin/templates/Includes/ModelAdmin_Tools.ss Normal file
View File

@ -0,0 +1,33 @@
<div class="cms-content-tools west cms-panel cms-panel-layout" data-expandOnClick="true" data-layout="{type: 'border'}">
<div class="cms-panel-content center">
<h3 class="cms-panel-header"><% _t('Filter', 'Filter') %></h3>
<div id="SearchForm_holder" class="leftbottom ss-tabset">
<% if SearchClassSelector = tabs %>
<ul>
<% control ModelForms %>
<li class="$FirstLast"><a id="tab-ModelAdmin_$Title.HTMLATT" href="#{$Form.Name}_$ClassName">$Title</a></li>
<% end_control %>
</ul>
<% end_if %>
<% if SearchClassSelector = dropdown %>
<div id="ModelClassSelector" class="ui-widget-container">
Search for:
<select>
<% control ModelForms %>
<option value="{$Form.Name}_$ClassName">$Title</option>
<% end_control %>
</select>
</div>
<% end_if %>
<% control ModelForms %>
<div class="tab" id="{$Form.Name}_$ClassName">
$Content
</div>
<% end_control %>
</div>
</div>
</div>

11
docs/en/reference/cms-architecture.md
View File

@ -74,11 +74,12 @@ This requires manual assignment of the template to your form instance, see `[api
Often its useful to have a "tools" panel in between the menu and your content, Often its useful to have a "tools" panel in between the menu and your content,
usually occupied by a search form or navigational helper. usually occupied by a search form or navigational helper.
In this case, you can either overload the template as described above, In this case, you can either overload the full base template as described above.
or use the special `$Tools` placeholder on `LeftAndMain->getEditForm()`. To avoid duplicating all this template code, you can also use the special `[api:LeftAndMain->Tools()]` and
See `CMSPageEditController->getEditForm()` for sample usage. `[api:LeftAndMain->EditFormTools()]` methods available in `LeftAndMain`.
As the base template is aware of this placeholder, it saves you from These placeholders are populated by auto-detected templates,
overloading a complex template. with the naming convention of "<controller classname>_Tools.ss" and "<controller classname>_EditFormTools.ss".
So to add or "subclass" a tools panel, simply create this file and it's automatically picked up.
## Layout and Panels ## Layout and Panels