Skip to content

Commit

Permalink
Merge pull request #129 from GeorgianaElena/mybinder-tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuvipanda
yuvipanda authored Jun 28, 2020
2 parents eb8f2e6 + ec466a5 commit 9dd1359
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 7 deletions.
73 changes: 70 additions & 3 deletions docs/_static/link_gen/link.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,32 @@ function generateCanvasUrl(hubUrl, urlPath, repoUrl, branch) {
return url.toString();
}

function generateMyBinderUrl(hubUrl, userName, repoName, branch, urlPath,
contentRepoUrl, contentRepoBranch) {

var url = new URL(hubUrl);

var nextUrlParams = new URLSearchParams();

nextUrlParams.append('repo', contentRepoUrl);

if (urlPath) {
nextUrlParams.append('urlpath', urlPath);
}

if (branch) {
nextUrlParams.append('branch', branch);
}

var nextUrl = 'git-pull?' + nextUrlParams.toString();

var path = '/v2/gh/';
url.pathname = path.concat(userName, "/", repoName, "/", branch);
url.searchParams.append('urlpath', nextUrl);

return url.toString();
}

var apps = {
classic: {
title: 'Classic Notebook',
Expand All @@ -58,22 +84,60 @@ var apps = {
}
}

function changeTab(div) {
var hub = document.getElementById("hub");
var hub_help_text = document.getElementById("hub-help-text");
var env_repo = document.getElementById("repo");
var env_repo_help_text = document.getElementById("env-repo-help-text");
var content_repo = document.getElementById("content-repo-group");
var content_branch = document.getElementById("content-branch-group");
var id = div.id;

if (id.includes("mybinder")) {
hub.placeholder = "https://mybinder.org";
hub.value = "https://mybinder.org";
hub_help_text.hidden = true;
hub.labels[0].innerHTML = "BinderHub URL";
env_repo.labels[0].innerHTML = "Git Environment Repository URL";
env_repo_help_text.hidden = false;
content_repo.hidden = false;
content_branch.hidden = false;
} else {
hub.placeholder = "https://hub.example.com";
hub_help_text.hidden = false;
hub.labels[0].innerHTML = "JupyterHub URL";
env_repo.labels[0].innerHTML = "Git Repository URL";
env_repo_help_text.hidden = true;
content_repo.hidden = true;
content_branch.hidden = true;
}
}

function displayLink() {
var form = document.getElementById('linkgenerator');

form.classList.add('was-validated');
if (form.checkValidity()) {
var hubUrl = document.getElementById('hub').value;
var repoUrl = document.getElementById('repo').value;
var filePath = document.getElementById('filepath').value;
var branch = document.getElementById('branch').value;
var contentRepoUrl = document.getElementById('content-repo').value;
var contentRepoBranch = document.getElementById('content-branch').value;
var filePath = document.getElementById('filepath').value;
var appName = form.querySelector('input[name="app"]:checked').value;

if (appName === 'custom') {
var urlPath = document.getElementById('urlpath').value;
} else {
var repoName = new URL(repoUrl).pathname.split('/').pop().replace(/\.git$/, '');
var urlPath = apps[appName].generateUrlPath(repoName + '/' + filePath);
var userName = new URL(repoUrl).pathname.split('/')[1];
var urlPath;
if (contentRepoUrl.disabled) {
urlPath = apps[appName].generateUrlPath(repoName + '/' + filePath);
} else {
var contentRepoName = new URL(contentRepoUrl).pathname.split('/').pop().replace(/\.git$/, '');
urlPath = apps[appName].generateUrlPath(contentRepoName + '/' + filePath);
}
}

document.getElementById('default-link').value = generateRegularUrl(
Expand All @@ -82,13 +146,16 @@ function displayLink() {
document.getElementById('canvas-link').value = generateCanvasUrl(
hubUrl, urlPath, repoUrl, branch
);
document.getElementById('mybinder-link').value = generateMyBinderUrl(
hubUrl, userName, repoName, branch, urlPath, contentRepoUrl, contentRepoBranch
);
}
}
function populateFromQueryString() {
// preseed values if specified in the url
var params = new URLSearchParams(window.location.search);
// Parameters are read from query string, and <input> fields are set to them
var allowedParams = ['hub', 'repo', 'branch', 'app', 'urlpath'];
var allowedParams = ['hub', 'repo', 'content-repo', 'branch', 'app', 'urlpath'];
if (params.has("urlpath")) {
// setting urlpath implies a custom app
document.getElementById('app-custom').checked = true;
Expand Down
39 changes: 35 additions & 4 deletions docs/link.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,20 @@ 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">
<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>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-auth-canvas" data-toggle="tab" role="tab" href="#auth-canvas" aria-controls="auth-canvas">
<a class="nav-link" id="tab-auth-canvas" data-toggle="tab" role="tab" href="#auth-canvas" aria-controls="auth-canvas" onclick="changeTab(this)">
<small>Launch from Canvas</small>
</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>
</li>
</ul>

<div class="tab-content">
Expand All @@ -30,6 +35,9 @@ 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>
</div>
</ul>
</div>
Expand All @@ -42,7 +50,7 @@ Use the following form to create your own ``nbgitpuller`` links.
<div class="invalid-feedback">
Must be a valid web URL
</div>
<small class="form-text text-muted">
<small class="form-text text-muted" id="hub-help-text">
The JupyterHub to send users to.
<a href="https://github.com/jupyterhub/nbgitpuller">nbgitpuller</a> must be installed in this hub.
</small>
Expand All @@ -57,17 +65,40 @@ Use the following form to create your own ``nbgitpuller`` links.
<div class="invalid-feedback">
Must be a valid git URL
</div>
<small class="form-text text-muted" id="env-repo-help-text" hidden="true">
The environment repository must have
<a href="https://github.com/jupyterhub/nbgitpuller">nbgitpuller</a> installed.
</small>
</div>
<div class="col-sm-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="branch-prepend-label">branch</span>
</div>
<input name="branch" id="branch" type="text" class="form-control" placeholder="master" aria-label="Branch Name" aria-describedby="branch-prepend-label">
<input name="branch" id="branch" type="text" class="form-control" placeholder="master" value="master" aria-label="Branch Name" aria-describedby="branch-prepend-label">
</div>
</div>
</div>

<div class="form-group row" id="content-repo-group" hidden="true">
<label for="content-repo" class="col-sm-2 col-form-label">Git Content Repository URL</label>
<div class="col-sm-6">
<input class="form-control" type="text" id="content-repo" placeholder="https://github.com/example/test"
oninput="displayLink()" required pattern="((git|https?)://.+|git@.+:.+)">
<div class="invalid-feedback">
Must be a valid git URL
</div>
</div>
<div class="col-sm-4">
<div class="input-group" id="content-branch-group" hidden="true">
<div class="input-group-prepend">
<span class="input-group-text" id="content-branch-prepend-label">branch</span>
</div>
<input name="content-branch" id="content-branch" type="text" class="form-control" placeholder="master" value="master" aria-label="Branch Name" aria-describedby="content-branch-prepend-label">
</div>
</div>
</div>

<div class="form-group row" id="filepath-container">
<label for="filepath" class="col-sm-2 col-form-label">File to open</label>
<div class="col-sm-10">
Expand Down

0 comments on commit 9dd1359

Please sign in to comment.