Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

BUGFIX: take into account the scrollTop of the first parent element w…

…hen positioning the dropdown box. MINOR: prefix all generic classes used in the TreeDropdownField with treedropdownfield-.
  • Loading branch information...
commit e385bbcbf829c4d66bfddc4e5a0cd07c2113eebc 1 parent dc222d5
@wilr wilr authored
Showing with 50 additions and 25 deletions.
  1. +8 −7 css/TreeDropdownField.css
  2. +42 −18 javascript/TreeDropdownField.js
View
15 css/TreeDropdownField.css
@@ -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;
View
60 javascript/TreeDropdownField.js
@@ -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();
Please sign in to comment.
Something went wrong with that request. Please try again.