-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds determinate and indeterminate variants.
- Loading branch information
Showing
14 changed files
with
446 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
.bk-bar { | ||
position: relative; | ||
background-color: #c2d5f7; | ||
border: 1px solid #cccccc; | ||
border-radius: 4px; | ||
overflow: hidden; | ||
} | ||
|
||
.bk-value { | ||
position: relative; | ||
background-color: #3b80f0; | ||
} | ||
|
||
:host(:not(.bk-vertical)) { | ||
.bk-bar { | ||
width: 100%; | ||
height: max-content; | ||
min-width: 3em; | ||
} | ||
|
||
.bk-value { | ||
left: 0; | ||
right: unset; | ||
width: var(--progress); | ||
min-height: 0.5em; | ||
} | ||
} | ||
|
||
:host(.bk-vertical) { | ||
.bk-bar { | ||
width: max-content; | ||
height: 100%; | ||
min-height: 3em; | ||
} | ||
|
||
.bk-value { | ||
top: 0; | ||
bottom: unset; | ||
height: var(--progress); | ||
min-width: 0.5em; | ||
} | ||
} | ||
|
||
:host(:not(.bk-vertical).bk-reversed) { | ||
.bk-value { | ||
left: unset; | ||
right: 0; | ||
} | ||
} | ||
|
||
:host(.bk-vertical.bk-reversed) { | ||
.bk-value { | ||
top: unset; | ||
bottom: 0; | ||
} | ||
} | ||
|
||
:host(.bk-indeterminate) { | ||
--indeterminate-width: 20%; | ||
|
||
.bk-label { | ||
visibility: hidden; | ||
} | ||
|
||
.bk-value { | ||
width: var(--indeterminate-width); | ||
animation-duration: 1.5s; | ||
animation-direction: alternate; | ||
animation-iteration-count: infinite; | ||
animation-timing-function: linear; | ||
animation-name: bk-progress-animation; | ||
} | ||
} | ||
|
||
@keyframes bk-progress-animation { | ||
from { | ||
left: calc(-1 * var(--indeterminate-width)); | ||
} | ||
to { | ||
left: 100%; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,147 @@ | ||
import {Widget, WidgetView} from "./widget" | ||
import {HTML} from "../dom/html" | ||
import type {StyleSheetLike} from "core/dom" | ||
import {div} from "core/dom" | ||
import type * as p from "core/properties" | ||
import {Align, Location, Orientation} from "core/enums" | ||
import {Enum, Or} from "../../core/kinds" | ||
import {isString} from "core/util/types" | ||
import {clamp} from "core/util/math" | ||
import {process_placeholders} from "core/util/templating" | ||
import * as progress_css from "styles/widgets/progress.css" | ||
|
||
const LabelLocation = Or(Enum("none", "inline"), Location) | ||
type LabelLocation = typeof LabelLocation["__type__"] | ||
|
||
export class ProgressView extends WidgetView { | ||
declare model: Progress | ||
|
||
protected label_el: HTMLElement | ||
protected value_el: HTMLElement | ||
protected bar_el: HTMLElement | ||
|
||
override connect_signals(): void { | ||
super.connect_signals() | ||
const {value, min, max, reversed, orientation} = this.model.properties | ||
this.on_change([value, min, max], () => this._update_value()) | ||
this.on_change(reversed, () => this._update_reversed()) | ||
this.on_change(orientation, () => this._update_orientation()) | ||
} | ||
|
||
override stylesheets(): StyleSheetLike[] { | ||
return [...super.stylesheets(), progress_css.default] | ||
} | ||
|
||
override render(): void { | ||
super.render() | ||
|
||
this.label_el = div({class: progress_css.label}) | ||
this.value_el = div({class: progress_css.value}) | ||
this.bar_el = div({class: progress_css.bar}, this.value_el) | ||
|
||
this._update_value() | ||
this._update_reversed() | ||
this._update_orientation() | ||
|
||
this.shadow_el.append(this.bar_el) | ||
|
||
const {label_location} = this.model | ||
switch (label_location) { | ||
case "inline": { | ||
this.bar_el.append(this.label_el) | ||
break | ||
} | ||
default: | ||
} | ||
} | ||
|
||
protected _update_value(): void { | ||
const {value, min, max, label, disabled} = this.model | ||
|
||
const indeterminate = value == null | ||
const progress = (clamp(value ?? 0, min, max) - min)/(max - min)*100 | ||
|
||
this.class_list.toggle(progress_css.indeterminate, indeterminate && !disabled) | ||
this.value_el.style.setProperty("--progress", !indeterminate ? `${progress}%` : "unset") | ||
|
||
if (isString(label)) { | ||
const text = process_placeholders(label, (_, name) => { | ||
if (name == "progress") { | ||
return `${progress}` | ||
} else { | ||
return null | ||
} | ||
}) | ||
this.label_el.textContent = text | ||
} | ||
} | ||
|
||
protected _update_reversed(): void { | ||
this.class_list.toggle(progress_css.reversed, this.model.reversed) | ||
} | ||
|
||
protected _update_orientation(): void { | ||
this.class_list.toggle(progress_css.vertical, this.model.orientation == "vertical") | ||
} | ||
} | ||
|
||
export namespace Progress { | ||
export type Attrs = p.AttrsOf<Props> | ||
|
||
export type Props = Widget.Props & { | ||
value: p.Property<number | null> | ||
min: p.Property<number> | ||
max: p.Property<number> | ||
reversed: p.Property<boolean> | ||
orientation: p.Property<Orientation> | ||
label: p.Property<HTML | string> | ||
label_location: p.Property<LabelLocation> | ||
label_align: p.Property<Align> | ||
} | ||
} | ||
|
||
export interface Progress extends Progress.Attrs {} | ||
|
||
export class Progress extends Widget { | ||
declare properties: Progress.Props | ||
declare __view_type__: ProgressView | ||
|
||
constructor(attrs?: Partial<Progress.Attrs>) { | ||
super(attrs) | ||
} | ||
|
||
static { | ||
this.prototype.default_view = ProgressView | ||
|
||
this.define<Progress.Props>(({Boolean, Int, String, Ref, Or, Nullable}) => ({ | ||
value: [ Nullable(Int), 0 ], | ||
min: [ Int, 0 ], | ||
max: [ Int, 100 ], | ||
reversed: [ Boolean, false ], | ||
orientation: [ Orientation, "horizontal" ], | ||
label: [ Or(Ref(HTML), String), "@{progress}%" ], | ||
label_location: [ LabelLocation, "none" ], | ||
label_align: [ Align, "center" ], | ||
})) | ||
} | ||
|
||
get finished(): boolean { | ||
return this.value == this.max | ||
} | ||
|
||
update(n: number): void { | ||
const {value} = this | ||
if (value != null) { | ||
const {min, max} = this | ||
this.value = clamp(value + n, min, max) | ||
} | ||
} | ||
|
||
increment(n: number = 1): void { | ||
this.update(n) | ||
} | ||
|
||
decrement(n: number = 1): void { | ||
this.update(-n) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.