changeSymbol

plugin

by Yaroslav Ivanov

HTML

<div class="block">
  <input id="app">
  <div class="el">
    <div class="stars">
      <div class="line"></div>
    </div>
  </div>

</div>

CSS

#app {
  position: absolute;
  z-index: 1;
  background: none;
  border: none;
  outline: none;
  color: transparent;
  text-shadow: 0 0 0 gray;
}

.el {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  left: 0;
  background: #fff;
  z-index: 1;
  user-select: none;
  height: 1em;
  font-size: 40px;
  transition: all, 1s;
  width: calc(50% + 0.2em);
  margin: 20px;
  border-radius: 10px;
  padding-left: 0.05em;
  border: solid 0.5em rgba(0, 0, 0, 0);
}

.stars {
  display: inline-block;
  position: relative;
  vertical-align: top;
  transition: all, 1s;
}

.star-img {
  height: 1em;
  border: 0.025em solid transparent;
  box-sizing: border-box;
  transition: all, .1s;
}

.line {
  width: 0.05em;
  height: 1em;
  background: #000;
  animation: line 1s infinite linear;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}

.hide {
  transform: scale(0);
}

.show {
  transform: scale(1);
}

@keyframes line {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

JavaScript

function changeSymbol(param) {
  var marginLeft = 0;
  var right = 0;
  var starWidth = 0;
  var stars = document.querySelector(".stars");
  var el = document.querySelector(".el");
  var elWidth = parseInt(window.getComputedStyle(el, null).width)
  var app = document.querySelector(param.app);
  var line = document.querySelector(".line");
  var star;

  Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
  }

  Element.prototype.add = function(className) {
    this.parentElement.childNodes[this.parentElement.childNodes.length - 4].classList.add(className)
  }

  el.addEventListener("click", function() {
    app.focus()
  })

  app.addEventListener("keydown", function(e) {
    if (e.keyCode == "37") {
    if(parseFloat(line.style.right) >= stars.offsetWidth) {
    //line.style.right = "2px";
    //console.log("ok")
    return false;
}
      right += starWidth;
      line.style.right = right + "px";
      //console.log(stars.offsetWidth,line.style.right)
    }
    if (e.keyCode == "39" && parseFloat(line.style.right) - starWidth >= 0) {
      right -= starWidth;
      line.style.right = right + "px"
    }
  })

  app.addEventListener("input", function(e) {
    star = document.createElement("img");
    star.setAttribute("src", param.img);
    star.setAttribute("class", "star-img");
    if (e.data == null) {
      if (stars.offsetWidth > elWidth) {
        marginLeft += starWidth;
        stars.style.marginLeft = marginLeft + "px";
      }
      app.disabled = true;
      document.querySelector(".star-img").add('hide')
      document.querySelector(".star-img.hide").addEventListener("transitionend", function() {
        document.querySelector(".star-img.hide").remove()
        app.disabled = false;
        app.focus()
      })
    } else {
      stars.insertBefore(star, stars.firstChild);
      starWidth = star.offsetWidth;
      if (stars.offsetWidth >= elWidth) {
        console.log(stars.offsetWidth, elWidth)
        marginLeft -=...