Skip to content

Instantly share code, notes, and snippets.

@justinfagnani justinfagnani/example.js
Last active Oct 28, 2018

Embed
What would you like to do?
the-platform with the platform
import {LitElement, html} from 'lit-element';
import {UseWindowSize} from './useWindowSize.js';
class extends UseWindowSize()(LitElement) {
render() {
return html`
<p>
width: ${window.innerWidth}
height: ${window.innerHeight}
</p>
`;
}
}
import throttle from 'lodash/throttle';
const onResize = Symbol();
export const UseWindowSize = (options = {}) => (base) => {
const { throttleMs = 100 } = options;
return class exrends base {
[onResize] = throttle(() => {
// We don't have a standard platform way to request a re-render,
// but any base class implementing requestUpdate() will work
this.requestUpdate();
}, throttleMs););
connectedCallback() {
if (super.connectedCallback) super.connectedCallback();
window.addEventListener('resize', this[onResize]);
}
disconnectedCallback() {
if (super.connectedCallback) super.disconnectedCallback();
window.removeEventListener('resize', this[onResize]);
}
}
}
@uhop

This comment has been minimized.

Copy link

uhop commented Oct 27, 2018

useWindowSize.js:7 — exrendsextends

@SanderElias

This comment has been minimized.

Copy link

SanderElias commented Oct 28, 2018

typo in useWIndowsSize L21, should be:

      if (super.disconnectedCallback) super.disconnectedCallback();

I like the example a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.