tonyair/silverstripe-reports
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-reports synced 2024-10-22 11:05:53 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/cms_left.css
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;

50
css/layout.css
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;

31
javascript/CMSMain.js
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();
});

22
javascript/LeftAndMain.js
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() {

37
javascript/LeftAndMain_left.js
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');

114
templates/Includes/CMSMain_TreeTools.ss Normal file
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 %>

117
templates/Includes/CMSMain_left.ss
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>