Stop using global variables in badge.js

Pathway towards making the functions more testable

Author: yuvipanda

binderhub/static/js/index.js

@@ -17,7 +17,7 @@ import 'bootstrap';
 import 'event-source-polyfill';
 
 import BinderImage from './src/image';
-import { markdownBadge, rstBadge } from './src/badge';
+import { makeBadgeMarkup } from './src/badge';
 import { getPathType, updatePathText } from './src/path';
 import { nextHelpText } from './src/loading';
 
@@ -135,8 +135,12 @@ function updateUrls(formValues) {
     // update URLs and links (badges, etc.)
     $("#badge-link").attr('href', url);
     $('#basic-url-snippet').text(url);
-    $('#markdown-badge-snippet').text(markdownBadge(url));
-    $('#rst-badge-snippet').text(rstBadge(url));
+    $('#markdown-badge-snippet').text(
+      makeBadgeMarkup(BADGE_BASE_URL, BASE_URL, url, 'markdown')
+    );
+    $('#rst-badge-snippet').text(
+      makeBadgeMarkup(BADGE_BASE_URL, BASE_URL, url, 'rst')
+    );
   } else {
     ['#basic-url-snippet', '#markdown-badge-snippet', '#rst-badge-snippet' ].map(function(item){
       const el = $(item);

binderhub/static/js/src/badge.js

@@ -1,20 +1,16 @@
-const BASE_URL = $("#base-url").data().url;
-const BADGE_BASE_URL = $('#badge-base-url').data().url;
-let badge_url;
+export function makeBadgeMarkup(badgeBaseUrl, baseUrl, url, syntax) {
+  let badgeImageUrl;
 
-if (BADGE_BASE_URL) {
-  badge_url = BADGE_BASE_URL + "badge_logo.svg";
-}
-else {
-  badge_url = window.location.origin + BASE_URL + "badge_logo.svg";
-}
+  if (badgeBaseUrl) {
+    badgeImageUrl = badgeBaseUrl + "badge_logo.svg";
+  } else {
+    badgeImageUrl = window.location.origin + baseUrl + "badge_logo.svg";
+  }
 
-export function markdownBadge(url) {
-  // return markdown badge snippet
-  return "[![Binder](" + badge_url + ")](" + url + ")";
-}
+  if (syntax === 'markdown') {
+    return "[![Binder](" + badgeImageUrl + ")](" + url + ")";
+  } else if (syntax === 'rst') {
+    return ".. image:: " + badgeImageUrl + "\n :target: " + url;
 
-export function rstBadge(url) {
-  // return rst badge snippet
-  return ".. image:: " + badge_url + "\n :target: " + url;
+  }
 }