noterange.js

/*
 * Requires jQuery
 * (c) Copyright Andre Soares (mniak) 2011-2018. All rights reserved.
 * Licensed under MIT license (https://opensource.org/licenses/MIT)
 */
(function($){
  $.fn.noteRange = function(options) {
	var defaults = {
	  whiteColor: 'white',
	  blackColor: 'black',
	  borderColor: '#0b0316',
	  blackClickedColor: '#46408c',
	  whiteClickedColor: '#8c86c8',
	  blackRangeColor: '#003',
	  whiteRangeColor: '#ccf',
	  centerColor: '#ffe588',
	  blackSelectedColor: '#4f78c4',
	  whiteSelectedColor: '#91b3f2',
	  keys: 88,
	  height: '50px',
	  start: 0,
	  center: 39,
	  select: function(a,b){return false;},
	  error: function(){return false;},
	};
	var settings = $.extend(defaults, options );
	function update(key){
	  if (key.hasClass('piano-clicked')) {
		if (key.hasClass('piano-blackKey')){
		  key.css('border', '1px solid '+settings.borderColor);
		  key.css('border-top', 'none');
		  key.css('background-color', settings.blackClickedColor);
		} else if (key.hasClass('piano-whiteKey')) {
		  key.css('background-color', settings.whiteClickedColor);
		}
	  } else if (key.hasClass('piano-center')) {
		key.css('background-color', settings.centerColor);
	  } else if (key.hasClass('piano-range')) {
		if (key.hasClass('piano-blackKey')){
		  key.css('border', '1px solid '+settings.borderColor);
		  key.css('border-top', 'none');
		  key.css('background-color', settings.blackRangeColor);
		} else if (key.hasClass('piano-whiteKey')) {
		  key.css('background-color', settings.whiteRangeColor);
		}
	  } else {
		if (key.hasClass('piano-blackKey')){
		  if (key.hasClass('piano-selected')){
			key.css('background-color', settings.blackSelectedColor);
		  } else {
			key.css('border', 'none');
			key.css('background-color', settings.blackColor);
		  }
		} else if (key.hasClass('piano-whiteKey')) {
		  if (key.hasClass('piano-selected')){
			key.css('background-color', settings.whiteSelectedColor);
		  } else {
			key.css('background-color', settings.whiteColor);
		  }
		}
	  }
	};
	ww = (100.0 * 12) / (settings.keys * 7);// White width and spacing
	bw = ww*0.55;
	$(this).each(function(){
	  obj = $(this);
	  obj.css('position', 'relative');
	  obj.css('z-index','0');
	  obj.css('height',settings.height);
	  obj.css('overflow', 'hidden');
	  obj.css('background-color', settings.whiteColor);
	  obj.css('border', '1px solid '+settings.borderColor);
	  obj.css('border-left', 'none');
	  blacks=$([1,4,6,9,11]);
	  wc=0;// White counter
	  obj.html(''); // Clear contents
	  for (var key=settings.start; key < settings.keys + settings.start; key++) {
		tdiv = $('<div class="piano-key"/>');
		tdiv.css('position', 'absolute');
		if (blacks.index(key%12)>=0){
		  tdiv.addClass('piano-blackKey');
		  tdiv.css('background-color', settings.blackColor);
		  tdiv.css('height', '60%');
		  tdiv.css('width', bw+'%');
		  tdiv.css('z-index', '1');
		  tdiv.css('left', ww*wc - bw/2 + '%');
		} else {
		  tdiv.addClass('piano-whiteKey');
		  tdiv.css('border-left', '1px solid '+settings.borderColor);
		  tdiv.css('height', '100%');
		  tdiv.css('width', ww+'%');
		  tdiv.css('left', ww*wc + '%');
		  wc++;
		}
		if (key == settings.center) {
		  tdiv.addClass('piano-center');
		  update(tdiv);
		}
		tdiv.attr('key',key);
		tdiv.attr('title',key);
		obj.append(tdiv);
	  };
	  max = undefined;
	  min = undefined;
	  obj.children('.piano-key').mouseenter(function(){
		$(this).addClass('piano-selected');
		  update($(this));
	  }).mouseleave(function(){
  		$(this).removeClass('piano-selected');
  		update($(this));
	  }).click(function(){
		key = $(this).attr('key');
		if (max == key) {
		  obj.children('.piano-range').removeClass('piano-range').each(function(){
			update($(this));
		  });
		  $(this).removeClass('piano-clicked');
		  max = undefined;
		} else if (min == key) {
		  obj.children('.piano-range').removeClass('piano-range').each(function(){
			update($(this));
		  });
		  $(this).removeClass('piano-clicked');
		  min = max; // inverte para sempre o primeiro valor ser o mínimo
		  max = undefined;
		} else if (min == undefined) { // sem mínimo
		  $(this).addClass('piano-clicked');
		  min = key;
		} else if (max == undefined) { // sem máximo
		  $(this).addClass('piano-clicked');
		  if (parseInt(key) > parseInt(min)) {
			max = key;
		  } else {
			max = min;
			min = key;
		  }
		  obj.children('.piano-clicked[key="'+min+'"]').nextUntil('.piano-clicked[key="'+max+'"]').addClass('piano-range').each(function(){
			  update($(this));
		  });
		} else { // sem nada
		  settings.error();
		}
		update($(this));
		settings.select(min||'',max||'');
	  });
	});
	return this;
  };
  $.fn.setRange = function(value) {
    if (value) {
      range = value.split(':');
    	if (range.length == 2) {
    		$(this).children('.piano-key[key="'+range[0]+'"]').click();
    		$(this).children('.piano-key[key="'+range[1]+'"]').click();
    	}
    }
  }
})( jQuery );