Custom input number

custom-input-number.markdown

Custom input number

A Pen by Dmitry on CodePen.

License.

index.haml

.ctrl
  .ctrl__button.ctrl__button--decrement –
  .ctrl__counter
    %input.ctrl__counter-input{type: "text", value: "0", maxlength: "10"}
    .ctrl__counter-num 0
  .ctrl__button.ctrl__button--increment +

script.js

(function() {
  'use strict';

  function ctrls() {
    var _this = this;

    this.counter = 0;
    this.els = {
      decrement: document.querySelector('.ctrl__button--decrement'),
      counter: {
        container: document.querySelector('.ctrl__counter'),
        num: document.querySelector('.ctrl__counter-num'),
        input: document.querySelector('.ctrl__counter-input')
      },
      increment: document.querySelector('.ctrl__button--increment')
    };

    this.decrement = function() {
      var counter = _this.getCounter();
      var nextCounter = (_this.counter > 0) ? --counter : counter;
      _this.setCounter(nextCounter);
    };

    this.increment = function() {
      var counter = _this.getCounter();
      var nextCounter = (counter < 9999999999) ? ++counter : counter;
      _this.setCounter(nextCounter);
    };

    this.getCounter = function() {
      return _this.counter;
    };

    this.setCounter = function(nextCounter) {
      _this.counter = nextCounter;
    };

    this.debounce = function(callback) {
      setTimeout(callback, 100);
    };

    this.render = function(hideClassName, visibleClassName) {
      _this.els.counter.num.classList.add(hideClassName);

      setTimeout(function() {
        _this.els.counter.num.innerText = _this.getCounter();
        _this.els.counter.input.value = _this.getCounter();
        _this.els.counter.num.classList.add(visibleClassName);
      }, 100);

      setTimeout(function() {
        _this.els.counter.num.classList.remove(hideClassName);
        _this.els.counter.num.classList.remove(visibleClassName);
      }, 200);
    };

    this.ready = function() {
      _this.els.decrement.addEventListener('click', function() {
        _this.debounce(function() {
          _this.decrement();
          _this.render('is-decrement-hide', 'is-decrement-visible');
        });
      });

      _this.els.increment.addEventListener('click', function() {
        _this.debounce(function() {
          _this.increment();
          _this.render('is-increment-hide', 'is-increment-visible');
        });
      });

      _this.els.counter.input.addEventListener('input', function(e) {
        var parseValue = parseInt(e.target.value);
        if (!isNaN(parseValue) && parseValue >= 0) {
          _this.setCounter(parseValue);
          _this.render();
        }
      });

      _this.els.counter.input.addEventListener('focus', function(e) {
        _this.els.counter.container.classList.add('is-input');
      });

      _this.els.counter.input.addEventListener('blur', function(e) {
        _this.els.counter.container.classList.remove('is-input');
        _this.render();
      });
    };
  };

  // init
  var controls = new ctrls();
  document.addEventListener('DOMContentLoaded', controls.ready);
})();

style.sass

*
  user-select: none
  box-sizing: border-box

html,
body
  height: 100%
  
body
  display: flex
  align-items: center
  justify-content: center
  background-color: #EDF1F6
  appearance: none !important
  backface-visibility: hidden
  -webkit-font-smoothing: antialiased
  -moz-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  -webkit-overflow-scrolling: touch
  text-rendering: optimizelegibility
  
.ctrl
  flex: 0 0 auto
  display: flex
  align-items: center
  border-bottom: 1px solid #D5DCE6
  background-color: #fff
  border-radius: 5px
  font-size: 30px
  
  &__counter
    position: relative
    width: 200px
    height: 100px
    color: #333C48
    text-align: center
    overflow: hidden
    
    &.is-input
      .ctrl__counter-num
        visability: hidden
        opacity: 0
        transition: opacity 100ms ease-in
    
      .ctrl__counter-input
        visability: visible
        opacity: 1
        transition: opacity 100ms ease-in
    
    &-input
      width: 100%
      margin: 0
      padding: 0
      position: relative
      z-index: 2
      box-shadow: none
      outline: none
      border: none
      color: #333C48
      font-size: 30px
      line-height: 100px
      text-align: center
      visability: hidden
      opacity: 0
      transition: opacity 100ms ease-in
    
    &-num
      position: absolute
      z-index: 1
      top: 0
      left: 0
      right: 0
      bottom: 0
      line-height: 100px
      visability: visible
      opacity: 1
      transition: opacity 100ms ease-in
      
      &.is-increment-hide
        opacity: 0
        transform: translateY(-50px)
        animation: increment-prev 100ms ease-in
        
      &.is-increment-visible
        opacity: 1
        transform: translateY(0)
        animation: increment-next 100ms ease-out
        
      &.is-decrement-hide
        opacity: 0
        transform: translateY(50px)
        animation: decrement-prev 100ms ease-in
        
      &.is-decrement-visible
        opacity: 1
        transform: translateY(0)
        animation: decrement-next 100ms ease-out
  
  &__button
    width: 100px
    line-height: 100px
    text-align: center
    color: #fff
    cursor: pointer
    background-color: #8498a7
    transition: background-color 100ms ease-in
      
    &:hover
      background-color: mix(#8498a7, #fff, 90%)
      transition: background-color 100ms ease-in

    &:active
      background-color: mix(#8498a7, #000, 90%)
      transition: background-color 100ms ease-in
    
    &--decrement
      border-radius: 5px 0 0 5px
    
    &--increment
      border-radius: 0 5px 5px 0
    
// keyframes

@keyframes decrement-prev
  from
    opacity: 1
    transform: translateY(0)
    
@keyframes decrement-next
  from
    opacity: 0
    transform: translateY(-50px)
      
@keyframes increment-prev
  from
    opacity: 1
    transform: translateY(0)
    
@keyframes increment-next
  from
    opacity: 0
    transform: translateY(50px)