#292 Converted jQuery to vanilla JS

js/solstice/eclipsefdn.wgs-list.js

@@ -13,8 +13,6 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import $ from 'jquery';
-import 'jquery-match-height';
 import displayErrMsg from '../utils/displayErrMsg';
 import template from './templates/explore-working-groups/working-group-list.mustache';
 
@@ -29,6 +27,7 @@ const EclipseFdnWGsList = (async () => {
   try {
     wgsData = await (await fetch(url)).json();
     wgsData = wgsData.sort((a, b) => a.alias.localeCompare(b.alias));
+
   } catch (error) {
     displayErrMsg(element, error);
     return;
@@ -88,36 +87,43 @@ const EclipseFdnWGsList = (async () => {
   anchoredWG && document.getElementById(anchoredWG).scrollIntoView({ behavior: 'smooth' });
 
   // Filter logic
-  $(function () {
-    $('.wg-links a').click(function () {
-      let wg_item = $(this).attr('data-wg');
-      if (wg_item === 'wg-all-item') {
-        $('.wg-item')
-          .fadeOut('300')
-          .promise()
-          .done(function () {
-            $('.wg-item').fadeIn('300');
-            $('.wg-item').matchHeight({ remove: true });
-            $('.wg-item:visible').matchHeight();
-          });
-      } else {
-        $('.wg-item')
-          .fadeOut('300')
-          .promise()
-          .done(function () {
-            $('.' + wg_item).fadeIn('300');
-            $('.wg-item').matchHeight({ remove: true });
-            $('.wg-item:visible').matchHeight();
-          });
-      }
+  let currentSelectedStatus = 'wg-item';
+  const allFilterBtns = document.querySelectorAll('.wg-btn');
+  allFilterBtns[0].classList.add('active');
+
+  const fadeOutAndIn = ({ target }) => {
+    const newSelectedStatus = target.getAttribute('data-wg');
+    if (newSelectedStatus === currentSelectedStatus) {
+      // No need to do filtering if the status doesn't change
+      return;
+    }
+
+    // Fade out current wg items
+    document.querySelectorAll(`.${currentSelectedStatus}`).forEach((item) => {
+      item.classList.add('fade');
+      setTimeout(() => {
+        item.classList.add('hide');
+
+        // Fade in selected wg items
+        document.querySelectorAll(`.${newSelectedStatus}`).forEach((item) => {
+          item.classList.remove('hide');
+          item.classList.remove('fade');
+        });
+      }, 150);
     });
 
-    $('.wg-all-item').click(function () {
-      $('.wg-item').fadeIn('300');
-      $('.wg-item').matchHeight({ remove: true });
-      $('.wg-item:visible').matchHeight();
+    allFilterBtns.forEach((btn) => {
+      if (btn.getAttribute('data-wg') === currentSelectedStatus) {
+        btn.classList.remove('active');
+      }
     });
-  });
+    target.classList.add('active');
 
+    currentSelectedStatus = newSelectedStatus;
+  };
+
+  allFilterBtns.forEach((wgBtn) => {
+    wgBtn.addEventListener('click', fadeOutAndIn);
+  });
 })();
 export default EclipseFdnWGsList;

js/solstice/templates/explore-working-groups/working-group-list.mustache

@@ -4,15 +4,15 @@
     <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter Working Groups
     <span class="caret"></span></button>
     <ul class="dropdown-menu wg-links">
-      <li><a style="width:150px;" class="wg-btn" data-wg="wg-all-item" role="button">All</a></li>
+      <li><a class="wg-btn" data-wg="wg-item" role="button">All</a></li>
       {{#shouldShowFilterOptions.active}}
-        <li><a style="width:150px;" class="wg-btn" data-wg="wg-active-item" role="button">Active</a></li>
+        <li><a class="wg-btn" data-wg="wg-active-item" role="button">Active</a></li>
       {{/shouldShowFilterOptions.active}}
       {{#shouldShowFilterOptions.incubating}}
-      <li><a style="width:150px;" class="wg-btn" data-wg="wg-incubating-item" role="button">Incubating</a></li>
+      <li><a class="wg-btn" data-wg="wg-incubating-item" role="button">Incubating</a></li>
       {{/shouldShowFilterOptions.incubating}}
       {{#shouldShowFilterOptions.proposed}}
-      <li><a style="width:150px;" class="wg-btn" data-wg="wg-proposed-item" role="button">Proposed</a></li>
+      <li><a class="wg-btn" data-wg="wg-proposed-item" role="button">Proposed</a></li>
       {{/shouldShowFilterOptions.proposed}}
     </ul>
   </div>

less/_components/classes.less

@@ -125,4 +125,14 @@ img.desaturate {
 }
 .solstice-loading > i.fa {
   font-size: @solstice-loading-size;
-}
\ No newline at end of file
+}
+
+.dropdown-menu li a {
+  background-color: #fff;
+  &:hover{
+    background-color: #efefef;
+  }
+  &.active {
+    background-color: #efefef;
+  }
+}