Skip to content

Commit 145b44a

Browse files
yuvipandayuvipanda
committed
Modernize JS
- Get rid of var - Use class syntax rather than prototype syntax for classes - Remove unused param - Split classes to their own files
1 parent 8f017c3 commit 145b44a

File tree

3 files changed

+134
-131
lines changed

3 files changed

+134
-131
lines changed

‎nbgitpuller/static/js/gitsync.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export class GitSync {
2+
constructor(baseUrl, repo, branch, depth, targetpath, path) {
3+
// Class that talks to the API backend & emits events as appropriate
4+
this.baseUrl = baseUrl;
5+
this.repo = repo;
6+
this.branch = branch;
7+
this.depth = depth;
8+
this.targetpath = targetpath;
9+
this.redirectUrl = baseUrl + path;
10+
11+
this.callbacks = {};
12+
}
13+
14+
addHandler(event, cb) {
15+
if (this.callbacks[event] == undefined) {
16+
this.callbacks[event] = [cb];
17+
} else {
18+
this.callbacks[event].push(cb);
19+
}
20+
}
21+
22+
_emit(event, data) {
23+
if (this.callbacks[event] == undefined) { return; }
24+
for(let ev of this.callbacks[event]) {
25+
ev(data);
26+
}
27+
28+
}
29+
30+
start() {
31+
// Start git pulling handled by SyncHandler, declared in handlers.py
32+
let syncUrlParams = new URLSearchParams({
33+
repo: this.repo,
34+
targetpath: this.targetpath
35+
});
36+
if (typeof this.depth !== 'undefined' && this.depth != undefined) {
37+
syncUrlParams.append('depth', this.depth);
38+
}
39+
if (typeof this.branch !== 'undefined' && this.branch != undefined) {
40+
syncUrlParams.append('branch', this.branch);
41+
}
42+
const syncUrl = this.baseUrl + 'git-pull/api?' + syncUrlParams.toString();
43+
44+
this.eventSource = new EventSource(syncUrl);
45+
this.eventSource.addEventListener('message', (ev) => {
46+
const data = JSON.parse(ev.data);
47+
if (data.phase == 'finished' || data.phase == 'error') {
48+
this.eventSource.close();
49+
}
50+
this._emit(data.phase, data);
51+
});
52+
this.eventSource.addEventListener('error',(error) => {
53+
this._emit('error', error);
54+
});
55+
}
56+
}

‎nbgitpuller/static/js/gitsyncview.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
2+
import { Terminal } from 'xterm';
3+
import { FitAddon } from 'xterm-addon-fit';
4+
5+
export class GitSyncView{
6+
constructor(termSelector, progressSelector, termToggleSelector) {
7+
// Class that encapsulates view rendering as much as possible
8+
this.term = new Terminal({
9+
convertEol: true
10+
});
11+
this.fit = new FitAddon();
12+
this.term.loadAddon(this.fit);
13+
14+
this.visible = false;
15+
this.progress = document.querySelector(progressSelector);
16+
17+
this.termToggle = document.querySelector(termToggleSelector);
18+
this.termElement = document.querySelector(termSelector);
19+
20+
this.termToggle.onclick = () => this.setTerminalVisibility(!this.visible)
21+
}
22+
23+
setTerminalVisibility(visible) {
24+
if (visible) {
25+
this.termElement.parentElement.classList.remove('hidden');
26+
} else {
27+
this.termElement.parentElement.classList.add('hidden');
28+
}
29+
this.visible = visible;
30+
if (visible) {
31+
// See https://github.com/jupyterhub/nbgitpuller/pull/46 on why this is here.
32+
if (!this.term.element) {
33+
this.term.open(this.termElement);
34+
}
35+
this.fit.fit();
36+
}
37+
}
38+
39+
setProgressValue(val) {
40+
this.progress.setAttribute('aria-valuenow', val);
41+
this.progress.style.width = val + '%';
42+
}
43+
44+
getProgressValue() {
45+
return parseFloat(this.progress.getAttribute('aria-valuenow'));
46+
}
47+
48+
setProgressText(text) {
49+
this.progress.querySelector('span').innerText = text;
50+
}
51+
52+
getProgressText() {
53+
return this.progress.querySelector('span').innerText;
54+
}
55+
56+
setProgressError(isError) {
57+
if (isError) {
58+
this.progress.classList.add('progress-bar-danger');
59+
} else {
60+
this.progress.classList.remove('progress-bar-danger');
61+
}
62+
}
63+
}

‎nbgitpuller/static/js/index.js‎

Lines changed: 15 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,8 @@
1-
import { Terminal } from 'xterm';
2-
import { FitAddon } from 'xterm-addon-fit';
1+
import { GitSync } from './gitsync';
2+
import { GitSyncView } from './gitsyncview';
33
import css from '../../../node_modules/xterm/css/xterm.css';
44

5-
function GitSync(baseUrl, repo, branch, depth, targetpath, path) {
6-
// Class that talks to the API backend & emits events as appropriate
7-
this.baseUrl = baseUrl;
8-
this.repo = repo;
9-
this.branch = branch;
10-
this.depth = depth;
11-
this.targetpath = targetpath;
12-
this.redirectUrl = baseUrl + path;
13-
14-
this.callbacks = {};
15-
}
16-
17-
GitSync.prototype.addHandler = function(event, cb) {
18-
if (this.callbacks[event] == undefined) {
19-
this.callbacks[event] = [cb];
20-
} else {
21-
this.callbacks[event].push(cb);
22-
}
23-
};
24-
25-
GitSync.prototype._emit = function(event, data) {
26-
if (this.callbacks[event] == undefined) { return; }
27-
for(let ev of this.callbacks[event]) {
28-
ev(data);
29-
}
30-
};
31-
32-
33-
GitSync.prototype.start = function() {
34-
// Start git pulling handled by SyncHandler, declared in handlers.py
35-
let syncUrlParams = new URLSearchParams({
36-
repo: this.repo,
37-
targetpath: this.targetpath
38-
});
39-
if (typeof this.depth !== 'undefined' && this.depth != undefined) {
40-
syncUrlParams.append('depth', this.depth);
41-
}
42-
if (typeof this.branch !== 'undefined' && this.branch != undefined) {
43-
syncUrlParams.append('branch', this.branch);
44-
}
45-
var syncUrl = this.baseUrl + 'git-pull/api?' + syncUrlParams.toString();
46-
47-
this.eventSource = new EventSource(syncUrl);
48-
var that = this;
49-
this.eventSource.addEventListener('message', function(ev) {
50-
var data = JSON.parse(ev.data);
51-
if (data.phase == 'finished' || data.phase == 'error') {
52-
that.eventSource.close();
53-
}
54-
that._emit(data.phase, data);
55-
});
56-
this.eventSource.addEventListener('error', function(error) {
57-
console.log(arguments);
58-
that._emit('error', error);
59-
});
60-
};
61-
62-
function GitSyncView(termSelector, progressSelector, termToggleSelector) {
63-
// Class that encapsulates view rendering as much as possible
64-
this.term = new Terminal({
65-
convertEol: true
66-
});
67-
this.fit = new FitAddon();
68-
this.term.loadAddon(this.fit);
69-
70-
this.visible = false;
71-
this.progress = document.querySelector(progressSelector);
72-
73-
this.termToggle = document.querySelector(termToggleSelector);
74-
this.termElement = document.querySelector(termSelector);
75-
76-
this.termToggle.onclick = () => this.setTerminalVisibility(!this.visible)
77-
}
78-
79-
GitSyncView.prototype.setTerminalVisibility = function(visible) {
80-
if (visible) {
81-
this.termElement.parentElement.classList.remove('hidden');
82-
} else {
83-
this.termElement.parentElement.classList.add('hidden');
84-
}
85-
this.visible = visible;
86-
if (visible) {
87-
// See https://github.com/jupyterhub/nbgitpuller/pull/46 on why this is here.
88-
if (!this.term.element) {
89-
this.term.open(this.termElement);
90-
}
91-
this.fit.fit();
92-
}
93-
94-
}
95-
96-
GitSyncView.prototype.setProgressValue = function(val) {
97-
this.progress.setAttribute('aria-valuenow', val);
98-
this.progress.style.width = val + '%';
99-
};
100-
101-
GitSyncView.prototype.getProgressValue = function() {
102-
return parseFloat(this.progress.getAttribute('aria-valuenow'));
103-
};
104-
105-
GitSyncView.prototype.setProgressText = function(text) {
106-
this.progress.querySelector('span').innerText = text;
107-
};
108-
109-
GitSyncView.prototype.getProgressText = function() {
110-
return this.progress.querySelector('span').innerText;
111-
};
112-
113-
GitSyncView.prototype.setProgressError = function(isError) {
114-
if (isError) {
115-
this.progress.classList.add('progress-bar-danger');
116-
} else {
117-
this.progress.classList.remove('progress-bar-danger');
118-
}
119-
};
120-
121-
var get_body_data = function(key) {
5+
const getBodyData = (key) => {
1226
/**
1237
* get a url-encoded item from body.data and decode it
1248
* we should never have any encoded URLs anywhere else in code
@@ -131,16 +15,16 @@ var get_body_data = function(key) {
13115
return decodeURIComponent(val);
13216
};
13317

134-
var gs = new GitSync(
135-
get_body_data('base-url'),
136-
get_body_data('repo'),
137-
get_body_data('branch'),
138-
get_body_data('depth'),
139-
get_body_data('targetpath'),
140-
get_body_data('path')
18+
const gs = new GitSync(
19+
getBodyData('base-url'),
20+
getBodyData('repo'),
21+
getBodyData('branch'),
22+
getBodyData('depth'),
23+
getBodyData('targetpath'),
24+
getBodyData('path')
14125
);
14226

143-
var gsv = new GitSyncView(
27+
const gsv = new GitSyncView(
14428
'#status-details',
14529
'#status-panel-title',
14630
'#status-panel-toggle'
@@ -149,11 +33,11 @@ var gsv = new GitSyncView(
14933
gs.addHandler('syncing', function(data) {
15034
gsv.term.write(data.output);
15135
});
152-
gs.addHandler('finished', function(data) {
36+
gs.addHandler('finished', function() {
15337
progressTimers.forEach(function(timer) { clearInterval(timer); });
15438
gsv.setProgressValue(100);
15539
gsv.setProgressText('Sync finished, redirecting...');
156-
window.location.href = gs.redirectUrl;
40+
// window.location.href = gs.redirectUrl;
15741
});
15842
gs.addHandler('error', function(data) {
15943
progressTimers.forEach(function(timer) { clearInterval(timer); });
@@ -168,7 +52,7 @@ gs.addHandler('error', function(data) {
16852
gs.start();
16953

17054
// Make sure we provide plenty of appearances of progress!
171-
var progressTimers = [];
55+
let progressTimers = [];
17256
progressTimers.push(setInterval(function() {
17357
gsv.setProgressText(substatus_messages[Math.floor(Math.random() * substatus_messages.length)]);
17458
}, 3000));
@@ -182,7 +66,7 @@ progressTimers.push(setInterval(function() {
18266
}, 900));
18367

18468

185-
var substatus_messages = [
69+
const substatus_messages = [
18670
"Adding Hidden Agendas",
18771
"Adjusting Bell Curves",
18872
"Aesthesizing Industrial Areas",

0 commit comments

Comments
 (0)