Taeluf.com

Unsorted Documentation

Terms

  • Wired Object: An Autowire subclass which has been instantiated and attached to a node.

Getting Started Checklist

When you set up a new Autowire class, you need to ensure:

  • class ClassName {} is declared
  • ClassName.aw() is called (usually immediately after the class definition)
  • <node class="ClassName"> is declared Make sure:
  • ClassName matches in all three places
  • You've included Autowire.js and your own .js file in the html page.
  • There are no javascript errors in the browser console
  • Your node is being attached successfully:
    • In onAttach(){}, write console.log('I found the node!') or something.

Minor convenience things

  • myObj.innerHtml is a shorthand for myObj.node.innerHtml

Extensions

  • Your extension must override onExtAttach().
    • This is called after onCreate(...args) and receives ...args
    • this refers to the instantiated autowire subclass this extension is attached to
    • this.node is available.
    • You can do literally whatever you want here. Though, beware of things that may be overridden during the attach step.
  • Autowire.expose(extensionKey, uninstantiatedClassObject): Make an extension available to use
    • This is used by an extension developer to make their extension available.

Wiring Objects

These help you attach an Autowire class to a node

  • new MyModal(nodeObject, ...args): This is often the way to go if you have nested nodes to wire up, since you can pass this to the nested node & it will have a reference to its root node.
  • MyModal.aw('Accept Terms?') will autowire MyModal class to any nodes matching .MyModal css selector and passes Accept Terms? to onCreate() and onAttach() and onReady().
  • MySubClass.autowire(querySelector=null, onPageLoad=true, ...args)
    • if querySelector is not provided, then default of .MySubClass is used.
    • pass onPageLoad as false, and the wiring will happen immediately instead of waiting for page load to complete.
    • if onPageLoad is true, AND the page's loading is already complte, then wiring will be done immediately.

Core static functions

  • MySubClass.use(extensionKey)
    • Enable the named extension on the given class.
  • getObjectsFromName(className=null,parentObject=null).
    • Get all objects with the given class name, optionally only the ones who's nodes are children of the parent object's node
    • if className is not provided, the called class's name is used.
      • Ex: MyModal.getObjectsFromName() is the same as Autowire.getObjectsFromName('MyModal')
  • getObjectFromNode(node): Gets the object wired to the node or null
  • onPageLoad(func, thisArg, ...args): Will execute the given function when the page loads, binding the thisArg & list of ...args. Executes immediately if the page is already loaded.

Core properties to use

  • this.node. The node we're attached to
    • Shorthand: this.n
  • this.name. The class name

Core methods to override

  • onCreate
    • Called before extensions are applied & listeners are setup. this.name & this.node are available
    • Receives any args passed to the class constructor
  • onAttach
    • Called after the node is completely ready. Click listeners are setup. Other nodes may not be setup yet.
  • onReady
    • Called when there are no pending calls to autowire.
    • This does not run if you create an autowire object directly (new Autowire(node)).
    • Not sure if it gets called after initial page load... I think so?

Core methods to call

  • q('.selector').
    • Shorthand for this.node.querySelector('.selector') (only searches children of this node)
  • qa('.selector').
    • Shorthand for this.node.querySelectorAll('.selector')
  • getAny('ClassName'):
    • Shorthand: g('ClassName')
    • Gets a Wired Object with the given classname
    • Longhand: Autowire.getObjectsFromName('ClassName')
  • getAnyList('ClassName')
    • Shorthand: ga('ClassName')
    • Gets a list of Wired Objects with the given classname
  • fromTemplate('.selector')
  • fetch('/url',paramsObject, method="POST"): Returns a response promise. You need to await response.text() or .json()
    • Shorthands: fetchText(), fetchJson(), ft() & fj() all with the same paramater list. Simply do: text = await ft('/whatever/');
  • bindTo(node)
    • Bind this to each attribute-listener on node.
    • An onclick declared in html will have the called class as this, rather than the node.
  • bindToAll(nodeList)
    • same as bindTo except it takes a NodeList.