/** * 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);