jam-cloud/web/app/assets/javascripts/gear/gear_wizard.js

(function (context, $) {

  "use strict";


  context.JK = context.JK || {};
  context.JK.GearWizard = function (app) {

    var $dialog = null;
    var $wizardSteps = null;
    var $currentWizardStep = null;
    var step = 0;
    var $templateSteps = null;
    var $templateButtons = null;
    var $templateAudioPort = null;
    var $ftueButtons = null;
    var $btnNext = null;
    var $btnBack = null;
    var $btnClose = null;
    var $btnCancel = null;

    var self = this;

    var TOTAL_STEPS = 7;
    var STEP_INTRO = 0;
    var STEP_SELECT_DEVICE = 1;
    var STEP_SELECT_TRACKS = 2;
    var STEP_SELECT_CHAT = 3;
    var STEP_DIRECT_MONITOR = 4;
    var STEP_ROUTER_NETWORK = 5;
    var STEP_SUCCESS = 6;

    var stepUnderstandGear      = new context.JK.StepUnderstandGear(app, this);
    var stepSelectGear          = new context.JK.StepSelectGear(app, this);
    var stepConfigureTracks     = new context.JK.StepConfigureTracks(app, this);
    var stepConfigureVoiceChat  = new context.JK.StepConfigureVoiceChat(app, this);
    var stepDirectMonitoring    = new context.JK.StepDirectMonitoring(app, this);
    var stepNetworkTest         = new context.JK.StepNetworkTest(app, this);
    var stepSuccess             = new context.JK.StepSuccess(app, this);

    var STEPS = {
      0: stepUnderstandGear,
      1: stepSelectGear,
      2: stepConfigureTracks,
      3: stepConfigureVoiceChat,
      4: stepDirectMonitoring,
      5: stepNetworkTest,
      6: stepSuccess
    }

    function beforeHideStep($step) {
      var stepInfo = STEPS[step];

      if (!stepInfo) {
        throw "unknown step: " + step;
      }

      if(stepInfo.beforeHide) {
        stepInfo.beforeHide.call(stepInfo);
      }
    }

    function beforeShowStep($step) {
      var stepInfo = STEPS[step];

      if (!stepInfo) {
        throw "unknown step: " + step;
      }

      stepInfo.beforeShow.call(stepInfo);
    }

    function moveToStep() {
      var $nextWizardStep = $wizardSteps.filter($('[layout-wizard-step=' + step + ']'));

      beforeHideStep($currentWizardStep);

      $wizardSteps.hide();

      $currentWizardStep = $nextWizardStep;

      var $ftueSteps = $(context._.template($templateSteps.html(), {}, { variable: 'data' }));
      var $activeStep = $ftueSteps.find('.ftue-stepnumber[data-step-number="' + step + '"]');
      $activeStep.addClass('.active');
      $activeStep.next().show(); // show the .ftue-step-title
      $currentWizardStep.find('.ftuesteps').replaceWith($ftueSteps);

      // update buttons
      var $ftueButtonsContent = $(context._.template($templateButtons.html(), {}, {variable: 'data'}));


      $btnBack = $ftueButtonsContent.find('.btn-back');
      $btnNext = $ftueButtonsContent.find('.btn-next');
      $btnClose = $ftueButtonsContent.find('.btn-close');
      $btnCancel = $ftueButtonsContent.find('.btn-cancel');

      // hide back button if 1st step or last step
      if (step == 0 && step == TOTAL_STEPS - 1) {
        $btnBack.hide();
      }
      // hide next button if not on last step
      if (step == TOTAL_STEPS - 1) {
        $btnNext.hide();
      }
      // hide close if on last step
      if (step != TOTAL_STEPS - 1) {
        $btnClose.hide();
      }
      // hide cancel if not on last step
      if (step == TOTAL_STEPS - 1) {
        $btnCancel.hide();
      }

      $btnNext.on('click', next);
      $btnBack.on('click', back);
      $btnClose.on('click', closeDialog);
      $btnCancel.on('click', closeDialog);

      $ftueButtons.empty();
      $ftueButtons.append($ftueButtonsContent);

      beforeShowStep($currentWizardStep);
      $currentWizardStep.show();

    }

    function reset() {
      $currentWizardStep = null;
    }

    // checks if we already have a profile called 'FTUE...'; if not, create one.  if so, re-use it.
    function findOrCreateFTUEProfile() {
      var profileName = context.jamClient.FTUEGetMusicProfileName();

      logger.debug("current profile name: " + profileName);

      if(profileName && profileName.indexOf('FTUE') == 0) {

      }
      else {
        var newProfileName = 'FTUEAttempt-' + new Date().getTime().toString();
        logger.debug("setting FTUE-prefixed profile name to: " + newProfileName);
        context.jamClient.FTUESetMusicProfileName(newProfileName);
      }

      var profileName = context.jamClient.FTUEGetMusicProfileName();

      logger.debug("name on exit: " + profileName);

    }

    function beforeShow(args) {
      context.jamClient.FTUECancel();
      context.jamClient.FTUESetStatus(false);
      findOrCreateFTUEProfile();

      step = args.d1;
      if (!step) step = 0;
      step = parseInt(step);
      moveToStep();
    }

    function afterShow() {

    }

    function afterHide() {
      context.jamClient.FTUESetStatus(true);
      context.jamClient.FTUECancel();
    }

    function back() {
      if ($(this).is('.button-grey')) return false;
      step = step - 1;
      moveToStep();
      return false;
    }

    function next() {
      if ($(this).is('.button-grey')) return false;

      var stepInfo = STEPS[step];
      if(stepInfo.handleNext) {
        var result = stepInfo.handleNext.call(stepInfo);
        if(!result) {return false;}
      }

      step = step + 1;

      moveToStep();
      return false;
    }

    function closeDialog() {
      beforeHideStep($currentWizardStep);
      app.layout.closeDialog('gear-wizard');
      return false;
    }

    function events() {

    }

    function route() {

    }

    function setNextState(enabled) {

      if(!$btnNext) return;

      $btnNext.removeClass('button-orange button-grey');

      if (enabled) {
        $btnNext.addClass('button-orange');
      }
      else {
        $btnNext.addClass('button-grey');
      }
    }

    function setBackState(enabled) {

      if(!$btnBack) return;

      $btnBack.removeClass('button-orange button-grey');

      if (enabled) {
        $btnBack.addClass('button-orange');
      }
      else {
        $btnBack.addClass('button-grey');
      }
    }


    function initialize() {

      // on initial page load, we are not in the FTUE. so cancel the FTUE and call FTUESetStatus(true) if needed
      if(context.jamClient.FTUEGetStatus() == false) {
        context.jamClient.FTUESetStatus(true);
      }
      context.jamClient.FTUECancel();

      var dialogBindings = { beforeShow: beforeShow, afterShow: afterShow, afterHide: afterHide };

      app.bindDialog('gear-wizard', dialogBindings);

      $dialog = $('#gear-wizard-dialog');
      $wizardSteps = $dialog.find('.wizard-step');
      $templateSteps = $('#template-ftuesteps');
      $templateButtons = $('#template-ftue-buttons');
      $ftueButtons = $dialog.find('.ftue-buttons');

      stepUnderstandGear.initialize($wizardSteps.filter($('[layout-wizard-step=0]')));
      stepSelectGear.initialize($wizardSteps.filter($('[layout-wizard-step=1]')));
      stepConfigureTracks.initialize($wizardSteps.filter($('[layout-wizard-step=2]')));
      stepConfigureVoiceChat.initialize($wizardSteps.filter($('[layout-wizard-step=3]')));
      stepDirectMonitoring.initialize($wizardSteps.filter($('[layout-wizard-step=4]')));
      stepNetworkTest.initialize($wizardSteps.filter($('[layout-wizard-step=5]')));
      stepSuccess.initialize($wizardSteps.filter($('[layout-wizard-step=6]')));

      events();
    }

    this.setNextState = setNextState;
    this.setBackState = setBackState;
    this.initialize = initialize;

    self = this;
    return this;
  };

})(window, jQuery);