From e13747e4dabfdf1a4109ef2524bd1d03881af267 Mon Sep 17 00:00:00 2001 From: Rishabh Rawat Date: Fri, 21 Jun 2019 20:38:33 +0530 Subject: [PATCH] Add dropdown autocomplete for navigation around repositories (#219) * add dropdown for navigation around repositories. * make autocomplete a dropdown. --- dist/community-toolbox.js | 54 +++++++++++++++++++++++++++++--- examples/demo.css | 17 ++++++++++ examples/demo.js | 5 ++- index.html | 20 ++++++++++-- src/scripts/community-toolbox.js | 15 ++++++++- src/utils/autocomplete.js | 27 ++++++++++++++++ 6 files changed, 128 insertions(+), 10 deletions(-) create mode 100644 src/utils/autocomplete.js diff --git a/dist/community-toolbox.js b/dist/community-toolbox.js index b0b5b32f..0f0fe73f 100644 --- a/dist/community-toolbox.js +++ b/dist/community-toolbox.js @@ -81968,6 +81968,7 @@ CommunityToolbox = function CommunityToolbox(org, repo) { var contributorsUtil = require('../utils/contributorsUtil') var recentContributorsUI = require('../UI/recentContributorsUI') var recentContribsUtil = require('../utils/recentContribsUtil') + var autoCompleteUtil = require('../utils/autocomplete') const requestP = require('request-promise') var parse = require('parse-link-header') @@ -82028,6 +82029,17 @@ CommunityToolbox = function CommunityToolbox(org, repo) { } + function dropdownInit() { + return model_utils.getItem('repos').then((res) => { + if(res!=null && res!=undefined) { + autoCompleteUtil.generateAutocomplete(res); + }else { + console.log("not working"); + } + }); + } + + // This function is responsible for showing contributors // on a multi-repository view function showAllContributors(org) { @@ -82168,14 +82180,46 @@ CommunityToolbox = function CommunityToolbox(org, repo) { showAllContributors: showAllContributors, showRepoContributors: showRepoContributors, displayIssuesForRepo: displayIssuesForRepo, - initialize: initialize + initialize: initialize, + dropdownInit: dropdownInit } } module.exports = CommunityToolbox; -},{"../UI/contributorsUI":399,"../UI/issuesUI":400,"../UI/recentContributorsUI":401,"../models/crud":402,"../models/utils":404,"../utils/contributorsUtil":407,"../utils/fetchRepoUtil":408,"../utils/recentContribsUtil":409,"./chart":405,"github-api-simple":151,"parse-link-header":278,"request-promise":323}],407:[function(require,module,exports){ +},{"../UI/contributorsUI":399,"../UI/issuesUI":400,"../UI/recentContributorsUI":401,"../models/crud":402,"../models/utils":404,"../utils/autocomplete":407,"../utils/contributorsUtil":408,"../utils/fetchRepoUtil":409,"../utils/recentContribsUtil":410,"./chart":405,"github-api-simple":151,"parse-link-header":278,"request-promise":323}],407:[function(require,module,exports){ +function generateAutocomplete(repos) { + let repoAlreadySelected = urlHash().getUrlHashParameters('r'); + console.log("reposs = ", repoAlreadySelected); + if(jQuery.isEmptyObject(repoAlreadySelected)) { + repoAlreadySelected = "plots2"; + }else { + repoAlreadySelected = repoAlreadySelected.r; + console.log("not empty"); + } + $('#dropdownMenuButton').html(repoAlreadySelected); + + repos.map((repo,i) => { + $('

', { + class: 'dropdown-items', + text: repo + }).appendTo('#dropdown-container'); + }); + + $('.dropdown-items').click((e) => { + let repo = e.target.textContent; + urlHash().setUrlHashParameter("r", repo); + console.log("select = ",$('#dropdownMenuButton'), " repo = ", repo); + $('#dropdownMenuButton').html(repo); + location.reload(); + }) +} + + + +module.exports.generateAutocomplete = generateAutocomplete; +},{}],408:[function(require,module,exports){ var SimpleApi = require("github-api-simple") var api = new SimpleApi() @@ -82362,7 +82406,7 @@ module.exports = { } -},{"../models/utils":404,"../utils/recentContribsUtil":409,"./fetchRepoUtil":408,"github-api-simple":151,"parse-link-header":278}],408:[function(require,module,exports){ +},{"../models/utils":404,"../utils/recentContribsUtil":410,"./fetchRepoUtil":409,"github-api-simple":151,"parse-link-header":278}],409:[function(require,module,exports){ let model_utils = require('../models/utils') // Fetches all the publiclab's repositories @@ -82394,7 +82438,7 @@ function getAllRepos(org) { // EXPORTS module.exports.getAllRepos = getAllRepos; -},{"../models/utils":404}],409:[function(require,module,exports){ +},{"../models/utils":404}],410:[function(require,module,exports){ var fetchRepoUtil = require('./fetchRepoUtil'); var model_utils = require('../models/utils'); @@ -82595,4 +82639,4 @@ module.exports = { within_this_week: within_this_week } -},{"../models/utils":404,"./fetchRepoUtil":408}]},{},[406]); +},{"../models/utils":404,"./fetchRepoUtil":409}]},{},[406]); diff --git a/examples/demo.css b/examples/demo.css index 718d4de0..00c56032 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -90,6 +90,23 @@ h1, h2, .section h3 { text-align: center; } +#dropdown-container { + height: 300px; + width: 200px; + overflow: scroll; + padding: 5px; + border-radius: 5px; +} + +.dropdown-items { + padding: 3px; +} + +.dropdown-items:hover{ + cursor: pointer; + background-color: rgba(221, 221, 255, 0.226); +} + @media only screen and (max-width: 569px) { .links { width: 25%; diff --git a/examples/demo.js b/examples/demo.js index 7e19afca..b24893cb 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -16,7 +16,8 @@ document.addEventListener('DOMContentLoaded', function () { return false; }); /*Scroll to top when arrow up clicked END*/ - + + var toolbox; (function() { @@ -60,6 +61,7 @@ document.addEventListener('DOMContentLoaded', function () { toolbox.showAllContributors(org, repo); // Makes the toggle contributors list button click d.click(); + toolbox.dropdownInit(); } }) @@ -79,6 +81,7 @@ document.addEventListener('DOMContentLoaded', function () { toolbox.showRepoContributors(org, repo); // Makes the toggle contributors list button click d.click(); + toolbox.dropdownInit(); } }) } diff --git a/index.html b/index.html index 6c257ae1..0086a744 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ Community toolbox - + + @@ -26,12 +27,25 @@ - +

Fork me on GitHub - + + +
+
+ + + +
+
+ +

Welcome to Public Lab's coding community!

diff --git a/src/scripts/community-toolbox.js b/src/scripts/community-toolbox.js index 3c273778..2e0103cd 100644 --- a/src/scripts/community-toolbox.js +++ b/src/scripts/community-toolbox.js @@ -13,6 +13,7 @@ CommunityToolbox = function CommunityToolbox(org, repo) { var contributorsUtil = require('../utils/contributorsUtil') var recentContributorsUI = require('../UI/recentContributorsUI') var recentContribsUtil = require('../utils/recentContribsUtil') + var autoCompleteUtil = require('../utils/autocomplete') const requestP = require('request-promise') var parse = require('parse-link-header') @@ -73,6 +74,17 @@ CommunityToolbox = function CommunityToolbox(org, repo) { } + function dropdownInit() { + return model_utils.getItem('repos').then((res) => { + if(res!=null && res!=undefined) { + autoCompleteUtil.generateAutocomplete(res); + }else { + console.log("not working"); + } + }); + } + + // This function is responsible for showing contributors // on a multi-repository view function showAllContributors(org) { @@ -213,7 +225,8 @@ CommunityToolbox = function CommunityToolbox(org, repo) { showAllContributors: showAllContributors, showRepoContributors: showRepoContributors, displayIssuesForRepo: displayIssuesForRepo, - initialize: initialize + initialize: initialize, + dropdownInit: dropdownInit } } diff --git a/src/utils/autocomplete.js b/src/utils/autocomplete.js new file mode 100644 index 00000000..6153de48 --- /dev/null +++ b/src/utils/autocomplete.js @@ -0,0 +1,27 @@ +function generateAutocomplete(repos) { + let repoAlreadySelected = urlHash().getUrlHashParameters('r'); + if(jQuery.isEmptyObject(repoAlreadySelected)) { + repoAlreadySelected = "plots2"; + }else { + repoAlreadySelected = repoAlreadySelected.r; + } + $('#dropdownMenuButton').html(repoAlreadySelected); + + repos.map((repo,i) => { + $('

', { + class: 'dropdown-items', + text: repo + }).appendTo('#dropdown-container'); + }); + + $('.dropdown-items').click((e) => { + let repo = e.target.textContent; + urlHash().setUrlHashParameter("r", repo); + $('#dropdownMenuButton').html(repo); + location.reload(); + }) +} + + + +module.exports.generateAutocomplete = generateAutocomplete; \ No newline at end of file