Merge pull request #349 from jrdnbradford/add-copy-btn

Add copy button for link generator

Author: yuvipanda

docs/_static/link_gen/link.js

@@ -283,3 +283,10 @@ function linkMain() {
     // Do an initial render, to make sure our disabled / enabled properties are correctly set
     render();
 }
+
+function copyLink(elementId) {
+  var copyText = document.getElementById(elementId);
+  copyText.select();
+  copyText.setSelectionRange(0, copyText.value.length);
+  navigator.clipboard.writeText(copyText.value);
+} 

docs/link.rst

@@ -37,18 +37,26 @@ Use the following form to create your own ``nbgitpuller`` links.
                </li>
              </ul>
 
-             <div class="tab-content">
-               <div class="tab-pane fade show active" id="auth-default" role="tabpanel" aria-labelledby="tab-auth-default" tabindex="0">
-                 <input type="text" readonly class="form-control form-control" id="default-link" name="auth-default-link" placeholder="Generated link appears here...">
-               </div>
-               <div class="tab-pane fade" id="auth-canvas" role="tabpanel" aria-labelledby="tab-auth-canvas"  tabindex="0">
-                 <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-binder" role="tabpanel" aria-labelledby="tab-auth-binder"  tabindex="0">
-                 <input type="text" readonly class="form-control form-control" id="binder-link" name="auth-binder-link" placeholder="Generated Binder link appears here...">
-               </div>
+             <div class="tab-content" style="margin:10px;">
+              <div class="tab-pane fade show active" id="auth-default" role="tabpanel" aria-labelledby="tab-auth-default" tabindex="0">
+                  <div class="input-group">
+                      <input type="text" readonly class="form-control col-sm-2 col-form-label" id="default-link" name="auth-default-link" placeholder="Generated link appears here...">
+                      <button class="btn btn-outline-secondary" type="button" onclick="copyLink('default-link')">Copy</button>
+                  </div>
+              </div>
+              <div class="tab-pane fade" id="auth-canvas" role="tabpanel" aria-labelledby="tab-auth-canvas" tabindex="0">
+                  <div class="input-group">
+                      <input type="text" readonly class="form-control col-sm-2 col-form-label" id="canvas-link" name="auth-canvas-link" placeholder="Generated canvas 'external app' link appears here...">
+                      <button class="btn btn-outline-secondary" type="button" onclick="copyLink('canvas-link')">Copy</button>
+                  </div>
+              </div>
+              <div class="tab-pane fade" id="auth-binder" role="tabpanel" aria-labelledby="tab-auth-binder" tabindex="0">
+                  <div class="input-group">
+                      <input type="text" readonly class="form-control col-sm-2 col-form-label" id="binder-link" name="auth-binder-link" placeholder="Generated Binder link appears here...">
+                      <button class="btn btn-outline-secondary" type="button" onclick="copyLink('binder-link')">Copy</button>
+                  </div>
+              </div>
              </div>
-           </div>
 
            <div class="form-group row">
              <label for="hub" class="col-sm-2 col-form-label">JupyterHub URL</label>