uger
Version:
```ts import { body } from "uger";
273 lines (272 loc) • 7.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.win = exports.body = exports.elem = exports.Elem = void 0;
class Elem {
/** The HTML element passed to this object's constructor */
element;
/** Style of this html element */
style;
/** Children of this element */
children = [];
/** The element that is the parent of this element */
parent;
/**
* @param element Html element on which Elem is based.
* @param properties The class, id and name of this element.
* Similar to the query selector tag.
* For example ".book #first"
*/
constructor(element, ...properties) {
this.element = element;
this.style = this.element.style;
for (const property of properties)
this._(property);
}
/**
* Change element's id, class and.
* @param properties The class, id and name of this element.
* Similar to the query selector tag.
* For example ".book #first"
* Or it can be an object of attributes
*/
_(properties) {
switch (typeof properties) {
case "string":
for (const property of properties.split(" ")) {
switch (property[0]) {
case ".":
this.element.className = property.slice(1, property.length);
break;
case "#":
this.element.id = property.slice(1, property.length);
break;
default:
this.element.setAttribute("name", property);
break;
}
}
break;
case "function":
properties(this);
break;
default:
if (properties instanceof Elem) {
this.appendChild(properties);
}
else if (Array.isArray(properties)) {
for (const childProperties of properties) {
this.add(...childProperties);
}
}
else {
for (const property in properties)
this.element.setAttribute(property, properties[property]);
}
break;
}
}
/**
* Creates and adds a new element as a child of the current elements.
* @param tagName HTML map tag.
* @param properties The class, id and name of this element.
* Similar to the query selector tag.
* For example ".book #first"
* @returns {Elem}
*/
add(tagName, ...properties) {
let e = new Elem(document.createElement(tagName), ...properties);
this.appendChild(e);
return e;
}
/**
* Adds an existing html element as a child of the current elements.
* @param element HTMLElement
* @returns {Elem}
*/
addFrom(element) {
let e = new Elem(element);
this.appendChild(e);
return e;
}
/**
* Changes src attribute of element
* @param path source path of element
* @returns {Elem} Current element
*/
src(path) {
this.element.setAttribute("src", path);
return this;
}
/**
* Gets text from input element
* @returns {string}
*/
input() {
return this.element.value;
}
/**
* Change text of input element
* @param text new text
* @returns {Elem} Current element
*/
setInput(text) {
this.element.value = text;
return this;
}
/**
* Changes several css properties at once.
* @param css An css object to get properties from.
* For example { backgroundColor: "black", color: "white" }
* @returns {Elem} Current element
*/
styles(css) {
Object.assign(this.style, css);
return this;
}
/**
* Remove child of this element.
* @param child the child element to remove.
*/
removeChild(child) {
if (this.children.includes(child)) {
child.element.remove();
this.children.splice(this.children.indexOf(child), 1);
}
}
/**
* Removes element from the document.
*/
remove() {
if (this.parent !== undefined)
this.parent.removeChild(this);
else
this.element.remove();
}
/**
* Changes the id of this element.
* @returns {Elem} Current element
*/
id(id) {
this.element.id = id;
return this;
}
/**
* Gets the id of this element.
* @returns id
*/
getId() {
return this.element.id;
}
/**
* Changes the class of this element.
* @returns {Elem} Current element
*/
class(className) {
this.element.className = className;
return this;
}
/**
* Gets the class of this element.
* @returns class
*/
getClass() {
return this.element.className;
}
/**
* Changes the innerText of this element.
* @returns {Elem} Current element
*/
text(text) {
this.element.innerText = text;
return this;
}
/**
* Gets the innerText of this element.
* @returns innerText
*/
getText() {
return this.element.innerText;
}
/**
* Changes the innerHtml of this element.
* @returns {Elem} Current element
*/
html(text) {
this.element.innerHTML = text;
return this;
}
/**
* Gets the innerHTML of this element.
* @returns innerHTML
*/
getHtml() {
return this.element.innerHTML;
}
/**
* Adds another element as a child to this element.
* @param elem other element
*/
appendChild(elem) {
if (elem != this) {
elem.parent = this;
this.element.appendChild(elem.element);
this.children.push(elem);
}
else
throw "Can't add myself as my child.";
}
/**
* Adds an event listener to this element.
* @param type event type
* @param listener your function
* @param options AddEventListenerOptions
* @returns {Elem} Current element
*/
on(type, listener, options) {
const self = this;
this.element.addEventListener(type, (ev) => {
listener(ev, self);
}, options);
return this;
}
/**
* Adds an event listener to this element.
* But calls the listener only once.
* @param type event type
* @param listener your function
* @returns {Elem} Current element
*/
once(type, listener) {
const self = this;
this.element.addEventListener(type, (ev) => {
listener(ev, self);
}, { once: true });
return this;
}
/**
* Makes element fullscreen
*/
fullscreen() {
if (document.fullscreenElement !== this.element)
this.element.requestFullscreen();
}
/**
* Makes element fullscreen
*/
pointerLock() {
if (document.pointerLockElement !== this.element)
this.element.requestPointerLock();
}
}
exports.Elem = Elem;
function elem(tagName, ...properties) {
return new Elem(document.createElement(tagName), ...properties);
}
exports.elem = elem;
/** The beginning of everything */
const body = document.body !== undefined
? new Elem(document.body)
: new Elem(document.createElement("body"));
exports.body = body;
const win = new Elem(window);
exports.win = win;