Merge pull request #24 from useful-forks/settings

Adding a Settings button
useful-forks · Mar 23, 2021 · a6bca96 · a6bca96
2 parents 4d91b9e + 99f0554
commit a6bca96
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 101 deletions.
diff --git a/docs/css/my-style.css b/docs/css/my-style.css
@@ -1,14 +1,40 @@
+:root {
+  --uf-orange: #fca311;
+  --uf-orange-dark: #c97e11;
+  --uf-blue: #14213d;
+  --uf-blue-dark: #0d1624;
+}
+
+.button.is-uf-orange {
+  background-color: var(--uf-orange);
+  border-color: transparent;
+  color: #fff;
+}
+.button.is-uf-orange:hover {
+  background-color: var(--uf-orange-dark);
+  border-color: transparent;
+  color: #fff;
+}
+.button.is-uf-blue {
+  background-color: var(--uf-blue);
+  border-color: transparent;
+  color: #fff;
+}
+.button.is-uf-blue:hover {
+  background-color: var(--uf-blue-dark);
+  border-color: transparent;
+  color: #fff;
+}
+
 #useful_forks_msg {
   text-align: center;
   margin-top: 20px;
   margin-bottom: 20px;
 }
-
 #useful_forks_header {
   text-align: center;
   margin-bottom: 35px;
 }
-
 #useful_forks_inject {
   margin-top: 20px;
 }
@@ -21,11 +47,9 @@
 tr:hover {
   background-color: #e2e2e2 !important;
 }
-
 tr:nth-child(odd) {
   background-color: #f5f5f5;
 }
-
 table {
   margin: 0 auto !important;
 }
@@ -47,7 +71,6 @@ table {
 .navbar-item > img {
   margin-right: 8px;
 }
-
 .navbar-item {
   display: flex !important;
   align-items: center !important;
@@ -62,4 +85,16 @@ table {
     background-color: #4a4a4a !important; /* dropdown hovered row */
     color: #f8f8f8 !important; /* hovered text color */
   }
+}
+
+@media screen and (min-width: 769px) {
+  .modal-card, .modal-content {
+    width: 660px !important; /* dialogs width */
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .field-label.is-normal {
+    padding-top: 0 !important; /* settings popup fields misaligned */
+  }
 }
diff --git a/docs/index.html b/docs/index.html
@@ -85,8 +85,8 @@
         <!-- Right-side buttons which will populate the Burger -->
         <div class="navbar-end">
           <a id="addTokenBtn" class="navbar-item has-text-weight-bold"
-             onclick="ga_openTokenHeader();">
-            <img src="assets/settings-icon.png" alt="Settings" />
+             onclick="openTokenDialog();">
+            <img src="assets/settings-icon.png" alt="Access Token" />
             Add an Access Token
           </a>
         </div>
@@ -99,10 +99,9 @@
     <div class="modal-background"></div>
     <div class="modal-card">
       <header class="modal-card-head">
-        <p id="modalCardTitle" class="modal-card-title">Add a GitHub Access Token</p>
-        <button id="closeModalBtn" class="delete is-large" aria-label="close"
-                onclick="ga_closeToken();">
-        </button>
+        <p id="modalTokenCardTitle" class="modal-card-title">Add a GitHub Access Token</p>
+        <button class="delete is-large" aria-label="close"
+                onclick="closeTokenDialog();"></button>
       </header>
       <section class="modal-card-body">
         <p><em>Useful Forks</em> uses the GitHub API to retrieve repository metadata. You may see this dialog because you have hit the
@@ -116,10 +115,78 @@
       </section>
       <footer class="modal-card-foot">
         <a href="https://github.com/settings/tokens/new?scopes=public_repo&description=UsefulForks" target="_blank" rel="noopener noreferrer"
-           class="button is-link is-large is-fullwidth"
-           onclick="ga_createToken();">Create</a>
-        <a id="saveTokenBtn" class="button is-success is-large is-fullwidth"
-           onclick="ga_saveToken();">Save</a>
+           class="button is-uf-blue is-large is-fullwidth"
+           onclick="ga_createToken();">
+          Create
+        </a>
+        <a class="button is-uf-orange is-large is-fullwidth"
+           onclick="saveTokenBtnClicked();">
+          Save
+        </a>
+      </footer>
+    </div>
+  </div>
+
+  <!-- Query Settings popup -->
+  <div class="modal" id="uf_settings_popup">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Customize query settings</p>
+        <button class="delete is-large" aria-label="close"
+                onclick="closeSettingsDialog();"></button>
+      </header>
+      <section class="modal-card-body">
+        <p>Settings will be saved on your local browser and will apply to your future queries.</p><br/>
+
+        <!-- Amount of commit diffs for the automatic filtering. -->
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Ahead filter:</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <input id="uf_settings_filter" class="input is-small is-fullwidth has-tooltip-arrow"
+                       type="number" value="0" min="1"
+                       placeholder="Default is 0" required>
+              </div>
+              <p class="help mb-2"><strong>Default is 0.</strong> If the amount of 'ahead' commits is less than or equal to this value, the fork is automatically removed from the list.</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Relationship used for the commit diff count. -->
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Diff relative:</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <div class="control">
+                <label class="radio">
+                  <input type="radio" name="rsvp" checked>
+                  Parent
+                </label>
+                <label class="radio" disabled>
+                  <input type="radio" name="rsvp" disabled>
+                  Source [WIP]
+                </label>
+                <label class="radio" disabled>
+                  <input type="radio" name="rsvp" disabled>
+                  Heuristic [WIP]
+                </label>
+              </div>
+              <p class="help"><strong>Default is 'Parent'.</strong> Which repository, relative to the evaluated fork, should be used to calculate the commit diff ('ahead' and 'behind').</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <a class="button is-uf-orange is-large is-fullwidth"
+           onclick="saveSettingsBtnClicked();">
+          Save
+        </a>
       </footer>
     </div>
   </div>
@@ -129,6 +196,12 @@
     <div class="container has-text-centered">
       <div class="search-container">
         <div class="field has-addons">
+          <p class="control">
+            <a class="button is-dark is-outlined px-2"
+               onclick="openSettingsDialog();">
+              <img src="assets/settings-icon_big.png" alt="Settings" width="26" height="26"/>
+            </a>
+          </p>
           <div class="control is-expanded">
             <input class="input is-dark" type="text" id="repo" name="repo" placeholder="payne911/PieMenu" autofocus />
           </div>
@@ -163,8 +236,10 @@
   </div>
 </footer>
 
-<script type="text/javascript" src="src/jquery-3.5.1.min.js"></script>
-<script type="text/javascript" src="src/index.js" charset="utf-8"></script>
+<script type="text/javascript" src="lib/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="src/token.js" charset="utf-8"></script>
+<script type="text/javascript" src="src/settings.js" charset="utf-8"></script>
+<script type="text/javascript" src="src/queries-init.js" charset="utf-8"></script>
 <script type="module" src="src/queries-logic.js" charset="utf-8"></script>
 </body>
 

diff --git a/docs/lib/jquery-3.6.0.min.js b/docs/lib/jquery-3.6.0.min.js
diff --git a/docs/src/analytics-wrapper.js b/docs/src/analytics-wrapper.js
@@ -44,7 +44,7 @@ function ga_chromeHeader() {
 
 
 /* Access Token. */
-function ga_openTokenHeader() {
+function ga_openToken() {
   dispatch('click', 'access-token', 'Open-Dialog');
 }
 function ga_closeToken() {
@@ -56,3 +56,9 @@ function ga_saveToken() {
 function ga_createToken() {
   dispatch('click', 'access-token', 'Create-Token');
 }
+
+
+/* Settings. */
+function ga_openSettings() {
+  dispatch('query', 'Query-Settings', 'Open');
+}
diff --git a/docs/src/jquery-3.5.1.min.js b/docs/src/jquery-3.5.1.min.js
diff --git a/docs/src/index.js → docs/src/queries-init.js b/docs/src/index.js → docs/src/queries-init.js
@@ -1,20 +1,8 @@
 const SELF_URL = "https://useful-forks.github.io/";
 
-const UF_ID_WRAPPER = 'useful_forks_wrapper';
-const UF_ID_DATA    = 'useful_forks_data';
-const UF_ID_HEADER  = 'useful_forks_header';
-const UF_ID_MSG     = 'useful_forks_msg';
-const UF_ID_TABLE   = 'useful_forks_table';
-
 const JQ_REPO_FIELD  = $('#repo');
 const JQ_SEARCH_BTN  = $('#searchBtn');
 const JQ_TOTAL_CALLS = $('#totalApiCalls');
-const JQ_POPUP_TITLE = $('#modalCardTitle');
-const JQ_TOKEN_CLOSE = $('#closeModalBtn');
-const JQ_TOKEN_FIELD = $('#tokenInput');
-const JQ_TOKEN_SAVE  = $('#saveTokenBtn');
-const JQ_TOKEN_BTN   = $('#addTokenBtn');
-const JQ_POPUP       = $('#useful_forks_token_popup');
 
 const UF_MSG_NO_FORKS     = "No one forked this specific repository.";
 const UF_MSG_SCANNING     = "Currently scanning all the forks.";
@@ -103,14 +91,7 @@ function clearHeader() {
   JQ_ID_HEADER.empty();
 }
 
-function closeTokenDialog() {
-  JQ_POPUP.removeClass('is-active');
-  JQ_REPO_FIELD.focus();
-}
-function openTokenDialog() {
-  JQ_POPUP.addClass('is-active');
-  JQ_TOKEN_FIELD.focus();
-}
+/* Search Query Fields */
 function enableQueryFields() {
   JQ_REPO_FIELD.prop('disabled', false);
   JQ_SEARCH_BTN.removeClass('is-loading');
@@ -136,59 +117,6 @@ function setApiCallsLabel(total) {
   JQ_TOTAL_CALLS.html(total + " calls");
 }
 
-function drawAddTokenBtn(accessToken) {
-  let verb = 'Add';
-  if (accessToken) {
-    verb = 'Edit';
-    JQ_TOKEN_FIELD.val(accessToken);
-  }
-  JQ_TOKEN_BTN.html('<img src="assets/settings-icon.png" alt="Settings" />'
-      + verb + ' Access Token');
-  JQ_POPUP_TITLE.html(verb + ' GitHub Access Token');
-}
-
-function getJqId_$(id) {
-  return $('#' + id);
-}
-
-
-/* Burger-menu toggling */
-$(".navbar-burger").click(function() {
-  $(".navbar-burger").toggleClass("is-active");
-  $(".navbar-menu").toggleClass("is-active");
-});
-
-/* Initializing callbacks. */
-JQ_TOKEN_BTN.click(event => {
-  event.preventDefault();
-  openTokenDialog();
-});
-JQ_TOKEN_CLOSE.click(event => {
-  event.preventDefault();
-  closeTokenDialog();
-});
-JQ_TOKEN_SAVE.click(event => {
-  event.preventDefault();
-  const INPUT_TOKEN = JQ_TOKEN_FIELD.val();
-  localStorage.setItem(GITHUB_ACCESS_TOKEN_STORAGE_KEY, INPUT_TOKEN);
-  LOCAL_STORAGE_GITHUB_ACCESS_TOKEN = INPUT_TOKEN;
-  drawAddTokenBtn(INPUT_TOKEN);
-  closeTokenDialog();
-});
-JQ_TOKEN_FIELD.keyup(event => {
-  if (event.keyCode === 13) { // 'ENTER'
-    JQ_TOKEN_SAVE.click();
-  }
-  if (event.keyCode === 27) { // 'ESC'
-    closeTokenDialog();
-  }
-});
-
-
-/* Gather the saved Access Token. */
-const GITHUB_ACCESS_TOKEN_STORAGE_KEY = "useful-forks-access-token";
-let LOCAL_STORAGE_GITHUB_ACCESS_TOKEN = localStorage.getItem(GITHUB_ACCESS_TOKEN_STORAGE_KEY);
-drawAddTokenBtn(LOCAL_STORAGE_GITHUB_ACCESS_TOKEN);
 
 /** Grabs the URL Param used for automatic queries. */
 function getRepoNameFromUrl() {
@@ -211,6 +139,11 @@ function landingPageTrigger() {
 }
 
 /* Initialize the structure used by the 'queries-logic.js' */
+const UF_ID_WRAPPER = 'useful_forks_wrapper';
+const UF_ID_HEADER  = 'useful_forks_header';
+const UF_ID_MSG     = 'useful_forks_msg';
+const UF_ID_DATA    = 'useful_forks_data';
+const UF_ID_TABLE   = 'useful_forks_table';
 $('#useful_forks_inject').append(
     $('<div>', {id: UF_ID_WRAPPER}).append(
         $('<div>', {id: UF_ID_HEADER}),
@@ -222,6 +155,9 @@ $('#useful_forks_inject').append(
         )
     )
 );
+function getJqId_$(id) {
+  return $('#' + id);
+}
 const JQ_ID_HEADER  = getJqId_$(UF_ID_HEADER);
 const JQ_ID_MSG     = getJqId_$(UF_ID_MSG);
 const JQ_ID_TABLE   = getJqId_$(UF_ID_TABLE);
diff --git a/docs/src/queries-logic.js b/docs/src/queries-logic.js
@@ -3,10 +3,11 @@ import { throttling } from "https://cdn.skypack.dev/@octokit/plugin-throttling";
 
 const SLOW_DOWN_MSG_THRESHOLD = 800;
 
-/* Variables that should be cleared for every new query. */
-let TOTAL_FORKS              = 0;
-let RATE_LIMIT_EXCEEDED      = false;
-let TOTAL_API_CALLS_COUNTER  = 0;
+/* Variables that should be cleared for every new query (defaults are set in "clear_old_data"). */
+let TOTAL_FORKS;
+let RATE_LIMIT_EXCEEDED;
+let AHEAD_COMMITS_FILTER;
+let TOTAL_API_CALLS_COUNTER;
 let ONGOING_REQUESTS_COUNTER = 0;
 
 /** Used to reset the state for a brand new query. */
@@ -19,6 +20,7 @@ function clear_old_data() {
   RATE_LIMIT_EXCEEDED = false;
   TOTAL_API_CALLS_COUNTER = 0;
   ONGOING_REQUESTS_COUNTER = 0;
+  AHEAD_COMMITS_FILTER = UF_SETTINGS_AHEAD_FILTER;
 }
 
 function extract_username_from_fork(combined_name) {
@@ -156,7 +158,7 @@ function add_fork_elements(forkdata_array, user, repo, parentDefaultBranch) {
       head: `${extract_username_from_fork(currFork.full_name)}:${currFork.default_branch}`
     });
     const onSuccess = (responseHeaders, responseData) => {
-      if (responseData.total_commits === 0) {
+      if (responseData.total_commits <= AHEAD_COMMITS_FILTER) {
         NEW_ROW.remove();
         if (table_body.children().length === 0) {
           setMsg(UF_MSG_EMPTY_FILTER);