|
| 1 | +/************************************************************* |
| 2 | + * |
| 3 | + * Copyright (c) 2015-2016 The MathJax Consortium |
| 4 | + * |
| 5 | + * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 | + * you may not use this file except in compliance with the License. |
| 7 | + * You may obtain a copy of the License at |
| 8 | + * |
| 9 | + * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | + * |
| 11 | + * Unless required by applicable law or agreed to in writing, software |
| 12 | + * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 | + * See the License for the specific language governing permissions and |
| 15 | + * limitations under the License. |
| 16 | + */ |
| 17 | + |
| 18 | + |
| 19 | +/** |
| 20 | + * @fileoverview Class of slider. |
| 21 | + * |
| 22 | + * @author volker.sorge@gmail.com (Volker Sorge) |
| 23 | + */ |
| 24 | + |
| 25 | + |
| 26 | +import {AbstractVariableItem} from './abstract_variable_item'; |
| 27 | +import {Menu} from './menu'; |
| 28 | +import {MenuUtil} from './menu_util'; |
| 29 | +import {Variable} from './variable'; |
| 30 | +import {HtmlClasses} from './html_classes'; |
| 31 | +import {KEY} from './key_navigatable'; |
| 32 | + |
| 33 | + |
| 34 | +export class Slider extends AbstractVariableItem<string> { |
| 35 | + |
| 36 | + /** |
| 37 | + * @override |
| 38 | + */ |
| 39 | + protected role = 'slider'; |
| 40 | + private labelSpan: HTMLElement; |
| 41 | + private valueSpan: HTMLElement; |
| 42 | + private labelId = 'ctx_slideLabel' + MenuUtil.counter(); |
| 43 | + private valueId = 'ctx_slideValue' + MenuUtil.counter(); |
| 44 | + |
| 45 | + private input: HTMLInputElement; |
| 46 | + |
| 47 | + private inputEvent: boolean = false; |
| 48 | + |
| 49 | + /** |
| 50 | + * @constructor |
| 51 | + * @extends {AbstractItem} |
| 52 | + * @param {Menu} menu The context menu or sub-menu the item belongs to. |
| 53 | + * @param {string} content The content of the menu item. |
| 54 | + * @param {string} variable The variable that is changed. |
| 55 | + * @param {string=} id Optionally the id of the menu item. |
| 56 | + */ |
| 57 | + constructor(menu: Menu, content: string, variable: string, id?: string) { |
| 58 | + super(menu, 'slider', content, id); |
| 59 | + this.variable = menu.pool.lookup(variable) as Variable<string>; |
| 60 | + this.register(); |
| 61 | + } |
| 62 | + |
| 63 | + /** |
| 64 | + * @override |
| 65 | + */ |
| 66 | + public executeAction() { |
| 67 | + this.variable.setValue( |
| 68 | + this.input.value, MenuUtil.getActiveElement(this)); |
| 69 | + this.update(); |
| 70 | + } |
| 71 | + |
| 72 | + /** |
| 73 | + * @override |
| 74 | + */ |
| 75 | + public space(event: KeyboardEvent) { |
| 76 | + super.space(event); |
| 77 | + MenuUtil.close(this); |
| 78 | + } |
| 79 | + |
| 80 | + /** |
| 81 | + * @override |
| 82 | + */ |
| 83 | + public focus() { |
| 84 | + super.focus(); |
| 85 | + this.input.focus(); |
| 86 | + } |
| 87 | + |
| 88 | + /** |
| 89 | + * @override |
| 90 | + */ |
| 91 | + public unfocus() { |
| 92 | + super.unfocus(); |
| 93 | + this.updateSpan(); |
| 94 | + } |
| 95 | + |
| 96 | + /** |
| 97 | + * @override |
| 98 | + */ |
| 99 | + public generateHtml() { |
| 100 | + super.generateHtml(); |
| 101 | + let html = this.html; |
| 102 | + html.classList.add(HtmlClasses['MENUSLIDER']); // ??? |
| 103 | + console.log(html.childNodes.length); |
| 104 | + this.valueSpan = document.createElement('span'); |
| 105 | + this.valueSpan.setAttribute('id', this.valueId); |
| 106 | + // this.span.appendChild(this.valueSpan); |
| 107 | + this.valueSpan.classList.add(HtmlClasses['SLIDERVALUE']); |
| 108 | + this.html.appendChild(this.valueSpan); |
| 109 | + } |
| 110 | + |
| 111 | + /** |
| 112 | + * @override |
| 113 | + */ |
| 114 | + public generateSpan() { |
| 115 | + this.span = document.createElement('span'); |
| 116 | + this.labelSpan = document.createElement('span'); |
| 117 | + this.labelSpan.setAttribute('id', this.labelId); |
| 118 | + this.labelSpan.appendChild(this.html.childNodes[0]); |
| 119 | + this.html.appendChild(this.labelSpan); |
| 120 | + // this.span.classList.add(HtmlClasses['MENUINPUTBOX']); // ??? |
| 121 | + this.input = document.createElement('input'); |
| 122 | + this.input.addEventListener('keydown', this.inputKey.bind(this)); |
| 123 | + this.input.addEventListener('mousedown', this.inputKey.bind(this)); |
| 124 | + this.input.setAttribute('type', 'range'); |
| 125 | + this.input.setAttribute('min', '0'); |
| 126 | + this.input.setAttribute('max', '100'); |
| 127 | + this.input.setAttribute('aria-valuemin', '0'); |
| 128 | + this.input.setAttribute('aria-valuemax', '100'); |
| 129 | + this.input.setAttribute('aria-labelledby', this.labelId); |
| 130 | + // this.input.setAttribute('value', '50'); |
| 131 | + this.input.oninput = this.executeAction.bind(this); |
| 132 | + this.input.classList.add(HtmlClasses['SLIDERBAR']); |
| 133 | + // this.input.setAttribute('style', 'width:50%;margin-top:.5em;appearance:slider-horizontal;'); |
| 134 | + // this.input.setAttribute('', ''); |
| 135 | + // this.input.setAttribute('size', '10em'); |
| 136 | + // this.input.setAttribute('type', 'text'); |
| 137 | + // this.input.setAttribute('tabindex', '-1'); |
| 138 | + this.span.appendChild(this.input); |
| 139 | + } |
| 140 | + |
| 141 | + |
| 142 | + /** |
| 143 | + * Executes the key event of the sliderbox. |
| 144 | + * @param {KeyboardEvent} event The input event. |
| 145 | + */ |
| 146 | + public inputKey(_event: InputEvent) { |
| 147 | + this.inputEvent = true; |
| 148 | + } |
| 149 | + |
| 150 | + |
| 151 | + /** |
| 152 | + * @override |
| 153 | + */ |
| 154 | + public mousedown(event: MouseEvent) { |
| 155 | + event.stopPropagation(); |
| 156 | + } |
| 157 | + |
| 158 | + |
| 159 | + /** |
| 160 | + * Specification of the keydown event. |
| 161 | + * @param {KeyboardEvent} event The input event. |
| 162 | + */ |
| 163 | + public keydown(event: KeyboardEvent) { |
| 164 | + if (this.inputEvent && |
| 165 | + event.keyCode !== KEY.ESCAPE && |
| 166 | + event.keyCode !== KEY.RETURN) { |
| 167 | + this.inputEvent = false; |
| 168 | + event.stopPropagation(); |
| 169 | + return; |
| 170 | + } |
| 171 | + super.keydown(event); |
| 172 | + event.stopPropagation(); |
| 173 | + } |
| 174 | + |
| 175 | + /** |
| 176 | + * Toggles the aria checked attribute. |
| 177 | + */ |
| 178 | + protected updateAria() { |
| 179 | + let value = this.variable.getValue(); |
| 180 | + this.input.setAttribute('aria-valuenow', value); |
| 181 | + this.input.setAttribute('aria-valuetext', value + '%'); |
| 182 | + } |
| 183 | + |
| 184 | + /** |
| 185 | + * Toggles the checked tick. |
| 186 | + */ |
| 187 | + protected updateSpan() { |
| 188 | + let initValue; |
| 189 | + try { |
| 190 | + initValue = this.variable.getValue(MenuUtil.getActiveElement(this)); |
| 191 | + this.valueSpan.innerHTML = initValue + '%'; |
| 192 | + } catch (e) { |
| 193 | + initValue = ''; |
| 194 | + } |
| 195 | + this.input.value = initValue; |
| 196 | + } |
| 197 | + |
| 198 | +} |
0 commit comments