How to use lively - 10 common examples

trigger() {
    try {
      this.checked = !this.checked;
      signal(this, "toggle", this.checked);
    } catch (err) {
      var w = this.world();
      if (w) w.logError(err);
      else console.error(err);
    }
  }

trigger() {
    try {
      signal(this, "fire");
      typeof this.action == "function" && this.action();
    } catch (err) {
      var w = this.world();
      if (w) w.logError(err);
      else console.error(err);
    }
  }

static get styleSheet() {
    return new StyleSheet({
      ".FilterableList.dark [name=input]": {
        borderWidth: 0,
        borderRadius: 20,
        fill: Color.gray.withA(0.8),
        fontColor: Color.gray.darker(),
        padding: rect(10, 2)
      },
      ".FilterableList.default [name=input]": {
        borderWidth: 0,
        borderColor: Color.gray
      }
    });
  }

createControl(name, controlElement) {
     return {
      fill: Color.transparent,
      draggable: true, onDrag: (evt) =>  this.onDrag(evt),
      layout: new VerticalLayout({spacing: 5}),
      submorphs: [
        {type: "text", textString: name, fontSize: 12, fontWeight: 'bold',
         fontColor: Color.black, padding: rect(5,0,0,0),
         fill: Color.transparent},
        controlElement
     ]}
  }

exec: async (list) => {
      var preselect = list.selectedIndex || 0;
      var {selected} = await list.world().filterableListPrompt(
        "Select item", list.items,
        {preselect, requester: list.getWindow() || list, itemPadding: Rectangle.inset(0,2), multiSelect: true});
      if (selected.length) {
        if (list.multiSelect) list.selections = selected;
        else list.selection = selected[0];
        list.scrollSelectionIntoView();
        list.update();
      }
      return true;
    }
  },

build() {
    this.submorphs = [
      {
        type: "text",
        name: "html editor",
        textString: this.target.html,
        fontColor: Color.white,
        fontFamily: "Monaco, monospace",
        padding: Rectangle.inset(10, 10, 10, 2),
        fontSize: 14,
        fill: Color.transparent,
        extent: this.extent,
        clipMode: "auto"
      }
    ];
  }

build(props = {}) {
    var {label} = props;
    this.addMorph({
      name: "label", type: "label", value: props.label,
      fill: null, padding: Rectangle.inset(3), fontSize: 14, fontColor: Color.gray
    });
    this.addMorph({
      name: "ok button", type: "button", label: "OK",
      ...this.okButtonStyle
    });
    connect(this.getSubmorphNamed("ok button"), 'fire', this, 'resolve');
    this.initLayout();
  }

ensureCwdButton(cwd) {
    var btn = this.getSubmorphNamed("changeCwdButton")
     if (btn) return btn;
     btn = morph({
      type: "button", name: "changeCwdButton",
      padding: Rectangle.inset(4,2),
      label: cwd || "...", extent: pt(60,20), borderRadius: 3
    });
    connect(btn, 'fire', this, 'execCommand', {converter: () => "[shell] change working directory"});
    return btn;
  }

resizer() {
    var win = this, resizer = this.getSubmorphNamed("resizer");
    if (resizer) return resizer;
    resizer = morph({
      name: "resizer",
      nativeCursor: "nwse-resize",
      extent: pt(20, 20),
      origin: pt(20,20),
      fill: Color.transparent,
      bottomRight: this.extent
    });
    connect(resizer, "onDragStart", resizer, "scale", {converter: evt => 10});
    connect(resizer, "onDrag", win, "resizeBy", {converter: evt => evt.state.dragDelta});
    connect(resizer, "onDragEnd", resizer, "scale", {converter: evt => 1});
    return resizer;
  }

resizer() {
    var win = this, resizer = this.getSubmorphNamed("resizer");
    if (resizer) return resizer;
    resizer = morph({
      name: "resizer",
      nativeCursor: "nwse-resize",
      extent: pt(20, 20),
      origin: pt(20,20),
      fill: Color.transparent,
      bottomRight: this.extent
    });
    connect(resizer, "onDragStart", resizer, "scale", {converter: evt => 10});
    connect(resizer, "onDrag", win, "resizeBy", {converter: evt => evt.state.dragDelta});
    connect(resizer, "onDragEnd", resizer, "scale", {converter: evt => 1});
    return resizer;
  }