Experimental Collector ServerMaps - Stand divs up

Change class name on click in jQuery

by mrjordy

HTML

<script src="https://unpkg.com/rematrix"></script>
<div class='zoomWrapper'>
  <a href='#' id='toggle-rack-face'>Toggle rack face</a>
</div>

<div class='nav-controls'>
  <a href='#' id="panLeft"><img width='30px' height='30px' src='http://falconwood.us/wolfy/ServerFarmMaps/iconfinder_left-arrow-back_2931162.png'></a>
  <a href="#" id='panRight'><img width='30px' height='30px' src='http://falconwood.us/wolfy/ServerFarmMaps/iconfinder_right-forward-arrow_2931159.png'></a>
  <a href='#' id='panForward'><img width='30px' height='30px' src='http://falconwood.us/wolfy/ServerFarmMaps/iconfinder_up-top-arrow_2931161.png'></a>
   <a href='#' id='panBack'><img width='30px' height='30px' src='http://falconwood.us/wolfy/ServerFarmMaps/iconfinder_down-bottom-arrow_2931160.png'></a>
   <a href='#' id='turnLeft'><img width='30px' height='30px' src='http://falconwood.us/wolfy/ServerFarmMaps/iconfinder_reload-refresh-repeat-arrow_2937372.png'></a>
    <a href='#' id='turnRight'><img width='30px' height='30px' src='http://falconwood.us/wolfy/ServerFarmMaps/iconfinder_reload-refresh-arrow-repeat_2937371.png'></a>
  <div class='reset-button'>
    Reset map <br />
    <a><img src='http://falconwood.us/wolfy/ServerFarmMaps/icons8-reset-64.png'></a>
  </div>
</div>


<div class='outerContainer'>

  <div id='serverMap'>
  
  <!--Righthand column -->
    <div id='RR01' title='RR01' data-matrix3d='matrix3d(1.03722e-14, -1.73648, -9.84808, 0, 10, 1.38228e-15, 1.02886e-14, 0, -4.25314e-17, -0.984808, 0.173648, 0, 1040, 515.749, 1093.14, 1)' data-back-matrix3d='matrix3d(-8.88179e-15, 1.73648, 9.84808, 0, -10, 1.81154e-15, -1.17559e-14, 0, -2.72308e-16, -0.984808, 0.173648, 0, -995.94, 40.749, 1093.14, 1)' class='rack'>
    </div>
    <div id='RR02' title='RR02' data-matrix3d='matrix3d(1.03722e-14, -1.73648, -9.84808, 0, 10, 1.38228e-15, 1.02886e-14, 0, -4.25314e-17, -0.984808, 0.173648, 0, 770, 515.749, 1093.14, 1)' data-back-matrix3d='matrix3d(-8.88179e-15, 1.73648, 9.84808, 0, -10,...

CSS

#serverMap {
  /* transition: transform-origin 0.5s, transform 5s; */
  
/*   transition-property: transform-origin, transform;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 0s; */

transition-property: transform-origin, transform;
  transition-duration: 0s, 0.75s;
  transition-delay: 0s, 0s;
  /* transition-timing-function: ease-in; */
}

.test {
  background-color: blue;
}

.zoomWrapper {
  display: none;
  position: absolute;
  z-index: 1000;
  
}

#panLeft, #panRight, #panForward, #panBack, #turnLeft, #turnRight, .reset-button {
    position: absolute;
    z-index: 999;
}

#panLeft {
  left: -30px;
  top: 275px;
}

#panRight {
  left: 620px;
  top: 275px;
}

#panForward {
  left: 280px;
  top: -40px;
}

#panBack {
  top: 610px;
  left: 280px;
}

#turnLeft {
 left: -30px;
  top: 235px;
}

#turnRight {
  left: 620px;
  top: 235px;
}

.reset-button {
  text-align: center;
  width: 40px;
  right: -50px;
  bottom: -50px;
}

.reset-button:hover {
  cursor: pointer;
}

.outerContainer {
  height: 600px;
  width: 600px;
  overflow-y: hidden;
  overflow-x: hidden;
  border: 1px solid black;
  position: relative;
  top: 40px;
  left: 40px;
}

.nav-controls {
  position: absolute;
  height: 600px;
  width: 600px;
  top: 40px;
  left: 40px;
}

.rack {
  background-color: magenta;
  transform: rotateX(80deg)
}

#RR01 {
  position: absolute;
  width: 36px;
  height: 24px;
  left: 420px;
  top: 176px;
  z-index: 999;
}

#RR02 {
  position: absolute;
  width: 36px;
  height: 24px;
  left: 420px;
  top: 202px;
  z-index: 999;
}

#RR03 {
  position: absolute;
  width: 36px;
  height: 24px;
  left: 420px;
  top: 228px;
  z-index: 999;
}

#RR04 {
  position: absolute;
  width: 36px;
  height: 24px;
  left: 420px;
  top: 255px;
  z-index: 999;
}

#RR05 {
  position: absolute;
  width: 25px;
  height: 24px;
  left: 420px;
  top: 290px;
  z-index: 999;
}

#RR06 {
  position: absolute;
  width: 25px;
  height: 24px;
  left: 420px;
  top: 317px;
  z-index: 999;
}

#RR07 {
 ...

JavaScript

$('#serverMap').css('transform', 'matrix(1, 0, 0, 1, 0, 0)')

$('#panLeft').click(function(e) {
  pan(400, true)
})
$('#panRight').click(function(e) {
  pan(-400, true)
})

$('#panForward').click(function(e) {
	pan(150, false)
})

$('#panBack').click(function(e) {
	pan(-150, false)
})

function pan(pixels, xAxis) {
  $('#rack-face').removeClass('active') //hide rackface
  resetRackFaceFront();

  var translate = xAxis ? Rematrix.translateX(pixels) : Rematrix.translateY(pixels)
  var oldMatrix = getComputedStyle(document.getElementById('serverMap')).transform
  var transform = Rematrix.fromString(oldMatrix)
  var product = Rematrix.multiply(translate, transform)
  var stringified = Rematrix.toString(product)
  $('#serverMap').css('transform', stringified)
}


$('#turnLeft').click(function(e) {
	turn(90)
})

$('#turnRight').click(function(e) {
	turn(-90)
})

function turn(degrees) {
  $('#rack-face').removeClass('active') //hide rackface
  resetRackFaceFront();

  var transform = Rematrix.fromString(getComputedStyle(document.getElementById('serverMap')).transform)
  var turn = Rematrix.rotateZ(degrees);

  var product = [transform, turn].reduce(Rematrix.multiply)
  $('#serverMap').css('transform', Rematrix.toString(product))
  //$('#serverMap').css('transform', 'rotateZ(90deg) rotateY(80deg) scale(10)')
}


$('.rack').click(function(e) {
  var matrix = $(e.target).data('matrix3d')

  //$('#serverMap').css('transform-origin', coords);
  //$('#serverMap').css('transform', 'rotateX(80deg) scale(10) translate(0px, 111px)')
  if ($('#rack-face').hasClass('active')) {
    $('#rack-face').removeClass('active')
    setTimeout(function() {
      $('#rack-face').addClass('active')
    }, 750)
  } else {
    $("#rack-face").addClass('active')
  }

  $('#serverMap').css('transform', matrix)
  //$('#serverMap').css('transform', 'matrix(2, 0, 0, 2, 0, 0)')
  
  var id = $(e.target).attr('id')
  $('#rack-face').data('active-rack', id)
  populateRackData(id)
  
 ...