VRFS-3247 : Refactor rendering logic to util class. Incremental.
This commit is contained in:
parent
01c3b8af5f
commit
ba52794c3d
|
|
@ -66,16 +66,16 @@
|
|||
// tabs
|
||||
var $aboutLink = $screen.find('#about-link');
|
||||
var $aboutContent = $screen.find('#about-content');
|
||||
|
||||
|
||||
var $historyLink = $screen.find('#history-link');
|
||||
var $historyContent = $screen.find('#history-content');
|
||||
|
||||
|
||||
var $bandsLink = $screen.find('#bands-link');
|
||||
var $bandsContent = $screen.find('#bands-content');
|
||||
|
||||
|
||||
var $socialLink = $screen.find('#social-link');
|
||||
var $socialContent = $screen.find('#social-content');
|
||||
|
||||
|
||||
var $favoritesLink = $screen.find('#favorites-link');
|
||||
var $favoritesContent = $screen.find('#favorites-content');
|
||||
|
||||
|
|
@ -112,27 +112,15 @@
|
|||
|
||||
var instrument_logo_map = context.JK.getInstrumentIconMap24();
|
||||
|
||||
var proficiencyDescriptionMap = {
|
||||
"1": "BEGINNER",
|
||||
"2": "INTERMEDIATE",
|
||||
"3": "EXPERT"
|
||||
};
|
||||
|
||||
var proficiencyCssMap = {
|
||||
"1": "proficiency-beginner",
|
||||
"2": "proficiency-intermediate",
|
||||
"3": "proficiency-expert"
|
||||
};
|
||||
|
||||
function beforeShow(data) {
|
||||
userId = data.id;
|
||||
feed.setUser(userId);
|
||||
feed.setUser(userId);
|
||||
}
|
||||
|
||||
function afterShow(data) {
|
||||
initUser();
|
||||
resetForm();
|
||||
renderAllStats();
|
||||
renderAllStats();
|
||||
}
|
||||
|
||||
function beforeHide(data) {
|
||||
|
|
@ -265,11 +253,11 @@
|
|||
$soundCloudSamples.off("click", "a.sound-cloud-playable") .on("click", "a.sound-cloud-playable", playSoundCloudFile)
|
||||
}
|
||||
|
||||
function playSoundCloudFile(e) {
|
||||
function playSoundCloudFile(e) {
|
||||
e.preventDefault();
|
||||
var url = $(this).attr("soundcloud_url")
|
||||
var cap = $(this).text()
|
||||
player.initialize(url, cap);
|
||||
player.initialize(url, cap);
|
||||
app.layout.showDialog('sound-cloud-player-dialog');
|
||||
return false;
|
||||
}
|
||||
|
|
@ -432,7 +420,7 @@
|
|||
$favoritesContent.hide();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$aboutLink.addClass('active');
|
||||
$aboutLink.addClass('active');
|
||||
}
|
||||
|
||||
function renderAllStats() {
|
||||
|
|
@ -497,170 +485,15 @@
|
|||
}
|
||||
|
||||
function renderMusicalExperience() {
|
||||
$instruments.empty();
|
||||
|
||||
if (user.instruments) {
|
||||
for (var i = 0; i < user.instruments.length; i++) {
|
||||
var instrument = user.instruments[i];
|
||||
var description = instrument.instrument_id;
|
||||
var proficiency = instrument.proficiency_level;
|
||||
var instrument_icon_url = context.JK.getInstrumentIcon256(description);
|
||||
|
||||
// add instrument info to layout
|
||||
var template = $('#template-profile-instruments').html();
|
||||
var instrumentHtml = context.JK.fillTemplate(template, {
|
||||
instrument_logo_url: instrument_icon_url,
|
||||
instrument_description: description,
|
||||
proficiency_level: proficiencyDescriptionMap[proficiency],
|
||||
proficiency_level_css: proficiencyCssMap[proficiency]
|
||||
});
|
||||
|
||||
$instruments.append(instrumentHtml);
|
||||
}
|
||||
}
|
||||
|
||||
// status
|
||||
var status = user.skill_level;
|
||||
$musicianStatus.html(status ? profileUtils.skillLevelMap[status] + ' musician' : NOT_SPECIFIED_TEXT)
|
||||
|
||||
// genres
|
||||
$genres.empty();
|
||||
var profileGenres = profileUtils.profileGenreList(user.genres);
|
||||
$genres.append(profileGenres.length > 0 ? profileGenres : NOT_SPECIFIED_TEXT);
|
||||
|
||||
// concert gigs
|
||||
var concertGigCount = user.concert_count;
|
||||
$concertCount.html(concertGigCount > 0 ? 'Has played ' + profileUtils.gigMap[concertGigCount] + ' live concert gigs' : NOT_SPECIFIED_TEXT);
|
||||
|
||||
// studio gigs
|
||||
var studioGigCount = user.studio_session_count;
|
||||
$studioCount.html(studioGigCount > 0 ? 'Has played ' + profileUtils.gigMap[studioGigCount] + ' studio session gigs' : NOT_SPECIFIED_TEXT);
|
||||
profileUtils.renderMusicalExperience(user, $screen)
|
||||
}
|
||||
|
||||
function renderPerformanceSamples() {
|
||||
// performance samples
|
||||
var performanceSamples = user.performance_samples;
|
||||
if (!performanceSamples || performanceSamples.length === 0) {
|
||||
$noSamples.show();
|
||||
hideElements([$jamkazamSamples, $soundCloudSamples, $youTubeSamples]);
|
||||
if (isCurrentUser()) {
|
||||
$btnAddRecordings.show();
|
||||
}
|
||||
} else {
|
||||
$btnAddRecordings.hide();
|
||||
$noSamples.hide();
|
||||
|
||||
// show samples section
|
||||
var jamkazamSamples = profileUtils.jamkazamSamples(user.performance_samples);
|
||||
if (!jamkazamSamples || jamkazamSamples.length === 0) {
|
||||
hideElements([$jamkazamSamples]);
|
||||
}
|
||||
|
||||
var soundCloudSamples = profileUtils.soundCloudSamples(user.performance_samples);
|
||||
if (!soundCloudSamples || soundCloudSamples.length === 0) {
|
||||
hideElements([$soundCloudSamples]);
|
||||
}
|
||||
|
||||
var youTubeSamples = profileUtils.youTubeSamples(user.performance_samples);
|
||||
if (!youTubeSamples || youTubeSamples.length === 0) {
|
||||
hideElements([$youTubeSamples]);
|
||||
}
|
||||
|
||||
$.each(jamkazamSamples, function(index, sample) {
|
||||
$jamkazamSamples.append("<a class='jamkazam-playable' href='/recordings/" + sample.claimed_recording.id + "' rel='external'>" + formatTitle(sample.claimed_recording.name) + "</a><br/>");
|
||||
});
|
||||
|
||||
$.each(soundCloudSamples, function(index, sample) {
|
||||
$soundCloudSamples.append("<a class='sound-cloud-playable' href='' soundcloud_url='" + sample.url + "'>" + formatTitle(sample.description) + "</a><br/>");
|
||||
});
|
||||
|
||||
$.each(youTubeSamples, function(index, sample) {
|
||||
$youTubeSamples.append("<a class='youtube-playable' href='" + sample.url + "' rel='external'>" + formatTitle(sample.description) + "</a><br/>");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function formatTitle(title) {
|
||||
return title && title.length > 30 ? title.substring(0, 30) + "..." : title;
|
||||
profileUtils.renderPerformanceSamples(user, $screen)
|
||||
}
|
||||
|
||||
function renderOnlinePresence() {
|
||||
// online presences
|
||||
var onlinePresences = user.online_presences;
|
||||
if ((!onlinePresences || onlinePresences.length === 0) && !user.website) {
|
||||
$noOnlinePresence.show();
|
||||
hideElements([$userWebsite, $soundCloudPresence, $reverbNationPresence, $bandCampPresence,
|
||||
$fandalismPresence, $youTubePresence, $facebookPresence, $twitterPresence]);
|
||||
|
||||
if (isCurrentUser()) {
|
||||
$btnAddSites.show();
|
||||
} else {
|
||||
$btnAddSites.hide();
|
||||
}
|
||||
} else {
|
||||
$btnAddSites.hide();
|
||||
$noOnlinePresence.hide();
|
||||
|
||||
if (user.website) {
|
||||
$userWebsite.find('a').attr('href', user.website);
|
||||
}
|
||||
|
||||
var soundCloudPresences = profileUtils.soundCloudPresences(onlinePresences);
|
||||
if (soundCloudPresences && soundCloudPresences.length > 0) {
|
||||
$soundCloudPresence.find('a').attr('href', 'http://www.soundcloud.com/' + soundCloudPresences[0].username);
|
||||
$soundCloudPresence.show();
|
||||
} else {
|
||||
$soundCloudPresence.hide();
|
||||
}
|
||||
|
||||
var reverbNationPresences = profileUtils.reverbNationPresences(onlinePresences);
|
||||
if (reverbNationPresences && reverbNationPresences.length > 0) {
|
||||
$reverbNationPresence.find('a').attr('href', 'http://www.reverbnation.com/' + reverbNationPresences[0].username);
|
||||
$reverbNationPresence.show();
|
||||
} else {
|
||||
$reverbNationPresence.hide();
|
||||
}
|
||||
|
||||
var bandCampPresences = profileUtils.bandCampPresences(onlinePresences);
|
||||
if (bandCampPresences && bandCampPresences.length > 0) {
|
||||
$bandCampPresence.find('a').attr('href', 'http://' + bandCampPresences[0].username + '.bandcamp.com/');
|
||||
$bandCampPresence.show();
|
||||
} else {
|
||||
$bandCampPresence.hide();
|
||||
}
|
||||
|
||||
var fandalismPresences = profileUtils.fandalismPresences(onlinePresences);
|
||||
if (fandalismPresences && fandalismPresences.length > 0) {
|
||||
$fandalismPresence.find('a').attr('href', 'http://www.fandalism.com/' + fandalismPresences[0].username);
|
||||
$fandalismPresence.show();
|
||||
} else {
|
||||
$fandalismPresence.hide();
|
||||
}
|
||||
|
||||
var youTubePresences = profileUtils.youTubePresences(onlinePresences);
|
||||
if (youTubePresences && youTubePresences.length > 0) {
|
||||
$youTubePresence.find('a').attr('href', 'http://www.youtube.com/' + youTubePresences[0].username);
|
||||
$youTubePresence.show();
|
||||
} else {
|
||||
$youTubePresence.hide();
|
||||
}
|
||||
|
||||
var facebookPresences = profileUtils.facebookPresences(onlinePresences);
|
||||
if (facebookPresences && facebookPresences.length > 0) {
|
||||
$facebookPresence.find('a').attr('href', 'http://www.facebook.com/' + facebookPresences[0].username);
|
||||
$facebookPresence.show();
|
||||
} else {
|
||||
$facebookPresence.hide();
|
||||
}
|
||||
|
||||
var twitterPresences = profileUtils.twitterPresences(onlinePresences);
|
||||
if (twitterPresences && twitterPresences.length > 0) {
|
||||
$twitterPresence.find('a').attr('href', 'http://www.twitter.com/' + twitterPresences[0].username);
|
||||
$twitterPresence.show();
|
||||
} else {
|
||||
$twitterPresence.hide();
|
||||
}
|
||||
}
|
||||
profileUtils.renderOnlinePresence(user, $screen)
|
||||
}
|
||||
|
||||
function renderInterests() {
|
||||
|
|
@ -943,11 +776,11 @@
|
|||
});
|
||||
|
||||
$bandsContent.append(bandHtml);
|
||||
|
||||
$('.profile-band-link-member-true').each(function(idx) {
|
||||
|
||||
$('.profile-band-link-member-true').each(function(idx) {
|
||||
isBandMember ? $(this).show() : $(this).hide();
|
||||
});
|
||||
$('.profile-band-link-member-false').each(function(idx) {
|
||||
$('.profile-band-link-member-false').each(function(idx) {
|
||||
isBandMember ? $(this).hide() : $(this).show();
|
||||
});
|
||||
|
||||
|
|
@ -1078,7 +911,7 @@
|
|||
app.bindScreen('profile', screenBindings);
|
||||
events();
|
||||
initializeFeed();
|
||||
player = new context.JK.SoundCloudPlayerDialog(app);
|
||||
player = new context.JK.SoundCloudPlayerDialog(app);
|
||||
}
|
||||
|
||||
this.initialize = initialize;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,19 @@
|
|||
var FREE_SESSION_GENRE_TYPE = 'free_sessions';
|
||||
var COWRITING_GENRE_TYPE = 'cowriting';
|
||||
|
||||
var proficiencyDescriptionMap = {
|
||||
"1": "BEGINNER",
|
||||
"2": "INTERMEDIATE",
|
||||
"3": "EXPERT"
|
||||
};
|
||||
|
||||
var proficiencyCssMap = {
|
||||
"1": "proficiency-beginner",
|
||||
"2": "proficiency-intermediate",
|
||||
"3": "proficiency-expert"
|
||||
};
|
||||
|
||||
|
||||
// performance sample types
|
||||
profileUtils.SAMPLE_TYPES = {
|
||||
JAMKAZAM: {description: "jamkazam"},
|
||||
|
|
@ -87,8 +100,8 @@
|
|||
// Initialize standard profile help bubbles (topics stored as attributes on element):
|
||||
profileUtils.initializeHelpBubbles = function(parentElement) {
|
||||
$(".help", parentElement).each(function( index ) {
|
||||
context.JK.helpBubble($(this), $(this).attr("help-topic"), {}, {})
|
||||
})
|
||||
context.JK.helpBubble($(this), $(this).attr("help-topic"), {}, {})
|
||||
})
|
||||
}
|
||||
|
||||
// profile genres
|
||||
|
|
@ -270,4 +283,205 @@
|
|||
return matches;
|
||||
}
|
||||
|
||||
|
||||
profileUtils.renderMusicalExperience = function(player, $root) {
|
||||
var $instruments = $screen.find('#instruments');
|
||||
var $musicianStatus = $screen.find('#musician-status');
|
||||
var $genres = $screen.find('#genres');
|
||||
var $concertCount = $screen.find('#concert-count');
|
||||
var $studioCount = $screen.find('#studio-count');
|
||||
|
||||
$instruments.empty();
|
||||
|
||||
if (player.instruments) {
|
||||
for (var i = 0; i < player.instruments.length; i++) {
|
||||
var instrument = player.instruments[i];
|
||||
var description = instrument.instrument_id;
|
||||
var proficiency = instrument.proficiency_level;
|
||||
var instrument_icon_url = context.JK.getInstrumentIcon256(description);
|
||||
|
||||
// add instrument info to layout
|
||||
var template = $('#template-profile-instruments').html();
|
||||
var instrumentHtml = context.JK.fillTemplate(template, {
|
||||
instrument_logo_url: instrument_icon_url,
|
||||
instrument_description: description,
|
||||
proficiency_level: proficiencyDescriptionMap[proficiency],
|
||||
proficiency_level_css: proficiencyCssMap[proficiency]
|
||||
});
|
||||
|
||||
$instruments.append(instrumentHtml);
|
||||
}
|
||||
}
|
||||
|
||||
// status
|
||||
var status = player.skill_level;
|
||||
$musicianStatu.html(status ? profileUtils.skillLevelMap[status] + ' musician' : NOT_SPECIFIED_TEXT)
|
||||
|
||||
// genres
|
||||
$genres.empty();
|
||||
var profileGenres = profileUtils.profileGenreList(player.genres);
|
||||
$genres.append(profileGenres.length > 0 ? profileGenres : NOT_SPECIFIED_TEXT);
|
||||
|
||||
// concert gigs
|
||||
var concertCount = player.concert_count;
|
||||
$concertCount.html(concertCount > 0 ? 'Has played ' + profileUtils.gigMap[concertCount] + ' live concert gigs' : NOT_SPECIFIED_TEXT);
|
||||
|
||||
// studio gigs
|
||||
var studioCount = player.studio_session_count;
|
||||
$studioCount.html(studioCount > 0 ? 'Has played ' + profileUtils.gigMap[studioCount] + ' studio session gigs' : NOT_SPECIFIED_TEXT);
|
||||
|
||||
}// function renderMusicalExperience
|
||||
|
||||
profileUtils.renderPerformanceSamples = function(player, $screen) {
|
||||
// performance samples
|
||||
var performanceSamples = player.performance_samples;
|
||||
var $noSamples = $screen.find('#no-samples');
|
||||
var $jamkazamSamples = $screen.find('#jamkazam-samples');
|
||||
var $soundCloudSamples = $screen.find('#soundcloud-samples');
|
||||
var $youTubeSamples = $screen.find('#youtube-samples');
|
||||
var $btnAddRecordings = $screen.find('.add-recordings');
|
||||
|
||||
if (!performanceSamples || performanceSamples.length === 0) {
|
||||
$noSamples.show()
|
||||
$jamkazamSamples.hide()
|
||||
$soundCloudSamples.hide()
|
||||
$youTubeSamples.hide()
|
||||
if (isCurrentUser()) {
|
||||
$btnAddRecordings.show();
|
||||
}
|
||||
} else {
|
||||
$btnAddRecordings.hide();
|
||||
$noSamples.hide();
|
||||
|
||||
// show samples section
|
||||
var jamkazamSamples = profileUtils.jamkazamSamples(player.performance_samples);
|
||||
if (!jamkazamSamples || jamkazamSamples.length === 0) {
|
||||
$jamkazamSamples.hide()
|
||||
}
|
||||
|
||||
var soundCloudSamples = profileUtils.soundCloudSamples(player.performance_samples);
|
||||
if (!soundCloudSamples || soundCloudSamples.length === 0) {
|
||||
$soundCloudSamples.show()
|
||||
}
|
||||
|
||||
var youTubeSamples = profileUtils.youTubeSamples(player.performance_samples);
|
||||
if (!youTubeSamples || youTubeSamples.length === 0) {
|
||||
$youTubeSamples.show()
|
||||
}
|
||||
|
||||
$.each(jamkazamSamples, function(index, sample) {
|
||||
$jamkazamSamples.append("<a class='jamkazam-playable' href='/recordings/" + sample.claimed_recording.id + "' rel='external'>" + formatTitle(sample.claimed_recording.name) + "</a><br/>");
|
||||
});
|
||||
|
||||
$.each(soundCloudSamples, function(index, sample) {
|
||||
$soundCloudSamples.append("<a class='sound-cloud-playable' href='' soundcloud_url='" + sample.url + "'>" + formatTitle(sample.description) + "</a><br/>");
|
||||
});
|
||||
|
||||
$.each(youTubeSamples, function(index, sample) {
|
||||
$youTubeSamples.append("<a class='youtube-playable' href='" + sample.url + "' rel='external'>" + formatTitle(sample.description) + "</a><br/>");
|
||||
});
|
||||
}
|
||||
}// function renderPerformanceSamples
|
||||
|
||||
profileUtils.formatTitle = function(title) {
|
||||
return title && title.length > 30 ? title.substring(0, 30) + "..." : title;
|
||||
}
|
||||
|
||||
profileUtils.renderOnlinePresence = function(player, $screen) {
|
||||
var $noOnlinePresence = $screen.find('#no-online-presence');
|
||||
var $userWebsite = $screen.find('#user-website');
|
||||
var $soundCloudPresence = $screen.find('#soundcloud-presence');
|
||||
var $reverbNationPresence = $screen.find('#reverbnation-presence');
|
||||
var $bandCampPresence = $screen.find('#bandcamp-presence');
|
||||
var $fandalismPresence = $screen.find('#fandalism-presence');
|
||||
var $youTubePresence = $screen.find('#youtube-presence');
|
||||
var $facebookPresence = $screen.find('#facebook-presence');
|
||||
var $twitterPresence = $screen.find('#twitter-presence');
|
||||
var $btnAddSites = $screen.find('.add-sites');
|
||||
|
||||
|
||||
|
||||
// online presences
|
||||
var onlinePresences = player.online_presences;
|
||||
if ((!onlinePresences || onlinePresences.length === 0) && !player.website) {
|
||||
$noOnlinePresence.show()
|
||||
$userWebsite.show()
|
||||
$soundCloudPresence.show()
|
||||
$reverbNationPresence.show()
|
||||
$bandCampPresence.show()
|
||||
$fandalismPresence.show()
|
||||
$youTubePresence.show()
|
||||
$facebookPresence.show()
|
||||
$twitterPresence.show()
|
||||
|
||||
if (isCurrentUser()) {
|
||||
$btnAddSites.show();
|
||||
} else {
|
||||
$btnAddSites.hide();
|
||||
}
|
||||
} else {
|
||||
$btnAddSites.hide();
|
||||
$noOnlinePresence.hide();
|
||||
|
||||
if (player.website) {
|
||||
$userWebsite.find('a').attr('href', player.website);
|
||||
}
|
||||
|
||||
var soundCloudPresences = profileUtils.soundCloudPresences(onlinePresences);
|
||||
if (soundCloudPresences && soundCloudPresences.length > 0) {
|
||||
$soundCloudPresence.find('a').attr('href', 'http://www.soundcloud.com/' + soundCloudPresences[0].username);
|
||||
$soundCloudPresence.show();
|
||||
} else {
|
||||
$soundCloudPresence.hide();
|
||||
}
|
||||
|
||||
var reverbNationPresences = profileUtils.reverbNationPresences(onlinePresences);
|
||||
if (reverbNationPresences && reverbNationPresences.length > 0) {
|
||||
$reverbNationPresence.find('a').attr('href', 'http://www.reverbnation.com/' + reverbNationPresences[0].username);
|
||||
$reverbNationPresence.show();
|
||||
} else {
|
||||
$reverbNationPresence.hide();
|
||||
}
|
||||
|
||||
var bandCampPresences = profileUtils.bandCampPresences(onlinePresences);
|
||||
if (bandCampPresences && bandCampPresences.length > 0) {
|
||||
$bandCampPresence.find('a').attr('href', 'http://' + bandCampPresences[0].username + '.bandcamp.com/');
|
||||
$bandCampPresence.show();
|
||||
} else {
|
||||
$bandCampPresence.hide();
|
||||
}
|
||||
|
||||
var fandalismPresences = profileUtils.fandalismPresences(onlinePresences);
|
||||
if (fandalismPresences && fandalismPresences.length > 0) {
|
||||
$fandalismPresence.find('a').attr('href', 'http://www.fandalism.com/' + fandalismPresences[0].username);
|
||||
$fandalismPresence.show();
|
||||
} else {
|
||||
$fandalismPresence.hide();
|
||||
}
|
||||
|
||||
var youTubePresences = profileUtils.youTubePresences(onlinePresences);
|
||||
if (youTubePresences && youTubePresences.length > 0) {
|
||||
$youTubePresence.find('a').attr('href', 'http://www.youtube.com/' + youTubePresences[0].username);
|
||||
$youTubePresence.show();
|
||||
} else {
|
||||
$youTubePresence.hide();
|
||||
}
|
||||
|
||||
var facebookPresences = profileUtils.facebookPresences(onlinePresences);
|
||||
if (facebookPresences && facebookPresences.length > 0) {
|
||||
$facebookPresence.find('a').attr('href', 'http://www.facebook.com/' + facebookPresences[0].username);
|
||||
$facebookPresence.show();
|
||||
} else {
|
||||
$facebookPresence.hide();
|
||||
}
|
||||
|
||||
var twitterPresences = profileUtils.twitterPresences(onlinePresences);
|
||||
if (twitterPresences && twitterPresences.length > 0) {
|
||||
$twitterPresence.find('a').attr('href', 'http://www.twitter.com/' + twitterPresences[0].username);
|
||||
$twitterPresence.show();
|
||||
} else {
|
||||
$twitterPresence.hide();
|
||||
}
|
||||
}
|
||||
}// function renderOnlinePresence
|
||||
})(window, jQuery);
|
||||
Loading…
Reference in New Issue