Component State Switching

• Read an explanation in the repository
• View an example using cards!

What is this?

For some initial context, read the discussion on this Github issue.

The component above has the following markup:

<div class="component-test" data-sauce-stateful-component>
  <state media="(min-width: 500px)" value="red"></state>
  <state media="(min-width: 700px)" value="blue"></state>
  <state media="(min-width: 900px)" value="green"></state>
  <state media="(min-width: 1100px)" value="green rounded"></state>
  Hello, World
</div>

When resizing the browser window, the box should...

1. have a grey border when min-width < 500px
2. have a red border when min-width >= 500px
3. have a blue border when min-width >= 700px
4. have a green border when min-width >= 900px
5. have a green, rounded border when min-width >= 1100px

To find out more about how this works, have a look at the repository's README file.

Here's the entire minified script that powers this. Right now it's 2.2kB, before compression:

class SauceComponent{constructor(element){this.element=element}get data(){return this.element.dataset}setState(value){this.data.sauceState=value}unsetState(){delete this.data.sauceState}}class SauceStateController{constructor(controller){this.components=[];this.controller=controller;this.initialized=false;this.states=[];this.initComponents();this.initStates();this.setInitialState()}get componentElements(){if(this.controller.tagName==='STATE-CONTROLLER'){return Array.from(this.controller.parentNode.querySelectorAll(`:scope > .${this.controller.getAttribute('for')}`))}return[this.controller]}get stateElements(){return Array.from(this.controller.querySelectorAll(':scope > state'))}initComponents(){this.components=this.componentElements.map((element)=>new SauceComponent(element))}initStates(){this.states=this.stateElements.map((element,index)=>new SauceState({controller:this,element,index}))}cascadeState(fromIndex){if(!this.initialized){return}this.unsetState();this.invokeCallbackForState(fromIndex-1)}invokeCallbackForState(index){if(index<0){return}this.states[index].cascadeState()}setInitialState(){const states=Array.from(this.states);states.reverse().forEach((state)=>{if(this.initialized){return}this.initialized=true;state.cascadeState()})}setState(value){if(!this.initialized){return}this.components.forEach((component)=>component.setState(value))}unsetState(){this.components.forEach((component)=>component.unsetState())}}class SauceState{constructor({controller,element,index}){this.controller=controller;this.element=element;this.index=index;this.query=null;this.addEvent()}get media(){return this.element.getAttribute('media')}get value(){return this.element.getAttribute('value')}addEvent(){this.query=window.matchMedia(this.media);this.query.addEventListener('change',(event)=>this.applyState(event,this));this.cascadeEvent=new Event('change',{target:this.query})}applyState(event=this.query){if(event.target.matches){this.controller.setState(this.value);return}this.controller.cascadeState(this.index)}cascadeState(){this.query.dispatchEvent(this.cascadeEvent)}}document.querySelectorAll('[data-sauce-stateful-component], state-controller').forEach((controller)=>new SauceStateController(controller));