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
2024-06-23 04:59:26 +02:00 · 2009-11-21 02:36:09 +00:00 · 2009-11-21 02:36:09 +00:00 · c5eadd81ab
commit c5eadd81ab
parent 5d4e5def8b
7 changed files with 173 additions and 214 deletions
--- a/css/cms_left.css
+++ b/css/cms_left.css
@ -155,7 +155,6 @@ ul.tree .deleted {
 	border-bottom: 1px solid #ccc;
 	background: #eee;
 	padding: 3px;
-	text-align: center;
 	font-weight: bold;
 }
 	#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%;
 }

+#sitetree_ul {
+	overflow: auto;
+}
+
 ul#sitetree.tree ul {
 	margin-left: 0;
 }
@ -430,7 +433,6 @@ ul.tree span.untranslated a:visited {
 	padding: 5px 0 0 0;
 	overflow: hidden;
 	clear: left;
-	width: 100%;
 }
 	.checkboxAboveTree div {
 		clear: left;
--- a/css/layout.css
+++ b/css/layout.css
@ -113,35 +113,11 @@ body {
 /**
 * Actions/Buttons
 */
-
-#TreeActions {
-	float: left;
-	width: 100%;
-	padding-bottom: 5px;
-}
-	#TreeActions li {
-		float: left;
-	}
 	
 	#TreeActions button.disabled {
 		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,
 	input.disabled {
 		color: #666;
@ -188,7 +164,7 @@ body.stillLoading select {
 /**
 * Hidden left-hand panel
 */
-#left.hidden form, #left.hidden .title, #left.hidden #TreeActions {
+#left.hidden form, #left.hidden .title {
 	display: none;
 }

@ -352,28 +328,14 @@ body.stillLoading select {


 /** LEFT PANEL **/
-#sitetree_holder {
-	height: 80%;
-	width: 100%;
-	overflow-y: auto;
-	overflow-x: hidden;
+#sitetree_and_tools {
+	overflow: auto;
 }
-	
+
 	#sitetree_holder #TreeTools {
-		float: left;
-		width: inherit;
 		background: #EEE;
 	}
-	#SearchBox {
-		float: left;
-		width: 100%;
-		margin: 0 0 5px 0;
-		padding-left: 5px;
-		position: relative;
-	}
 	#SearchControls {
-		float: left;
-		position: relative;
 		margin-top:2px;
 	}
 		#SearchControls label {
@ -387,9 +349,6 @@ body.stillLoading select {
 		width: 16px;
 		height: 16px;
 		background: #EFEFEF url(../images/network-save.gif) no-repeat;
-		position: absolute;
-		left: 95px;
-		top: 2px;
 	}
 		#searchIndicator.loading {
 			display: block;
@ -406,9 +365,6 @@ body.stillLoading select {
 	}
 	#sitetree_ul ul#sitetree {
 		padding: 0;
-	}
-	#sitetree {
-		width: 500px; /* IE's chocking right now */
 	}
 		html>body #sitetree {
 			width: auto;
--- a/javascript/CMSMain.js
+++ b/javascript/CMSMain.js
@ -1,11 +1,25 @@
-var outerLayout;
-
 (function($) {
 	$('body.CMSMain').concrete({ss:{cmsMain:{
 		mainLayout: null,
 		
 		onmatch: function() {
+			var $this = $(this);
 			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
 		 */
 		_setupLayout: function() {
+			var $this = this;
 			// layout containing the tree, CMS menu, the main form etc.
 			var layout = $('body').layout({
 				defaults: {
@ -44,8 +59,8 @@ var outerLayout;
 				},
 				west: {
 					size: 250,
-					onresize: function () { $("#treepanes").accordion("resize"); },
-					onopen: function () { $("#treepanes").accordion("resize"); },
+					onresize: function() {$this.ss().cmsMain()._resizeChildren();},
+					onopen: function() {$this.ss().cmsMain()._resizeChildren();},
 					fxName: "none"
 				},
 				center: {}
@ -61,8 +76,10 @@ var outerLayout;
 			return layout;
 		}
 	}}});
-	
-	$('#Form_EditForm').concrete({
-		
-	})
-})(jQuery);
+
+})(jQuery);
+
+jQuery(document).ready(function() {
+	// @todo remove
+	jQuery.concrete.triggerMatching();
+});
--- a/javascript/LeftAndMain.js
+++ b/javascript/LeftAndMain.js
@ -64,10 +64,12 @@
 			// artificially delay the resize event 200ms
 			// to avoid overlapping height changes in different onresize() methods
 			$(window).resize(function () {
-				var timerID = "timerLayout_"+this.id;
+				var timerID = "timerLeftAndMainResize";
 				if (window[timerID]) clearTimeout(window[timerID]);
 				window[timerID] = setTimeout(function() {$this.ss()._resizeChildren();}, 200);
-			}).trigger('resize');
+			});
+			
+			this.ss()._resizeChildren();
 		
 			// trigger resize whenever new tabs are shown
 			// @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:{
 		onclick: function(e) {
 			$(this[0].form).ss().ajaxSubmit(this);
 			return false;
 		}
 	}});
+	
+	$('#TreeActions').concrete({
+		onmatch: function() {
+			// setup "create", "search", "batch actions" layers above tree
+			this.tabs({
+				selected: null,
+				collapsible: true
+			});
+		}
+	});
+	
 })(jQuery);

 jQuery(document).ready(function() {
--- a/javascript/LeftAndMain_left.js
+++ b/javascript/LeftAndMain_left.js
@ -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
 SiteTree.applyTo('#sitetree');

--- a/templates/Includes/CMSMain_TreeTools.ss
+++ b/templates/Includes/CMSMain_TreeTools.ss
@ -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 %>
--- a/templates/Includes/CMSMain_left.ss
+++ b/templates/Includes/CMSMain_left.ss
@ -3,117 +3,14 @@
 			<a href="#"><% _t('SITECONTENT TITLE','Site Content and Structure',PR_HIGH) %></a>
 		</h3>
 		<div id="sitetree_holder">
-			<div id="TreeTools">
-				 <ul id="TreeActions" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-					<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 id="sitetree_and_tools">
+				<div id="TreeTools">
+					 <% include CMSMain_TreeTools %>
 				</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 id="sitetree_ul">
+					$SiteTreeAsUL
 				</div>
 			</div>
-
-			<% if IsTranslatableEnabled %>
-			<div id="LangSelector_holder">
-				Language: $LangSelector
-			</div>
-			<% end_if %>
-
-			</div>
-			<div id="sitetree_ul">
-				$SiteTreeAsUL
-			</div>
 			
 			<div id="publication_key">
 				<% _t('KEY','Key:') %>
@ -121,16 +18,8 @@
 				<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('NOTINMENU','Excluded from navigation menus') %>" class="notinmenu"><% _t('HIDDEN','hidden') %></span>
-
 			</div>
 		</div>	
-		
-		<!--
-		<div id="search_holder" style="display:none">
-			<h2>Search</h2>
-			<div class="unitBody"></div>
-		</div>
-		-->

 		<h3>
 			<a href="#"><% _t('PAGEVERSIONH','Page Version History') %></a>