Add dropdown autocomplete for navigation around repositories (publicl…

…ab#219) * add dropdown for navigation around repositories. * make autocomplete a dropdown.
DevanshCodes · Jun 21, 2019 · e13747e · e13747e
1 parent bf490b3
commit e13747e
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 10 deletions.
diff --git 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) => {
+        $('<p>', {
+            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
@@ -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
@@ -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
@@ -9,7 +9,8 @@
 
     <title>Community toolbox</title>
     <link rel="shortcut icon"  id="favicon" type="image/png" href="https://i.publiclab.org/system/images/photos/000/000/354/medium/Boots-ground-02.png"/>
-
+
+
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="node_modules/chart.js/dist/Chart.js"></script>
@@ -26,12 +27,25 @@
     <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
     <link rel="stylesheet" href="examples/demo.css">
 
-
+    
     <div class="container-fluid">
 
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
       <a id="forkMe-ribbon" class="github-fork-ribbon" href="https://github.com/publiclab/community-toolbox" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
-
+
+      <!-- DROPDOWN STARTS -->
+      <div>
+        <div class="dropdown">
+          <label for="dropdownMenuButton">Select Repository: </label>
+          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Select repository
+          </button>
+          <div id="dropdown-container" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          </div>
+        </div>
+      </div>
+      <!-- DROPDOWN ENDS -->
+
       <header class="text-center">
         <h1>Welcome to <span class=" org-display-name">Public Lab</span>'s coding community!</h1>
       </header>

diff --git 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
@@ -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) => {
+        $('<p>', {
+            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;