netjam ui

by Therm

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
  <form>
    BPM:
    <input id="bpmBar" type="number" value="120" min="30" max="200" name="BPM" step="2">
  </form>

  <span class="recordMsg">Recording to:</span>
  <br></br>

  <div class="trackWrapper">
    <div class="trackRadio">
      <input type="radio" id="track1radio" value="true"> Track 1:
    </div>
    <div class="trackVisual">
      <div id="track1snaptarget" class="ui-widget-header">
        <p>Test snap target</p>
      </div>
      <br style="clear:both">
      <div id="draggable1" class="track1item draggable ui-widget-content" style="top: -103px">
        <p>Section Example</p>
      </div>
      <div id="draggable2" class="track1item draggable ui-widget-content" style="top: -103px">
        <p>Section 2 example</p>
      </div>
    </div>
  </div>

    <div class="trackWrapper">
    <div class="trackRadio">
      <input type="radio" id="track1radio" value="true"> Track 2:
    </div>
    <div class="trackVisual">
      <div id="track1snaptarget" class="ui-widget-header">
        <p>Test snap target</p>
      </div>
      <br style="clear:both">
      <div id="draggable21" class="track2item draggable ui-widget-content" style="top: -103px">
        <p>Section Example</p>
      </div>
      <div id="draggable22" class="track2item draggable ui-widget-content" style="top: -103px">
        <p>Section 2 example</p>
      </div>
    </div>
  </div>

    <div class="trackWrapper">
    <div class="trackRadio">
      <input type="radio" id="track1radio" value="true"> Track 3:
    </div>
    <div class="trackVisual">
      <div id="track1snaptarget" class="ui-widget-header">
        <p>Test snap target</p>
      </div>
      <br style="clear:both">
      <div id="draggable31" class="track3item draggableWide...

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

.draggable { 
	width: 90px; 
	height: 80px; 
	padding: 5px; 
	float: left; 
	margin: 0 0px 10px 0; 
	font-size: .9em; 
}

.draggableWide { 
	width: 90px; 
	height: 80px; 
	padding: 5px; 
	float: left; 
	margin: 0 0px 10px 0; 
	font-size: .9em; 
}

.trackWrapper {
	width: 100%;
	height: 130px;
}

.trackRadio {
	display: inline;
	width: 130px;
	height: 100px;
}

.trackVisual {
	float: left;
	display: inline;
	width: 100%;
	height: 130px;
}

.ui-widget-header p, .ui-widget-content p {
	margin: 0; 
}

#track1snaptarget { 
	height: 90px; 
}

.track1item {
	background: #B75BFF;
}

.track2item {
	background: #FD3024;
}

.track3item {
	background: url("http://i.imgur.com/ULu8otd.png");
}

JavaScript

// pixels in a beat, by administrative decision 1 second = 100 pixels
// dragging is by beats
var pixelsInBeat = 60*100/120;

$(function() {
	setPixelSnap(pixelsInBeat);

	// Almost certainly TODO: dynamicaly adjusting the segment after BPM change?
	function setPixelSnap(pixToBeat) {
	    $( ".draggable" ).draggable({
	    	snap:".ui-widget-header",
	    	snapMode: "inner",
	    	axis: 'x',
	    	grid: [pixToBeat,0],
	    	scroll: true
	    });
	    $( ".draggableWide" ).draggable({
	    	snap:".ui-widget-header",
	    	snapMode: "inner",
	    	axis: 'x',
	    	grid: [pixToBeat,0],
	    	scroll: true
	    });
	}

	function bpmLengthChange(bpm) {
		// console.log(bpm);
		pixelsInBeat = 60*100/bpm;
		setPixelSnap(pixelsInBeat);
		console.log('bpm length changed to ' + pixelsInBeat);
	}

	function addSegment(length, data) {

	}

	document.getElementById('bpmBar').onchange = function() {
		pixelsInBeat = 60*100/$('#bpmBar').val();
		setPixelSnap(pixelsInBeat);
		console.log('bpm length changed to ' + pixelsInBeat);
	};
});

$(document).ready(function() {
	// 


});