mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
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-.
This commit is contained in:
Will Rossiter
parent
dc222d54f8
commit
e385bbcbf8
@ -13,14 +13,14 @@ div.TreeDropdownField {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.TreeDropdownField .title {
|
||||
div.TreeDropdownField .treedropdownfield-title {
|
||||
float: left;
|
||||
padding: 7px;
|
||||
line-height: 16px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
div.TreeDropdownField .panel {
|
||||
div.TreeDropdownField .treedropdownfield-panel {
|
||||
clear: left;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
@ -37,14 +37,14 @@ div.TreeDropdownField {
|
||||
-o-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;
|
||||
}
|
||||
div.TreeDropdownField .panel ul.tree a {
|
||||
div.TreeDropdownField .treedropdownfield-panel ul.tree a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div.TreeDropdownField .toggle-panel-link {
|
||||
div.TreeDropdownField .treedropdownfield-toggle-panel-link {
|
||||
border: none;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
@ -64,15 +64,16 @@ div.TreeDropdownField {
|
||||
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
|
||||
|
||||
background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
|
||||
border-left: 1px solid #aaa;
|
||||
}
|
||||
div.TreeDropdownField .toggle-panel-link.open-tree {
|
||||
div.TreeDropdownField .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
div.TreeDropdownField .toggle-panel-link a {
|
||||
div.TreeDropdownField .treedropdownfield-toggle-panel-link a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
|
||||
@ -26,13 +26,13 @@
|
||||
$('.TreeDropdownField').entwine({
|
||||
onmatch: function() {
|
||||
this.append(
|
||||
'<span class="title"></span>' +
|
||||
'<div class="toggle-panel-link" ><a href="#" class="ui-icon ui-icon-triangle-1-s"></a></div>' +
|
||||
'<div class="panel"><div class="tree-holder"></div></div>'
|
||||
'<span class="treedropdownfield-title"></span>' +
|
||||
'<div class="treedropdownfield-toggle-panel-link"><a href="#" class="ui-icon ui-icon-triangle-1-s"></a></div>' +
|
||||
'<div class="treedropdownfield-panel"><div class="tree-holder"></div></div>'
|
||||
);
|
||||
|
||||
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'));
|
||||
|
||||
@ -40,36 +40,56 @@
|
||||
this._super();
|
||||
},
|
||||
getPanel: function() {
|
||||
return this.find('.panel');
|
||||
return this.find('.treedropdownfield-panel');
|
||||
},
|
||||
openPanel: function() {
|
||||
// close all other panels
|
||||
$('.TreeDropdownField').closePanel();
|
||||
|
||||
var panel = this.getPanel(), tree = this.find('.tree-holder');
|
||||
|
||||
// set the panel to the bottom of the field
|
||||
panel.css('top', this.position().top + this.height());
|
||||
// set the panel to the bottom of the field. Takes into account the
|
||||
// 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.show();
|
||||
|
||||
// swap the down arrow with an up arrow
|
||||
var toggle = this.find(".toggle-panel-link");
|
||||
toggle.addClass('open-tree');
|
||||
var toggle = this.find(".treedropdownfield-toggle-panel-link");
|
||||
toggle.addClass('treedropdownfield-open-tree');
|
||||
this.addClass("treedropdownfield-open-tree");
|
||||
|
||||
toggle.find("a")
|
||||
.removeClass('ui-icon-triangle-1-s')
|
||||
.addClass('ui-icon-triangle-1-n');
|
||||
|
||||
if(tree.is(':empty')) this.loadTree();
|
||||
|
||||
},
|
||||
closePanel: function() {
|
||||
// swap the up arrow with a down arrow
|
||||
var toggle = this.find(".toggle-panel-link");
|
||||
toggle.removeClass('open-tree');
|
||||
var toggle = this.find(".treedropdownfield-toggle-panel-link");
|
||||
toggle.removeClass('treedropdownfield-open-tree');
|
||||
this.removeClass('treedropdownfield-open-tree');
|
||||
|
||||
toggle.find("a")
|
||||
.removeClass('ui-icon-triangle-1-n')
|
||||
.addClass('ui-icon-triangle-1-s');
|
||||
|
||||
|
||||
this.getPanel().hide();
|
||||
},
|
||||
togglePanel: function() {
|
||||
@ -78,11 +98,11 @@
|
||||
setTitle: function(title) {
|
||||
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)
|
||||
},
|
||||
getTitle: function() {
|
||||
return this.find('.title').text();
|
||||
return this.find('.treedropdownfield-title').text();
|
||||
},
|
||||
setValue: function(val) {
|
||||
this.find(':input:hidden').val(val);
|
||||
@ -167,6 +187,7 @@
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
$('.TreeDropdownField .tree-holder li').entwine({
|
||||
/**
|
||||
* Overload to return more data. The same data should be set on initial
|
||||
@ -180,12 +201,14 @@
|
||||
return {ClassName: klass};
|
||||
}
|
||||
});
|
||||
|
||||
$('.TreeDropdownField *').entwine({
|
||||
getField: function() {
|
||||
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) {
|
||||
this.getField().togglePanel();
|
||||
return false;
|
||||
@ -198,17 +221,18 @@
|
||||
|
||||
var title = this.data('title');
|
||||
this.find('.title').replaceWith(
|
||||
$('<input type="text" class="title search" />')
|
||||
$('<input type="text" class="treedropdownfield-title search" />')
|
||||
);
|
||||
|
||||
this.setTitle(title ? title : strings.searchFieldTitle);
|
||||
},
|
||||
setTitle: function(title) {
|
||||
if(!title) title = strings.fieldTitle;
|
||||
|
||||
this.find('.title').val(title);
|
||||
this.find('.treedropdownfield-title').val(title);
|
||||
},
|
||||
getTitle: function() {
|
||||
return this.find('.title').val();
|
||||
return this.find('.treedropdownfield-title').val();
|
||||
},
|
||||
search: function(str, callback) {
|
||||
this.openPanel();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user