state handling

Posted on by oko

CSS:

.state-box{
width: 200px;     
height: 200px;     
display: inline-block;     
border: 1px solid; 
} 
.state-box:nth-of-type(1){     
background: blue 
} 
.state-box:nth-of-type(2){     
background: green 
} 
.state-box:nth-of-type(3){     
background: red 
} 
.active{     
transform: rotate(5deg) 
}

javascript:

// the Bees Knees:

const state_history = []

function set_state( state ){
   if( state_history.indexOf( state ) > -1 ){
           console.log( state_history.indexOf( state ) )
       state_history.splice( state_history.indexOf( state ), 1 )
   }
   state_history.push( state )
 state_vis.innerHTML = JSON.stringify( state_history )
 }
 function get_state( state ){
     return state_history[ state_history.length - 1 ]
 }
 function pop_state(){
     state_history.pop()
       state_vis.innerHTML = JSON.stringify( state_history )
 }
 // the Nuts and Bolts:

const state_vis = document.createElement('div')
 document.body.appendChild( state_vis )
 window.addEventListener('keyup', e => {
     if( e.keyCode === 27 ){
         pop_state()
         render_popups()
         return true
     }
 handlers[ get_state() ]()
 })
 const render_popups = () => {
 for( const box of document.querySelectorAll('.state-box')){
box.classList.remove('active') } boxes[ get_state() ].classList.add('active')
 }
 const boxes = {}
 boxes.zebra = document.createElement('div')
 boxes.zebra.classList.add('state-box')
 boxes.zebra.addEventListener('click', () => {
     set_state('zebra')
     render_popups()
 })
 boxes.cat = document.createElement('div')
 boxes.cat.classList.add('state-box')
 boxes.cat.addEventListener('click', () => {
     set_state('cat')
     render_popups()
 })
 boxes.dog = document.createElement('div')
 boxes.dog.classList.add('state-box')
 boxes.dog.addEventListener('click', () => {
     set_state('dog')
     render_popups()
 })
 document.body.appendChild( boxes.zebra )
 document.body.appendChild( boxes.cat )
 document.body.appendChild( boxes.dog )
 const pop_text = ( text, key ) => {
 const pop = document.createElement('div') pop.classList.add('pop') pop.innerHTML = text + ' ' + key + '!!!' document.body.appendChild( pop ) setTimeout(() => {     pop.remove() }, 3000 )
 }
 const handlers = {
     dog: e => {
         pop_text('dog state', e.keyCode )
     },
     cat: e => {
         pop_text('cat state', e.keyCode )
     },
     zebra: e => {
         pop_text('zebra state', e.keyCode )
     }
 }
oko
friend