jupyterlab · vidartf · Feb 2, 2022 · Feb 4, 2022 · Feb 4, 2022 · Feb 4, 2022
diff --git a/examples/example-keyboard-capture/index.html b/examples/example-keyboard-capture/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <script type="text/javascript" src="build/bundle.example.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/example-keyboard-capture/package.json b/examples/example-keyboard-capture/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@lumino/example-keyboard-capture",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "tsc && webpack",
+    "clean": "rimraf build",
+    "start": "node build/server.js"
+  },
+  "dependencies": {
+    "@lumino/keyboard-capture": "^1.0.0",
+    "@lumino/signaling": "^1.10.1",
+    "@lumino/widgets": "^1.31.1",
+    "es6-promise": "^4.0.5"
+  },
+  "devDependencies": {
+    "@lumino/messaging": "^1.10.1",
+    "@types/node": "^10.12.19",
+    "css-loader": "^3.4.0",
+    "file-loader": "^5.0.2",
+    "rimraf": "^3.0.2",
+    "style-loader": "^1.0.2",
+    "typescript": "~3.6.0",
+    "webpack": "^4.41.3"
+  }
+}
diff --git a/examples/example-keyboard-capture/src/index.ts b/examples/example-keyboard-capture/src/index.ts
@@ -0,0 +1,133 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2019, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|----------------------------------------------------------------------------*/
+
+import { CaptureWidget } from '@lumino/keyboard-capture';
+import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
+import { Panel, Widget } from '@lumino/widgets';
+
+import '../style/index.css';
+
+export class OutputWidget extends Widget {
+  /**
+   *
+   */
+  constructor(options?: Widget.IOptions) {
+    super(options);
+    this._output = document.createElement('div');
+    this._exportButton = document.createElement('button');
+    this._exportButton.innerText = 'Show';
+    this._copyButton = document.createElement('button');
+    this._copyButton.innerText = 'Copy';
+    this._clearButton = document.createElement('button');
+    this._clearButton.innerText = 'Clear';
+    this.node.appendChild(this._exportButton);
+    this.node.appendChild(this._copyButton);
+    this.node.appendChild(this._clearButton);
+    this.node.appendChild(this._output);
+    this.addClass('lm-keyboardCaptureOutputArea');
+  }
+
+  set value(content: string) {
+    this._output.innerHTML = content;
+  }
+
+  get action(): ISignal<this, 'display' | 'clipboard' | 'clear'> {
+    return this._action;
+  }
+
+  /**
+   * Handle the DOM events for the widget.
+   *
+   * @param event - The DOM event sent to the element.
+   */
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'click':
+        if (event.target === this._exportButton) {
+          event.stopPropagation();
+          this._action.emit('display');
+        } else if (event.target === this._copyButton) {
+          event.stopPropagation();
+          this._action.emit('clipboard');
+        } else if (event.target === this._clearButton) {
+          event.stopPropagation();
+          this._action.emit('clear');
+        }
+        break;
+    }
+  }
+
+  /**
+   * A message handler invoked on a `'before-attach'` message.
+   */
+  protected onBeforeAttach(msg: Message): void {
+    this._exportButton.addEventListener('click', this);
+    this._copyButton.addEventListener('click', this);
+    this._clearButton.addEventListener('click', this);
+    super.onBeforeAttach(msg);
+  }
+
+  /**
+   * A message handler invoked on an `'after-detach'` message.
+   */
+  protected onAfterDetach(msg: Message): void {
+    super.onAfterDetach(msg);
+    this._exportButton.removeEventListener('click', this);
+    this._copyButton.removeEventListener('click', this);
+    this._clearButton.removeEventListener('click', this);
+  }
+
+  private _output: HTMLElement;
+  private _exportButton: HTMLButtonElement;
+  private _copyButton: HTMLButtonElement;
+  private _clearButton: HTMLButtonElement;
+  private _action = new Signal<this, 'display' | 'clipboard' | 'clear'>(this);
+}
+
+/**
+ * Initialize the applicaiton.
+ */
+async function init(): Promise<void> {
+  // Add the text editors to a dock panel.
+  let capture = new CaptureWidget();
+  let output = new OutputWidget();
+
+  capture.node.textContent =
+    'Focus me and hit each key on your keyboard without any modifiers';
+
+  // Add the dock panel to the document.
+  let box = new Panel();
+  box.id = 'main';
+  box.addWidget(capture);
+  box.addWidget(output);
+
+  capture.dataAdded.connect((sender, entry) => {
+    output.value = `Added ${entry.type}: ${
+      entry.code ? `${entry.code} →` : ''
+    } <kbd>${entry.key}</kbd>`;
+  });
+  output.action.connect((sender, action) => {
+    if (action === 'clipboard') {
+      navigator.clipboard.writeText(capture.formatMap());
+    } else if (action === 'clear') {
+      capture.clear();
+    } else {
+      output.value = `<pre>${capture.formatMap()}</pre>`;
+    }
+  });
+
+  window.onresize = () => {
+    box.update();
+  };
+  Widget.attach(box, document.body);
+}
+
+window.onload = init;
diff --git a/examples/example-keyboard-capture/src/server.ts b/examples/example-keyboard-capture/src/server.ts
@@ -0,0 +1,55 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2019, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|----------------------------------------------------------------------------*/
+
+import * as fs from 'fs';
+
+import * as http from 'http';
+
+import * as path from 'path';
+
+/**
+ * Create a HTTP static file server for serving the static
+ * assets to the user.
+ */
+let server = http.createServer((request, response) => {
+  console.log('request starting...');
+
+  let filePath = '.' + request.url;
+  if (filePath == './') {
+    filePath = './index.html';
+  }
+
+  let extname = path.extname(filePath);
+  let contentType = 'text/html';
+  switch (extname) {
+    case '.js':
+      contentType = 'text/javascript';
+      break;
+    case '.css':
+      contentType = 'text/css';
+      break;
+  }
+
+  fs.readFile(filePath, (error, content) => {
+    if (error) {
+      console.error(`Could not find file: ${filePath}`);
+      response.writeHead(404, { 'Content-Type': contentType });
+      response.end();
+    } else {
+      response.writeHead(200, { 'Content-Type': contentType });
+      response.end(content, 'utf-8');
+    }
+  });
+});
+
+// Start the server
+server.listen(8000, () => {
+  console.info(new Date() + ' Page server is listening on port 8000');
+});
diff --git a/examples/example-keyboard-capture/style/index.css b/examples/example-keyboard-capture/style/index.css
@@ -0,0 +1,53 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Copyright (c) 2014-2017, PhosphorJS Contributors
+|
+| Distributed under the terms of the BSD 3-Clause License.
+|
+| The full license is in the file LICENSE, distributed with this software.
+|----------------------------------------------------------------------------*/
+@import '~@lumino/widgets/style/index.css';
+
+body {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+}
+
+#main {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 10px;
+}
+
+.lm-keyboardCaptureArea {
+  border-radius: 5px;
+  border: 3px dashed #88a;
+  padding: 6px;
+  margin: 6px;
+}
+
+.lm-keyboardCaptureOutputArea kbd {
+  background-color: #eee;
+  border-radius: 5px;
+  border: 3px solid #b4b4b4;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: #333;
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+.lm-keyboardCaptureOutputArea button {
+  margin: 4px;
+}
diff --git a/examples/example-keyboard-capture/tsconfig.json b/examples/example-keyboard-capture/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "inlineSourceMap": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "ES5",
+    "outDir": "./build",
+    "lib": [
+      "ES5",
+      "es2015.collection",
+      "DOM",
+      "ES2015.Promise",
+      "ES2015.Iterable"
+    ]
+  },
+  "include": ["src/*"]
+}
diff --git a/examples/example-keyboard-capture/webpack.config.js b/examples/example-keyboard-capture/webpack.config.js
@@ -0,0 +1,18 @@
+var path = require('path');
+
+module.exports = {
+  entry: './build/index.js',
+  mode: 'development',
+  output: {
+    path: __dirname + '/build/',
+    filename: 'bundle.example.js',
+    publicPath: './build/'
+  },
+  module: {
+    rules: [
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.png$/, use: 'file-loader' }
+    ]
+  },
+  plugins: []
+};