Skip to content

Instantly share code, notes, and snippets.

@justinfagnani
Last active October 28, 2018 06:23
Show Gist options
  • Save justinfagnani/07685707ce9f6c9c3f41c2ac1ac90a7c to your computer and use it in GitHub Desktop.
Save justinfagnani/07685707ce9f6c9c3f41c2ac1ac90a7c to your computer and use it in GitHub Desktop.
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
Copy link

uhop commented Oct 27, 2018

useWindowSize.js:7 — exrendsextends

@SanderElias
Copy link

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