Jump To …

controls.js

/*global trurl*/

(function (global) {

var controls = function (id) {
  var buttonRun, buttonPause, buttonStop, textareaScore,
      checkboxAudio, checkboxDisplay, checkboxWaveform, checkboxLatency,
      radioFrameTimingTime, radioFrameTimingFrame, textAnimFrameRate,
      radioAnimRequest, timeSlider,
      event, that = {};

  trurl.util.eventify(that);
  event = that.event;

  function init () {
  }

  function run () {
    buttonRun.setAttribute('disabled', 'true');
    buttonPause.removeAttribute('disabled');
    buttonPause.innerHTML = 'pause';
    buttonStop.removeAttribute('disabled');
  }

  function stop () {
    buttonRun.removeAttribute('disabled');
    buttonPause.setAttribute('disabled', 'true');
    buttonPause.innerHTML = 'pause';
    buttonStop.setAttribute('disabled', 'true');
  }

  function getTimeSlider (min, max) {
    max = max || 0; min = min || 0;
    timeSlider = document.createElement('input');
    timeSlider.setAttribute('type', 'range');
    timeSlider.setAttribute('min', min);
    timeSlider.setAttribute('max', max);
    timeSlider.addEventListener('change', function () {
      event('changeTimeSlider', this.value);
    });
    return timeSlider;
  }

  function getTransport () {
    var container;

    container = document.createElement('div');
    buttonRun = document.createElement('button');
    buttonRun.setAttribute('type','button');
    buttonRun.innerHTML = 'run';
    buttonRun.addEventListener('click', function () {
      event('run');
    });
    buttonPause = document.createElement('button');
    buttonPause.setAttribute('type','button');
    buttonPause.innerHTML = 'pause';
    buttonPause.addEventListener('click', function () {
      event('pause');
    });
    buttonStop = document.createElement('button');
    buttonStop.setAttribute('type','button');
    buttonStop.innerHTML = 'stop';
    buttonStop.addEventListener('click', function () {
      event('stop');
    });
    container.appendChild(buttonRun);
    container.appendChild(buttonPause);
    container.appendChild(buttonStop);
    stop();
    return container;
  }

  function getOptions () {
    var container, checkboxAudioText, checkboxDisplayText, 
        checkboxWaveformText;

    container = document.createElement('div');
    checkboxAudio = document.createElement('input');
    checkboxAudio.setAttribute('type', 'checkbox');    
    checkboxAudio.checked = true;
    checkboxAudio.id = 'audio-checkbox';
    checkboxAudio.addEventListener('click', function (e) {
      if (this.checked) {
        event('enableAudio');
      } else {
        event('disableAudio');
      }
    }); 
    checkboxAudioText = document.createElement('text');
    checkboxAudioText.innerHTML = 'Audio';
    checkboxDisplay = document.createElement('input');
    checkboxDisplay.setAttribute('type', 'checkbox');    
    checkboxDisplay.setAttribute('checked', 'true');    
    checkboxDisplay.id = 'display-checkbox';
    checkboxDisplay.addEventListener('click', function (e) {
      if (this.checked) {
        event('enableDisplay');
      } else {
        event('disableDisplay');
      }
    }); 
    checkboxDisplayText = document.createElement('text');
    checkboxDisplayText.innerHTML = 'Display';
    checkboxWaveform = document.createElement('input');
    checkboxWaveform.setAttribute('type', 'checkbox');    
    checkboxWaveform.setAttribute('checked', 'true');    
    checkboxWaveform.id = 'display-checkbox';
    checkboxWaveform.addEventListener('click', function (e) {
      if (this.checked) {
        event('enableWaveform');
      } else {
        event('disableWaveform');
      }
    }); 
    checkboxWaveformText = document.createElement('text');
    checkboxWaveformText.innerHTML = 'Waveform';
    container.appendChild(checkboxAudio);
    container.appendChild(checkboxAudioText);
    container.appendChild(checkboxWaveform);
    container.appendChild(checkboxWaveformText);
    container.appendChild(checkboxDisplay);
    container.appendChild(checkboxDisplayText);
    return container;
  }

  function getAdvanced () {
    var container, checkboxLatencyText, radioFrameTimingTimeText, 
        radioFrameTimingFrameText, radioFrameTimingText,
        radioAnimInterval, radioAnimIntervalText,
        radioAnimRequestText, radioAnimText;

    container = document.createElement('div');

    textAnimFrameRate = document.createElement('input');
    textAnimFrameRate.setAttribute('type', 'text');
    textAnimFrameRate.setAttribute('size', '1');
    textAnimFrameRate.addEventListener('change', function (e) {
      event('changeAnimFrameRate', { frameRate: textAnimFrameRate.value });
    });

    radioAnimInterval = document.createElement('input');
    radioAnimInterval.setAttribute('type', 'radio');
    radioAnimInterval.setAttribute('name', 'anim');
    radioAnimInterval.checked = true;
    radioAnimInterval.addEventListener('click', function (e) {
      if (this.checked) {
        event('setAnimInterval');
      }
    });
    radioAnimIntervalText = document.createElement('text');
    radioAnimIntervalText.innerHTML = 'FPS';
    radioAnimRequest = document.createElement('input');
    radioAnimRequest.setAttribute('type', 'radio');
    radioAnimRequest.setAttribute('name', 'anim');
    radioAnimRequest.addEventListener('click', function (e) {
      if (this.checked) {
        event('setAnimRequest');
      }
    });
    radioAnimRequestText = document.createElement('text');
    radioAnimRequestText.innerHTML = 'Request';
    radioAnimText = document.createElement('text');
    radioAnimText.innerHTML = 'Animation:';

    checkboxLatency = document.createElement('input');
    checkboxLatency.setAttribute('type', 'checkbox');    
    checkboxLatency.checked = false;
    checkboxLatency.id = 'display-checkbox';
    checkboxLatency.addEventListener('click', function (e) {
      if (this.checked) {
        event('enableLatency');
      } else {
        event('disableLatency');
      }
    }); 
    checkboxLatencyText = document.createElement('text');
    checkboxLatencyText.innerHTML = 'Latency';
    radioFrameTimingTime = document.createElement('input');
    radioFrameTimingTime.setAttribute('type', 'radio');
    radioFrameTimingTime.setAttribute('name', 'timing');
    radioFrameTimingTime.checked = true;
    radioFrameTimingTime.addEventListener('click', function (e) {
      if (this.checked) {
        event('setFrameTimingTime');
      }
    });
    radioFrameTimingTimeText = document.createElement('text');
    radioFrameTimingTimeText.innerHTML = 'Time';
    radioFrameTimingFrame = document.createElement('input');
    radioFrameTimingFrame.setAttribute('type', 'radio');
    radioFrameTimingFrame.setAttribute('name', 'timing');
    radioFrameTimingFrame.addEventListener('click', function (e) {
      if (this.checked) {
        event('setFrameTimingFrame');
      }
    });
    radioFrameTimingFrameText = document.createElement('text');
    radioFrameTimingFrameText.innerHTML = 'Frame';
    radioFrameTimingText = document.createElement('text');
    radioFrameTimingText.innerHTML = 'Timing:';
    container.appendChild(radioAnimText);
    container.appendChild(radioAnimInterval);
    container.appendChild(textAnimFrameRate);
    container.appendChild(radioAnimIntervalText);
    container.appendChild(radioAnimRequest);
    container.appendChild(radioAnimRequestText);
    container.appendChild(document.createElement('br'));
    container.appendChild(radioFrameTimingText);
    container.appendChild(radioFrameTimingTime);
    container.appendChild(radioFrameTimingTimeText);
    container.appendChild(radioFrameTimingFrame);
    container.appendChild(radioFrameTimingFrameText);
    container.appendChild(checkboxLatency);
    container.appendChild(checkboxLatencyText);

    return container;
  }

  function getScore () {
    var container;

    container = document.createElement('div');
    textareaScore = document.createElement('textarea');
    textareaScore.id = 'score';
    textareaScore.setAttribute('rows', 25);
    textareaScore.setAttribute('cols', 60);
    container.appendChild(textareaScore);
    return container;
  }

  function disableWaveform () {
    checkboxWaveform.checked = false;
    checkboxWaveform.setAttribute('disabled', 'true');
  }

  function enableWaveform () {
    checkboxWaveform.removeAttribute('disabled');
  }

  function disableAudio () {
    checkboxAudio.checked = false;
    checkboxAudio.setAttribute('disabled', '');
    disableWaveform();
  }

  function disableDisplay () {
    checkboxDisplay.checked = false;
    checkboxDisplay.setAttribute('disabled', '');
  }

  function checkLatency () {
    checkboxLatency.checked = true;
  }

  function uncheckLatency () {
    checkboxLatency.checked = false;
  }

  function checkFrameTimingTime () {
    radioFrameTimingTime.checked = true;
  }

  function enableFrameTimingFrame () {
    radioFrameTimingFrame.removeAttribute('disabled');
  }

  function disableFrameTimingFrame () {
    radioFrameTimingFrame.setAttribute('disabled', 'true');
  }

  function disableAnimRequest () {
    radioAnimRequest.setAttribute('disabled', 'true');
  }

  function checkAnimRequest () {
    radioAnimRequest.checked = true;
  }

  function setAnimFrameRate (v) {
    textAnimFrameRate.value = v;
  }

  function getAnimFrameRate () {
    return textAnimFrameRate.value;
  }

  function setTimeSliderMinMax (min, max) {
    timeSlider.setAttribute('min', min);
    timeSlider.setAttribute('max', max);
  }

  function setPauseText (t) {
    buttonPause.innerHTML = t;
  }

  function makeSelect (p) {
    var i, el, opt, def, index = 0;

    el = document.createElement('select');
    for (i in p.opts) {
      def = false;
      if (index == p.defaultIndex) {
        def = true;
      }
      opt = new Option(i, p.opts[i], def, def);
      el.options[el.options.length] = opt;
      index++;
    }

    el.addEventListener('change', function (e) {
      event('change' + p.name, e);
    });

    return el;
  }

  that.init = init;
  that.getTransport = getTransport;
  that.getOptions = getOptions;
  that.getScore = getScore;
  that.getAdvanced = getAdvanced;
  that.disableAudio = disableAudio;
  that.disableDisplay = disableDisplay;
  that.enableWaveform = enableWaveform;
  that.disableWaveform = disableWaveform;
  that.checkLatency = checkLatency;
  that.uncheckLatency = uncheckLatency;
  that.disableFrameTimingFrame = disableFrameTimingFrame;
  that.enableFrameTimingFrame = enableFrameTimingFrame;
  that.checkFrameTimingTime = checkFrameTimingTime;
  that.checkAnimRequest = checkAnimRequest;
  that.disableAnimRequest = disableAnimRequest;
  that.setAnimFrameRate = setAnimFrameRate;
  that.getAnimFrameRate = getAnimFrameRate;
  that.getTimeSlider = getTimeSlider;
  that.setTimeSliderMinMax = setTimeSliderMinMax;
  that.setPauseText = setPauseText;
  that.makeSelect = makeSelect;
  that.run = run;
  that.stop = stop;

  return that;
};

if (typeof module != 'undefined' && module.exports) {
  module.exports = controls;
} else {
  global.trurl = global.trurl || {};
  global.trurl.controls = controls;
}

}(this));