Update framework

framework/ui/menu/items/base-item.d.ts

@@ -0,0 +1,13 @@
+import * as EventEmitter from 'eventemitter3';
+export declare class BaseItem extends EventEmitter {
+    protected id: string;
+    protected title: string;
+    protected container: HTMLElement;
+    constructor(id: string, title: string);
+    getDOMNode(): HTMLElement;
+    getContents(): void;
+    protected onFocus(event: Event): void;
+    focus(): void;
+    click(): void;
+    getID(): string;
+}

framework/ui/menu/items/base-item.js

@@ -0,0 +1,29 @@
+import * as EventEmitter from 'eventemitter3';
+export class BaseItem extends EventEmitter {
+    constructor(id, title) {
+        super();
+        this.id = id;
+        this.title = title;
+    }
+    getDOMNode() {
+        let node = document.createTextNode(this.title);
+        let element = document.createElement('div');
+        element.appendChild(node);
+        return element;
+    }
+    getContents() {
+        return;
+    }
+    onFocus(event) {
+        this.emit('focus', this.id);
+    }
+    focus() {
+        this.container && this.container.focus();
+    }
+    click() {
+        return;
+    }
+    getID() {
+        return this.id;
+    }
+}

framework/ui/menu/items/checkbox-item.d.ts

@@ -0,0 +1,10 @@
+import { BaseItem } from './base-item';
+export declare class CheckboxItem extends BaseItem {
+    private checkboxElement;
+    private label;
+    constructor(id: string, title: string);
+    getDOMNode(): HTMLElement;
+    getContents(): boolean;
+    private onChange;
+    focus(): void;
+}

framework/ui/menu/items/checkbox-item.js

@@ -0,0 +1,32 @@
+import { BaseItem } from './base-item';
+export class CheckboxItem extends BaseItem {
+    constructor(id, title) {
+        super(id, title);
+    }
+    getDOMNode() {
+        this.container = document.createElement('div');
+        this.label = document.createElement('label');
+        this.label.setAttribute('for', `chkbx_${this.id}`);
+        this.label.textContent = this.title;
+        this.checkboxElement = document.createElement('input');
+        this.checkboxElement.setAttribute('type', 'checkbox');
+        this.checkboxElement.setAttribute('id', `chkbx_${this.id}`);
+        this.checkboxElement.addEventListener('focus', this.onFocus.bind(this));
+        this.checkboxElement.addEventListener('change', this.onChange.bind(this));
+        this.container.appendChild(this.label);
+        this.container.appendChild(this.checkboxElement);
+        return this.container;
+    }
+    getContents() {
+        return this.checkboxElement.checked;
+    }
+    onChange(event) {
+        this.emit('update', {
+            type: 'checkbox',
+            value: this.checkboxElement.checked
+        });
+    }
+    focus() {
+        this.checkboxElement.focus();
+    }
+}

framework/ui/menu/items/edit-item.d.ts

@@ -0,0 +1,13 @@
+import { BaseItem } from './base-item';
+export declare class EditItem extends BaseItem {
+    private initialText;
+    private isPassword;
+    private contents;
+    private label;
+    private editField;
+    constructor(id: string, title: string, initialText: string, isPassword?: boolean);
+    getDOMNode(): HTMLElement;
+    getContents(): string;
+    private onChange;
+    focus(): void;
+}

framework/ui/menu/items/edit-item.js

@@ -0,0 +1,42 @@
+import { BaseItem } from './base-item';
+export class EditItem extends BaseItem {
+    constructor(id, title, initialText, isPassword = false) {
+        super(id, title);
+        this.initialText = initialText;
+        this.isPassword = isPassword;
+        this.contents = initialText;
+    }
+    getDOMNode() {
+        const node = document.createElement('div');
+        const label = document.createElement('label');
+        label.setAttribute('for', `edit_${this.id}`);
+        label.textContent = this.title;
+        const editField = document.createElement('input');
+        editField.id = `edit_${this.id}`;
+        editField.value = this.contents;
+        editField.addEventListener('keydown', this.onChange.bind(this));
+        editField.addEventListener('focus', this.onFocus.bind(this));
+        if (this.isPassword) {
+            editField.type = 'password';
+        }
+        node.appendChild(label);
+        node.appendChild(editField);
+        node.addEventListener('focus', this.onFocus.bind(this));
+        this.editField = editField;
+        this.label = label;
+        this.container = node;
+        return node;
+    }
+    getContents() {
+        return this.editField.value;
+    }
+    onChange(event) {
+        this.emit('update', {
+            type: 'edit',
+            value: this.editField.value
+        });
+    }
+    focus() {
+        this.editField && this.editField.focus();
+    }
+}

framework/ui/menu/items/index.d.ts

@@ -0,0 +1,6 @@
+export { BaseItem } from './base-item';
+export { EditItem } from './edit-item';
+export { MenuItem } from './menu-item';
+export { SelectorItem } from './selector-item';
+export { SliderItem } from './slider-item';
+export { CheckboxItem } from './checkbox-item';

framework/ui/menu/items/index.js

@@ -0,0 +1,6 @@
+export { BaseItem } from './base-item';
+export { EditItem } from './edit-item';
+export { MenuItem } from './menu-item';
+export { SelectorItem } from './selector-item';
+export { SliderItem } from './slider-item';
+export { CheckboxItem } from './checkbox-item';

framework/ui/menu/items/menu-item.d.ts

@@ -0,0 +1,10 @@
+import { BaseItem } from './base-item';
+export declare class MenuItem extends BaseItem {
+    private button;
+    constructor(id: string, title: string);
+    getDOMNode(): HTMLElement;
+    getContents(): string;
+    private handleClick;
+    focus(): void;
+    click(): void;
+}

framework/ui/menu/items/menu-item.js

@@ -0,0 +1,29 @@
+import { BaseItem } from './base-item';
+export class MenuItem extends BaseItem {
+    constructor(id, title) {
+        super(id, title);
+    }
+    getDOMNode() {
+        const container = document.createElement('div');
+        const button = document.createElement('button');
+        button.textContent = this.title;
+        button.addEventListener('click', this.handleClick.bind(this));
+        button.addEventListener('focus', this.onFocus.bind(this));
+        container.appendChild(button);
+        this.container = container;
+        this.button = button;
+        return container;
+    }
+    getContents() {
+        return this.id;
+    }
+    handleClick(event) {
+        this.emit('choose', this.id);
+    }
+    focus() {
+        this.button && this.button.focus();
+    }
+    click() {
+        this.button.click();
+    }
+}

framework/ui/menu/items/selector-item.d.ts

@@ -0,0 +1,21 @@
+import { BaseItem } from './base-item';
+export declare class SelectorItem extends BaseItem {
+    private items;
+    private listContainer;
+    private fieldSet;
+    private label;
+    private entries;
+    private currentValue;
+    constructor(id: string, title: string, items: SelectorEntry[]);
+    getDOMNode(): HTMLElement;
+    private buildEntries;
+    private onItemFocus;
+    getContents(): any;
+    private onSelectItem;
+    private onChangeItem;
+    focus(): void;
+}
+export interface SelectorEntry {
+    id: string;
+    title: string;
+}

framework/ui/menu/items/selector-item.js

@@ -0,0 +1,62 @@
+import { BaseItem } from './base-item';
+export class SelectorItem extends BaseItem {
+    constructor(id, title, items) {
+        super(id, title);
+        this.items = items;
+        this.entries = [];
+    }
+    getDOMNode() {
+        this.container = document.createElement('div');
+        this.listContainer = document.createElement('ul');
+        this.label = document.createElement('legend');
+        this.fieldSet = document.createElement('fieldset');
+        this.fieldSet.setAttribute('class', 'radiogroup');
+        this.fieldSet.id = `fs_selector_${this.id}`;
+        const name = document.createTextNode(this.title);
+        this.label.appendChild(name);
+        this.fieldSet.appendChild(this.label);
+        this.buildEntries();
+        this.container.appendChild(this.fieldSet);
+        this.container.addEventListener('focus', this.onFocus.bind(this));
+        return this.container;
+    }
+    buildEntries() {
+        this.items.forEach((item, index) => {
+            const node = document.createElement('input');
+            node.type = 'radio';
+            node.id = `${this.id}_${item.id}`;
+            node.name = this.id;
+            node.value = item.id || `${index}`;
+            node.addEventListener('focus', this.onItemFocus.bind(this));
+            node.addEventListener('select', this.onSelectItem.bind(this));
+            node.addEventListener('change', this.onChangeItem.bind(this));
+            this.entries.push(node);
+            const label = document.createElement('label');
+            label.setAttribute('for', `${this.id}_${item.id}`);
+            label.textContent = item.title;
+            this.fieldSet.append(node);
+            this.fieldSet.append(label);
+        });
+    }
+    onItemFocus(event) {
+        console.log(`Item focused: `, event);
+        this.emit('focus', this.id);
+    }
+    getContents() {
+        return this.currentValue;
+    }
+    onSelectItem(event) { }
+    onChangeItem(event) {
+        const node = document.querySelector(`input[name = "${this.id}"]:checked`);
+        this.currentValue = this.items.find((item) => `${this.id}_${item.id}` === node.id);
+        this.emit('update', {
+            type: 'selector',
+            value: this.currentValue
+        });
+    }
+    focus() {
+        const node = document.querySelector(`input[name = "${this.id}"]:checked`) ||
+            this.entries[0];
+        node.focus();
+    }
+}

framework/ui/menu/items/slider-item.d.ts

@@ -0,0 +1,15 @@
+import { BaseItem } from './base-item';
+export declare class SliderItem extends BaseItem {
+    private min;
+    private max;
+    private step;
+    private defaultValue;
+    private slider;
+    private label;
+    private currentValue;
+    constructor(id: string, title: string, min: number, max: number, step: number, defaultValue?: number);
+    getDOMNode(): HTMLElement;
+    getContents(): string;
+    private onChange;
+    focus(): void;
+}

framework/ui/menu/items/slider-item.js

@@ -0,0 +1,42 @@
+import { BaseItem } from './base-item';
+export class SliderItem extends BaseItem {
+    constructor(id, title, min, max, step, defaultValue = null) {
+        super(id, title);
+        this.min = min;
+        this.max = max;
+        this.step = step;
+        this.defaultValue = defaultValue;
+    }
+    getDOMNode() {
+        this.container = document.createElement('div');
+        this.label = document.createElement('label');
+        this.label.textContent = this.title;
+        this.label.setAttribute('for', `slider_${this.id}`);
+        this.slider = document.createElement('input');
+        this.slider.id = `slider_${this.id}`;
+        this.slider.type = 'range';
+        this.slider.setAttribute('min', this.min.toString());
+        this.slider.setAttribute('max', this.max.toString());
+        this.slider.setAttribute('step', this.step.toString());
+        if (this.defaultValue)
+            this.slider.value = this.defaultValue.toString();
+        this.slider.addEventListener('change', this.onChange.bind(this));
+        this.slider.addEventListener('focus', this.onFocus.bind(this));
+        this.container.appendChild(this.label);
+        this.container.appendChild(this.slider);
+        this.container.addEventListener('focus', this.onFocus.bind(this));
+        return this.container;
+    }
+    getContents() {
+        return this.slider.value;
+    }
+    onChange(event) {
+        this.emit('update', {
+            type: 'slider',
+            value: this.slider.value
+        });
+    }
+    focus() {
+        this.slider && this.slider.focus();
+    }
+}