From 791e31c86ff5166dfd0f8ea566782d29b29656b1 Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Wed, 21 Feb 2018 17:04:32 +0000
Subject: [PATCH] Add some documentation to the filter opetations
---
opentech/static_src/src/javascript/main.js | 26 ++++++++++++++++------
1 file changed, 19 insertions(+), 7 deletions(-)
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index aa3657f40..f4ae7a1ed 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -74,23 +74,35 @@ import MobileSearch from './components/mobile-search';
});
function mobileFilterPadding (element) {
+ const expanded = 'expanded-filter-element';
const dropdown = $(element).closest('.select2');
- const openDropdown = $('.select2 .expanded');
+ const openDropdown = $('.select2 .' + expanded);
let dropdownMargin = 0;
+
if(openDropdown.length > 0 && !openDropdown.hasClass('select2-container--open')){
- openDropdown.removeClass('expanded');
+ // reset the margin of the select we previously worked
+ openDropdown.removeClass(expanded);
+ // store the offset to adjust the new select box (elements above the old dropdown unaffected)
if (dropdown.position().top > openDropdown.position().top ){
dropdownMargin = parseInt(openDropdown.css('marginBottom'));
}
openDropdown.css('margin-bottom', '0px');
}
+
if(dropdown.hasClass('select2-container--open')){
- dropdown.addClass('expanded');
- const id = $(element).closest('.select2-selection').attr('aria-owns');
- const match = $(`ul#${id}`);
+ dropdown.addClass(expanded);
+ const dropdownID = $(element).closest('.select2-selection').attr('aria-owns');
+ // Element which has the height of the select dropdown
+ const match = $(`ul#${dropdownID}`);
+ const dropdownHeight = match.outerHeight(true);
+
+ // Element which has the position of the dropdown
const positionalMatch = match.closest('.select2-container');
- const margin = match.outerHeight(true);
- dropdown.css('margin-bottom', `${margin}px`);
+
+ // Pad the bottom of the select box
+ dropdown.css('margin-bottom', `${dropdownHeight}px`);
+
+ // bump up the dropdown options by height of closed elements
positionalMatch.css('top', positionalMatch.position().top - dropdownMargin);
}
--
GitLab