Traffic layer - JS

by Lio Fleishman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="bigSwitch">
   <div class="smallSwitch"></div>
</div>

<div id="trafficContainer">
  <div class="trafficLabel">Traffic Layer</div>
  <div class="trafficSpeed">
    <p>Fast</p>
    <div class="trafficColors"></div>
    <p>Slow</p>
  </div>
  <div class="trafficRefresh fa fa-refresh"></div>
</div>

SCSS

$containerWidth: 413px;
$containerHeight: 29px;
$containerPadding: 4px;
$titlePadding: 5px;
$marginLeft: 40px;
$switchWidth: 35px;
$switchHeight: 21px;
$marginSwitch: 2px;
$borderRadiusSwitch: 3px;

/* switch */
.bigSwitch {
    width: $switchWidth;
    height: $switchHeight;
    background-color: #AEB3B0;
    border-radius: $borderRadiusSwitch;
    display: inline-block;
    margin: 3px 22px;
    &.active {
      background-color: #41cc7b;

      .smallSwitch {
        transform: translateX(14px);
      }
    }
    .smallSwitch {
      border-radius: $borderRadiusSwitch;
      width: 50%;
      height: $switchHeight - ($marginSwitch * 2);
      background-color: #e2e8e4;
      display: block;
      margin: $marginSwitch;
      box-sizing: border-box;
      transition: all .5s;
      pointer-events: none;
    }
    &:hover {
      cursor:pointer;
    }
  }


/* traffic container */
#trafficContainer {
	font-family: 'helvetica neue', arial, sans-serif;
  padding: $containerPadding;
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  height: $containerHeight;
  width: $containerWidth;
  box-shadow: 0 4px 15px rgba(121,121,121,0.5);
  background-color: rgba(232, 232, 232,0.8);
	transition: opacity .6s;
	
	&.ghoston {
		opacity: 0;
	}
	&.ghostoff {
		opacity: 1;
	}
	
  .trafficLabel {
    margin: 3px 20px;
  }
  .trafficSpeed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 20px;
   }
   .trafficColors {
     width: 90px;
     height: 10px;
     margin: 3px 20px;
     background: linear-gradient(90deg, red, green);
   }
   .fa-refresh:before {
    margin:0 18px;
}
}

JavaScript

/* Switch for the map with traffic */

var moveSwitch = function(switchEl) {
  var string = ' active';
  var substring = switchEl.target.className;
  var bigS = switchEl.target;
	var trafficCont = document.getElementById('trafficContainer');

  if (substring.indexOf(string) > -1) {
    // is NOT active
    switchEl.target.className = 'bigSwitch';
		trafficCont.setAttribute("class", "ghostoff");
  } else {
    // is active
    switchEl.target.className += ' active';
		trafficCont.setAttribute("class", "ghoston");
  }
}

var switchEl = document.getElementsByClassName('bigSwitch');

for (var i = 0; i < switchEl.length; i++) {
  switchEl[i].addEventListener('click', moveSwitch);
}