change the select option to an input search

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>

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;
+		}
+	}
+}

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');
+	}
+});

themes/openpowerfoundation/layouts/partials/footer.html

@@ -61,6 +61,9 @@
 {{ $changelogjavascript := resources.Get "js/changelog.js" }}
 {{ $changelogjs := $changelogjavascript | resources.Minify }}
 <script src="{{ $changelogjs.RelPermalink }}"></script>
+{{ $selectjavascript := resources.Get "js/select.js" }}
+{{ $selectjs := $selectjavascript | resources.Minify }}
+<script src="{{ $selectjs.RelPermalink }}"></script>
 {{ if .Site.Params.analytics.piwik }}
 	{{ partial "_analytics/piwik.html" . }}
 {{ end }}

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 }}
 	<link rel="stylesheet" href="{{ $minicss.RelPermalink }}">

themes/openpowerfoundation/layouts/partials/passportform.html

@@ -41,11 +41,12 @@ var goal = "{{ .Site.Params.forms.passport.goal }}";
 		</div>
 		<div class="form-row">
 			<div class="form-group col-lg-12">
-				<select name="member" id="member">
+				<input name="member" id="member" class="member-value" placeholder="Member Entiry Affiliation" value="">
-				{{ range sort (where .Site.RegularPages "Section" "members") }}
+				<ul class="member-list">
-					<option value="{{ .Title }}">{{ .Title }}</option>
+				{{ range sort (where .Site.RegularPages "Section" "members") "Title" }}
+					<li>{{ .Title }}</li>
 				{{ end }}
-				</select>
+				</ul>
 			</div>
 		</div>
 		<div class="form-row">