Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResizeObserver + Custom Elements</title>
</head>
<body>
​
<responsive-container id="container1">
  <div>move the &lt;-- frame around or click-me</div>
</responsive-container>
  
<responsive-container small="400px" id="container2">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
  </ul>
</responsive-container>
 
<div id="container3">
  <div>right nav</div>
</div>
​
<script>  
const ResizeObservableElement = (superclass) => class extends superclass {  
  static get observer() {
    if (!this._observer) {
      // Set up a single RO for all elements that inherit from this class. This
      // has much better performance than creating a separate RO in every
      // element instance. See https://goo.gl/5uLKZN.
      this._observer = new ResizeObserver(entries => {
        for (const entry of entries) {
          // Custom event works for both node.onresize and node.addEventListener('resize') cases.
          const evt = new CustomEvent('resize', {detail: entry, bubbles: false})
          entry.target.dispatchEvent(evt);
        }
      });
    }
    return this._observer;
  }
​
  constructor() {
    super();
    this.constructor.observer.observe(this);
  }
};
​
class ResponsiveContainer extends ResizeObservableElement(HTMLElement) {  
  static get is() { return 'responsive-container'; }
  get mode() { return this.getAttribute('mode'); }
  set mode(val) {
    val ? this.setAttribute('mode', val) : this.removeAttribute('mode');
  }
  constructor() {
    super();
    this.smallSize = parseInt(this.getAttribute('small')) || 400;
    // Component responds to it's own resizes.
    this.addEventListener('resize', e => {
      const w = e.detail.contentRect.width;
      this.mode = w <= this.smallSize ? 'small' : 'large';
    });
  }
}
​
customElements.define(ResponsiveContainer.is, ResponsiveContainer);
​
​
// Main page can subscribe to component's resize updates too.
document.querySelector('#container2').addEventListener('resize', e => {
  console.log(e.detail.contentRect.width, e.detail.contentRect.height);
});
  
​
// Just a tester to see how component responds.
const c = document.querySelector('#container1');
c.addEventListener('click', e => {
  c.classList.add('off');
  setTimeout(() => c.classList.remove('off'), 2000);
});
</script>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers