tab activation on link generator

jupyterhub · Jun 29, 2020 · b77c35f · b77c35f
1 parent 9dd1359
commit b77c35f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/docs/_static/link_gen/link.js b/docs/_static/link_gen/link.js
@@ -43,7 +43,7 @@ function generateCanvasUrl(hubUrl, urlPath, repoUrl, branch) {
     return url.toString();
 }
 
-function generateMyBinderUrl(hubUrl, userName, repoName, branch, urlPath,
+function generateBinderUrl(hubUrl, userName, repoName, branch, urlPath,
     contentRepoUrl, contentRepoBranch) {
 
     var url = new URL(hubUrl);
@@ -93,7 +93,7 @@ function changeTab(div) {
     var content_branch = document.getElementById("content-branch-group");
     var id = div.id;
 
-    if (id.includes("mybinder")) {
+    if (id.includes("binder")) {
         hub.placeholder = "https://mybinder.org";
         hub.value = "https://mybinder.org";
         hub_help_text.hidden = true;
@@ -146,7 +146,7 @@ function displayLink() {
         document.getElementById('canvas-link').value = generateCanvasUrl(
             hubUrl, urlPath, repoUrl, branch
         );
-        document.getElementById('mybinder-link').value = generateMyBinderUrl(
+        document.getElementById('binder-link').value = generateBinderUrl(
             hubUrl, userName, repoName, branch, urlPath, contentRepoUrl, contentRepoBranch
         );
     }
@@ -223,4 +223,4 @@ function main() {
     render();
 }
 
-window.onload = main;
+window.onload = main;
diff --git a/docs/link.rst b/docs/link.rst
@@ -13,7 +13,7 @@ Use the following form to create your own ``nbgitpuller`` links.
              <ul class="nav nav-tabs justify-content-end" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="tab-auth-default" data-toggle="tab" role="tab" href="#auth-default" aria-controls="auth-default" onclick="changeTab(this)">
-                   <small>Default</small>
+                   <small>JupyterHub</small>
                  </a>
                </li>
                <li class="nav-item">
@@ -22,8 +22,8 @@ Use the following form to create your own ``nbgitpuller`` links.
                  </a>
                </li>
                <li class="nav-item">
-                 <a class="nav-link" id="tab-auth-mybinder" data-toggle="tab" role="tab" href="#auth-mybinder" aria-controls="auth-mybinder" onclick="changeTab(this)">
-                   <small>mybinder.org</small>
+                 <a class="nav-link" id="tab-auth-binder" data-toggle="tab" role="tab" href="#auth-binder" aria-controls="auth-binder" onclick="changeTab(this)">
+                   <small>Binder</small>
                  </a>
                </li>
              </ul>
@@ -35,8 +35,8 @@ Use the following form to create your own ``nbgitpuller`` links.
                <div class="tab-pane fade" id="auth-canvas" role="tabpanel" aria-labelledby="tab-auth-canvas">
                  <input type="text" readonly class="form-control form-control" id="canvas-link" name="auth-canvas-link" placeholder="Generated canvas 'external app' link appears here...">
                </div>
-               <div class="tab-pane fade" id="auth-mybinder" role="tabpanel" aria-labelledby="tab-auth-mybinder">
-                 <input type="text" readonly class="form-control form-control" id="mybinder-link" name="auth-mybinder-link" placeholder="Generated mybinder.org link appears here...">
+               <div class="tab-pane fade" id="auth-binder" role="tabpanel" aria-labelledby="tab-auth-binder">
+                 <input type="text" readonly class="form-control form-control" id="binder-link" name="auth-binder-link" placeholder="Generated BinderHub link appears here...">
                </div>
              </div>
              </ul>
@@ -148,6 +148,18 @@ Use the following form to create your own ``nbgitpuller`` links.
      </div>
      <br /><br /><br />
 
+     <!-- Script to activate a tab based on REST params -->
+     <script>
+       var params = new URL(window.location).searchParams;
+       if (params.get("tab")) {
+         if (params.get("tab") === "binder") {
+           $("#tab-auth-binder").click()
+         } else if (params.get("tab") === "canvas") {
+           $("#tab-auth-canvas").click()
+         }
+       }
+     </script>
+
 
 **Pre-populating some fields in the link generator**
 
@@ -163,3 +175,12 @@ For example, the following URL will pre-populate the form with the
 UC Berkeley DataHub as the JupyterHub::
 
     https://jupyterhub.github.io/nbgitpuller/link?hub=https://datahub.berkeley.edu
+
+
+**Activating a tab when someone lands on this page**
+
+You can also activate one of the tabs in the form above by default when a user lands
+on this page. To do so, use the ``tab=`` REST parameter. Here are the possible values:
+
+* ``?tab=binder`` - activates the Binder tab
+* ``?tab=canvas`` - activates the Canvas tab.