Skip to content

Instantly share code, notes, and snippets.

@Normal-Tangerine8609

Normal-Tangerine8609/horizontal-rule.js

Created December 9, 2021 12:19
Show Gist options
  • Save Normal-Tangerine8609/8962a3a16b3f4df25c67d05cb28d3a39 to your computer and use it in GitHub Desktop.
Save Normal-Tangerine8609/8962a3a16b3f4df25c67d05cb28d3a39 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Normal-Tangerine8609 created this gist Dec 9, 2021.
    172 changes: 172 additions & 0 deletions horizontal-rule.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,172 @@
    /*
    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)
    }
    */