@lexriver/dome 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,44 +1,44 @@
1
- import { DomeManipulator } from "./DomeManipulator";
2
- import { debounce } from 'ts-debounce';
3
- export class DomeComponent {
4
- constructor(attrs, children) {
5
- //this.init()
6
- this.attrs = attrs;
7
- this.children = children;
8
- this.scheduleUpdate = debounce(() => {
9
- this.updateAsync();
10
- }, 5);
11
- }
12
- //abstract render(attrs:Attrs, children:any):HTMLElement
13
- init() { }
14
- afterRender() {
15
- //console.log('afterRender(), el=', this.el)
16
- }
17
- // protected onMount(){
18
- // }
19
- async updateAsync() {
20
- //console.log('DomeComponent: calling native update() method!') //TODO: remove this
21
- if (!this.rootElement) {
22
- console.error('DomeComponent: unable to update, no rootElement', 'this=', this);
23
- return;
24
- }
25
- if (!this.rootElement.parentNode) {
26
- console.error('DomeComponent: unable to update, no parent for rootElement, not mounted?', 'this=', this);
27
- return;
28
- }
29
- //console.time('browser')
30
- const newEl = this.render();
31
- //console.log('DomeComponent: update() newEl=', newEl) //TODO: remove this
32
- //DomeManipulator.unhideElement(this.el) // if was null before
33
- await DomeManipulator.replaceAsync(this.rootElement, newEl, this.attrs.onHideAnimation, this.attrs.onShowAnimation);
34
- this.rootElement = newEl;
35
- //console.timeEnd('browser')
36
- this.afterUpdate();
37
- }
38
- afterUpdate() {
39
- }
40
- }
41
- DomeComponent.prototype['__DomeComponent'] = true;
42
- // export interface DomeComponent<Attrs>{
43
- // render:(attrs:Attrs)=>HTMLElement
44
- // }
1
+ import { DomeManipulator } from "./DomeManipulator";
2
+ import { debounce } from 'ts-debounce';
3
+ export class DomeComponent {
4
+ constructor(attrs, children) {
5
+ //this.init()
6
+ this.attrs = attrs;
7
+ this.children = children;
8
+ this.scheduleUpdate = debounce(() => {
9
+ this.updateAsync();
10
+ }, 5);
11
+ }
12
+ //abstract render(attrs:Attrs, children:any):HTMLElement
13
+ init() { }
14
+ afterRender() {
15
+ //console.log('afterRender(), el=', this.el)
16
+ }
17
+ // protected onMount(){
18
+ // }
19
+ async updateAsync() {
20
+ //console.log('DomeComponent: calling native update() method!') //TODO: remove this
21
+ if (!this.rootElement) {
22
+ console.error('DomeComponent: unable to update, no rootElement', 'this=', this);
23
+ return;
24
+ }
25
+ if (!this.rootElement.parentNode) {
26
+ console.error('DomeComponent: unable to update, no parent for rootElement, not mounted?', 'this=', this);
27
+ return;
28
+ }
29
+ //console.time('browser')
30
+ const newEl = this.render();
31
+ //console.log('DomeComponent: update() newEl=', newEl) //TODO: remove this
32
+ //DomeManipulator.unhideElement(this.el) // if was null before
33
+ await DomeManipulator.replaceAsync(this.rootElement, newEl, this.attrs.onHideAnimation, this.attrs.onShowAnimation);
34
+ this.rootElement = newEl;
35
+ //console.timeEnd('browser')
36
+ this.afterUpdate();
37
+ }
38
+ afterUpdate() {
39
+ }
40
+ }
41
+ DomeComponent.prototype['__DomeComponent'] = true;
42
+ // export interface DomeComponent<Attrs>{
43
+ // render:(attrs:Attrs)=>HTMLElement
44
+ // }
@@ -1,48 +1,48 @@
1
- import { ObservableValue } from "@lexriver/observable";
2
- import { Animation } from './Animation';
3
- export declare type CssClass = {
4
- [key: string]: boolean | ObservableValue<boolean>;
5
- } | string[] | string;
6
- export declare module DomeManipulator {
7
- function hideElementAsync(element: Element, animation?: Animation): Promise<void>;
8
- function unhideElementAsync(element: Element, animation?: Animation): Promise<void>;
9
- function insertAsFirstChildAsync(elementToInsert: Element, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
10
- function insertBeforeAsync(elementToInsert: Element, refElement: Element | null, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
11
- function insertAfterAsync(elementToInsert: Element, refElement: Element | null | undefined, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
12
- function insertByIndexAsync(elementToInsert: Element, index: number, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
13
- function replaceAsync(oldElement: Element, newElement: Element, animationHide?: Animation, animationShow?: Animation): Promise<Element>;
14
- function removeElementAsync(element: Element, animation?: Animation): Promise<void>;
15
- function forEachChildrenOf(element: Element, action: (child: ChildNode) => void): void;
16
- function removeAllChildrenAsync(element: Element, animation?: Animation): Promise<void>;
17
- function appendChildAsync(containerElement: Element, child: Element, animation?: Animation): Promise<void>;
18
- function appendChildrenAsync(containerElement: Element, children: Element | Element[] | DocumentFragment | Text | string | null | undefined, animation?: Animation): Promise<void>;
19
- function replaceAllChildrenAsync(containerElement: Element, childrenToInsert: Element | Element[] | DocumentFragment | Text | string | null | undefined, animationForHide?: Animation, animationForShow?: Animation): Promise<void>;
20
- function isInDom(el: Element | undefined): boolean;
21
- function isOnScreen(el: Element | undefined): boolean;
22
- function addCssClassAsync(element: Element, cssClassName: string, removeAfterMs?: number): Promise<void>;
23
- function addCssClassesAsync(element: Element, cssClassNames: string[], removeAfterMs?: number): Promise<void>;
24
- function removeCssClass(element: Element, cssClassName: string): void;
25
- function removeCssClasses(element: Element, cssClassNames: string[]): void;
26
- /**
27
- * set css classes by array ['class1', 'class2'] or
28
- * by object {class1:true, class2:false} or
29
- * by Observable<boolean> {class1:true, class2:myVarO} or
30
- * by string
31
- * this function will replace class attribute so all classes that are not in params will be removed
32
- * @param value
33
- * @param element
34
- */
35
- function setCssClasses(element: Element, value: CssClass): void;
36
- function setAttribute(element: Element, name: string, value: any): void;
37
- function hasFocus(el: Element): boolean;
38
- function scrollIntoView(element: Element, paddingFromTop?: number): void;
39
- const scrollToTop: () => void;
40
- function getCurrentScrollPosition(): number;
41
- function scrollToAsync(p: {
42
- pxFromTop?: number;
43
- pxFromLeft?: number;
44
- smooth?: boolean;
45
- msStep?: number;
46
- maxMsToWait?: number;
47
- }): Promise<void>;
48
- }
1
+ import { ObservableValue } from "@lexriver/observable";
2
+ import { Animation } from './Animation';
3
+ export declare type CssClass = {
4
+ [key: string]: boolean | ObservableValue<boolean>;
5
+ } | string[] | string;
6
+ export declare module DomeManipulator {
7
+ function hideElementAsync(element: Element, animation?: Animation): Promise<void>;
8
+ function unhideElementAsync(element: Element, animation?: Animation): Promise<void>;
9
+ function insertAsFirstChildAsync(elementToInsert: Element, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
10
+ function insertBeforeAsync(elementToInsert: Element, refElement: Element | null, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
11
+ function insertAfterAsync(elementToInsert: Element, refElement: Element | null | undefined, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
12
+ function insertByIndexAsync(elementToInsert: Element, index: number, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
13
+ function replaceAsync(oldElement: Element, newElement: Element, animationHide?: Animation, animationShow?: Animation): Promise<Element>;
14
+ function removeElementAsync(element: Element, animation?: Animation): Promise<void>;
15
+ function forEachChildrenOf(element: Element, action: (child: ChildNode) => void): void;
16
+ function removeAllChildrenAsync(element: Element, animation?: Animation): Promise<void>;
17
+ function appendChildAsync(containerElement: Element, child: Element, animation?: Animation): Promise<void>;
18
+ function appendChildrenAsync(containerElement: Element, children: Element | Element[] | DocumentFragment | Text | string | null | undefined, animation?: Animation): Promise<void>;
19
+ function replaceAllChildrenAsync(containerElement: Element, childrenToInsert: Element | Element[] | DocumentFragment | Text | string | null | undefined, animationForHide?: Animation, animationForShow?: Animation): Promise<void>;
20
+ function isInDom(el: Element | undefined): boolean;
21
+ function isOnScreen(el: Element | undefined): boolean;
22
+ function addCssClassAsync(element: Element, cssClassName: string, removeAfterMs?: number): Promise<void>;
23
+ function addCssClassesAsync(element: Element, cssClassNames: string[], removeAfterMs?: number): Promise<void>;
24
+ function removeCssClass(element: Element, cssClassName: string): void;
25
+ function removeCssClasses(element: Element, cssClassNames: string[]): void;
26
+ /**
27
+ * set css classes by array ['class1', 'class2'] or
28
+ * by object {class1:true, class2:false} or
29
+ * by Observable<boolean> {class1:true, class2:myVarO} or
30
+ * by string
31
+ * this function will replace class attribute so all classes that are not in params will be removed
32
+ * @param value
33
+ * @param element
34
+ */
35
+ function setCssClasses(element: Element, value: CssClass): void;
36
+ function setAttribute(element: Element, name: string, value: any): void;
37
+ function hasFocus(el: Element): boolean;
38
+ function scrollIntoView(element: Element, paddingFromTop?: number): void;
39
+ const scrollToTop: () => void;
40
+ function getCurrentScrollPosition(): number;
41
+ function scrollToAsync(p: {
42
+ pxFromTop?: number;
43
+ pxFromLeft?: number;
44
+ smooth?: boolean;
45
+ msStep?: number;
46
+ maxMsToWait?: number;
47
+ }): Promise<void>;
48
+ }