easy-dom

Easy-Dom domjs

[TOC]

0.

0.1 npm

npm i easy-dom-util

import {dom} from 'easy-dom-util';
let el = dom.div; //  Ele dom

0.2 script

<script src="https://cdn.jsdelivr.net/npm/easy-dom-util"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -->
<script>
    var el = EasyDom.dom.div;
</script>

1. Ele

easy-dom dom dom Ele

Ele Ele


dom	--	HTMLElement	dom
attr	json/name,value/--	Ele/string/Ele
data	json/name/null/--,value/null/--	any	dom
hasAttr	string	boolean
rmAttr	string	Ele/string/Ele
style	json/name,value	Ele/string/Ele
text	[string]	string/Ele	innerText
value	[string]	string/Ele	value
html	[string]	string/Ele	innerHTML
empty	--	Ele
class	[string]	string/Ele
id	[string]	string/Ele	idid
click	function	Ele	click
on	json/name,func	Ele
render	{html,method={},result=null}	Ele
addClass	string	Ele
rmClass	string	Ele
hasClass	string	boolean
replaceClass	string,string	Ele
append	...Array[dom/Ele] / Array[dom/Ele]	Ele
insert	index, ...Array[dom/Ele] / Array[dom/Ele]	Ele
prepend	...Array[dom/Ele] / Array[dom/Ele]	Ele
before	...Array[dom/Ele] / Array[dom/Ele]	Ele
after	...Array[dom/Ele] / Array[dom/Ele]	Ele
remove	int/Ele/--	Ele/--	ele
parent	[index]	Ele/null	n
index	--	number
children	[index]	Ele/Array[Ele]/null
children	...Array[dom/Ele] / Array[dom/Ele]	Ele
next	[index]	Ele/null	n
prev	[index]	Ele/null	n
exe	function(dom){}	Ele	Elethisdom
src	string	Ele	domsrc
query	selector	Array[Ele]	css

api:

declare class Ele {
    el: HTMLElement;
    constructor({ tag, ele }: {
        tag?: TTag | string;
        ele?: HTMLElement;
    });
    dom(): HTMLElement;
    ref(el: Ele): this;
    class(): string;
    class(cls: string, withPrefix?: boolean): this;
    id(): string;
    id(id: string): this;
    attr(name: string): string;
    attr(name: IJson): this;
    attr(name: string, value: string | number | null): this;
    hasAttr(name: string): boolean;
    rmAttr(name: string): this;
    style(name: IStyle): this;
    style(name: IStyleKey[]): IStyle;
    style(name: IStyleKey): string;
    style<T extends IStyleKey>(name: T, value: IStyle[T]): this;
    text(): string;
    text(text: string | number): this;
    value(): string;
    value(val: string | number): this;
    html(): string;
    html(html: string | number): this;
    click(func: (this: HTMLElement, ev: HTMLElementEventMap['click'], el: Ele) => any, useCapture?: boolean): this;
    on<K extends keyof HTMLElementEventMap>(name: K, func: (this: HTMLElement, ev: HTMLElementEventMap['click'], el: Ele) => any, useCapture?: boolean): this;
    on(name: {
        [prop in keyof HTMLElementEventMap]?: (this: HTMLElement, ev: HTMLElementEventMap[prop], el: Ele) => any;
    }, func?: boolean): this;
    addClass(cls: string, withPrefix?: boolean): this;
    hasClass(cls: string, withPrefix?: boolean): boolean;
    rmClass(cls: string, withPrefix?: boolean): this;
    replaceClass(a: string, b: string, withPrefix?: boolean): this;
    toggleClass(name: string): this;
    append(...children: (Ele | Ele[] | null)[]): this;
    appendSingle(el: Ele | null): this;
    name(): string;
    name(name: string): this;
    insert(index: number | string, ...eles: (string | Ele | HTMLElement)[]): this;
    prepend(...eles: (string | Ele | HTMLElement)[]): this;
    before(...eles: (string | Ele | HTMLElement)[]): Ele;
    after(...eles: (string | Ele | HTMLElement)[]): Ele;
    remove(arg?: number | Ele): this;
    empty(): this;
    parent(index?: number): Ele;
    data(name: string): any;
    data(): IJson;
    data(name: IJson): this;
    data(name: string, value: any): this;
    index(): number;
    next(i?: number): Ele;
    prev(i?: number): Ele;
    children(): Ele[];
    children(i: number | string): Ele;
    children(...children: (Ele | Ele[] | null)[]): this;
    brother(): Ele[];
    brother(i: number): Ele;
    created(cb: (this: Ele, self: Ele) => void): this;
    mounted(fn: (this: Ele, self: Ele, parent: Ele) => void): this;
    sizeReady(fn: (this: Ele, self: Ele, size: ISize, parent: Ele) => void): this;
    src(): string;
    src(v: string): this;
    render(options?: {}): any;
    query(selector: string, one: true): Ele;
    query(selector: string, one?: false): Ele[];
    hide(): this;
    show(display?: string): this;
    setVisible(visible?: boolean, display?: string): this;
    mount(ele?: TEleCommon): this;
}

api

let el = dom.div
    .class('easy-dom')
    .text('easy-dom')
    .click(()=>{
        alert('click')
    })

emmet

let el = dom('div#app.cls1.cls2[attr1=1][attr2]')

render

el.render({
    method:{
        alert(text){
            // this : {el,bindEl,self,method}
            console.log(this);
            window.alert(text);
        }
    },
    result(el){
        console.log(el.div1,el.div2);
    },
    //  vscode  es6-string-html  html
    html:/*html*/` 
        <div @el='div1' @event=alert('test')></div>
        <div @el='div2'></div>
    `
})

.data()

el.data(); //  data 
el.data(null); //  data 
el.data('name', 'test'); //  
el.data('name');  // 
el.data('name', null);  //  
el.data({ // 
    name: null, //  
    age: 12 //  
});

Ele .el , dom

2. api

api

api
create	string	Ele	tagEle
query	selector[,boolean]	Ele/NodeList/null	bool
checkDom	string/selector/HTMLElement	HTMLElement/NodeList	dom
classPrefix	string[,function]	--	clearClassPrefix
clearClassPrefix	--	--
addCommonStyle	object/name,value	--	css
reportStyle	{function, id = 'el-style', usePool = false}	--	css
initStylePool	--	--
registTouchEvent	{el[dom/Ele/selector],touchStart,touchMove,touchEnd}	--	touchpc
windowSize	--	{width:height}
version		--	easy-dom

import $, {dom} from 'easy-dom-util';
$.classPrefix('el-test-');
dom.div.class('1') // class = el-test-1
$.clearClassPrefix();
// 
$.classPrefix('el-test-',()=>{
    dom.div.class('1') // class = el-test-1
});

import $ from 'easy-dom-util';
$.addCommonStyle({
    fontSize: '12px',
    textCenter: 'text-align:center;'
})

$.reportStyle({
    func:initStyle,
    id: 'MyStyle' // style id 
}); // head

// 

$.reportStyle({
    func:initStyle,
    id: 'MyStyle', // style id 
    usePool: true
}); //  initStylePool head
$.initStylePool();

function initStyle(common){ // common 
    //  vscode  es6-string-css  css
    return /*css*/`
        .el-test-1{
            color:#f44;
            font-size:${common.fontSize};
        }
        .el-test-text{
            ${common.textCenter}
            color:#222;
        }
    `
}

registTouchEvent

import $ from 'easy-dom-util';
$.registTouchEvent({
    el: 'dom/Ele/selector',
    touchStart(touchList){
    },
    touchMove(touchList){
    },
    touchEnd(touchList){
    },
});

tacl-ui

taostconfirmloadingalertdragui

[TOC]

0.

0.1 npm

npm i tacl-ui

import {tool, toast, confirm, alert, loading, drag} from 'tacl-ui';
// 
import TaclUI from 'tacl-ui';
// TaclUI = {tool, toast, confirm, alert, loading, drag}

// do something ...

0.2 script

<script src="https://cdn.jsdelivr.net/npm/tacl-ui"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -->
<script>
<script>
    TaclUI.toast('Hello world!')
</script>

1. api

1.1 tool

easy-dom

1.2 toast

toast

// 
toast(text[, time, position]);
toast('')

// json
toast({
    text: '',
    // 
})

// new  taclnew
const close = toast.new(...);

declare interface ToasterOpts {
    text?: string;
    time?: number;
    position?: 'top'|'middle'|'bottom';
    parent?: DomEle;
    onhide?(): void;
    onopen?(): void;
    contentHtml?: boolean;
    showClose?: boolean;
    customClass?: string;
    button?: { // 
        text: string;
        onclick(): void;
    }
}

1.2 confirm

confirm

// 
confirm('')
confirm('','')

// json
confirm({
    text:'',
    title:'',
    confirmText:'confirm',
    cancelText:'cancel',
    cancelBtn:false, // 
    theme:'default', // 
}).then((result)=>{
    if (result) {
        
    } else {

    }
})

// new 
confirm.new(...).then((result)=>{})

declare interface ConfirmerOpts {
    text?:string;
    title?:string;
    confirmText?:string;
    cancelText?:string;
    cancelBtn?:boolean;
    closeBtn?:boolean;
    parent?: DomEle;
    theme?: confirmStyle;
    onhide?(): void;
    onopen?(): void;
    customEl?: DomEle;
    customClass?: string;
    contentHtml?: boolean; // default false
    custom?(box: Ele, $: ToolStatic): void;
    type?: confirmType; // default confirmType.confirm
    onGetCloseMethod?(fn: void): void; //   new 
    clickConfirmClose?: boolean; // default true
    clickCancelClose?: boolean; // default true
    onconfirm?(): void;
    oncancel?(): void;
}

declare type confirmResultType = 'confirm' | 'cancel' | 'close';

declare type confirmType = 'confirm' | 'alert' | 'pop';

declare type confirmStyle = 'yellow2' | 'yellow' | 'default';

1.3 alert

alert

// 
alert('')
alert('','')

// json
alert({
    text:'',
    title:'',
    confirmText:'confirm',
    theme:'default', // 
}).then(()=>{

})

// new 
alert.new(...).then((result)=>{})

confirm

1.4 pop

// 
pop('')
pop('','')

// json
pop({
    text:'',
    title:'',
    confirmText:'confirm',
    cancelText:'cancel',
    cancelBtn:false, // 
    theme:'default', // 
}).then((result)=>{
    if (result) {
        
    } else {

    }
})

// new 
pop.new(...).then((result)=>{})

confirm

1.5 loading

// 
loading(text[,time]);
loading();
loading('...');
loading('...', 1000);

loading.close(); // 

// json
loading({
    text:'',
    time:1000
})

const close = loading.new(...);

declare interface LoadingerOpts {
    text?:string;
    time?:number|null;
    parent?: DomEle;
    backgroundOpacity?: number;
    onopen?(): void;
    onhide?(): void;
}

1.6 drag

let el = drag({
    el,
    parent,
    enableDrag = true,
    onClick = df,
    onSideChange = df,
    zIndex = 100,
    aside = false,
    preventDefault = true,
    reinitPosition = false,
    margin = 3, //  
})


el	dom/Ele/selector	--
parent	dom/Ele/selector	--	position
enableDrag	boolean	true
onClick	function	function(){}
aside	boolean	false
onSideChange	function	function(isLeft){}	aside=true
zIndex	number	100	z-index
preventDefault	boolean	true
margin	number/Array[top,right/bottom/left]	3
reinitPosition	boolean	false	orientationchange resize dragdrag

declare interface DragParameters {
    el: Ele|HTMLElement|string;
    parent?: Ele|HTMLElement|string;
    onClick?: (event: Event, endX: number, endY: number) => {};
    onSideChange?: (isLeft:boolean) => {};
    zIndex?: number;
    enableDrag?:boolean;
    delay?:number;
    aside?:boolean;
    preventDefault?:boolean;
    reinitPosition?:boolean;
    margin?:number|Array<number>;
    onDragStart?: (event: Event, x: number, y: number) => {};
    onDragMove?: (event: Event, x: number, y: number) => {};
    onDragEnd?: (event: Event, x: number, y: number) => {};
}

declare class Drag {
    constructor(parameters: DragParameters);
    setPosition(left: number, top: number): void;
    initPosition(): void;
    getParentSize(): {width: number, height: number};
    aside: boolean;
    sideLeft: boolean;
    enableDrag: boolean;
    preventDefault: boolean;
    left: number|string;
    top: number|string;
    margin: Array<number>;
}