From f042ba3787b5171bd0c7d1433663d6a5124c111b Mon Sep 17 00:00:00 2001 From: Toshaan Bharvani Date: Wed, 12 Jan 2022 12:09:14 +0100 Subject: [PATCH] change the select option to an input search Signed-off-by: Toshaan Bharvani --- .../openpowerfoundation/assets/css/forms.scss | 69 +++++++++++++++++++ .../openpowerfoundation/assets/js/select.js | 56 +++++++++++++++ .../layouts/partials/footer.html | 3 + .../layouts/partials/header.html | 3 +- .../layouts/partials/passportform.html | 9 +-- 5 files changed, 135 insertions(+), 5 deletions(-) create mode 100644 themes/openpowerfoundation/assets/css/forms.scss create mode 100644 themes/openpowerfoundation/assets/js/select.js diff --git a/themes/openpowerfoundation/assets/css/forms.scss b/themes/openpowerfoundation/assets/css/forms.scss new file mode 100644 index 0000000..4a7aaf7 --- /dev/null +++ b/themes/openpowerfoundation/assets/css/forms.scss @@ -0,0 +1,69 @@ +.member-value, +.member-list { + width: 100%; +} +.member-value { + font-weight: 600; + letter-spacing: 4px; + height: 4rem; + font-size: 1.1rem; + padding: 1rem; + color: #ffffff; + background-color: #2566f4; + border: 3px solid transparent; + transition: .3s ease-in-out; + &::-webkit-input-placeholder { + color: #ffffff; + } + &:hover { + background-color: #2566f4; + cursor: pointer; + &::-webkit-input-placeholder { + color: #ffffff; + } + } + &:focus, + &.open { + box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2); + outline: 0; + color: #ffffff; + background-color: #2566f4; + &::-webkit-input-placeholder { + color: #ffffff; + } + } +} +.member-list { + list-style: none; + box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2); + overflow: hidden; + max-height: 0; + transition: .3s ease-in-out; + &.open { + max-height: 320px; + overflow: auto; + } + li { + position: relative; + height: 4rem; + color: #ffffff; + background-color: #2566f4; + padding: 1rem; + font-size: 1.1rem; + display: flex; + align-items: center; + cursor: pointer; + transition: background-color .3s; + opacity: 1; + &:hover { + color: #2566f4; + background-color: #ffffff; + } + &.closed { + max-height: 0; + overflow: hidden; + padding: 0; + opacity: 0; + } + } +} diff --git a/themes/openpowerfoundation/assets/js/select.js b/themes/openpowerfoundation/assets/js/select.js new file mode 100644 index 0000000..f604a6e --- /dev/null +++ b/themes/openpowerfoundation/assets/js/select.js @@ -0,0 +1,56 @@ +'use strict'; +var inputField = document.querySelector('.member-value'); +var dropdown = document.querySelector('.member-list'); +var dropdownArray = [].concat(document.querySelectorAll('li')); +var dropdownItems = dropdownArray[0]; +var valueArray = []; +dropdownItems.forEach(function (item) { + valueArray.push(item.textContent); +}); +var closeDropdown = function closeDropdown() { + dropdown.classList.remove('open'); +}; +inputField.addEventListener('input', function () { + dropdown.classList.add('open'); + var inputValue = inputField.value.toLowerCase(); + var valueSubstring = undefined; + if (inputValue.length > 0) { + for (var j = 0; j < valueArray.length; j++) { + if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) { + dropdownItems[j].classList.add('closed'); + } else { + dropdownItems[j].classList.remove('closed'); + } + } + } else { + for (var i = 0; i < dropdownItems.length; i++) { + dropdownItems[i].classList.remove('closed'); + } + } +}); +dropdownItems.forEach(function (item) { + item.addEventListener('click', function (evt) { + inputField.value = item.textContent; + dropdownItems.forEach(function (dropdown) { + dropdown.classList.add('closed'); + }); + }); +}); +inputField.addEventListener('focus', function () { + inputField.placeholder = 'Type to filter'; + dropdown.classList.add('open'); + dropdownItems.forEach(function (dropdown) { + dropdown.classList.remove('closed'); + }); +}); +inputField.addEventListener('blur', function () { + inputField.placeholder = 'Select state'; + dropdown.classList.remove('open'); +}); +document.addEventListener('click', function (evt) { + var isDropdown = dropdown.contains(evt.target); + var isInput = inputField.contains(evt.target); + if (!isDropdown && !isInput) { + dropdown.classList.remove('open'); + } +}); diff --git a/themes/openpowerfoundation/layouts/partials/footer.html b/themes/openpowerfoundation/layouts/partials/footer.html index 7b079d7..71e5dd5 100644 --- a/themes/openpowerfoundation/layouts/partials/footer.html +++ b/themes/openpowerfoundation/layouts/partials/footer.html @@ -61,6 +61,9 @@ {{ $changelogjavascript := resources.Get "js/changelog.js" }} {{ $changelogjs := $changelogjavascript | resources.Minify }} +{{ $selectjavascript := resources.Get "js/select.js" }} +{{ $selectjs := $selectjavascript | resources.Minify }} + {{ if .Site.Params.analytics.piwik }} {{ partial "_analytics/piwik.html" . }} {{ end }} diff --git a/themes/openpowerfoundation/layouts/partials/header.html b/themes/openpowerfoundation/layouts/partials/header.html index 40c50ac..f4c6458 100644 --- a/themes/openpowerfoundation/layouts/partials/header.html +++ b/themes/openpowerfoundation/layouts/partials/header.html @@ -42,7 +42,8 @@ {{ $pages := resources.Get "css/pages.scss" }} {{ $footer := resources.Get "css/footer.scss" }} {{ $changelog := resources.Get "css/changelog.scss" }} - {{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog | resources.Concat "css/custom.scss" }} + {{ $forms := resources.Get "css/forms.scss" }} + {{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog $forms | resources.Concat "css/custom.scss" }} {{ $css := $scss | toCSS (dict "targetPath" "css/custom.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $minicss := $css | resources.Minify }} diff --git a/themes/openpowerfoundation/layouts/partials/passportform.html b/themes/openpowerfoundation/layouts/partials/passportform.html index 0d3dce5..74ba320 100644 --- a/themes/openpowerfoundation/layouts/partials/passportform.html +++ b/themes/openpowerfoundation/layouts/partials/passportform.html @@ -41,11 +41,12 @@ var goal = "{{ .Site.Params.forms.passport.goal }}";
- +
    + {{ range sort (where .Site.RegularPages "Section" "members") "Title" }} +
  • {{ .Title }}
    • {{ end }} - +