Toolbar - VanillaJS

Toolbar for schedulle and crew teaming

by Lio Fleishman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<div  id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="toolbar" id="toolbar" draggable="true" ondragstart="drag(event)">
  <span class="controls isup" id="controls">
	<div class="logoControls fa fa-wrench"></div>
	<div class="arrow fa fa-angle-up"></div>
	</span>
  <span class="toolBarItems" id="toolBarItems">
		<ul>
			<li class="fa fa-clock-o listItem"></li>
			<li class="fa fa-user listItem"></li>
			<li class="fa fa-list-alt listItem">
				<div class="popup">
				<div class="popLabel"></div>
			<div class="radioButtonsContainer">
			<div class="radioContainer">
					<input type="radio" name="radiopt" id="radio1" value="Daily">
					<label for="radio1">Daily</label>
			</div>
			<div class="radioContainer">
					<input type="radio" name="radiopt" id="radio2" value="Two days">
					<label for="radio2">Two Days</label>
			</div>
			<div class="radioContainer">
					<input type="radio" name="radiopt" id="radio3" value="Weekly">
					<label for="radio3">Weekly</label>
			</div>
			</div>
				</div>
			</li>
			<li class="fa fa-calendar listItem"></li>
		</ul>
	</span>
</div>
</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
		var d1 =  document.getElementById('div1');
    var d2 =  document.getElementById('div2');
function allowDrop(ev) {
    ev.preventDefault();
		d1.className = " graythis";
    d2.className = " graythis";
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    d1.className = " ";
    d2.className = " ";
}
</script>

SCSS

$toolsColor: #F36666;
$bgColor: #fff;
$menuIsHover: #4a96f6;
$menuItemsActive: #F76C6C;
$shadowColor: #ccc;
$popUpLettersColor: #000;

@mixin box-shadow($top: 0, $left:10px, $blur:15px, $color:$shadowColor, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

.toolbar {
  width: 45px;
  float: right;
  //position: absolute;
  left: 250px;
  .controls {
    width: 45px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
		background: $bgColor;
		transition: all .5s ease;
		&:hover {
			background: $toolsColor;
		}
    &.isdown {
      overflow: hidden;
      .arrow {
        transform: rotate(180deg);
      }
    }
  }
  .logoControls {
    margin: 5px;
  }
  .arrow {
    margin: 1px;
    transition: all .2s ease;
  }
  .toolBarItems {
    transition: all .5s ease;
    display: block;
		@include box-shadow();
    background: $bgColor;
    ul {
      padding: 0;
      margin: 0 auto;
      text-align: center;
    }
    li {
      list-style-type: none;
      position: relative;
      padding: 10px 0;
      font-size: 25px;
      width: 45px;
      cursor: pointer;
			transition: all .3s ease;
      &:hover {
        background: $menuIsHover;
        color: $bgColor;
      }
      &.active {
        background: $menuItemsActive;
        color: $bgColor;
        .popup {
          opacity: 1;
					visibility:visible;
        }
      }
      .popup {
        position: absolute;
        width: 130px;
        height: 130px;
        background: $bgColor;
				@include box-shadow();
        right: 48px;
        top: 0;
        transition: all .4s ease;
        opacity: 0;
        color: $popUpLettersColor;
        font-family: 'Helvetica Neue', sans-serif;
        font-size: 16px;
  ...

JavaScript

//new toolbar menu for gantt

let toolBar = document.getElementById('toolbar');
let toolBarItems = document.getElementById('toolBarItems');
let controls = document.getElementById('controls');
let listItem = document.getElementsByClassName('listItem');

//toogle animation on/off
let toolToogle = function(e) {
	e.stopPropagation();
  if (controls.className.indexOf("isup") > -1) {
    controls.className = 'controls isdown';
    toolBarItems.className = 'toolBarItems isdown';
    toolBar.style.height = '26px';
  } else {
    toolBarItems.className = 'toolBarItems';
    controls.className = 'controls isup';
    toolBar.style.height = '';
  }
}

controls.addEventListener('click', toolToogle, true);

//object to check if there is a popup
var openPopUp = function(e) {
	e.stopPropagation();

  var popObj = {
    clock: {
      popup: true
    },
    user: {
      popup: true
    },
    list: {
      popup: true
    },
    calendar: {
      popup: true
    }
  };

//test to check popups
  for (var pep in popObj) {
    if (popObj[pep].popup != true) {
      console.error('	there is an error in:', pep);
    }
  }
  var myClassName = this.className;

//loop thru event.targets looking for class "active"
  for (var i = 0; i < e.target.parentElement.children.length; i++) {
			//if (e.target.parentElement.children[i].classList.contains('active')) {
      //e.target.parentElement.children[i].classList.remove('active');
			//}
  }
  if (e.target.classList.contains('active')) {
    e.target.classList.remove('active');
  } else {
    e.target.classList.add('active');
  }

}

for (i = 0; i < listItem.length; i++) {
  listItem[i].addEventListener('click', openPopUp, false);
}