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

BUGFIX: take into account the scrollTop of the first parent element when positioning the dropdown box. MINOR: prefix all generic classes used in the TreeDropdownField with treedropdownfield-.

Browse Source
This commit is contained in:
Will Rossiter 2011-08-09 17:43:40 +12:00
parent dc222d54f8
commit e385bbcbf8
2 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/TreeDropdownField.css
View File

@ -13,14 +13,14 @@ div.TreeDropdownField {
margin: 0; margin: 0;
} }
div.TreeDropdownField .title { div.TreeDropdownField .treedropdownfield-title {
float: left; float: left;
padding: 7px; padding: 7px;
line-height: 16px; line-height: 16px;
overflow:hidden; overflow:hidden;
} }
div.TreeDropdownField .panel { div.TreeDropdownField .treedropdownfield-panel {
clear: left; clear: left;
position: absolute; position: absolute;
overflow: auto; overflow: auto;
@ -37,14 +37,14 @@ div.TreeDropdownField {
-o-box-shadow : 0 4px 5px rgba(0,0,0,.15); -o-box-shadow : 0 4px 5px rgba(0,0,0,.15);
box-shadow : 0 4px 5px rgba(0,0,0,.15); box-shadow : 0 4px 5px rgba(0,0,0,.15);
} }
div.TreeDropdownField .panel ul.tree { div.TreeDropdownField .treedropdownfield-panel ul.tree {
margin: 0; margin: 0;
} }
div.TreeDropdownField .panel ul.tree a { div.TreeDropdownField .treedropdownfield-panel ul.tree a {
font-size: 12px; font-size: 12px;
} }
div.TreeDropdownField .toggle-panel-link { div.TreeDropdownField .treedropdownfield-toggle-panel-link {
border: none; border: none;
margin: 0; margin: 0;
z-index: 0; z-index: 0;
@ -64,15 +64,16 @@ div.TreeDropdownField {
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%); background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%); background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
} }
div.TreeDropdownField .toggle-panel-link.open-tree { div.TreeDropdownField .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree {
background: transparent; background: transparent;
border: none; border: none;
} }
div.TreeDropdownField .toggle-panel-link a { div.TreeDropdownField .treedropdownfield-toggle-panel-link a {
text-decoration: none; text-decoration: none;
display: block; display: block;
border: 0; border: 0;

58
javascript/TreeDropdownField.js
View File

@ -26,13 +26,13 @@
$('.TreeDropdownField').entwine({ $('.TreeDropdownField').entwine({
onmatch: function() { onmatch: function() {
this.append( this.append(
'<span class="title"></span>' + '<span class="treedropdownfield-title"></span>' +
'<div class="toggle-panel-link" ><a href="#" class="ui-icon ui-icon-triangle-1-s"></a></div>' + '<div class="treedropdownfield-toggle-panel-link"><a href="#" class="ui-icon ui-icon-triangle-1-s"></a></div>' +
'<div class="panel"><div class="tree-holder"></div></div>' '<div class="treedropdownfield-panel"><div class="tree-holder"></div></div>'
); );
var linkTitle = strings.openLink; var linkTitle = strings.openLink;
if(linkTitle) this.find("toggle-panel-link a").attr('title', linkTitle); if(linkTitle) this.find("treedropdownfield-toggle-panel-link a").attr('title', linkTitle);
if(this.data('title')) this.setTitle(this.data('title')); if(this.data('title')) this.setTitle(this.data('title'));
@ -40,36 +40,56 @@
this._super(); this._super();
}, },
getPanel: function() { getPanel: function() {
return this.find('.panel'); return this.find('.treedropdownfield-panel');
}, },
openPanel: function() { openPanel: function() {
// close all other panels
$('.TreeDropdownField').closePanel();
var panel = this.getPanel(), tree = this.find('.tree-holder'); var panel = this.getPanel(), tree = this.find('.tree-holder');
// set the panel to the bottom of the field // set the panel to the bottom of the field. Takes into account the
panel.css('top', this.position().top + this.height()); // mouse scroll position.
// @todo - support for opening above content
var scrollTop = 0;
this.parents().each(function(i, e) {
if($(e).scrollTop() > 0) {
scrollTop = $(e).scrollTop();
return;
}
});
var top = this.position().top + this.height() + scrollTop;
panel.css('top', top);
panel.css('width', this.width()); panel.css('width', this.width());
panel.show(); panel.show();
// swap the down arrow with an up arrow // swap the down arrow with an up arrow
var toggle = this.find(".toggle-panel-link"); var toggle = this.find(".treedropdownfield-toggle-panel-link");
toggle.addClass('open-tree'); toggle.addClass('treedropdownfield-open-tree');
this.addClass("treedropdownfield-open-tree");
toggle.find("a") toggle.find("a")
.removeClass('ui-icon-triangle-1-s') .removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-n'); .addClass('ui-icon-triangle-1-n');
if(tree.is(':empty')) this.loadTree(); if(tree.is(':empty')) this.loadTree();
}, },
closePanel: function() { closePanel: function() {
// swap the up arrow with a down arrow // swap the up arrow with a down arrow
var toggle = this.find(".toggle-panel-link"); var toggle = this.find(".treedropdownfield-toggle-panel-link");
toggle.removeClass('open-tree'); toggle.removeClass('treedropdownfield-open-tree');
this.removeClass('treedropdownfield-open-tree');
toggle.find("a") toggle.find("a")
.removeClass('ui-icon-triangle-1-n') .removeClass('ui-icon-triangle-1-n')
.addClass('ui-icon-triangle-1-s'); .addClass('ui-icon-triangle-1-s');
this.getPanel().hide(); this.getPanel().hide();
}, },
togglePanel: function() { togglePanel: function() {
@ -78,11 +98,11 @@
setTitle: function(title) { setTitle: function(title) {
if(!title) title = strings.fieldTitle; if(!title) title = strings.fieldTitle;
this.find('.title').text(title); this.find('.treedropdownfield-title').text(title);
this.data('title', title); // separate view from storage (important for search cancellation) this.data('title', title); // separate view from storage (important for search cancellation)
}, },
getTitle: function() { getTitle: function() {
return this.find('.title').text(); return this.find('.treedropdownfield-title').text();
}, },
setValue: function(val) { setValue: function(val) {
this.find(':input:hidden').val(val); this.find(':input:hidden').val(val);
@ -167,6 +187,7 @@
return []; return [];
} }
}); });
$('.TreeDropdownField .tree-holder li').entwine({ $('.TreeDropdownField .tree-holder li').entwine({
/** /**
* Overload to return more data. The same data should be set on initial * Overload to return more data. The same data should be set on initial
@ -180,12 +201,14 @@
return {ClassName: klass}; return {ClassName: klass};
} }
}); });
$('.TreeDropdownField *').entwine({ $('.TreeDropdownField *').entwine({
getField: function() { getField: function() {
return this.parents('.TreeDropdownField:first'); return this.parents('.TreeDropdownField:first');
} }
}); });
$('.TreeDropdownField .toggle-panel-link, .TreeDropdownField span.title').entwine({
$('.TreeDropdownField .treedropdownfield-toggle-panel-link, .TreeDropdownField span.treedropdownfield-title').entwine({
onclick: function(e) { onclick: function(e) {
this.getField().togglePanel(); this.getField().togglePanel();
return false; return false;
@ -198,17 +221,18 @@
var title = this.data('title'); var title = this.data('title');
this.find('.title').replaceWith( this.find('.title').replaceWith(
$('<input type="text" class="title search" />') $('<input type="text" class="treedropdownfield-title search" />')
); );
this.setTitle(title ? title : strings.searchFieldTitle); this.setTitle(title ? title : strings.searchFieldTitle);
}, },
setTitle: function(title) { setTitle: function(title) {
if(!title) title = strings.fieldTitle; if(!title) title = strings.fieldTitle;
this.find('.title').val(title); this.find('.treedropdownfield-title').val(title);
}, },
getTitle: function() { getTitle: function() {
return this.find('.title').val(); return this.find('.treedropdownfield-title').val();
}, },
search: function(str, callback) { search: function(str, callback) {
this.openPanel(); this.openPanel();