Add Horizontal Rules To Scriptable Widgets

horizontal-rule.js

/*
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)
}
*/