/
progress.ts
100 lines (85 loc) · 2.99 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
import {StyleSheetLike, ImportedStyleSheet} from "@bokehjs/core/dom"
import * as p from "@bokehjs/core/properties"
import {HTMLBox, HTMLBoxView} from "./layout"
export class ProgressView extends HTMLBoxView {
model: Progress
protected progressEl: HTMLProgressElement
connect_signals(): void {
super.connect_signals()
const render = () => this.render()
this.connect(this.model.properties.height.change, render)
this.connect(this.model.properties.width.change, render)
this.connect(this.model.properties.height_policy.change, render)
this.connect(this.model.properties.width_policy.change, render)
this.connect(this.model.properties.sizing_mode.change, render)
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.styles, display: "inline-block"}
this.progressEl = document.createElement('progress')
this.setValue()
this.setMax()
// Set styling
this.setCSS()
for (const prop in style)
this.progressEl.style.setProperty(prop, style[prop]);
this.shadow_el.appendChild(this.progressEl)
}
override stylesheets(): StyleSheetLike[] {
const styles = super.stylesheets()
for (const css of this.model.css)
styles.push(new ImportedStyleSheet(css))
return styles
}
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")
}
setMax(): void {
if (this.model.max != null)
this.progressEl.max = this.model.max
}
}
export namespace Progress {
export type Attrs = p.AttrsOf<Props>
export type Props = HTMLBox.Props & {
active: p.Property<boolean>
bar_color: p.Property<string>
css: p.Property<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 {
this.prototype.default_view = ProgressView
this.define<Progress.Props>(({Any, Array, Boolean, Number, String}) => ({
active: [ Boolean, true ],
bar_color: [ String, 'primary' ],
css: [ Array(String), [] ],
max: [ Number, 100 ],
value: [ Any, null ],
}))
}
}