Elevator

by Ting-Yuan Chang

HTML

<div class="btnPanel">
  <div class="btn up">up</div>
  <div class="btn down">down</div>
</div>
<div class="myList">
  <ul>
    <li>1F</li>
    <li>2F</li>
    <li>3F</li>
    <li>4F</li>
    <li>5F</li>
    <li>6F</li>
    <li>7F</li>
    <li>8F</li>
    <li>9F</li>
    <li>10F</li>
  </ul>
</div>

SCSS

.btnPanel {
  position: absolute;
  left: 250px;
  
  .btn {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: pink;
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    &.up {
      top: 0;
    }
    &.down {
      top: 60px;
    }
  }
}

.myList {
  width: 200px;
  height: 400px;
  background: lightblue;
  overflow: hidden;
  
  ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    
    $itemHeight: 80px;
    $itemMargin: 10px;
    li {
      background: rgba(255, 255, 255, 0.5);
      margin: $itemMargin;
      height: $itemHeight;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
  }
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

var pressStatus = {
	timestamp: new Date().getTime(),
  pressed: false,
  animating: false
};

$('.up').on("pointerdown", function() {
  pressStatus.timestamp = new Date().getTime();
  pressStatus.pressed = true;

  scrollList('up', pressStatus.timestamp);
})

$('.down').on("pointerdown", function() {
  pressStatus.timestamp = new Date().getTime();
  pressStatus.pressed = true;

  scrollList('down', pressStatus.timestamp);
})

$('.up, .down').on("pointerup", function() {
	pressStatus.timestamp = new Date().getTime();
  pressStatus.pressed = false;
});

function scrollList(direction, pressTime) {
	var itemHeight = 100;
	var oldMarginTop = $('.myList > ul').css('margin-top');
	if(direction === 'down') {
  	if(parseInt(oldMarginTop) - itemHeight >= -$('.myList > ul').height() + $('.myList').height()) {
  		oldMarginTop = parseInt(oldMarginTop) - itemHeight + 'px';
    }
  }
  else if(direction === 'up') {
  	if(parseInt(oldMarginTop) + itemHeight <= 0) {
  		oldMarginTop = parseInt(oldMarginTop) + itemHeight + 'px';
    }
  }
  if(pressStatus.animating === false) {
    pressStatus.animating = true;
    checkButtonShown(parseInt(oldMarginTop));
    $('.myList > ul').animate({
      'margin-top': oldMarginTop
    }, 200, function() {
    	pressStatus.animating = false;
      if(pressStatus.pressed === true && pressStatus.timestamp === pressTime) {
        scrollList(direction, pressTime);
      }
    });
  }
}

function checkButtonShown(marginTop) {
  if (marginTop === 0) {
  	pressStatus.pressed = false;
    $('.up').hide();
  }
  else {
    $('.up').show();
  }
  
  if (marginTop === -$('.myList > ul').height() + $('.myList').height()) {
  	pressStatus.pressed = false;
    $('.down').hide();
  }
  else {
    $('.down').show();
  }
}

checkButtonShown(0);