Commit db689741 authored by Mark Ghiorso's avatar Mark Ghiorso

Refactor, refresh comix

parent 2b26ce7e
import {
JupyterLabPlugin
JupyterLab, JupyterLabPlugin
} from '@jupyterlab/application';
import {
......@@ -10,6 +10,10 @@ import {
Widget
} from '@phosphor/widgets';
import {
Message
} from '@phosphor/messaging';
import {
ServerConnection
} from '@jupyterlab/services';
......@@ -17,61 +21,93 @@ import {
import '../style/index.css';
/**
* Initialization data for the jupyterlab_gitlab extension.
* An xckd comic viewer.
*/
const extension: JupyterLabPlugin<void> = {
id: 'jupyterlab_gitlab',
autoStart: true,
requires: [ICommandPalette],
activate: (app, palette: ICommandPalette) => {
console.log('JupyterLab extension jupyterlab_gitlab is activated!');
// Create a single widget
let widget: Widget = new Widget();
widget.id = 'xkcd-jupyterlab';
widget.title.label = 'xkcd.com';
widget.title.closable = true;
widget.addClass('jp-xkcdWidget'); // new line
// Add an image element to the panel
let img = document.createElement('img');
img.className = 'jp-xkcdCartoon'; // new line
widget.node.appendChild(img);
// New: add an attribution badge
img.insertAdjacentHTML('afterend',
class XkcdWidget extends Widget {
/**
* Construct a new xkcd widget.
*/
constructor() {
super();
this.settings = ServerConnection.makeSettings();
this.id = 'xkcd-jupyterlab';
this.title.label = 'xkcd.com';
this.title.closable = true;
this.addClass('jp-xkcdWidget');
this.img = document.createElement('img');
this.img.className = 'jp-xkcdCartoon';
this.node.appendChild(this.img);
this.img.insertAdjacentHTML('afterend',
`<div class="jp-xkcdAttribution">
<a href="https://creativecommons.org/licenses/by-nc/2.5/" class="jp-xkcdAttribution" target="_blank">
<img src="https://licensebuttons.net/l/by-nc/2.5/80x15.png" />
</a>
</div>`
);
}
/**
* The server settings associated with the widget.
*/
readonly settings: ServerConnection.ISettings;
// Fetch info about a random comic
let settings = ServerConnection.makeSettings();
ServerConnection.makeRequest({url: 'https:////egszlpbmle.execute-api.us-east-1.amazonaws.com/prod'}, settings).then(response => {
img.src = response.data.img;
img.alt = response.data.title;
img.title = response.data.alt;
/**
* The image element associated with the widget.
*/
readonly img: HTMLImageElement;
/**
* Handle update requests for the widget.
*/
onUpdateRequest(msg: Message): void {
ServerConnection.makeRequest({url: 'https://egszlpbmle.execute-api.us-east-1.amazonaws.com/prod'}, this.settings).then(response => {
this.img.src = response.data.img;
this.img.alt = response.data.title;
this.img.title = response.data.alt;
});
}
};
// Add an application command
const command: string = 'xkcd:open';
app.commands.addCommand(command, {
label: 'Random xkcd comic',
execute: () => {
if (!widget.isAttached) {
// Attach the widget to the main area if it's not there
app.shell.addToMainArea(widget);
}
// Activate the widget
app.shell.activateById(widget.id);
/**
* Activate the xckd widget extension.
*/
function activate(app: JupyterLab, palette: ICommandPalette) {
console.log('JupyterLab extension jupyterlab_xkcd is activated!');
// Create a single widget
let widget: XkcdWidget = new XkcdWidget();
// Add an application command
const command: string = 'xkcd:open';
app.commands.addCommand(command, {
label: 'Random xkcd comic',
execute: () => {
if (!widget.isAttached) {
// Attach the widget to the main area if it's not there
app.shell.addToMainArea(widget);
}
});
// Refresh the comic in the widget
widget.update();
// Activate the widget
app.shell.activateById(widget.id);
}
});
// Add the command to the palette.
palette.addItem({command, category: 'Tutorial'});
}
// Add the command to the palette.
palette.addItem({ command, category: 'Tutorial' });
};
/**
* Initialization data for the jupyterlab_gitlab extension.
*/
const extension: JupyterLabPlugin<void> = {
id: 'jupyterlab_gitlab',
autoStart: true,
requires: [ICommandPalette],
activate: activate
};
export default extension;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment