VRFS-3046 : Add profile interest help bubbles (topics stored as attributes on element)

This commit is contained in:
Steven Miers 2015-05-08 11:45:13 -05:00
parent 6d6307f9c9
commit 183f5a5fdd
3 changed files with 164 additions and 138 deletions

View File

@ -1,81 +1,81 @@
(function(context,$) {
"use strict";
"use strict"
context.JK = context.JK || {};
context.JK = context.JK || {}
context.JK.AccountProfileInterests = function(app) {
var $document = $(document);
var logger = context.JK.logger;
var EVENTS = context.JK.EVENTS;
var api = context.JK.Rest();
var ui = new context.JK.UIHelper(JK.app);
var user = {};
var profileUtils = context.JK.ProfileUtils;
var masterGenreList = [];
var $document = $(document)
var logger = context.JK.logger
var EVENTS = context.JK.EVENTS
var api = context.JK.Rest()
var ui = new context.JK.UIHelper(JK.app)
var user = {}
var profileUtils = context.JK.ProfileUtils
var masterGenreList = []
var NONE_SPECIFIED = 'None specified';
var GENRE_LIST_DELIMITER = ', ';
var NONE_SPECIFIED = 'None specified'
var GENRE_LIST_DELIMITER = ', '
var $screen = $('#account-profile-interests');
var $screen = $('#account-profile-interests')
var SELECT_GENRE_SELECTOR = '.select-genre';
var GENRE_LIST_SELECTOR = '.genre-list';
var SELECT_GENRE_SELECTOR = '.select-genre'
var GENRE_LIST_SELECTOR = '.genre-list'
// virtual bands
var $virtualBandYes = $screen.find('#virtual-band-yes');
var $virtualBandNo = $screen.find('#virtual-band-no');
var $virtualBandGenres = $screen.find('#virtual-band-genres');
var $btnVirtualBandGenreSelect = $virtualBandGenres.find(SELECT_GENRE_SELECTOR);
var $virtualBandGenreList = $virtualBandGenres.find(GENRE_LIST_SELECTOR);
var $virtualBandCommitment = $screen.find('#virtual-band-commitment');
var $virtualBandYes = $screen.find('#virtual-band-yes')
var $virtualBandNo = $screen.find('#virtual-band-no')
var $virtualBandGenres = $screen.find('#virtual-band-genres')
var $btnVirtualBandGenreSelect = $virtualBandGenres.find(SELECT_GENRE_SELECTOR)
var $virtualBandGenreList = $virtualBandGenres.find(GENRE_LIST_SELECTOR)
var $virtualBandCommitment = $screen.find('#virtual-band-commitment')
// traditional bands
var $traditionalBandYes = $screen.find('#traditional-band-yes');
var $traditionalBandNo = $screen.find('#traditional-band-no');
var $traditionalBandGenres = $screen.find('#traditional-band-genres');
var $btnTraditionalBandGenreSelect = $traditionalBandGenres.find(SELECT_GENRE_SELECTOR);
var $traditionalBandGenreList = $traditionalBandGenres.find(GENRE_LIST_SELECTOR);
var $traditionalBandCommitment = $screen.find('#traditional-band-commitment');
var $traditionalTouringOption = $screen.find('#traditional-band-touring');
var $traditionalBandYes = $screen.find('#traditional-band-yes')
var $traditionalBandNo = $screen.find('#traditional-band-no')
var $traditionalBandGenres = $screen.find('#traditional-band-genres')
var $btnTraditionalBandGenreSelect = $traditionalBandGenres.find(SELECT_GENRE_SELECTOR)
var $traditionalBandGenreList = $traditionalBandGenres.find(GENRE_LIST_SELECTOR)
var $traditionalBandCommitment = $screen.find('#traditional-band-commitment')
var $traditionalTouringOption = $screen.find('#traditional-band-touring')
// paid sessions
var $paidSessionsYes = $screen.find('#paid-sessions-yes');
var $paidSessionsNo = $screen.find('#paid-sessions-no');
var $paidSessionsGenres = $screen.find('#paid-sessions-genres');
var $btnPaidSessionsGenreSelect = $paidSessionsGenres.find(SELECT_GENRE_SELECTOR);
var $paidSessionsGenreList = $paidSessionsGenres.find(GENRE_LIST_SELECTOR);
var $hourlyRate = $screen.find('#hourly-rate');
var $dailyRate = $screen.find('#daily-rate');
var $paidSessionsYes = $screen.find('#paid-sessions-yes')
var $paidSessionsNo = $screen.find('#paid-sessions-no')
var $paidSessionsGenres = $screen.find('#paid-sessions-genres')
var $btnPaidSessionsGenreSelect = $paidSessionsGenres.find(SELECT_GENRE_SELECTOR)
var $paidSessionsGenreList = $paidSessionsGenres.find(GENRE_LIST_SELECTOR)
var $hourlyRate = $screen.find('#hourly-rate')
var $dailyRate = $screen.find('#daily-rate')
// free sessions
var $freeSessionsYes = $screen.find('#free-sessions-yes');
var $freeSessionsNo = $screen.find('#free-sessions-no');
var $freeSessionsGenres = $screen.find('#free-sessions-genres');
var $btnFreeSessionsGenreSelect = $freeSessionsGenres.find(SELECT_GENRE_SELECTOR);
var $freeSessionsGenreList = $freeSessionsGenres.find(GENRE_LIST_SELECTOR);
var $freeSessionsYes = $screen.find('#free-sessions-yes')
var $freeSessionsNo = $screen.find('#free-sessions-no')
var $freeSessionsGenres = $screen.find('#free-sessions-genres')
var $btnFreeSessionsGenreSelect = $freeSessionsGenres.find(SELECT_GENRE_SELECTOR)
var $freeSessionsGenreList = $freeSessionsGenres.find(GENRE_LIST_SELECTOR)
// cowriting
var $cowritingYes = $screen.find('#cowriting-yes');
var $cowritingNo = $screen.find('#cowriting-no');
var $cowritingGenres = $screen.find('#cowriting-genres');
var $btnCowritingGenreSelect = $cowritingGenres.find(SELECT_GENRE_SELECTOR);
var $cowritingGenreList = $cowritingGenres.find(GENRE_LIST_SELECTOR);
var $cowritingPurpose = $screen.find('#cowriting-purpose');
var $cowritingYes = $screen.find('#cowriting-yes')
var $cowritingNo = $screen.find('#cowriting-no')
var $cowritingGenres = $screen.find('#cowriting-genres')
var $btnCowritingGenreSelect = $cowritingGenres.find(SELECT_GENRE_SELECTOR)
var $cowritingGenreList = $cowritingGenres.find(GENRE_LIST_SELECTOR)
var $cowritingPurpose = $screen.find('#cowriting-purpose')
var $btnCancel = $screen.find('#account-edit-profile-cancel');
var $btnBack = $screen.find('#account-edit-profile-back');
var $btnSubmit = $screen.find('#account-edit-profile-submit');
var $btnCancel = $screen.find('#account-edit-profile-cancel')
var $btnBack = $screen.find('#account-edit-profile-back')
var $btnSubmit = $screen.find('#account-edit-profile-submit')
function beforeShow(data) {
}
function afterShow(data) {
renderInterests();
renderInterests()
}
function resetForm() {
$screen.find('form .error-text').remove();
$screen.find('form .error').removeClass("error");
$screen.find('form .error-text').remove()
$screen.find('form .error').removeClass("error")
}
function populateAccountProfile(userDetail) {
@ -84,124 +84,124 @@
if (userDetail) {
if (userDetail.virtual_band) {
$virtualBandYes.iCheck('check').attr('checked', 'checked');
$virtualBandYes.iCheck('check').attr('checked', 'checked')
}
else {
$virtualBandNo.iCheck('check').attr('checked', 'checked');
$virtualBandNo.iCheck('check').attr('checked', 'checked')
}
if (userDetail.traditional_band) {
$traditionalBandYes.iCheck('check').attr('checked', 'checked');
$traditionalBandYes.iCheck('check').attr('checked', 'checked')
}
else {
$traditionalBandNo.iCheck('check').attr('checked', 'checked');
$traditionalBandNo.iCheck('check').attr('checked', 'checked')
}
if (userDetail.paid_sessions) {
$paidSessionsYes.iCheck('check').attr('checked', 'checked');
$paidSessionsYes.iCheck('check').attr('checked', 'checked')
}
else {
$paidSessionsNo.iCheck('check').attr('checked', 'checked');
$paidSessionsNo.iCheck('check').attr('checked', 'checked')
}
if (userDetail.free_sessions) {
$freeSessionsYes.iCheck('check').attr('checked', 'checked');
$freeSessionsYes.iCheck('check').attr('checked', 'checked')
}
else {
$freeSessionsNo.iCheck('check').attr('checked', 'checked');
$freeSessionsNo.iCheck('check').attr('checked', 'checked')
}
if (userDetail.cowriting) {
$cowritingYes.iCheck('check').attr('checked', 'checked');
$cowritingYes.iCheck('check').attr('checked', 'checked')
}
else {
$cowritingNo.iCheck('check').attr('checked', 'checked');
$cowritingNo.iCheck('check').attr('checked', 'checked')
}
}
// Column 2 - genres
var genres = profileUtils.virtualBandGenreList(userDetail.genres);
$virtualBandGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED);
var genres = profileUtils.virtualBandGenreList(userDetail.genres)
$virtualBandGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED)
genres = profileUtils.traditionalBandGenreList(userDetail.genres);
$traditionalBandGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED);
genres = profileUtils.traditionalBandGenreList(userDetail.genres)
$traditionalBandGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED)
genres = profileUtils.paidSessionGenreList(userDetail.genres);
$paidSessionsGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED);
genres = profileUtils.paidSessionGenreList(userDetail.genres)
$paidSessionsGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED)
genres = profileUtils.freeSessionGenreList(userDetail.genres);
$freeSessionsGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED);
genres = profileUtils.freeSessionGenreList(userDetail.genres)
$freeSessionsGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED)
genres = profileUtils.cowritingGenreList(userDetail.genres);
$cowritingGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED);
genres = profileUtils.cowritingGenreList(userDetail.genres)
$cowritingGenreList.html(genres && genres.length > 0 ? genres : NONE_SPECIFIED)
// Column 3 - misc (play commitment, rates, cowriting purpose)
$virtualBandCommitment.val(userDetail.virtual_band_commitment);
context.JK.dropdown($virtualBandCommitment);
$virtualBandCommitment.val(userDetail.virtual_band_commitment)
context.JK.dropdown($virtualBandCommitment)
$traditionalBandCommitment.val(userDetail.traditional_band_commitment);
context.JK.dropdown($traditionalBandCommitment);
$traditionalBandCommitment.val(userDetail.traditional_band_commitment)
context.JK.dropdown($traditionalBandCommitment)
$traditionalTouringOption.val(userDetail.traditional_band_touring ? '1' : '0');
context.JK.dropdown($traditionalTouringOption);
$traditionalTouringOption.val(userDetail.traditional_band_touring ? '1' : '0')
context.JK.dropdown($traditionalTouringOption)
$hourlyRate.val(userDetail.paid_sessions_hourly_rate);
$dailyRate.val(userDetail.paid_sessions_daily_rate);
$hourlyRate.val(userDetail.paid_sessions_hourly_rate)
$dailyRate.val(userDetail.paid_sessions_daily_rate)
$cowritingPurpose.val(userDetail.cowriting_purpose);
context.JK.dropdown($cowritingPurpose);
$cowritingPurpose.val(userDetail.cowriting_purpose)
context.JK.dropdown($cowritingPurpose)
}
function bindGenreSelector(type, $btnSelect, $genreList) {
$btnSelect.unbind('click').bind('click', function(evt) {
evt.preventDefault();
var genreText = $genreList.html();
var genres = [];
$btnSelect.unbind('click').bind('click', function(e) {
e.preventDefault()
var genreText = $genreList.html()
var genres = []
if (genres !== NONE_SPECIFIED) {
genres = genreText.split(GENRE_LIST_DELIMITER);
genres = genreText.split(GENRE_LIST_DELIMITER)
}
ui.launchGenreSelectorDialog(type, genres, function(selectedGenres) {
$genreList.html(selectedGenres && selectedGenres.length > 0 ? selectedGenres.join(GENRE_LIST_DELIMITER) : NONE_SPECIFIED);
});
$genreList.html(selectedGenres && selectedGenres.length > 0 ? selectedGenres.join(GENRE_LIST_DELIMITER) : NONE_SPECIFIED)
})
return false;
});
return false
})
}
function events() {
bindGenreSelector('virtual bands', $btnVirtualBandGenreSelect, $virtualBandGenreList);
bindGenreSelector('traditional bands', $btnTraditionalBandGenreSelect, $traditionalBandGenreList);
bindGenreSelector('paid sessions', $btnPaidSessionsGenreSelect, $paidSessionsGenreList);
bindGenreSelector('free sessions', $btnFreeSessionsGenreSelect, $freeSessionsGenreList);
bindGenreSelector('co-writing', $btnCowritingGenreSelect, $cowritingGenreList);
bindGenreSelector('virtual bands', $btnVirtualBandGenreSelect, $virtualBandGenreList)
bindGenreSelector('traditional bands', $btnTraditionalBandGenreSelect, $traditionalBandGenreList)
bindGenreSelector('paid sessions', $btnPaidSessionsGenreSelect, $paidSessionsGenreList)
bindGenreSelector('free sessions', $btnFreeSessionsGenreSelect, $freeSessionsGenreList)
bindGenreSelector('co-writing', $btnCowritingGenreSelect, $cowritingGenreList)
$btnCancel.click(function(evt) {
evt.stopPropagation();
navigateTo('/client#/profile/' + context.JK.currentUserId);
return false;
});
$btnCancel.click(function(e) {
e.stopPropagation()
navigateTo('/client#/profile/' + context.JK.currentUserId)
return false
})
$btnBack.click(function(evt) {
evt.stopPropagation();
navigateTo('/client#/account/profile/experience');
return false;
});
$btnBack.click(function(e) {
e.stopPropagation()
navigateTo('/client#/account/profile/experience')
return false
})
enableSubmits();
enableSubmits()
context.JK.dropdown($virtualBandCommitment);
context.JK.dropdown($traditionalBandCommitment);
context.JK.dropdown($cowritingPurpose);
context.JK.dropdown($virtualBandCommitment)
context.JK.dropdown($traditionalBandCommitment)
context.JK.dropdown($cowritingPurpose)
}
function enableSubmits() {
$btnSubmit.on("click", function(evt) {
evt.stopPropagation();
handleUpdateProfile();
return false;
});
$btnSubmit.on("click", function(e) {
e.stopPropagation()
handleUpdateProfile()
return false
})
$btnSubmit.removeClass("disabled")
}
@ -214,17 +214,17 @@
function renderInterests() {
$.when(api.getUserProfile())
.done(function(userDetail) {
populateAccountProfile(userDetail);
});
populateAccountProfile(userDetail)
})
}
function navigateTo(targetLocation) {
context.location = targetLocation;
context.location = targetLocation
}
function handleUpdateProfile() {
disableSubmits()
resetForm();
resetForm()
api.updateUser({
virtual_band: $screen.find('input[name=virtual_band]:checked').val(),
@ -250,12 +250,12 @@
})
.done(postUpdateProfileSuccess)
.fail(postUpdateProfileFailure)
.always(enableSubmits);
.always(enableSubmits)
}
function postUpdateProfileSuccess(response) {
$document.triggerHandler(EVENTS.USER_UPDATED, response);
context.location = "/client#/account/profile/samples";
$document.triggerHandler(EVENTS.USER_UPDATED, response)
context.location = "/client#/account/profile/samples"
}
function postUpdateProfileFailure(xhr, textStatus, errorMessage) {
@ -274,23 +274,33 @@
var screenBindings = {
'beforeShow': beforeShow,
'afterShow': afterShow
};
}
app.bindScreen('account/profile/interests', screenBindings);
app.bindScreen('account/profile/interests', screenBindings)
events();
events()
$screen.find('.interest-options').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal',
inheritClass: true
});
})
initializeHelpBubbles()
}
this.initialize = initialize;
this.beforeShow = beforeShow;
this.afterShow = afterShow;
return this;
};
function initializeHelpBubbles() {
// Help bubbles (topics stored as attributes on element):
$(".help").each(function( index ) {
context.JK.helpBubble($(this), $(this).attr("help-topic"), {}, {})
})
}
})(window,jQuery);
this.initialize = initialize
this.beforeShow = beforeShow
this.afterShow = afterShow
return this
}
})(window,jQuery)

View File

@ -17,7 +17,7 @@
<div>
<div class="left interest-options">
<label>I would like to join a virtual band <a class="help">[?]</a></label>
<label>I would like to join a virtual band <a class="help" help-topic="profile-interests-virtual-band">[?]</a></label>
<div class="left w30">
<div class="left w25">
<input type="radio" name="virtual_band" id="virtual-band-yes" value="true" />
@ -56,7 +56,7 @@
<div>
<div class="left interest-options">
<label>I would like to join a traditional band <a class="help">[?]</a></label>
<label>I would like to join a traditional band <a class="help" help-topic="profile-interests-traditional-band">[?]</a></label>
<div class="left w30">
<div class="left w25">
<input type="radio" name="traditional_band" id="traditional-band-yes" value="true" />
@ -103,7 +103,7 @@
<div>
<div class="left interest-options">
<label>I am available to play in paid sessions <a class="help">[?]</a></label>
<label>I am available to play in paid sessions <a class="help" help-topic="profile-interests-paid-sessions">[?]</a></label>
<div class="left w30">
<div class="left w25">
<input type="radio" name="paid_sessions" id="paid-sessions-yes" value="true" />
@ -142,7 +142,7 @@
<div>
<div class="left interest-options">
<label>I am available to play in free sessions <a class="help">[?]</a></label>
<label>I am available to play in free sessions <a class="help" help-topic="profile-interests-free-sessions">[?]</a></label>
<div class="left w30">
<div class="left w25">
<input type="radio" name="free_sessions" id="free-sessions-yes" value="true" />
@ -171,7 +171,7 @@
<div>
<div class="left interest-options">
<label>I would like to co-write with partner(s) <a class="help">[?]</a></label>
<label>I would like to co-write with partner(s) <a class="help" help-topic="profile-interests-cowrite-partners">[?]</a></label>
<div class="left w30">
<div class="left w25">
<input type="radio" name="cowriting" id="cowriting-yes" value="true" />

View File

@ -261,4 +261,20 @@ script type="text/template" id="template-help-jamtrack-guide-private"
script type="text/template" id="template-help-jamtrack-guide-session"
.jamtrack-guide-open.big-help
p To try out your JamTrack, click here to open it.
p To try out your JamTrack, click here to open it.
script type="text/template" id="template-help-profile-interests-virtual-band"
| For musicians who want to join a band that plays only online on JamKazam and does not travel and meet in person at a physical space to play.
script type="text/template" id="template-help-profile-interests-traditional-band"
| For musicians who want to join a more traditional band that meets in person at a physical space to play. It may also play online on JamKazam.
script type="text/template" id="template-help-profile-interests-paid-sessions"
| For professional session musicians who are qualified and interested in playing paid recording session gigs for bands, composers, and producers.
script type="text/template" id="template-help-profile-interests-free-sessions"
| For skilled musicians who are interested in playing free recording session gigs for bands, composers, and producers, either for fun or to build experience and resume.
script type="text/template" id="template-help-profile-interests-cowrite-partners"
| For composers and songwriters who want to collaborate with others in composing and creating new music.