jQuery Based Filters on GSoC Project Ideas page

Author: pavitra14

content/internships/project-ideas-collection/add-audio/contents.lr

@@ -33,3 +33,5 @@ skills_recommended: CSS, Django, Django REST Framework, HTML, JavaScript, Python
 mentors: Alden Page, Brent Moran, Anna Tumadóttir
 ---
 difficulty: Medium
+---
+filter_value: difficulty-medium skill-javascript skill-python

content/internships/project-ideas-collection/catalog-expansion/contents.lr

@@ -26,3 +26,5 @@ skills_recommended: Python, JSON, Apache Airflow (optional)
 mentors: Brent Moran, Kriti Godey
 ---
 difficulty: Easy
+---
+filter_value: difficulty-easy skill-python

content/internships/project-ideas-collection/cc-search-accessibility/contents.lr

@@ -44,3 +44,5 @@ skills_recommended: CSS, HTML, JavaScript, Vue.js
 mentors: Breno Ferreira, Ari Madian
 ---
 difficulty: Medium
+---
+filter_value: difficulty-medium skill-javascript

content/internships/project-ideas-collection/legal-database/contents.lr

@@ -38,3 +38,5 @@ skills_recommended: CSS, Django, HTML, JavaScript, PHP, Python, WordPress (eithe
 mentors: Kriti Godey, Sarah Pearson, Timid Robot Zehta
 ---
 difficulty: Medium
+---
+filter_value: difficulty-medium skill-javascript skill-python skill-wordpress

content/internships/project-ideas-collection/linked-commons/contents.lr

@@ -32,3 +32,5 @@ skills_recommended: JavaScript, Graph Theory
 mentors: Brent Moran, María Belén Guaranda Cabezas
 ---
 difficulty: Easy
+---
+filter_value: difficulty-easy skill-javascript

content/internships/project-ideas-collection/metrics-dashboard/contents.lr

@@ -40,3 +40,5 @@ skills_recommended: CSS, design, HTML, Python, PostgreSQL
 mentors: Alden Page, Anna Tumadóttir
 ---
 difficulty: Hard
+---
+filter_value: difficulty-hard skill-python

content/internships/project-ideas-collection/vocabulary-integration/contents.lr

@@ -36,3 +36,5 @@ skills_recommended: CSS, HTML, JavaScript, PHP, WordPress
 mentors: Dhruv Bhanushali, Hugo Solar
 ---
 difficulty: Medium
+---
+filter_value: difficulty-medium skill-javascript skill-wordpress

content/internships/project-ideas-collection/web-monetization/contents.lr

@@ -37,3 +37,5 @@ skills_recommended: Research, Writing. In so far as the work is technical, it is
 mentors: Anna Tumadóttir, Sarah Pearson
 ---
 difficulty: Easy
+---
+filter_value: difficulty-easy skill-writing

content/internships/project-ideas-collection/wp-plugin/contents.lr

@@ -36,3 +36,5 @@ skills_recommended: CSS, HTML, JavaScript, PHP, WordPress
 mentors: Hugo Solar, Timid Robot Zehta
 ---
 difficulty: Medium
+---
+filter_value: difficulty-medium skill-javascript skill-wordpress

content/internships/project-ideas/all/contents.lr

@@ -7,3 +7,5 @@ field:
 value:
 ---
 order: 1
+---
+filter_label: all

content/internships/project-ideas/difficulty-easy/contents.lr

@@ -7,3 +7,5 @@ field: difficulty
 value: Easy
 ---
 order: 2
+---
+filter_label: difficulty-easy

content/internships/project-ideas/difficulty-hard/contents.lr

@@ -7,3 +7,5 @@ field: difficulty
 value: Hard
 ---
 order: 4
+---
+filter_label: difficulty-hard

content/internships/project-ideas/difficulty-medium/contents.lr

@@ -7,3 +7,5 @@ field: difficulty
 value: Medium
 ---
 order: 3
+---
+filter_label: difficulty-medium

content/internships/project-ideas/skill-javascript/contents.lr

@@ -7,3 +7,5 @@ field: recommended_skill
 value: JavaScript
 ---
 order: 5
+---
+filter_label: skill-javascript

content/internships/project-ideas/skill-python/contents.lr

@@ -7,3 +7,5 @@ field: recommended_skill
 value: Python
 ---
 order: 6
+---
+filter_label: skill-python

content/internships/project-ideas/skill-wordpress/contents.lr

@@ -7,3 +7,5 @@ field: recommended_skill
 value: WordPress
 ---
 order: 7
+---
+filter_label: skill-wordpress

content/internships/project-ideas/skill-writing/contents.lr

@@ -7,3 +7,5 @@ field: recommended_skill
 value: Writing
 ---
 order: 7
+---
+filter_label: skill-writing

models/project-idea.ini

@@ -38,3 +38,7 @@ type = string
 [fields.difficulty]
 label = Difficulty
 type = string
+
+[fields.filter_value]
+label = Filter Value
+type = string

models/project-ideas.ini

@@ -12,6 +12,10 @@ order_by = title
 label = Filter Navigation Label
 type = string
 
+[fields.filter_label]
+label = Filter Label
+type = string
+
 [fields.field]
 label = Filter Field
 type = string

templates/project-ideas.html

@@ -3,37 +3,30 @@
 
 {% block header %}Open Source Internships: Project Ideas{% endblock %}
 {% block body %}
+
   <p class="lead">This is the project idea list for the <strong><a href="/internships">current round of open source internships at Creative Commons</a></strong>.</p>
   <hr/>
   <!-- We display all ideas by default. -->
   {% set ideas = site.query('/internships/project-ideas-collection').include_undiscoverable(true) %}
   {% set filters = site.query('/internships/project-ideas').include_undiscoverable(true).order_by('order') %}
   {% set current_filter = filters.filter(F._slug == this._slug).first() %}
-  <!-- The following code filters the ideas to display based on the current URL. -->
-  {% if current_filter.field == 'difficulty' %}
-    {% set ideas = ideas.filter(F.difficulty == current_filter.value) %}
-  {% elif current_filter.field == 'recommended_skill' %}
-    {% set ideas = ideas.filter(F.skills_recommended.contains(current_filter.value).or(F.skills_recommended.contains('depends'))) %}
-  {% endif %}
   <div class="mt-4">
     <div>
       {% for filter in filters %}
-        <a href="{{ filter.url_path }}">
-          <button type="button" class="m-1 btn btn-sm {% if this._slug == filter._slug %}btn-dark{% else %}btn-primary{% endif %}" {% if this._slug == filter._slug %}disabled{% endif %}>
+          <button type="button" class="m-1 btn btn-sm btn-primary filter-btn" data-filter="{{ filter.filter_label }}">
             {{ filter.nav_label }}
           </button>
-        </a>
       {% endfor %}
       <ul class="list-unstyled m-3">
       {% for idea in ideas %}
-        <li class="my-2"><a href="#{{ idea._slug }}">{{ idea.title }}</a></li>
+        <li class="my-2 filter filter-label {{ idea.filter_value }}"><a href="#{{ idea._slug }}">{{ idea.title }}</a></li>
       {% endfor %}
         <li class="my-2"><a href="#original-ideas">Original Ideas</a></li>
       </ul>
     </div>
     <hr/>
     {% for idea in ideas %}
-      <div class="project-idea-card m-1 mb-4">
+      <div class="project-idea-card m-1 mb-4 filter filter-block {{ idea.filter_value }}">
         <h2 class="card-header project-idea-header"><a name="{{ idea._slug }}">{{ idea.title }}</a></h5>
         <ul class="list-group list-group-flush">
           <li class="list-group-item"><strong>The Problem:</strong> {{ idea.problem }}</li>

webpack/js/ideas.js

@@ -0,0 +1,95 @@
+$(document).ready(function(){
+    // Class for active buttons
+    const active_class = 'btn-dark';
+
+    // Class for inactive buttons
+    const inactive_class = 'btn-primary';
+
+    // jQuery object containing all the filter buttons
+    const filter_btn = $('.filter-btn');
+
+    // Animation delay for show() function
+    const animation_delay = 100;
+
+    // List of Available filters
+    const filters = [
+      'all',
+      'difficulty-easy',
+      'difficulty-medium',
+      'difficulty-hard',
+      'skill-javascript',
+      'skill-python',
+      'skill-wordpress',
+      'skill-writing'
+    ];
+
+    // Variable to hold selected filters
+    var selected = [];
+
+    // To display selected filters
+    function showIdeas(selected)
+    {
+        // If no filter is selected/show all
+      if(selected.length == 0){
+        $('.filter').show(animation_delay);
+        return selected;
+      }
+        // Get filters which were not selected
+      hidden = filters.filter(n => !selected.includes(n));
+
+        // Hide not selected
+      for (const idea in hidden) {
+        if (hidden.hasOwnProperty(idea)) {
+          const element = hidden[idea];
+          $('.filter.' + element).hide();
+        }
+      }
+        // Show not selected
+      for (const idea in selected) {
+        if (selected.hasOwnProperty(idea)) {
+          const element = selected[idea];
+          $('.filter.' + element).show(animation_delay);
+        }
+      }
+      return selected;
+    }
+
+    // To reset the selected filters / All Projects button
+    function resetFilters()
+    {
+      $('.filter-btn[data-filter="all"]').removeClass(inactive_class).addClass(active_class);
+      return filter_btn.not('[data-filter="all"]').removeClass(active_class).addClass(inactive_class);
+    }
+
+    // To toggle classes in filter buttons
+    function toggleBtn(btn)
+    {
+      if(btn.hasClass(active_class)){
+       return btn.removeClass(active_class).addClass(inactive_class);
+      }
+      return btn.removeClass(inactive_class).addClass(active_class);
+    }
+
+    // Click event handler
+    filter_btn.click(function() {
+      var value = $(this).data('filter');
+      // Reset all filters and show all
+      if(value == 'all')
+      {
+        selected = [];
+        resetFilters();
+        return showIdeas(selected);
+      }
+      if(selected.indexOf(value) > -1)
+      {
+        // If the filter is already selected, remove it from selected and toggle buttons
+        selected.splice(selected.indexOf(value), 1);
+      }else if(filters.indexOf(value) > -1) {
+        // If the filter is not selected, add it to the selected array and toggle buttons
+        $('.filter-btn[data-filter="all"]').removeClass(active_class).addClass(inactive_class);
+        selected.push(value);
+      }
+      toggleBtn($(this));
+      return showIdeas(selected);
+    });
+  });

webpack/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-  entry: ['./js/main.js', './sass/main.scss'],
+  entry: ['./js/main.js','./js/ideas.js', './sass/main.scss'],
   output: {
     path: path.resolve(__dirname, '../assets/static/gen'),
     filename: 'script.js',