Skip to content

Commit f755124

Browse files
yuvipandayuvipanda
committed
Slightly cleanup BadgeImage class
- Use ES6 classes - Don't reach into the DOM to get build token and baseUrl. This will help with writing tests in the future - Use => functions, so we can stop writing `const that = this`. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions. Particularly, it does not rebind `this`, so we can continue to access the parent context's `this`. Eventually this could be part of a binder-client JS package that can be used by other projects (like thebe) Ref #1373
1 parent 9951c81 commit f755124

File tree

2 files changed

+87
-86
lines changed

2 files changed

+87
-86
lines changed

‎binderhub/static/js/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,8 @@ function build(providerSpec, log, fitAddon, path, pathType) {
159159

160160
$('.on-build').removeClass('hidden');
161161

162-
const image = new BinderImage(providerSpec);
162+
const buildToken = $("#build-token").data('token');
163+
const image = new BinderImage(providerSpec, BASE_URL, buildToken);
163164

164165
image.onStateChange('*', function(oldState, newState, data) {
165166
if (data.message !== undefined) {

‎binderhub/static/js/src/image.js‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,104 +2,104 @@ import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';
22

33
const EventSource = NativeEventSource || EventSourcePolyfill;
44

5-
export default function BinderImage(providerSpec) {
6-
this.providerSpec = providerSpec;
7-
this.callbacks = {};
8-
this.state = null;
9-
}
10-
11-
BinderImage.prototype.fetch = function() {
12-
const baseUrl = $("#base-url").data('url');
13-
let apiUrl = baseUrl + "build/" + this.providerSpec;
14-
const buildToken = $("#build-token").data('token');
15-
if (buildToken) {
16-
apiUrl = apiUrl + `?build_token=${buildToken}`;
5+
export default class BinderImage {
6+
constructor(providerSpec, baseUrl, buildToken) {
7+
this.providerSpec = providerSpec;
8+
this.baseUrl = baseUrl;
9+
this.buildToken = buildToken;
10+
this.callbacks = {};
11+
this.state = null;
1712
}
1813

19-
this.eventSource = new EventSource(apiUrl);
20-
const that = this;
21-
this.eventSource.onerror = function(err) {
22-
console.error("Failed to construct event stream", err);
23-
that.changeState("failed", {
24-
message: "Failed to connect to event stream\n"
25-
});
26-
};
27-
this.eventSource.addEventListener("message", function(event) {
28-
const data = JSON.parse(event.data);
29-
// FIXME: Rename 'phase' to 'state' upstream
30-
// FIXME: fix case of phase/state upstream
31-
let state = null;
32-
if (data.phase) {
33-
state = data.phase.toLowerCase();
14+
fetch() {
15+
let apiUrl = this.baseUrl + "build/" + this.providerSpec;
16+
if (this.buildToken) {
17+
apiUrl = apiUrl + `?build_token=${this.buildToken}`;
3418
}
35-
that.changeState(state, data);
36-
});
37-
};
3819

39-
BinderImage.prototype.close = function() {
40-
if (this.eventSource !== undefined) {
41-
this.eventSource.close();
20+
this.eventSource = new EventSource(apiUrl);
21+
this.eventSource.onerror = (err) => {
22+
console.error("Failed to construct event stream", err);
23+
this.changeState("failed", {
24+
message: "Failed to connect to event stream\n"
25+
});
26+
};
27+
this.eventSource.addEventListener("message", (event) => {
28+
const data = JSON.parse(event.data);
29+
// FIXME: Rename 'phase' to 'state' upstream
30+
// FIXME: fix case of phase/state upstream
31+
let state = null;
32+
if (data.phase) {
33+
state = data.phase.toLowerCase();
34+
}
35+
this.changeState(state, data);
36+
});
4237
}
43-
};
4438

45-
BinderImage.prototype.launch = function(url, token, path, pathType) {
46-
// redirect a user to a running server with a token
47-
if (path) {
48-
// strip trailing /
49-
url = url.replace(/\/$/, "");
50-
// trim leading '/'
51-
path = path.replace(/(^\/)/g, "");
52-
if (pathType === "file") {
53-
// trim trailing / on file paths
54-
path = path.replace(/(\/$)/g, "");
55-
// /doc/tree is safe because it allows redirect to files
56-
url = url + "/doc/tree/" + encodeURI(path);
57-
} else {
58-
// pathType === 'url'
59-
url = url + "/" + path;
39+
close() {
40+
if (this.eventSource !== undefined) {
41+
this.eventSource.close();
42+
}
43+
}
44+
45+
launch(url, token, path, pathType) {
46+
// redirect a user to a running server with a token
47+
if (path) {
48+
// strip trailing /
49+
url = url.replace(/\/$/, "");
50+
// trim leading '/'
51+
path = path.replace(/(^\/)/g, "");
52+
if (pathType === "file") {
53+
// trim trailing / on file paths
54+
path = path.replace(/(\/$)/g, "");
55+
// /doc/tree is safe because it allows redirect to files
56+
url = url + "/doc/tree/" + encodeURI(path);
57+
} else {
58+
// pathType === 'url'
59+
url = url + "/" + path;
60+
}
6061
}
62+
const sep = url.indexOf("?") == -1 ? "?" : "&";
63+
url = url + sep + $.param({ token: token });
64+
window.location.href = url;
6165
}
62-
const sep = url.indexOf("?") == -1 ? "?" : "&";
63-
url = url + sep + $.param({ token: token });
64-
window.location.href = url;
65-
};
6666

67-
BinderImage.prototype.onStateChange = function(state, cb) {
68-
if (this.callbacks[state] === undefined) {
69-
this.callbacks[state] = [cb];
70-
} else {
71-
this.callbacks[state].push(cb);
67+
onStateChange(state, cb) {
68+
if (this.callbacks[state] === undefined) {
69+
this.callbacks[state] = [cb];
70+
} else {
71+
this.callbacks[state].push(cb);
72+
}
7273
}
73-
};
7474

75-
BinderImage.prototype.validateStateTransition = function(oldState, newState) {
76-
if (oldState === "start") {
77-
return (
78-
newState === "waiting" || newState === "built" || newState === "failed"
79-
);
80-
} else if (oldState === "waiting") {
81-
return newState === "building" || newState === "failed";
82-
} else if (oldState === "building") {
83-
return newState === "pushing" || newState === "failed";
84-
} else if (oldState === "pushing") {
85-
return newState === "built" || newState === "failed";
86-
} else {
87-
return false;
75+
validateStateTransition(oldState, newState) {
76+
if (oldState === "start") {
77+
return (
78+
newState === "waiting" || newState === "built" || newState === "failed"
79+
);
80+
} else if (oldState === "waiting") {
81+
return newState === "building" || newState === "failed";
82+
} else if (oldState === "building") {
83+
return newState === "pushing" || newState === "failed";
84+
} else if (oldState === "pushing") {
85+
return newState === "built" || newState === "failed";
86+
} else {
87+
return false;
88+
}
8889
}
89-
};
9090

91-
BinderImage.prototype.changeState = function(state, data) {
92-
const that = this;
93-
[state, "*"].map(function(key) {
94-
const callbacks = that.callbacks[key];
95-
if (callbacks) {
96-
for (let i = 0; i < callbacks.length; i++) {
97-
callbacks[i](that.state, state || that.state, data);
91+
changeState(state, data) {
92+
[state, "*"].map(key => {
93+
const callbacks = this.callbacks[key];
94+
if (callbacks) {
95+
for (let i = 0; i < callbacks.length; i++) {
96+
callbacks[i](this.state, state || this.state, data);
97+
}
9898
}
99-
}
100-
});
99+
});
101100

102-
if (state && this.validateStateTransition(this.state, state)) {
103-
this.state = state;
101+
if (state && this.validateStateTransition(this.state, state)) {
102+
this.state = state;
103+
}
104104
}
105-
};
105+
}

0 commit comments

Comments
 (0)