bottom thing 1

by danielyaa5

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<div class=container id=record-bar-thing>

  <div class="recordbar">
    <div id="highlight-container"></div>
    <div class="measure-selector ui-widget-content"></div>
  </div>
  <p id='percent-output'></p>
  <p id='num-measures-output'></p>

</div>

SCSS

#highlight-container {
  width: 40%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 0, 0, .5);
}

$measure-width: 80px;
$measure-height: 50px;
.recordbar {
  .measure-selector {
    padding: $measure-height/2 $measure-width/2;
    background: rgba(255,50,21,0.5); // in case lin-grad isnt supported...
    background-color: rgba(0,0,21,0.5); // same as :before color in js
    background-image: linear-gradient(to right, rgba(255,50,21,0), rgba(255,50,21,0.5)); // may not work on firefox
//    border-radius: 15%;
  }
  .measure-highlighted {
    padding: $measure-height/2 $measure-width/2;
    background: rgba(255,50,21,0.5);
  }
}

.recordbar {
  display: flex;
  justify-content: left;
  align-items: center;
  width: $measure-width * 10;
  border-style: solid;
  border-width: 1px;
  position: relative;
}

.recordbar {
    background-image: url("http://milesfrankel.xyz:4242/static/imgs/wave.png");
    background-size: contain;
    z-index: 0;
}

JavaScript

// same as in css. there isnt a way to unify these in jsfiddle..
var measureWidth = 80;
var numMeasures = 10;
var recordBarWidth = measureWidth * numMeasures;
var highlightedMeasures = [];

$(function() {
  $(".recordbar .measure-selector").draggable({
    grid: [measureWidth, 1],
    containment: "parent",
    drag: function(event, ui) {
      ui.realOffset = { // the given one is just wrong..
        left: ui.position.left - ui.originalPosition.left,
        top: ui.position.top - ui.originalPosition.top
      }
      var it = ui.helper;
//      console.log(ui);
      $('#percent-output').text(((ui.position.left + measureWidth) / recordBarWidth) * 100 + "% selected");
      
      
      var numHighlightedMeasures = ui.position.left / measureWidth;
      console.log(numHighlightedMeasures);
      console.log(highlightedMeasures);
      console.log($('.recordbar').children());
      
      
      // unfortunately, this will add this string every time the thing is dropped
      // so the head style can grow arbitrarily large
      // idk of a better way right now
//      $(barTo(ui.position.left)).appendTo('head');
    }

  });
});
// gross hack
var barTo = function(pos) {
  return `<style>\
      		.recordbar:before {
          	  content: "";
  						position: absolute;
 							z-index: -1;
              top: 0;
  						right: ${recordBarWidth - pos}px;
  						bottom: 0;
  						left: 0;
  						background: rgba(0,0,21,0.5);
          }
         </style>`
};