/
progress.ts
108 lines (92 loc) · 3.35 KB
/
progress.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import * as p from "@bokehjs/core/properties"
import {HTMLBox, HTMLBoxView} from "@bokehjs/models/layouts/html_box"
import {CachedVariadicBox, set_size} from "./layout"
export class ProgressView extends HTMLBoxView {
model: Progress
_prev_sizing_mode: string | null
protected progressEl: HTMLProgressElement
connect_signals(): void {
super.connect_signals()
const resize = () => {
this.render()
this.root.compute_layout() // XXX: invalidate_layout?
}
this.connect(this.model.properties.height.change, resize)
this.connect(this.model.properties.width.change, resize)
this.connect(this.model.properties.height_policy.change, resize)
this.connect(this.model.properties.width_policy.change, resize)
this.connect(this.model.properties.sizing_mode.change, resize)
this.connect(this.model.properties.active.change, () => this.setCSS())
this.connect(this.model.properties.bar_color.change, () => this.setCSS())
this.connect(this.model.properties.css_classes.change, () => this.setCSS())
this.connect(this.model.properties.value.change, () => this.setValue())
this.connect(this.model.properties.max.change, () => this.setMax())
}
render(): void {
super.render()
const style: any = {...this.model.style, display: "inline-block"}
this.progressEl = document.createElement('progress')
this.setValue()
this.setMax()
set_size(this.progressEl, this.model)
// Set styling
this.setCSS()
for (const prop in style)
this.progressEl.style.setProperty(prop, style[prop]);
this.el.appendChild(this.progressEl)
}
setCSS(): void {
let css = this.model.css_classes.join(" ") + " " + this.model.bar_color;
if (this.model.active)
css = css + " active";
this.progressEl.className = css;
}
setValue(): void {
if (this.model.value == null)
this.progressEl.value = 0
else if (this.model.value >= 0)
this.progressEl.value = this.model.value
else if (this.model.value < 0)
this.progressEl.removeAttribute("value")
console.log(this.progressEl)
}
setMax(): void {
if (this.model.max != null)
this.progressEl.max = this.model.max
}
_update_layout(): void {
let changed = ((this._prev_sizing_mode !== undefined) &&
(this._prev_sizing_mode !== this.model.sizing_mode))
this._prev_sizing_mode = this.model.sizing_mode;
this.layout = new CachedVariadicBox(this.el, this.model.sizing_mode, changed)
this.layout.set_sizing(this.box_sizing())
}
}
export namespace Progress {
export type Attrs = p.AttrsOf<Props>
export type Props = HTMLBox.Props & {
active: p.Property<boolean>
bar_color: p.Property<string>
style: p.Property<{[key: string]: string}>
max: p.Property<number | null>
value: p.Property<number | null>
}
}
export interface Progress extends Progress.Attrs {}
export class Progress extends HTMLBox {
properties: Progress.Props
constructor(attrs?: Partial<Progress.Attrs>) {
super(attrs)
}
static __module__ = "panel.models.widgets"
static init_Progress(): void {
this.prototype.default_view = ProgressView
this.define<Progress.Props>(({Any, Boolean, Number, String}) => ({
active: [ Boolean, true ],
bar_color: [ String, 'primary' ],
style: [ Any, {} ],
max: [ Number, 100 ],
value: [ Any, null ],
}))
}
}