Skip to content

Commit

Permalink
ENHANCEMENT CMS panels restructured to use two new types of "tools" t…
Browse files Browse the repository at this point in the history 
…emplates, fetched through LeftAndMain->Tools() and LeftAndMain->EditFormTools(). Requires less overloading of template markup.
  • Loading branch information
@chillu
chillu committed Feb 15, 2012
1 parent 92d5138 commit a1e9c0f
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 75 deletions.
44 changes: 43 additions & 1 deletion admin/code/LeftAndMain.php
View file
Expand Up @@ -476,9 +476,11 @@ public function Menu() {
* 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;
Expand Down Expand Up @@ -1017,6 +1019,46 @@ public function doAdd($data, $form) {
public function EditorToolbar() { public function EditorToolbar() {
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
Expand Down
8 changes: 7 additions & 1 deletion admin/javascript/LeftAndMain.Content.js
View file
Expand Up @@ -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();
} }
Expand Down
7 changes: 6 additions & 1 deletion admin/javascript/LeftAndMain.js
View file
Expand Up @@ -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();
Expand Down
8 changes: 7 additions & 1 deletion 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>
62 changes: 29 additions & 33 deletions admin/templates/Includes/LeftAndMain_EditForm.ss
View file
Expand Up @@ -23,44 +23,40 @@
<!-- <div class="cms-content-search">...</div> --> <!-- <div class="cms-content-search">...</div> -->
</div> </div>
</div> </div>

<% control Controller %>
$EditFormTools
<% end_control %>


<% if Tools %> <div class="cms-content-fields center">
<div class="cms-content-tools west cms-panel cms-panel-layout collapsed" id="cms-content-tools" data-expandOnClick="true" data-layout="{type: 'border'}"> <% if Message %>
$Tools <p id="{$FormName}_error" class="message $MessageType">$Message</p>
</div> <% else %>
<% end_if %> <p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>

<% end_if %>
<div class="center cms-panel-layout" id="center-container-here" data-layout="{type: 'border'}">
<div class="cms-content-fields center">
<% if Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>
<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
<% 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>
Expand Down
34 changes: 1 addition & 33 deletions admin/templates/Includes/ModelAdmin_Content.ss
View file
Expand Up @@ -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
Expand Down
33 changes: 33 additions & 0 deletions admin/templates/Includes/ModelAdmin_Tools.ss
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 changes: 6 additions & 5 deletions docs/en/reference/cms-architecture.md
View file
Expand Up @@ -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


Expand Down

0 comments on commit a1e9c0f

Please sign in to comment.