Return to Question

new Element("div", { // create a div
 id: "header", // set the id
 traits: { publisher }, // assign data that will be inherited by any children
 data: { name: "primary" }, // assign data to this element only
 text: "My header text", // set text
 innerHTML: false, // set innerHTML
 classes: [], // assign classes
 attributes: { // assign attributes
 "contenteditable": "true"
 },
 styles: {}, // assign styles
 actions: { // create actions
 show: self => {
 self.clearStyle("opacity") // clear styles
 self.addClass("visible") // add classes
 },
 hide: self => {
 self.removeClass("visible") // remove them
 self.style("opacity", 0) // or set styles
 }
 },
 callback: self => { // trigger as soon as the element is created
 self.append(new Element("div", {
 id: "important-icon",
 classes: ["hidden", "header-icon"],
 actions: {
 select: () => {
 self.addClass("visible")
 self.removeClass("hidden")
 self.updateText("Selected") // update text
 }
 },
 ready: self => {
 self.on("mouseover", evt => { // handle DOM events
 self.addClass("highlight")
 })
 }
 })) 
 }, 
 ready: self => { // trigger after the element is appended to a parent
 self.traits.publisher.on("events/header/" + self.data.name, data => {
 self.select("#important-icon").actions.select(); 
 // you could of course apply this listener to the icon itself, 
 // but the select feature is convenient in some cases
 }) 
 }
}).appendTo(document.body)

new Element("div", { // create a div
 id: "header", // set the id
 traits: { publisher }, // assign data that will be inherited by any children
 data: { name: "primary" }, // assign data to this element only
 text: "My header text", // set text
 innerHTML: false, // set innerHTML
 classes: [], // assign classes
 attributes: { // assign attributes
 "contenteditable": "true"
 },
 styles: {}, // assign styles
 actions: { // create actions, which will be wrapped in a
 show: (self, arg1) => { // wrapper func and receive the Element as
 self.clearStyle("opacity") // their first argument, followed by any
 self.addClass("visible") // args passed with Element.action.name()
 console.log("called with Element.actions.show(arg1)")
 },
 hide: self => {
 self.removeClass("visible") // remove them
 self.style("opacity", 0) // or set styles
 }
 },
 callback: self => { // trigger as soon as the element is created
 self.append(new Element("div", {
 id: "important-icon",
 classes: ["hidden", "header-icon"],
 actions: {
 select: () => {
 self.addClass("visible")
 self.removeClass("hidden")
 self.updateText("Selected") // update text
 }
 },
 ready: self => {
 self.on("mouseover", evt => { // handle DOM events
 self.addClass("highlight")
 })
 }
 })) 
 }, 
 ready: self => { // trigger after the element is appended to a parent
 self.traits.publisher.on("events/header/" + self.data.name, data => {
 self.select("#important-icon").actions.select(); 
 // you could of course apply this listener to the icon itself, 
 // but the select feature is convenient in some cases
 }) 
 }
}).appendTo(document.body)

• When it comes to modularizing a set of Elements into a class, I could provide a single, set way of doing it so there's a clear path forward for the developer and no freedom to develop accidental anti-patterns when deciding how to package the components into modular files.

• When it comes to modularizing a set of Elements into a class, I could provide a single, set way of doing it so there's a clear path forward for the developer and no freedom to develop accidental anti-patterns when deciding how to package the components into modular files.

• Chaining is great. I should update .use to return this so we can then chain an action like

  self.append(new InfoPage().use(subPage, { /* properties */ }).actions.select(true))

  Create the InfoPage, use the subPage template, pass unique properties, and select it by default. Also can make actions return their Element so they can be chained.