ENHANCEMENT Using jQuery UI tabs for tree tools like 'search' or 'batch actions' instead of custom JavaScript

API CHANGE Removed 'treeactions' javascript global

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92603 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2009-11-21 02:36:09 +00:00
parent 5d4e5def8b
commit c5eadd81ab
7 changed files with 173 additions and 214 deletions

View File

@ -155,7 +155,6 @@ ul.tree .deleted {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
background: #eee; background: #eee;
padding: 3px; padding: 3px;
text-align: center;
font-weight: bold; font-weight: bold;
} }
#publication_key ins, #publication_key ins,
@ -337,6 +336,10 @@ ul.tree span.a.Root span.c {
background: url(../../jsparty/tree/images/i-bottom.gif) no-repeat scroll 0 50%; background: url(../../jsparty/tree/images/i-bottom.gif) no-repeat scroll 0 50%;
} }
#sitetree_ul {
overflow: auto;
}
ul#sitetree.tree ul { ul#sitetree.tree ul {
margin-left: 0; margin-left: 0;
} }
@ -430,7 +433,6 @@ ul.tree span.untranslated a:visited {
padding: 5px 0 0 0; padding: 5px 0 0 0;
overflow: hidden; overflow: hidden;
clear: left; clear: left;
width: 100%;
} }
.checkboxAboveTree div { .checkboxAboveTree div {
clear: left; clear: left;

View File

@ -114,34 +114,10 @@ body {
* Actions/Buttons * Actions/Buttons
*/ */
#TreeActions {
float: left;
width: 100%;
padding-bottom: 5px;
}
#TreeActions li {
float: left;
}
#TreeActions button.disabled { #TreeActions button.disabled {
color: #aaa; color: #aaa;
} }
.ajaxActions input,
#TreeActions li.action input {
float: left;
height: 25px;
padding: 0 10px;
font-weight: bold;
}
#TreeActions li.action input {
font-weight: normal;
}
.ajaxActions input:active {
background: #F4F4F4 none repeat scroll 0%;
border-color: #999999 rgb(204, 204, 204) rgb(204, 204, 204) rgb(153, 153, 153);
}
.ajaxActions input.disabled, .ajaxActions input.disabled,
input.disabled { input.disabled {
color: #666; color: #666;
@ -188,7 +164,7 @@ body.stillLoading select {
/** /**
* Hidden left-hand panel * Hidden left-hand panel
*/ */
#left.hidden form, #left.hidden .title, #left.hidden #TreeActions { #left.hidden form, #left.hidden .title {
display: none; display: none;
} }
@ -352,28 +328,14 @@ body.stillLoading select {
/** LEFT PANEL **/ /** LEFT PANEL **/
#sitetree_holder { #sitetree_and_tools {
height: 80%; overflow: auto;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
} }
#sitetree_holder #TreeTools { #sitetree_holder #TreeTools {
float: left;
width: inherit;
background: #EEE; background: #EEE;
} }
#SearchBox {
float: left;
width: 100%;
margin: 0 0 5px 0;
padding-left: 5px;
position: relative;
}
#SearchControls { #SearchControls {
float: left;
position: relative;
margin-top:2px; margin-top:2px;
} }
#SearchControls label { #SearchControls label {
@ -387,9 +349,6 @@ body.stillLoading select {
width: 16px; width: 16px;
height: 16px; height: 16px;
background: #EFEFEF url(../images/network-save.gif) no-repeat; background: #EFEFEF url(../images/network-save.gif) no-repeat;
position: absolute;
left: 95px;
top: 2px;
} }
#searchIndicator.loading { #searchIndicator.loading {
display: block; display: block;
@ -406,9 +365,6 @@ body.stillLoading select {
} }
#sitetree_ul ul#sitetree { #sitetree_ul ul#sitetree {
padding: 0; padding: 0;
}
#sitetree {
width: 500px; /* IE's chocking right now */
} }
html>body #sitetree { html>body #sitetree {
width: auto; width: auto;

View File

@ -1,11 +1,25 @@
var outerLayout;
(function($) { (function($) {
$('body.CMSMain').concrete({ss:{cmsMain:{ $('body.CMSMain').concrete({ss:{cmsMain:{
mainLayout: null, mainLayout: null,
onmatch: function() { onmatch: function() {
var $this = $(this);
this.mainLayout = this.ss().cmsMain()._setupLayout(); this.mainLayout = this.ss().cmsMain()._setupLayout();
// artificially delay the resize event 200ms
// to avoid overlapping height changes in different onresize() methods
$(window).resize(function () {
var timerID = "timerCMSMainResize";
if (window[timerID]) clearTimeout(window[timerID]);
window[timerID] = setTimeout(function() {$this.ss().cmsMain()._resizeChildren();}, 200);
});
this.ss().cmsMain()._resizeChildren();
},
_resizeChildren: function() {
$("#treepanes").accordion("resize");
$('#sitetree_and_tools').fitHeightToParent();
}, },
/** /**
@ -17,6 +31,7 @@ var outerLayout;
* - south: "Page view", "profile" and "logout" links * - south: "Page view", "profile" and "logout" links
*/ */
_setupLayout: function() { _setupLayout: function() {
var $this = this;
// layout containing the tree, CMS menu, the main form etc. // layout containing the tree, CMS menu, the main form etc.
var layout = $('body').layout({ var layout = $('body').layout({
defaults: { defaults: {
@ -44,8 +59,8 @@ var outerLayout;
}, },
west: { west: {
size: 250, size: 250,
onresize: function () { $("#treepanes").accordion("resize"); }, onresize: function() {$this.ss().cmsMain()._resizeChildren();},
onopen: function () { $("#treepanes").accordion("resize"); }, onopen: function() {$this.ss().cmsMain()._resizeChildren();},
fxName: "none" fxName: "none"
}, },
center: {} center: {}
@ -62,7 +77,9 @@ var outerLayout;
} }
}}}); }}});
$('#Form_EditForm').concrete({
})
})(jQuery); })(jQuery);
jQuery(document).ready(function() {
// @todo remove
jQuery.concrete.triggerMatching();
});

View File

@ -64,10 +64,12 @@
// artificially delay the resize event 200ms // artificially delay the resize event 200ms
// to avoid overlapping height changes in different onresize() methods // to avoid overlapping height changes in different onresize() methods
$(window).resize(function () { $(window).resize(function () {
var timerID = "timerLayout_"+this.id; var timerID = "timerLeftAndMainResize";
if (window[timerID]) clearTimeout(window[timerID]); if (window[timerID]) clearTimeout(window[timerID]);
window[timerID] = setTimeout(function() {$this.ss()._resizeChildren();}, 200); window[timerID] = setTimeout(function() {$this.ss()._resizeChildren();}, 200);
}).trigger('resize'); });
this.ss()._resizeChildren();
// trigger resize whenever new tabs are shown // trigger resize whenever new tabs are shown
// @todo This is called multiple times when tabs are loaded // @todo This is called multiple times when tabs are loaded
@ -194,12 +196,28 @@
} }
}}); }});
/**
* All buttons in the right CMS form go through here by default.
* We need this onclick overloading because we can't get to the
* clicked button from a form.onsubmit event.
*/
$('#Form_EditForm .Actions :submit').concrete({ss:{ $('#Form_EditForm .Actions :submit').concrete({ss:{
onclick: function(e) { onclick: function(e) {
$(this[0].form).ss().ajaxSubmit(this); $(this[0].form).ss().ajaxSubmit(this);
return false; return false;
} }
}}); }});
$('#TreeActions').concrete({
onmatch: function() {
// setup "create", "search", "batch actions" layers above tree
this.tabs({
selected: null,
collapsible: true
});
}
});
})(jQuery); })(jQuery);
jQuery(document).ready(function() { jQuery(document).ready(function() {

View File

@ -458,43 +458,6 @@ SiteTreeNode.prototype = {
} }
} }
/**
* Action panel at the top of the left hand tree
*/
treeactions = {
toggleSelection : function(li) {
li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
// Deselect
if(li.selected) this.closeSelection(li, true);
else this.openSelection(li, true);
return li.selected;
},
closeSelection : function(li, nested) {
li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
Element.hide(_HANDLER_FORMS[li.id]);
removeClass(li, 'selected');
li.selected = false;
$(_HANDLER_FORMS[li.id]).notify('Close');
if(li.onclose) li.onclose();
},
openSelection: function(li, nested) {
li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
addClass(li, 'selected');
Element.show(_HANDLER_FORMS[li.id]);
li.selected = true;
// Deselect siblings
var i, set = li.parentNode.getElementsByTagName('li');
for(i=0;i<set.length;i++) if(li != set[i] && set[i].selected) {
this.closeSelection(set[i], true);
}
}
}
// Build the site tree // Build the site tree
SiteTree.applyTo('#sitetree'); SiteTree.applyTo('#sitetree');

View File

@ -0,0 +1,114 @@
<div id="TreeActions" class="ss-tabset">
<ul>
<li>
<a href="#TreeActions-create">
<% _t('CREATE','Create',PR_HIGH) %>
</a>
</li>
<li>
<a href="#TreeActions-search">
<% _t('SEARCH','Search',PR_HIGH) %>
</a>
</li>
<li>
<a href="#TreeActions-batchactions">
<% _t('BATCHACTIONS','Batch Actions',PR_HIGH) %>
</a>
</li>
</ul>
<div id="TreeActions-create">
<% control AddPageOptionsForm %>
<form class="actionparams" id="$FormName" action="$FormAction">
<% control Fields %>
$FieldHolder
<% end_control %>
<div>
<input class="action" type="submit" value="<% _t('GO','Go') %>" />
</div>
</form>
<% end_control %>
</div>
<div id="TreeActions-search">
<form class="actionparams" id="search_options" action="admin/filterSiteTree">
<div>
<input type="hidden" id="SiteTreeIsFiltered" value="0" />
<div id="SearchBox">
<div class="SearchCriteria">Text:</div>
<input type="text" id="SiteTreeSearchTerm" class='SearchCriteria' name="SiteTreeSearchTerm" />
</div>
<div id="ContainerSiteTreeFilterDate" class="SearchCriteriaContainer" style="display:none">
<div id="TextSiteTreeFilterDate" class="SearchCriteria"><% _t('EDITEDSINCE','Edited Since') %>:</div>
<div id="InputSiteTreeFilterDate">$SiteTreeFilterDateField</div>
</div>
<div id='ContainerSiteTreeFilterClassName' class='SearchCriteriaContainer' style="display:none">
<div id="TextSiteTreeFilterClassName" class="SearchCriteria">Page type: </div>
<div id="InputSiteTreeFilterClassName">$SiteTreeFilterPageTypeField</div>
</div>
<% control SiteTreeFilterOptions %>
<div id="Container$Column" class="SearchCriteriaContainer" style="display:none">
<div id="Text$Column" class="SearchCriteria">$Title:</div>
<input id="Input$Column" name="$Column" class="SearchCriteria" />
</div>
<% end_control %>
<div id='SearchControls'>
<select id="SiteTreeFilterAddCriteria">
<option value=""><% _t('ADDSEARCHCRITERIA','Add Criteria') %></option>
<option value="SiteTreeFilterDate"><% _t('EDITEDSINCE','Edited Since') %></option>
<option value="SiteTreeFilterClassName">Page type</option>
<% control SiteTreeFilterOptions %>
<option value="$Column">$Title</option>
<% end_control %>
</select>
<div id="searchIndicator">&nbsp;</div>
<input type="submit" id="SiteTreeSearchClearButton" class="action" value="<% _t('CLEAR') %>" title="<% _t('CLEARTITLE','Clear the search and view all items') %>" />
<input type="submit" id="SiteTreeSearchButton" class="action" value="<% _t('SEARCH') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" />
</div>
</div>
</form>
</div>
<div id="TreeActions-batchactions">
<form class="actionparams" style="border:0" id="batchactions_options" action="">
<p><% _t('SELECTPAGESACTIONS','Select the pages that you want to change &amp; then click an action:') %></p>
<input type="hidden" name="csvIDs" />
<div>
<select id="choose_batch_action">
<% control BatchActionList %>
<option value="$Link" class="{doingText:'$DoingText'}">$Title</option>
<% end_control %>
</select>
<input id="batchactions_go" type="submit" class="action" value="Go" />
</div>
</form>
</div>
</div>
<div class="checkboxAboveTree" style="border-bottom:none">
Show: <select id="siteTreeFilterList">
<% control SiteTreeFilters %>
<option value="$ClassName">$Title</option>
<% end_control %>
</select> <img id="siteTreeFilterActionIndicator" style="display:none" src="cms/images/network-save.gif">
</div>
<div class="checkboxAboveTree">
<img id="checkboxActionIndicator" src="cms/images/network-save.gif">
<div>
<input type="checkbox" id="sortitems" />
<label for="sortitems"><% _t('ENABLEDRAGGING','Allow drag &amp; drop reordering', PR_HIGH) %></label>
</div>
</div>
<% if IsTranslatableEnabled %>
<div id="LangSelector_holder">
Language: $LangSelector
</div>
<% end_if %>

View File

@ -3,117 +3,14 @@
<a href="#"><% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %></a> <a href="#"><% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %></a>
</h3> </h3>
<div id="sitetree_holder"> <div id="sitetree_holder">
<div id="sitetree_and_tools">
<div id="TreeTools"> <div id="TreeTools">
<ul id="TreeActions" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <% include CMSMain_TreeTools %>
<li id="addpage" class="action">
<button class="ss-ui-button" type="button">
<% _t('CREATE','Create',PR_HIGH) %>
</button>
</li>
<li id="search" class="action">
<button class="ss-ui-button" type="button">
<% _t('SEARCH','Search',PR_HIGH) %>
</button>
</li>
<li id="batchactions" class="action">
<button class="ss-ui-button" type="button">
<% _t('BATCHACTIONS','Batch Actions',PR_HIGH) %>
</button>
</li>
</ul>
<div style="clear:both;"></div>
<% control AddPageOptionsForm %>
<form class="actionparams" id="$FormName" style="display: none" action="$FormAction">
<% control Fields %>
$FieldHolder
<% end_control %>
<div>
<input class="action" type="submit" value="<% _t('GO','Go') %>" />
</div>
</form>
<% end_control %>
<form class="actionparams" style="display: none" id="search_options" action="admin/filterSiteTree">
<div>
<input type="hidden" id="SiteTreeIsFiltered" value="0" />
<div id="SearchBox">
<div class="SearchCriteria">Text:</div>
<input type="text" id="SiteTreeSearchTerm" class='SearchCriteria' name="SiteTreeSearchTerm" />
</div>
<div id="ContainerSiteTreeFilterDate" class="SearchCriteriaContainer" style="display:none">
<div id="TextSiteTreeFilterDate" class="SearchCriteria"><% _t('EDITEDSINCE','Edited Since') %>:</div>
<div id="InputSiteTreeFilterDate">$SiteTreeFilterDateField</div>
</div>
<div id='ContainerSiteTreeFilterClassName' class='SearchCriteriaContainer' style="display:none">
<div id="TextSiteTreeFilterClassName" class="SearchCriteria">Page type: </div>
<div id="InputSiteTreeFilterClassName">$SiteTreeFilterPageTypeField</div>
</div>
<% control SiteTreeFilterOptions %>
<div id="Container$Column" class="SearchCriteriaContainer" style="display:none">
<div id="Text$Column" class="SearchCriteria">$Title:</div>
<input id="Input$Column" name="$Column" class="SearchCriteria" />
</div>
<% end_control %>
<div id='SearchControls'>
<select id="SiteTreeFilterAddCriteria">
<option value=""><% _t('ADDSEARCHCRITERIA','Add Criteria') %></option>
<option value="SiteTreeFilterDate"><% _t('EDITEDSINCE','Edited Since') %></option>
<option value="SiteTreeFilterClassName">Page type</option>
<% control SiteTreeFilterOptions %>
<option value="$Column">$Title</option>
<% end_control %>
</select>
<div id="searchIndicator">&nbsp;</div>
<input type="submit" id="SiteTreeSearchClearButton" class="action" value="<% _t('CLEAR') %>" title="<% _t('CLEARTITLE','Clear the search and view all items') %>" />
<input type="submit" id="SiteTreeSearchButton" class="action" value="<% _t('SEARCH') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" />
</div>
</div>
</form>
<div id="batchactionsforms" style="display: none">
<form class="actionparams" style="border:0" id="batchactions_options" action="">
<p><% _t('SELECTPAGESACTIONS','Select the pages that you want to change &amp; then click an action:') %></p>
<input type="hidden" name="csvIDs" />
<div>
<select id="choose_batch_action">
<% control BatchActionList %>
<option value="$Link" class="{doingText:'$DoingText'}">$Title</option>
<% end_control %>
</select>
<input id="batchactions_go" type="submit" class="action" value="Go" />
</div>
</form>
</div>
<div class="checkboxAboveTree" style="border-bottom:none">
Show: <select id="siteTreeFilterList">
<% control SiteTreeFilters %>
<option value="$ClassName">$Title</option>
<% end_control %>
</select> <img id="siteTreeFilterActionIndicator" style="display:none" src="cms/images/network-save.gif">
</div>
<div class="checkboxAboveTree">
<img id="checkboxActionIndicator" src="cms/images/network-save.gif">
<div>
<input type="checkbox" id="sortitems" />
<label for="sortitems"><% _t('ENABLEDRAGGING','Allow drag &amp; drop reordering', PR_HIGH) %></label>
</div>
</div>
<% if IsTranslatableEnabled %>
<div id="LangSelector_holder">
Language: $LangSelector
</div>
<% end_if %>
</div> </div>
<div id="sitetree_ul"> <div id="sitetree_ul">
$SiteTreeAsUL $SiteTreeAsUL
</div> </div>
</div>
<div id="publication_key"> <div id="publication_key">
<% _t('KEY','Key:') %> <% _t('KEY','Key:') %>
@ -121,17 +18,9 @@
<del style="cursor: help" title="<% _t('DELETEDSTILLLIVE','Deleted from the draft site but still on the live site') %>"><% _t('DEL','deleted') %></del> <del style="cursor: help" title="<% _t('DELETEDSTILLLIVE','Deleted from the draft site but still on the live site') %>"><% _t('DEL','deleted') %></del>
<span style="cursor: help" title="<% _t('EDITEDNOTPUB','Edited on the draft site and not published yet') %>" class="modified"><% _t('CHANGED','changed') %></span> <span style="cursor: help" title="<% _t('EDITEDNOTPUB','Edited on the draft site and not published yet') %>" class="modified"><% _t('CHANGED','changed') %></span>
<span style="cursor: help" title="<% _t('NOTINMENU','Excluded from navigation menus') %>" class="notinmenu"><% _t('HIDDEN','hidden') %></span> <span style="cursor: help" title="<% _t('NOTINMENU','Excluded from navigation menus') %>" class="notinmenu"><% _t('HIDDEN','hidden') %></span>
</div> </div>
</div> </div>
<!--
<div id="search_holder" style="display:none">
<h2>Search</h2>
<div class="unitBody"></div>
</div>
-->
<h3> <h3>
<a href="#"><% _t('PAGEVERSIONH','Page Version History') %></a> <a href="#"><% _t('PAGEVERSIONH','Page Version History') %></a>
</h3> </h3>