VRFS-3247 : Refactor rendering logic to util class. Incremental.

This commit is contained in:
Steven Miers 2015-06-05 15:56:19 -05:00
parent 01c3b8af5f
commit ba52794c3d
2 changed files with 232 additions and 185 deletions

View File

@ -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;

View File

@ -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);