Created
December 9, 2021 12:19
-
-
Save Normal-Tangerine8609/8962a3a16b3f4df25c67d05cb28d3a39 to your computer and use it in GitHub Desktop.
Add Horizontal Rules To Scriptable Widgets
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
| /* | |
| Call | |
| ListWidget.addHr() | |
| WidgetStack.addHr() | |
| Return | |
| WidgetHorizontalRule | |
| Properties | |
| color: Color | |
| width: number | |
| cornerRadius: number | |
| Methods | |
| setHorizontally() - sets the layout to horizontal. This is the default. | |
| setVertically() - sets the layout to vertical | |
| Example | |
| const widget = new ListWidget() | |
| const hr = widget.addHr() | |
| hr.width = 10 | |
| hr.color = Color.red() | |
| hr.cornerRadius = 5 | |
| hr.setVertically() | |
| widget.presentSmall() | |
| */ | |
| ListWidget.prototype.addHr = function addHr() { | |
| class WidgetHorizontalRule { | |
| #stack | |
| #image | |
| #color = Color.dynamic(Color.black(), Color.white()) | |
| #width = 1 | |
| #horizontal = true | |
| #cornerRadius = 0 | |
| constructor(on) { | |
| this.#stack = on.addStack() | |
| this.#stack.backgroundColor = this.#color | |
| this.#stack.cornerRadius = this.#cornerRadius | |
| this.#stack.addSpacer() | |
| this.#image = this.#stack.addImage(Image.fromData(Data.fromBase64String("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="))) | |
| this.#image.imageSize = new Size(1,this.#width) | |
| } | |
| get color() { | |
| return this.#color | |
| } | |
| set color(color) { | |
| if (!(color instanceof Color)) { | |
| throw new TypeError(`Expected value of type Color but got value of type ${typeof(color)}`) | |
| } | |
| this.#color = color | |
| this.#stack.backgroundColor = this.#color | |
| } | |
| get width() { | |
| return this.#width | |
| } | |
| set width(width) { | |
| if (!(typeof width == "number")) { | |
| throw new TypeError(`Expected value of type number but got value of type ${typeof(color)}`) | |
| } | |
| this.#width = width | |
| this.#image.imageSize = this.#horizontal?new Size(1,this.#width):new Size(this.#width,1) | |
| } | |
| get cornerRadius() { | |
| return this.#cornerRadius | |
| } | |
| set cornerRadius(cornerRadius) { | |
| if (!(typeof cornerRadius == "number")) { | |
| throw new TypeError(`Expected value of type number but got value of type ${typeof(color)}`) | |
| } | |
| this.#cornerRadius = cornerRadius | |
| this.#stack.cornerRadius = this.#cornerRadius | |
| } | |
| setHorizontally() { | |
| this.#stack.layoutHorizontally() | |
| this.#horizontal = true | |
| this.#image.imageSize = new Size(1,this.#width) | |
| } | |
| setVertically() { | |
| this.#stack.layoutVertically() | |
| this.#horizontal = false | |
| this.#image.imageSize = new Size(this.#width,1) | |
| } | |
| } | |
| return new WidgetHorizontalRule(this) | |
| } | |
| WidgetStack.prototype.addHr = ListWidget.prototype.addHr | |
| /* | |
| If you prefer a function, call | |
| addHr(on: ListWidget or WidgetStack): WidgetHorizontalRule | |
| Example | |
| const widget = new ListWidget() | |
| const hr = addHr(widget) | |
| hr.width = 10 | |
| hr.color = Color.red() | |
| hr.cornerRadius = 5 | |
| hr.setVertically() | |
| widget.presentSmall() | |
| Use the following function | |
| const widget = new ListWidget() | |
| const hr = addHr(widget) | |
| hr.width = 10 | |
| hr.color = Color.red() | |
| hr.cornerRadius = 5 | |
| hr.setVertically() | |
| widget.presentSmall() | |
| function addHr(on) { | |
| class WidgetHorizontalRule { | |
| #stack | |
| #image | |
| #color = Color.dynamic(Color.black(), Color.white()) | |
| #width = 1 | |
| #horizontal = true | |
| #cornerRadius = 0 | |
| constructor(on) { | |
| this.#stack = on.addStack() | |
| this.#stack.backgroundColor = this.#color | |
| this.#stack.cornerRadius = this.#cornerRadius | |
| this.#stack.addSpacer() | |
| this.#image = this.#stack.addImage(Image.fromData(Data.fromBase64String("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="))) | |
| this.#image.imageSize = new Size(1,this.#width) | |
| } | |
| get color() { | |
| return this.#color | |
| } | |
| set color(color) { | |
| if (!(color instanceof Color)) { | |
| throw new TypeError(`Expected value of type Color but got value of type ${typeof(color)}`) | |
| } | |
| this.#color = color | |
| this.#stack.backgroundColor = this.#color | |
| } | |
| get width() { | |
| return this.#width | |
| } | |
| set width(width) { | |
| if (!(typeof width == "number")) { | |
| throw new TypeError(`Expected value of type number but got value of type ${typeof(color)}`) | |
| } | |
| this.#width = width | |
| this.#image.imageSize = this.#horizontal?new Size(1,this.#width):new Size(this.#width,1) | |
| } | |
| get cornerRadius() { | |
| return this.#cornerRadius | |
| } | |
| set cornerRadius(cornerRadius) { | |
| if (!(typeof cornerRadius == "number")) { | |
| throw new TypeError(`Expected value of type number but got value of type ${typeof(color)}`) | |
| } | |
| this.#cornerRadius = cornerRadius | |
| this.#stack.cornerRadius = this.#cornerRadius | |
| } | |
| setHorizontally() { | |
| this.#stack.layoutHorizontally() | |
| this.#horizontal = true | |
| this.#image.imageSize = new Size(1,this.#width) | |
| } | |
| setVertically() { | |
| this.#stack.layoutVertically() | |
| this.#horizontal = false | |
| this.#image.imageSize = new Size(this.#width,1) | |
| } | |
| } | |
| return new WidgetHorizontalRule(on) | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment