244 lines
9.8 KiB
JavaScript
244 lines
9.8 KiB
JavaScript
/**
|
|
* 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.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.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); |