The lit-widget from andyduke

Targets: FindCache

Clear findCache in disconnect.

Add the ability to use a closure as a "debounce" and "throttle" value in the onEvent decorator

Replace debounce and throttle handling in EventsController.createHandler:

if (event.debounce) {
-  handler = debounce(handler, event.debounce);
+  handler = debounce(handler, (typeof event.debounce) == 'function' ? event.debounce.call(this.host, this.host) : event.debounce);
}```
```js
} else if (event.throttle) {
-  handler = throttle(handler, event.throttle);
+  handler = throttle(handler, (typeof event.throttle) == 'function' ? event.throttle.call(this.host, this.host) : event.throttle);
}

Refactor: extract events from LitWidget to EventsController

lit-widget/packages/lit-widget/src/lit-widget.js

Lines 82 to 148 in 6d56d58

    
           connectedCallback() { 
        
             super.connectedCallback(); 
        
             setTimeout(() => this._attachEvents()); 
        
           } 
        
           disconnectedCallback() { 
        
             super.disconnectedCallback(); 
        
             setTimeout(() => this._detachEvents()); 
        
           } 
        
           get _events() { 
        
             const klass = Object.getPrototypeOf(this).constructor; 
        
             return klass.events || []; 
        
           } 
        
           _attachEvents() { 
        
             for (const event of this._events) { 
        
               if (event.debounce && event.throttle) { 
        
                 throw new Error(`[LitWidget "${$this.tagName.toLowerCase()}"] For the event "${event.event}", debounce and throttle are specified, you can specify only one thing.`); 
        
               } 
        
               let targetName; 
        
               let selector; 
        
               if (event.target instanceof Object) { 
        
                 selector = event.target['selector']; 
        
               } else { 
        
                 targetName = event.target; 
        
               } 
        
               if (!targetName && !selector) { 
        
                 throw new Error(`[LitWidget "${$this.tagName.toLowerCase()}"] Invalid event target: "${event.target}".`); 
        
               } 
        
               const target = this.findTarget(this.tagName, /*event.target*/targetName, selector); 
        
               if (target) { 
        
                 let handler = event.handler; 
        
                 if (typeof handler === 'string') handler = this[handler]; 
        
                 event._handler = (...args) => handler.apply(this, args); 
        
                 if (event.debounce) { 
        
                   event._handler = debounce(event._handler, event.debounce); 
        
                 } else if (event.throttle) { 
        
                   event._handler = throttle(event._handler, event.throttle); 
        
                 } 
        
                 if (event['wrapper'] != null && typeof event['wrapper'] !== 'undefined') { 
        
                   event._handler = event.wrapper.call(this, event._handler, this); 
        
                 } 
        
                 target.addEventListener(event.event, event._handler); 
        
               } else { 
        
                 throw new Error(`[LitWidget "${this.tagName.toLowerCase()}"] Event target "${event.target}" not found.`); 
        
               } 
        
             } 
        
           } 
        
           _detachEvents() { 
        
             for (const event of this._events) { 
        
               if (!!event._handler) { 
        
                 target.addEventListener(event.event, event._handler); 
        
               } 
        
             } 
        
           }

Events: shadowRoot observer

Create shadowRoot observer - attach/detach events handlers

andyduke / lit-widget Goto Github PK

lit-widget's People

Contributors

Watchers

lit-widget's Issues

Targets: FindCache

Add the ability to use a closure as a "debounce" and "throttle" value in the onEvent decorator

Refactor: extract events from LitWidget to EventsController

Events: shadowRoot observer

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	connectedCallback() {
	super.connectedCallback();

	setTimeout(() => this._attachEvents());
	}

	disconnectedCallback() {
	super.disconnectedCallback();

	setTimeout(() => this._detachEvents());
	}

	get _events() {
	const klass = Object.getPrototypeOf(this).constructor;
	return klass.events \|\| [];
	}

	_attachEvents() {
	for (const event of this._events) {
	if (event.debounce && event.throttle) {
	throw new Error(`[LitWidget "${$this.tagName.toLowerCase()}"] For the event "${event.event}", debounce and throttle are specified, you can specify only one thing.`);
	}

	let targetName;
	let selector;

	if (event.target instanceof Object) {
	selector = event.target['selector'];
	} else {
	targetName = event.target;
	}

	if (!targetName && !selector) {
	throw new Error(`[LitWidget "${$this.tagName.toLowerCase()}"] Invalid event target: "${event.target}".`);
	}

	const target = this.findTarget(this.tagName, /event.target/targetName, selector);
	if (target) {
	let handler = event.handler;
	if (typeof handler === 'string') handler = this[handler];

	event._handler = (...args) => handler.apply(this, args);

	if (event.debounce) {
	event._handler = debounce(event._handler, event.debounce);
	} else if (event.throttle) {
	event._handler = throttle(event._handler, event.throttle);
	}

	if (event['wrapper'] != null && typeof event['wrapper'] !== 'undefined') {
	event._handler = event.wrapper.call(this, event._handler, this);
	}

	target.addEventListener(event.event, event._handler);
	} else {
	throw new Error(`[LitWidget "${this.tagName.toLowerCase()}"] Event target "${event.target}" not found.`);
	}
	}
	}

	_detachEvents() {
	for (const event of this._events) {
	if (!!event._handler) {
	target.addEventListener(event.event, event._handler);
	}
	}
	}