jam-cloud/web/app/assets/javascripts/helpBubbleHelper.js

/**
 * HelpBubble helper functions, for help bubbles with lots of arguments or logic
 */
(function (context, $) {

  "use strict";

  context.JK = context.JK || {};
  var helpBubble = {};
  var rest = new context.JK.Rest();
  context.JK.HelpBubbleHelper = helpBubble;
  var logger = context.JK.logger;
  var jamTrackGuideTimeout = null;

  var defaultScoreBreakDownOptions = {positions: ['right', 'top', 'bottom', 'left'], width:'600px', closeWhenOthersOpen: true };
  helpBubble.scoreBreakdown = function($element, isCurrentUser, full_score, myAudioLatency, otherAudioLatency, internetScore, options) {
    options = options || {};
    options = $.extend({}, defaultScoreBreakDownOptions, options)
    if(isCurrentUser) {
      context.JK.helpBubble($element, 'musician-score-self',
        {full_score: full_score ? Math.round(full_score / 2) : null, my_gear_latency: myAudioLatency, their_gear_latency: otherAudioLatency, internet_latency: internetScore},
        options);
    } else {
      context.JK.helpBubble($element, 'musician-score-count',
      {full_score: full_score ? Math.round(full_score / 2) : null, my_gear_latency: myAudioLatency, their_gear_latency: otherAudioLatency, internet_latency: internetScore},
      options);
    }
  }

  function bigHelpOptions(options) {
    var defaults = {
      spikeGirth: 15,
      spikeLength: 20,
      fill: 'white',
      cornerRadius:8,
      strokeWidth: 2,
      cssStyles: {
      fontWeight:'bold',
        fontSize: '20px',
        backgroundColor:'transparent',
        color:'#ed3618'}}

    return $.extend({}, defaults, options)
  }

  function bigHelpDarkOptions(options) {
    var defaults = {
      spikeGirth: 15,
      spikeLength: 20,
      fill: '#242323',
      cornerRadius:8,
      strokeWidth: 2,
      cssStyles: {
        fontWeight:'bold',
        fontSize: '20px',
        backgroundColor:'transparent',
        color:'#ed3618'}}

    return $.extend({}, defaults, options)
  }


  function clearJamTrackGuideTimeout() {
    if(jamTrackGuideTimeout) {
      clearTimeout(jamTrackGuideTimeout);
      jamTrackGuideTimeout = null;
    }
  }

  function jamTrackGuide(callback) {
    if(gon.isNativeClient) {
      context.JK.app.user().done(function(user) {
        if(user.show_jamtrack_guide) {
          clearJamTrackGuideTimeout();
          jamTrackGuideTimeout = setTimeout(function() {
            callback()
          }, 1000)

        }
      })
    }
  }

  function subtlePulse($element) {
    $element.find('.bt-content').pulse({'background-color' : '#868686'}, {pulses: 2, duration: 1000, interval:300}, function() { $element.css('background-color', '#980006')})
  }

  helpBubble.rotateJamTrackLandingBubbles = function($preview, $video, $ctaButton, $alternativeCta) {
    $(window).on('load', function() {
      setTimeout(function() {
        helpBubble.jamtrackLandingPreview($preview, $preview.offsetParent())

        setTimeout(function() {
          helpBubble.jamtrackLandingVideo($video, $video.closest('.row'))

          setTimeout(function() {
            helpBubble.jamtrackLandingCta($ctaButton, $alternativeCta)
          }, 11000); // 5 seconds on top of 6 second show time of bubbles
        }, 11000); // 5 seconds on top of 6 second show time of bubbles
      }, 15000)


    })
  }

  helpBubble.clearJamTrackGuide = clearJamTrackGuideTimeout;


  helpBubble.ftueStep2Instructions = function ($element, $offsetParent) {
    context.JK.prodBubble($element, 'ftue-step-2-instructions', {}, bigHelpDarkOptions({positions:['top'], width:180, duration:10000, offsetParent: $offsetParent}))
  }

  // is also instructions bubble
  helpBubble.ftueStep3ConfigTracks = function ($element, $offsetParent) {
    context.JK.prodBubble($element, 'ftue-step-3-config-tracks', {}, bigHelpDarkOptions({positions:['top'], duration:10000, offsetParent: $offsetParent}))
  }

  helpBubble.ftueStep4Instructions = function ($element, $offsetParent) {
    context.JK.prodBubble($element, 'ftue-step-4-instructions', {}, bigHelpDarkOptions({positions:['top'], width:180, duration:5000, offsetParent: $offsetParent}))
  }

  helpBubble.ftueStep5Instructions = function ($element, $offsetParent) {
    context.JK.prodBubble($element, 'ftue-step-5-instructions', {}, bigHelpDarkOptions({positions:['top'], width:180, duration:5000, offsetParent: $offsetParent}))
  }

  helpBubble.ftueStep2SampleRate = function ($element, $offsetParent) {
    context.JK.prodBubble($element, 'ftue-step-2-sample-rate', {}, bigHelpDarkOptions({positions:['top'], duration:10000, width:180, offsetParent: $offsetParent}))
  }


  helpBubble.jamtrackGuideTile = function ($element, $offsetParent) {
    jamTrackGuide(function() {
      context.JK.prodBubble($element, 'jamtrack-guide-tile', {}, bigHelpOptions({positions:['top'], offsetParent: $offsetParent}))
    })
  }

  helpBubble.jamtrackGuidePrivate = function ($element, $offsetParent) {
    jamTrackGuide(function() {
      context.JK.prodBubble($element, 'jamtrack-guide-private', {}, bigHelpOptions({positions:['right'], offsetParent: $offsetParent}))
    })
  }

  helpBubble.jamtrackGuideSession = function ($element, $offsetParent) {
    jamTrackGuide(function() {
      context.JK.prodBubble($element, 'jamtrack-guide-session', {}, bigHelpOptions({positions:['left'], offsetParent: $offsetParent}))
    })
  }

  helpBubble.jamtrackLandingPreview = function($element, $offsetParent) {
    console.log("SHOWING THE PREVIEW BUBBLE")
    context.JK.prodBubble($element, 'jamtrack-landing-preview', {}, bigHelpOptions({positions:['right', 'top'], offsetParent: $offsetParent, width:250}))
  }

  helpBubble.jamtrackLandingVideo = function($element, $offsetParent) {
    context.JK.prodBubble($element, 'jamtrack-landing-video', {}, bigHelpOptions({positions:['top', 'right'], offsetParent: $offsetParent}))
  }

  helpBubble.jamtrackLandingCta = function($element, $alternativeElement) {
    if (!$alternativeElement || $element.visible()) {
      context.JK.prodBubble($element, 'jamtrack-landing-cta', {}, bigHelpOptions({positions:['top', 'right'], width:260}))
    }
    else if($alternativeElement) {
      context.JK.prodBubble($alternativeElement, 'jamtrack-landing-cta', {}, bigHelpOptions({positions:['right']}))
    }
  }

  helpBubble.jamtrackBrowseBand = function($element, $offsetParent) {
    return context.JK.prodBubble($element, 'jamtrack-browse-band', {}, bigHelpOptions({positions:['top'], offsetParent: $offsetParent}))
  }

  helpBubble.jamtrackBrowseMasterMix = function($element, $offsetParent) {
    return context.JK.prodBubble($element, 'jamtrack-browse-master-mix', {}, bigHelpOptions({positions:['top'], offsetParent: $offsetParent}))
  }

  helpBubble.jamtrackBrowseCta = function($element, $offsetParent) {
    return context.JK.prodBubble($element, 'jamtrack-browse-cta', {}, bigHelpOptions({positions:['top'], offsetParent: $offsetParent}))
  }

  helpBubble.jamtrackWebPlay = function($element, $offsetParent) {
    return context.JK.prodBubble($element, 'jamtrack-web-play', {}, bigHelpOptions({positions:['bottom'], offsetParent: $offsetParent}))
  }

  helpBubble.teacherMusicianProfile = function($element, $offsetParent) {
    return context.JK.prodBubble($element, 'teacher-musician-profile', {}, bigHelpDarkOptions({spikeGirth:0, spikeLength: 0, duration:10000, offsetParent:$offsetParent, width:385, positions:['top', 'right', 'bottom']}))
  }

  helpBubble.teacherProfile = function($element, $offsetParent) {
    return context.JK.prodBubble($element, 'teacher-profile', {}, bigHelpDarkOptions({spikeGirth:0, spikeLength: 0, duration:10000, offsetParent:$offsetParent, width:385, positions:['top', 'right', 'bottom']}))
  }

  helpBubble.jamtrackVariants = function($element, $offsetParent) {
    var offer = function() {
      console.log("jamtrackVariant turn off")
      $element.btOff()
      $offsetParent.off('click', offer)
    }

    var bubble = context.JK.prodBubble($element, 'jamtrack-variants', {}, bigHelpDarkOptions({clickAnywhereToClose: true, spikeGirth:0, spikeLength: 0, duration:20000, positions:['bottom', 'right', 'left'], offsetParent: $offsetParent}))
    setTimeout(function() {
      $offsetParent.on('click', offer)
    }, 1)

    return bubble
  }

  helpBubble.jamtrackUpgrade = function($element, $offsetParent) {
    var offer = function() {
      console.log("jamtrackUpgrade turn off")
      $element.btOff()
      $offsetParent.off('click', offer)
    }

    var bubble = context.JK.prodBubble($element, 'jamtrack-upgrade', {}, bigHelpDarkOptions({clickAnywhereToClose: true, spikeGirth:0, spikeLength: 0, duration:20000, positions:['bottom', 'right', 'left'], offsetParent: $offsetParent}))
    setTimeout(function() {
      $offsetParent.on('click', offer)
    }, 1)

    return bubble
  }


  helpBubble.showUseRemainingTestDrives = function($element, $offsetParent, user, callback) {
    return context.JK.onceBubble($element, 'side-remaining-test-drives', user, {offsetParent:$offsetParent, width:260, positions:['right'], postShow: function(container) {

      var $bookNow = $('a.book-now')
      $bookNow.off('click').on('click', function(e) {
        e.preventDefault()
        callback()
        return false;
      })
    }})
  }
  helpBubble.showUseRemainingJamClassCreditsBubble = function($element, $offsetParent, user, callback) {
    return context.JK.onceBubble($element, 'side-remaining-jamclass-credits', user, {offsetParent:$offsetParent, width:260, positions:['right'], postShow: function(container) {

      var $bookNow = $('a.book-now')
      $bookNow.off('click').on('click', function(e) {
        e.preventDefault()
        callback()
        return false;
      })
    }})
  }

  helpBubble.showBuyTestDrive = function($element, $offsetParent, user, callback) {
    return context.JK.onceBubble($element, 'side-buy-test-drive', user, {offsetParent:$offsetParent, width:260, positions:['right'], postShow: function(container) {
      subtlePulse(container)
      var $bookNow = container.find('a.book-now')
      $bookNow.off('click').on('click', function(e) {
        e.preventDefault()
        callback()
        return false;
      })
    }})
  }

  helpBubble.showBuyNormalLesson = function($element, $offsetParent, user, callback) {
    return context.JK.onceBubble($element, 'side-buy-normal-lesson', user, {offsetParent:$offsetParent, width:260, positions:['right'], postShow: function(container) {
      subtlePulse(container)
      var $bookNow = container.find('a.book-now')
      $bookNow.off('click').on('click', function(e) {
        e.preventDefault()
        callback()
        return false;
      })
    }})
  }

  helpBubble.didntFindTeacher = function($element, $offsetParent, user, callback) {
    return context.JK.onceBubble($element, 'side-didnt-find-teacher', user, {offsetParent:$offsetParent, width:260, positions:['right'], postShow: function(container) {
      subtlePulse(container)
      var $bookNow = container.find('a.post-help')
      $bookNow.off('click').on('click', function(e) {
        e.preventDefault()
        callback(container.find('.note').val(), container.find('.email').val(), container.find('.phonenumber').val())
        return false;
      })
    }})
  }

  helpBubble.testDrivePackageGo = function($element, $offsetParent, package_type) {
    return context.JK.prodBubble($element, 'test-drive-package-go', {plural: package_type != '1'}, bigHelpDarkOptions({offsetParent:$offsetParent, width:300, duration:13000, positions:['bottom'], postShow: function(container) {
      subtlePulse(container)
    }}))
  }
})(window, jQuery);