| 12 | </div>`; |
| 13 | |
| 14 | export class Slider extends InputItem { |
| 15 | static accept_input_types: string[] = ["slider"]; |
| 16 | |
| 17 | files: Blob[] = []; // Files to be uploaded |
| 18 | valid = true; |
| 19 | |
| 20 | constructor(spec: any, task_id: string, on_input_event: (event_name: string, input_item: InputItem) => void) { |
| 21 | super(spec, task_id, on_input_event); |
| 22 | } |
| 23 | |
| 24 | create_element(): JQuery { |
| 25 | let spec = deep_copy(this.spec); |
| 26 | spec['id_name'] = spec.name + '-' + Math.floor(Math.random() * Math.floor(9999)); |
| 27 | |
| 28 | const html = Mustache.render(slider_input_tpl, spec); |
| 29 | this.element = $(html); |
| 30 | let input_elem = this.element.find('input[type="range"]'); |
| 31 | |
| 32 | const ignore_keys = make_set(['value', 'step', 'type', 'label', 'invalid_feedback', 'valid_feedback', |
| 33 | 'help_text', 'min_value', 'max_value', 'id_name', 'name', 'float', 'onchange', 'onblur']); |
| 34 | for (let key in this.spec) { |
| 35 | if (key in ignore_keys) continue; |
| 36 | input_elem.attr(key, this.spec[key]); |
| 37 | } |
| 38 | |
| 39 | let range_value = this.element.find('.form-control-range-value'); |
| 40 | range_value.text( |
| 41 | this.spec['float'] ? this.get_value().toFixed(2) : this.get_value() |
| 42 | ); |
| 43 | input_elem.on("input", (e) => { |
| 44 | range_value.text( |
| 45 | this.spec['float'] ? this.get_value().toFixed(2) : this.get_value() |
| 46 | ); |
| 47 | }); |
| 48 | |
| 49 | |
| 50 | if (spec.onblur) { |
| 51 | // blur事件时，发送当前值到服务器 |
| 52 | input_elem.on("blur", (e) => { |
| 53 | this.on_input_event("blur", this); |
| 54 | }); |
| 55 | } |
| 56 | if (spec.onchange) { |
| 57 | input_elem.on("change", (e) => { |
| 58 | this.on_input_event("change", this); |
| 59 | }); |
| 60 | } |
| 61 | |
| 62 | return this.element; |
| 63 | } |
| 64 | |
| 65 | update_input(spec: any): any { |
| 66 | let attributes = spec.attributes; |
| 67 | if ('value' in attributes) { |
| 68 | let range_value = this.element.find('.form-control-range-value'); |
| 69 | range_value.text( |
| 70 | this.spec['float'] ? this.get_value().toFixed(2) : attributes.value |
| 71 | ); |