Permalink
Browse files

ENHANCEMENT Using jQuery UI tabs for tree tools like 'search' or 'bat…

…ch 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
  • Loading branch information...
1 parent 5d4e5de commit c5eadd81ab661f20a669a9e6e9996d15383453dd @chillu chillu committed Nov 21, 2009
View
@@ -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;
View
@@ -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;
@@ -407,9 +366,6 @@ body.stillLoading select {
#sitetree_ul ul#sitetree {
padding: 0;
}
- #sitetree {
- width: 500px; /* IE's chocking right now */
- }
html>body #sitetree {
width: auto;
}
View
@@ -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();
+});
@@ -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() {
@@ -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');
@@ -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 %>
Oops, something went wrong. Retry.

0 comments on commit c5eadd8

Please sign in to comment.