From e46bcf792c7103661181cfd85f4e214acfd48212 Mon Sep 17 00:00:00 2001
From: Loz Calver <lozcalver@bigfork.co.uk>
Date: Wed, 23 Oct 2013 13:32:01 +0100
Subject: [PATCH] FIX: Allow TreeDropdownField to open upwards (fixes #2188)

---
 admin/css/screen.css            |  2 ++
 admin/scss/_forms.scss          | 15 +++++++++++++++
 javascript/TreeDropdownField.js | 33 +++++++++++++++++++++++++++++++--
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/admin/css/screen.css b/admin/css/screen.css
index 1df00cfbe..903814949 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -182,6 +182,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .field .TreeDropdownField { padding: 0; }
 .field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
 .field .TreeDropdownField.treedropdownfield-open-tree { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; }
+.field .TreeDropdownField.treedropdownfield-with-rise { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; }
+.field .TreeDropdownField.treedropdownfield-with-rise .treedropdownfield-panel { border: 1px solid #b3b3b3; border-bottom: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
 .field .TreeDropdownField .badge { display: none; }
 .field .dropdown select { margin-top: 8px; }
 .field .chzn-container { max-width: 416px; }
diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss
index 9f17487ca..f7fb6d16b 100644
--- a/admin/scss/_forms.scss
+++ b/admin/scss/_forms.scss
@@ -191,6 +191,21 @@ form.small .field, .field.small {
 			@include border-bottom-right-radius(0);
 		}
 
+		&.treedropdownfield-with-rise {
+			-webkit-border-radius: 0 0 4px 4px;
+			-moz-border-radius: 0 0 4px 4px;
+			border-radius: 0 0 4px 4px;
+
+			.treedropdownfield-panel {
+				border: 1px solid lighten($color-medium-separator, 20%);
+				border-bottom: none;
+
+				-webkit-border-radius: 4px 4px 0 0;
+			-moz-border-radius: 4px 4px 0 0;
+			border-radius: 4px 4px 0 0;
+			}
+		}
+
 		// Hide badges, as they cost too much horizontal space,
 		// and mess up rendering for selected node title
 		.badge {
diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js
index 13042dac0..29dbf756d 100644
--- a/javascript/TreeDropdownField.js
+++ b/javascript/TreeDropdownField.js
@@ -86,16 +86,45 @@
 					.removeClass('ui-icon-triangle-1-s')
 					.addClass('ui-icon-triangle-1-n');
 				
-				if(tree.is(':empty') && !panel.hasClass('loading')) this.loadTree();
+				if(tree.is(':empty') && !panel.hasClass('loading')) {
+					this.loadTree(null, this._riseUp);
+				} else {
+					this._riseUp();
+				}
+
 				this.trigger('panelshow');
 			},
+			_riseUp: function() {
+				var container = this,
+					dropdown = this.getPanel(),
+					toggle = this.find(".treedropdownfield-toggle-panel-link"),
+					offsetTop = toggle.innerHeight(),
+					elHeight,
+					elPos,
+					endOfWindow;
+
+				if (toggle.length > 0) {
+					endOfWindow = ($(window).height() + $(document).scrollTop()) - toggle.innerHeight();
+					elPos = toggle.offset().top;
+					elHeight = dropdown.innerHeight();
+					
+					// If the dropdown is too close to the bottom of the page, position it above the 'trigger'
+					if (elPos + elHeight > endOfWindow && elPos - elHeight > 0) {
+						container.addClass('treedropdownfield-with-rise');
+						offsetTop = -dropdown.outerHeight();
+					} else {
+						container.removeClass('treedropdownfield-with-rise');
+					}
+				}
+				dropdown.css({"top": offsetTop + "px"});
+			},
 			closePanel: function() {
 				jQuery('body').unbind('click', _clickTestFn);
 
 				// swap the up arrow with a down arrow
 				var toggle = this.find(".treedropdownfield-toggle-panel-link");
 				toggle.removeClass('treedropdownfield-open-tree');
-				this.removeClass('treedropdownfield-open-tree');
+				this.removeClass('treedropdownfield-open-tree treedropdownfield-with-rise');
 								
 				toggle.find("a")
 					.removeClass('ui-icon-triangle-1-n')