Skip to content
This repository has been archived by the owner on Mar 29, 2022. It is now read-only.

Update URL and projects list based on langauge query parameter #386

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 114 additions & 6 deletions app/assets/javascripts/language_filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,36 @@ window.setupLanguageFilter = function () {
$id = $('#language_id'),
$list = $('#project-list'),
$message = $('#projects-message'),
defaultMessage = $message.text();
defaultMessage = $message.text(),
$refresh = $("#refresh");
var current = window.location.href;

// Handle resetting the filter to all
function reset() {
$id.val('');
change();
}

// Handle refreshing issues list
function refresh() {
var languageId = $id.val();
if(languageId == ""){
// no language selected = do nothing
}else {
var url = '/languages/projects/' + languageId;
$.ajax({
type: 'GET',
url: url,
success: function (htmlData) {
$list.html(htmlData);
}
});
}
}

// Handle the filter selection changing
function change() {
var languageId = $id.val();
var languageId = $id.val()
var url = '/languages/projects/' + languageId;
$.ajax({
type: 'GET',
Expand All @@ -25,19 +44,108 @@ window.setupLanguageFilter = function () {
// Empty string means 'Select Language'
if (languageId === "") {
$reset.removeClass('active');
$refresh.removeClass('active');
$message.text(defaultMessage);
// reset URL to remove original query when filter is removed
var removeQueryURL = current.split("?")[0];
history.pushState(null, " ", removeQueryURL);
} else {
$message.text('Displaying ' + $id.find("option:selected").text() + ' projects only');
$reset.addClass('active');
$refresh.addClass('active');
var changed_url = $id.find("option:selected").text();
var new_lang_url = changed_url.toLowerCase();
history.pushState(null, " ", "?language=" + new_lang_url);
}
}

// Deal with browsers remembering last state of select
change();

// Detect the select change event
$id.change(change);

// Detect the reset button being clicked
$reset.click(reset);
};

// Detect the refresh button being clicked
$refresh.click(refresh);

////////// LANGUAGE QUERY PARAM CODE BELOW //////////

// take URL turn into string, split after '?', convert any '%20" to whtiespace', trim/remove whitespace
var convertURL = current.toString().toLowerCase().split("?")[1].replace(/%20/g, " ").trim().replace(/\s/g, '');
var issues = document.getElementsByClassName("lang")[0];
// store converted URL query in variable
var query_param = convertURL;
var lang_select = document.getElementById("language_id");
var lang_option = document.querySelectorAll("option");
var textArr = [];
var final = [];
var count = 0;

// compare query_param to items in final text array
function languageURL() {
for(var i=0; i<final.length;i++){
//keep track of index of match
count++;
if(query_param == final[i]){
var indexNum = count - 1;
var selectedOption = indexNum;

// set language select option to query param
lang_select.value = selectedOption;

// scroll to language select section
issues.scrollIntoView();

//change URL based on lang query
var remove_query = current.split("?")[0];
var url = new URL(remove_query);
var query_string = url.search;
var search_params = new URLSearchParams(query_string);
search_params.set("language", final[i]);
url.search = search_params.toString();
new_url = url.toString();
history.pushState(null, " ", new_url);

change();
}else{
// if no match - do nothing
}
//end of else
}
//end of loop;
}
//end of languageURL function

function extractLang() {
if(convertURL.includes("language=") == true){
let extract = convertURL.slice(9);
query_param = extract;
languageURL();
}else{
// there is no 'language=' in the URL so there is no need to extract the query
// go straight to calling comparison function
languageURL();
}
}

function convertText() {
for(var k=1; k<textArr.length; k++){
// turn option items into lowercase
var lowercase_opt = textArr[k - 1].toLowerCase();
// remove any whitespace
var no_space = lowercase_opt.replace(/\s/g, '');
// final result to compare against query_param
final.push(no_space);
}
extractLang();
}

function storeOptionText() {
for(var j=0; j<lang_option.length; j++){
textArr.push(lang_option[j].text);
}
convertText();
}

storeOptionText(); // on page load call first function
}
17 changes: 17 additions & 0 deletions app/assets/stylesheets/homepage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -299,13 +299,30 @@ main.home {
opacity: 0;
pointer-events: none;
margin: 0.5em 0 0;
margin-top: -33px;
margin-left: 50px;
padding: 0.3em 1em;

&.active {
opacity: 1;
pointer-events: initial;
}
}

#refresh {
opacity: 0;
pointer-events: none;
width: 40px;
margin: 0.5em 0 0;
padding: 0.3em 1em;
height: 33px;
font-size: 1.2em;

&.active {
opacity: 1;
pointer-events: initial;
}
}
}
}

Expand Down
3 changes: 2 additions & 1 deletion app/views/pages/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<span class="line-br-2">-</span>
</div>
<a name="projects"></a>
<h2 class="title is-2 is-spaced">Hacktoberfest projects</h2>
<h2 class="title is-2 is-spaced lang">Hacktoberfest projects</h2>
<p class="p">
You can contribute to any project on GitHub. Here are a few looking for some help:
</p>
Expand All @@ -51,6 +51,7 @@
</div>
</div>
</div>
<button id="refresh" class="button button-small" type="button" name="button">&#x21bb;</button>
<button type="button" class="button button-small" id="reset-filter">Remove filter</button>
</div>
</div>
Expand Down
96 changes: 96 additions & 0 deletions db/seeds.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,99 @@
User.create!
User.create!
User.create!

10.times do
FactoryBot.create(:issue)
end
Language.create(name: "Brainfuck")

Language.create(name: "C")

Language.create(name: "C#")

Language.create(name: "C++")

Language.create(name: "CSS")

Language.create(name: "Clojure")

Language.create(name: "CoffeeScript")

Language.create(name: "ColdFusion")

Language.create(name: "Coq")

Language.create(name: "Coq")

Language.create(name: "Dart")

Language.create(name: "Dockerfile")

Language.create(name: "F#")

Language.create(name: "Go")

Language.create(name: "HTML")

Language.create(name: "Haskell")

Language.create(name: "Java")

Language.create(name: "JavaScript")

Language.create(name: "Julia")

Language.create(name: "Jupyter Notebook")

Language.create(name: "Kotlin")

Language.create(name: "Lua")

Language.create(name: "MATLAB")

Language.create(name: "Objective-C")

Language.create(name: "PHP")

Language.create(name: "PLSQL")

Language.create(name: "Pascal")

Language.create(name: "Perl")

Language.create(name: "PowerShell")

Language.create(name: "Processing")

Language.create(name: "Python")

Language.create(name: "QML")

Language.create(name: "R")

Language.create(name: "Rich Text Format")

Language.create(name: "Ruby")

Language.create(name: "Rust")

Language.create(name: "Scala")

Language.create(name: "Shell")

Language.create(name: "Swift")

Language.create(name: "TSQL")

Language.create(name: "TeX")

Language.create(name: "TypeScript")

Language.create(name: "Vim script")

Language.create(name: "Vue")

Repository.all.each do |r|
r.language_id = Language.second.id
r.save
end