From 3ffff58ae21980b8681d4c44921f35da71111694 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 7 Jan 2019 17:44:02 +0000
Subject: [PATCH] move filters logic into submission filter js file
---
.../javascript/apply/submission-filters.js | 52 +++++++++++++++++++
opentech/static_src/src/javascript/main.js | 48 +----------------
2 files changed, 53 insertions(+), 47 deletions(-)
diff --git a/opentech/static_src/src/javascript/apply/submission-filters.js b/opentech/static_src/src/javascript/apply/submission-filters.js
index 13cc7b1ad..d749c4f26 100644
--- a/opentech/static_src/src/javascript/apply/submission-filters.js
+++ b/opentech/static_src/src/javascript/apply/submission-filters.js
@@ -2,6 +2,7 @@
'use strict';
+ // Variables
const $body = $('body');
const $toggleButton = $('.js-toggle-filters');
const $closeButton = $('.js-close-filters');
@@ -73,6 +74,41 @@
}
}
+ // corrects spacing of dropdowns when toggled on mobile
+ function mobileFilterPadding(element) {
+ const expanded = 'expanded-filter-element';
+ const dropdown = $(element).closest('.select2');
+ const openDropdown = $('.select2 .' + expanded);
+ let dropdownMargin = 0;
+
+ if (openDropdown.length > 0 && !openDropdown.hasClass('select2-container--open')) {
+ // 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 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');
+
+ // 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);
+ }
+ }
+
// clear all filters
$clearButton.on('click', () => {
const dropdowns = document.querySelectorAll('.form__filters select');
@@ -91,5 +127,21 @@
});
});
+ // reset mobile filters if they're open past the tablet breakpoint
+ $(window).resize(function resize() {
+ if ($(window).width() < 1024) {
+ // close the filters if open when reducing the window size
+ $('body').removeClass('filters-open');
+
+ // update filter button text
+ $('.js-toggle-filters').text('Filters');
+
+ // Correct spacing of dropdowns when toggled
+ $('.select2').on('click', (e) => {
+ mobileFilterPadding(e.target);
+ });
+ }
+ }).trigger('resize');
+
})(jQuery);
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 6504865fa..64620fb59 100644
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -128,59 +128,13 @@
// reset mobile filters if they're open past the tablet breakpoint
$(window).resize(function resize() {
- if ($(window).width() < 1024) {
- // close the filters if open when reducing the window size
- $('body').removeClass('filters-open');
-
- // update filter button text
- $('.js-toggle-filters').text('Filters');
-
- $('.select2').on('click', (e) => {
- mobileFilterPadding(e.target);
- });
- }
- else {
+ if ($(window).width() > 1024) {
$('.js-actions-toggle').removeClass('is-active');
$('.js-actions-sidebar').removeClass('is-visible');
$('.tr--parent.is-expanded').removeClass('is-expanded');
}
}).trigger('resize');
- function mobileFilterPadding(element) {
- const expanded = 'expanded-filter-element';
- const dropdown = $(element).closest('.select2');
- const openDropdown = $('.select2 .' + expanded);
- let dropdownMargin = 0;
-
- if (openDropdown.length > 0 && !openDropdown.hasClass('select2-container--open')) {
- // 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 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');
-
- // 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);
- }
- }
-
-
$('form').filter('.form__comments').submit(function (e) {
var $form = $(this);
var formValues = $form.serialize();
--
GitLab