@webbspark/quick-create

Description

Short hand replacement for document.createElement DOM method

Notes

* Package uses JSDOC commenting to assist via Intellisense - optimized for VSCode

Importing Scripts

* __Note:__ Sever must be able to serve the node_modules/@webbspark folder or it should be copied into a folder the server can serve this folder.
* Electron apps can access the node_modules folder directly, copying is not necessary

>  
> ### create
> * import { create } from 'node_modules/@webbspark/quick-create/index.js';
>
> ### Properties
> * a - Tag Type: __\__
> * abbr - Tag Type: __\__
> * address - Tag Type: __\__
> * area - Tag Type: __\__
> * article - Tag Type: __\__
> * aside - Tag Type: __\__
> * audio - Tag Type: __\__
> * b - Tag Type: __\__
> * base - Tag Type: __\__
> * bdo - Tag Type: __\__
> * blockquote - Tag Type: __\__
> * body - Tag Type: __\__
> * br - Tag Type: __\__
> * button - Tag Type: __\__
> * canvas - Tag Type: __\__
> * caption - Tag Type: __\__
> * center - Tag Type: __\__
> * cite - Tag Type: __\__
> * code - Tag Type: __\__
> * col - Tag Type: __\__
> * colgroup - Tag Type: __\__
> * datalist - Tag Type: __\__
> * dd - Tag Type: __\__
> * del - Tag Type: __\__
> * dfn - Tag Type: __\__
> * div - Tag Type: __\__
> * dl - Tag Type: __\__
> * dt - Tag Type: __\__
> * em - Tag Type: __\__
> * embed - Tag Type: __\__
> * fieldset - Tag Type: __\__
> * figcaption - Tag Type: __\__
> * figure - Tag Type: __\__
> * footer - Tag Type: __\__
> * form - Tag Type: __\__
> * head - Tag Type: __\__
> * header - Tag Type: __\__
> * h1 - Tag Type: __\__
> * h2 - Tag Type: __\__
> * h3 - Tag Type: __\__
> * h4 - Tag Type: __\__
> * h5 - Tag Type: __\__
> * h6 - Tag Type: __\__
> * hr - Tag Type: __\__
> * html - Tag Type: __\__
> * i - Tag Type: __\__
> * iframe - Tag Type: __\__
> * img - Tag Type: __\__
> * input - Tag Type: __\__
> * ins - Tag Type: __\__
> * kbd - Tag Type: __\__
> * label - Tag Type: __\__
> * legend - Tag Type: __\__
> * li - Tag Type: __\__
> * link - Tag Type: __\__
> * main - Tag Type: __\__
> * map - Tag Type: __\__
> * mark - Tag Type: __\__
> * meta - Tag Type: __\__
> * meter - Tag Type: __\__
> * nav - Tag Type: __\__
> * noscript - Tag Type: __\__
> * object - Tag Type: __\__
> * ol - Tag Type: __\__
> * optgroup - Tag Type: __\__
> * option - Tag Type: __\__
> * p - Tag Type: __\__
> * pre - Tag Type: __\__
> * progress - Tag Type: __\__
> * q - Tag Type: __\__
> * s - Tag Type: __\__
> * samp - Tag Type: __\__
> * script - Tag Type: __\__
> * section - Tag Type: __\__
> * select - Tag Type: __\__
> * small - Tag Type: __\__
> * source - Tag Type: __\__
> * span - Tag Type: __\__
> * strike - Tag Type: __\__
> * strong - Tag Type: __\__
> * style - Tag Type: __\__
> * sub - Tag Type: __\__
> * sup - Tag Type: __\__
> * table - Tag Type: __\__
> * tbody - Tag Type: __\__
> * td - Tag Type: __\__
> * textarea - Tag Type: __\__
> * tfoot - Tag Type: __\__
> * th - Tag Type: __\__
> * thead - Tag Type: __\__
> * time - Tag Type: __\__
> * title - Tag Type: __\__
> * tr - Tag Type: __\__
> * u - Tag Type: __\__
> * ul - Tag Type: __\__
> * var - Tag Type: __\__
> * video - Tag Type: __\__
> * wbr - Tag Type: __\__
> * svg - Tag Type: __\__
> * defs - Tag Type: __\__
> * mask - Tag Type: __\__
> * rect - Tag Type: __\__
> * textnode - Node Type: __#text__
> * custom(tag: string): HTMLElement
> * getByID(id: string): HTMLElement
> * getByTag(tag: string): HTMLElement[]
> * getByName(name: string): HTMLElement[]
> * getByClass(className: string): HTMLElement
> * getByQuery(query: string): HTMLElement[]
>
> ### Use Example
> ``
> import { create } from './node_modules/@webbspark/index.js';
>
> const elm = create.div;
> elm.className = 'dark';
>
> const email = create.input;
> inp.type = 'text';
> inp.placeholder = 'Email Address';
> inp.style.color = 'blue';
>
> const password = create.input;
> inp.type = 'password';
> inp.placeholder = 'Password';
> inp.style.color = 'blue';
>
> const btn = create.button;
> btn.innerText = 'Login';
>
> elm.append(email, password, btn);
> document.body.append(elm);
> `
>  

>  
> ### tools
> * Just Prototypes - import './node_modules/@webbspark/index.js';
> * Full - import { tools } from './node_modules/@webbspark/index.js';
>
> ### Properties
> * debounce(key: string, cb: function, timeout: number): void - Used to add debounce to inputs, recall onkeyup and the call back function will only be called when no changes are made for the specified timeout(milliseconds)
> * wait(timeout): Promise - an awaitable pause function
>
> ### Global/Window Functions
> * registerLoopFunction(key: string, cb: function, timing: number): void - sets a function to to be looped, re-calling the callback every timing milliseconds
> * checkLoopFunction(key: string): boolean - Returns whether or not a loop function exists for the given key
> * removeLoopFunction(key: string): void - removes the loop function exists with the given key
> * clearLoopFunctions(): void - removes all loop functions
>
> ### Prototypes
> * String.toTitle(): string; - Hello World
> * String.toCamel(): string; - helloWorld
> * String.toSnake(): string; - hello_world
> * String.toKebab(): string; - hello-world
> * String.toPascal(): string; - HelloWorld
>
>  

>  
> ### HTMLImportElement
> * Just HTMLImportElement - import './node_modules/@webbspark/lib/html-import.js';
> * With create - import { create } from './node_modules/@webbspark/index.js';
>
>> #### Notes
>> * The html-import element will automatically load a css and js file with the same name, and at the same path, as the given src value
>> * The html-import element will not load the src by default
>>
>> #### Observed Attributes
>> * load - When set, loads the imported file when the dom is generated
>> * nocss - When set, does not attempt to load a css file based on the src attribute
>> * nojs - When set, does not attempt to load a js file based on the src attribute
>> * nomod - When set, does not attempt to apply a module object to the html-import element, when loading the js file based on the src attribute
>>
>> #### Properties
>> * load(): Promise<(object | undefined)> - Loads the html from the src attribute, returning a promise that resolves when the html is fully loaded. Resolves with the module(default export class) of the loaded js file, unless nojs is set.
>> * unload(): void - Removes and clears and objects loaded by the html-import
>> * show(): void - Removes the hidden attribute from the html-import element
>> * hide(): void - Sets the hidden attribute on the html-import element
>> * onAttributeChange: (attrName: string) => void - Sets a callback that is called when a attribute changes on the html-import element
>> * onUnload(): void - Sets a callback that is called when the html-import is unloaded
>> * module: object - The user-defined default class loaded from the js file associated to the html-import src element
>>
>> #### Use Example
>>> ##### index.html
>>> `
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> `
>>
>>> ##### index.js
>>> `
>>> import { create } from './node_modules/@webbspark/index.js';
>>>
>>> const tabs = create.getByID('tabs');
>>> tabs.load().then((module) => {
>>> module.tabs = [
>>> { title: 'tab1' },
>>> { title: 'tab2' }
>>> ]
>>> });
>>> `
>>
>>> #### tabs.html
>>> `
>>>
>>>
>>>


>>> `
>>
>>> #### tabs.js
>>> `
>>> export default class Tabs {
>>> #tabTemplate;
>>> #parent;
>>> #main;
>>>
>>> #tabs = [];
>>> get tabs() { return this.#tabs; }
>>> set tabs(value) {
>>> this.#tabs = value;
>>> this.#loadTabs();
>>> }
>>>
>>> get #tab() {
>>> let tabElm = this.#tabTemplate.cloneNode(true).content.children[0];
>>> ((t) => {
>>> Object.defineProperties(t, {
>>> title: {
>>> get() { return t.children[0].innerText; },
>>> set(value) { t.children[0].innerText = value; }
>>> }
>>> })
>>> })(tabElm);
>>>
>>> return tabElm;
>>> }
>>>
>>> constructor(parent) {
>>> this.#parent = parent;
>>> this.#main = parent.querySelector('[name=tabs-main]');
>>> this.#tabTemplate = parent.querySelector('[id=tab-template]');
>>> }
>>>
>>> #loadTabs() {
>>> Array.from(this.#main.children).map(c => c.remove());
>>> this.#tabs.map(t => this.addTab(t));
>>> }
>>>
>>> addTab(tabData) {
>>> let tab = this.#tab;
>>> tab.title = tabData.title;
>>>
>>> this.#main.append(tab);
>>> }
>>> }
>>> ``
>>
>  

Feature Requests and Bug Reporting - NOT IMPLEMENTED

Bug Reporting\
Feature Requests

 

License

Copyright (C) 2021 Christopher J. Webb - WebbSpark.com

Permission to use, and/or distribute this software for any legal purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

BY USING THIS SOFTWARE YOU AGREE TO ALL THE TERMS AND CONDITIONS HEREIN.

THE SOFTWARE IS PROVIDED "AS IS" AND THE COPYRIGHT HOLDER/AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

COPYRIGHT HOLDER/AUTHOR RESERVES THE RIGHT TO CHANGE THESE TERMS AND CONDITIONS AT ANY TIME, FOR ANY REASON, WITHOUT PRIOR NOTICE.