Yngwie.Element

Class that extends Yngwie.Node to implement a virtual DOM element.

Properties

Property	Type	Description
_value	STRING	Tag name of element
_attribs	{STRING:STRING}	Attribute name and value associated with this element in the form of {attribute_name:attribute_value}
_text	STRING	Text that is appended as the first child of this element when the element is rendered
_listeners	[yngwieListener]	Event listeners bound to this element

CONSTRUCTOR :: STRING, OBJECT, STRING, [yngwieListener] -> yngwieElement

Creates instance of YngwieElement with the given tag name, attributes, text, and event listeners.

// Returns instance of YngwieElement with a tag of "div", the attribute "class" with the value of "container", and to append a text node with the value "Hello World!" when this YngwieElement instance is rendered:
let elem = new Yngwie.Element("DIV", {"class":"container"}, "Hello World!");

yngwieElement.tagname :: VOID -> STRING

Returns tag name of this element.

// Create new DIV element:
let elem = new Yngwie.Element("DIV");

// Returns "DIV":
elem.tagname();

yngwieElement.attribs :: OBJECT|VOID -> this|OBJECT

Sets "attribs" property with given OBJECT. If no argument is given, set attributes are returned. Is chainable only if an argument is given. If argument is not an OBJECT, then a YngwieError exception is thrown.

// Create new "DIV" element:
let elem = new Yngwie.Element("DIV");

// Set "class" and "id" attribute of element :
elem.attribs({"class":"container", "id":"test"});

// Returns {"class":"container", "id":"test"}
elem.attribs();

yngwieElement.hasAttribute :: STRING -> BOOLEAN

Returns BOOLEAN for if attribute exists with given name in "attribs" OBJECT.

// Create new "DIV" element with class:
let elem = new Yngwie.Element("DIV", {"class":"container"});

// Returns TRUE:
elem.hasAttribte("class");

// Returns FALSE:
elem.hasAttribute("id");

yngwieElement.getAttribute :: STRING -> *|UNDEFINED

Returns value of attribute by name stored in "attribs" OBJECT, otherwise returns UNDEFINED.

// Create new "DIV" element with class:
let elem = new Yngwie.Element("DIV", {"class":"container"});

// Returns "container":
elem.getAttribute("class");

// Returns UNDEFINED:
elem.getAttribute("id");

yngwieElement.setAttibute :: STRING, * -> this

Chainable method that binds value to this element's attributes with given name.

// Create new "DIV" element:
let elem = new Yngwie.Element("DIV");

// Sets "class" and "id" attributes:
elem.setAttribute("class", "container").setAttribute("id", "test");

// Returns {"class":"container", "id":"test"}
elem.attribs();

yngwieElement.removeAttribute :: STRING -> this

Chainable method that removes attribute with given name from this element's attributes.

// Create new "DIV" element with attributes:
let elem = new Yngwie.Element("DIV", {"class":"container". "test":"id"});

// Removes "test" attribute and sets "id":
elem.removeAttribute("test").setAttribute("id", "test");

// Returns FALSE:
elem.hasAttribute("test");

yngwieElement.text :: STRING|VOID -> this|STRING

Appends text node as first child of element at render with given STRING as it's value. This method is only chainable if an argument is given. If no argument is given, set text is returned. If given argument is not a STRING, then a YngwieError exception is thrown.

// Create new "DIV" element:
let elem = new Yngwie.Element("DIV");

// Sets text:
elem.text("Hello World!");

// Returns "Hello World!";
elem.text();

yngwieElement.removeText :: VOID -> this

Chainable method that sets text as UNDEFINED for this element.

// Create new "DIV" element with text but no attributes:
let elem = new Yngwie.Element("DIV", {}, "Hello World!");

// Removes text and returns UNDEFINED:
elem.removeText().text();

yngwieElement.getElementsBy :: (yngwieElement -> BOOLEAN) -> [yngwieElement]

Returns all the elements that, when the given function is applied to this element and it's descendants, that function returns TRUE.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a"});
let b = new Yngwie.Element("DIV", {"id":"b"});
let c = new Yngwie.Element("SPAN", {"id":"c"});
let d = new Yngwie.Element("SPAN");

// Append elements to "a":
a.appends([b,c,d]);

// Get elements that only have an "id" attribute AND are a DIV element:
let reuslt = a.getElementsBy(elem=>elem.hasAttribute("id") && elem.tagname() === "DIV");

// Returns ["a","b"]
result.parse((elem, result) => result.concat([elem.getAttribute("id")]), []);

yngwieElement.getElementsByTagName :: STRING -> [yngwieElement]

Returns all the elements that have the given tag name from this element and it's descendants. If no elements have the given tag name, then an empty array is returned.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a"});
let b = new Yngwie.Element("DIV", {"id":"b"});
let c = new Yngwie.Element("SPAN", {"id":"c"});
let d = new Yngwie.Element("SPAN");

// Append elements to "a":
a.appends([b,c,d]);

// Returns [c,d]
a.getElementsByTagName("SPAN");

yngwieElement.getElementsByAttribute :: STRING, *|VOID -> [yngwieElement]

Returns all the elements that have the given attribute name and value from this element and it's descendants. If no attribute value is given, then returns any element that has that attribute. Returns an empty array if no matches are found.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a", "class":"container"});
let b = new Yngwie.Element("DIV", {"id":"b", "class":"header"});
let c = new Yngwie.Element("SPAN", {"id":"c", "class":"text"});
let d = new Yngwie.Element("SPAN", {"class":"text"});

// Append elements to "a":
a.appends([b,c,d]);

// Returns [a,b,c,d]
a.getElementsByAttribute("class");

// Returns [b]
a.getElementsByAttribute("class", "header");

yngwieElement.getElementsByClass :: STRING -> [yngwieElement]

Returns all elements with the class attribute set to the given STRING argument. Returns empty array if no matches are found.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a", "class":"container"});
let b = new Yngwie.Element("DIV", {"id":"b", "class":"header"});
let c = new Yngwie.Element("SPAN", {"id":"c", "class":"text"});
let d = new Yngwie.Element("SPAN", {"class":"text"});

// Append elements to "a":
a.appends([b,c,d]);

// Returns [c,d]
a.getElementsByClass("text");

yngwieElement.getElementByID :: STRING -> yngwieElement|UNDEFINED

Returns element with the given ID. If no elements are found, UNDEFINED is returned.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a", "class":"container"});
let b = new Yngwie.Element("DIV", {"id":"b", "class":"header"});
let c = new Yngwie.Element("SPAN", {"id":"c", "class":"text"});
let d = new Yngwie.Element("SPAN", {"class":"text"});

// Append elements to "a":
a.appends([b,c,d]);

// Returns c
a.getElementById("c");

yngwieElement.on :: STRING, [(EVENT, ELEMENT -> VOID)]|EVENT, ELEMENT -> VOID -> this

Chainable method that binds event listeners by event name to element at render. The function called by the event listener is called in the context of this element (i.e. this references the bound yngwieElement from within the function passed to the event listener).

// Create DIV element with attributes:
let elem = new YngwieElement("DIV", {"id":"a", "class":"container"}, "Hello World!");

// Bind click events:
elem.on("click", [
  function (evt, node) {
    alert(this.text())  // Shows "Hello World!" in alert prompt
  },
  function (evt, node) {
    console.log(this); // Consoles yngwieElement this handler is bound to
  },
  (evt, node) => console.log(this) // Consoles "WINDOW" because of the scope this fat-arrow function is defined in
])

// Bind mouseover event:
elem.on("mouseover", (evt, node) => console.log(node)) // Consoles node event listener is bound to

yngwieElement.clone :: VOID -> yngwieElement

Returns clone of this element and it's descendants.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a", "class":"container"});
let b = new Yngwie.Element("DIV", {"id":"b", "class":"header"});
let c = new Yngwie.Element("SPAN", {"id":"c", "class":"text"});
let d = new Yngwie.Element("SPAN", {"class":"text"});

// Append elements to "a":
a.appends([b,c,d]);

// Clone a:
let cloneOfA = a.clone();

// Remove b from a:
b.detach();

// Returns [a,c,d]
a.children();

// Returns [a,b,c,d]:
cloneOfA.children();

yngwieElement.render :: STRING|ELEMENT|VOID, OBJECT -> ELEMENT

Transforms this element and it's descendants into a DOM ELEMENT, appending result to given target and rendering that ELEMENT in the context of the given OBJECT. "Context", in this case means what's being used to initialize the ELEMENT with and where to query the target if the target is a STRING. If target is UNDEFINED, then the rendered ELEMENT is returned. If context is UNDEFINED, then DOCUMENT is used by default.

// Create some elements:
let a = new Yngwie.Element("DIV", {"id":"a", "class":"container"});
let b = new Yngwie.Element("DIV", {"id":"b", "class":"header"});
let c = new Yngwie.Element("SPAN", {"id":"c", "class":"text"});
let d = new Yngwie.Element("SPAN", {"class":"text"});

// Append elements to "a":
a.appends([b,c,d]);

// Renders and appends elements to DOCUMENT BODY element:
a.render("body");

YngwieElement.init :: STRING, OBJECT, STRING, [yngwieListener] -> yngwieElement

Static factory method for YngwieElement.

// Create, append, and render elements to DOCUMENT BODY:
Yngwie.Element.init("DIV", "id":"a", "class":"container"}).appends([
  Yngwie.Element.init("DIV", {"id":"b", "class":"header"}).appends([
    Yngwie.Element.init("SPAN").text("Hello"),
    Yngwie.Element.init("SAPN").text("World")
  ]);
]).render("body");

YngwieElement.renderTo :: STRING|ELEMENT, [yngwieElement], OBJECT -> ELEMENT

Renders an array of yngwieElements, using the given context, and appends result to given target, returning the ELEMENT those elements were appended to. "Context", in this case means what's being used to initialize each ELEMENT with and where to query the target if the target is a STRING. If context is UNDEFINED, DOCUMENT is used by default. If any member of the given array is not an instance of YngwieElement, a YngwieError exception is thrown. If given argument is not an array, a YngwieError exception is also thrown.

// Create, append, and render elements to DOCUMENT BODY:
Yngwie.Element.renderTo("body", [
  // Page Header:
  Yngwie.Element.init("HEADER").appends([
    Yngwie.Element.init("DIV", {"class":"banner"}, "[BANNER]"),
    Yngwie.Element.init("NAV").appends([
      Yngwie.Element.init("a", {"href":"/link/to/page"}, "Link 1"),
      Yngwie.Element.init("a", {"href":"/link/to/page"}, "Link 2"),
      Yngwie.Element.init("a", {"href":"/link/to/page"}, "Link 3"),
      Yngwie.Element.init("a", {"href":"/link/to/page"}, "Link 4"),
    ])
  ]),
  // Page Body:
  Yngwie.Element.init("MAIN").appends([
    Yngwie.Element.init("ARTICLE").text("Article 1"),
    Yngwie.Element.init("ARTICLE").text("Article 2"),
    Yngwie.Element.init("ARTICLE").text("Article 3"),
    Yngwie.Element.init("ARTICLE").text("Article 4")
  ]),
  // Page Footer:
  Yngwie.Element.init("FOOTER").text("[FOOTER]")
]);

YngwieElement.inject :: STRING|ELEMENT, yngwieElement, OBJECT -> ELEMENT

Replaces the given target with the render of the given YngwieElement using the given context. "Context", in this case means what's being used to initialize the ELEMENT with and where to query the target if the target is a STRING. If context is UNDEFINED, then DOCUMENT is used by default. If given argument is not an instance of YngwieElement, then a YngwieError exception is thrown.

// Create some elements:
let elems = Yngwie.Element.init("DIV", {"class":"container"}).appends([
  Yngwie.Element.init("H3").text("Some List Of Items"),
  Yngwie.Element.init("UL").appends([
    Yngwie.Element.init("LI").text("Item 1"),
    Yngwie.Element.init("LI").text("Item 2")
    Yngwie.Element.init("LI").text("Item 3")
  ])
])

// Replaces an element with the id of "listView":
Yngwie.Element.inject("#listView", elems);