Provide defaults and make sure we everything is container into a parent element

This commit is contained in:
Alfredo Sumaran 2016-03-02 14:08:03 -05:00
parent 85e672b150
commit 3c9e860f5e
3 changed files with 113 additions and 103 deletions

View file

@ -12,4 +12,7 @@ class @User
e.preventDefault()
initTabs: ->
new UserTabs(@opts)
new UserTabs(
parentEl: '.user-profile'
action: @opts.action
)

View file

@ -52,8 +52,15 @@
class @UserTabs
actions: ['activity', 'groups', 'contributed', 'projects'],
defaultAction: 'activity',
constructor: (opts) ->
{
@action = 'activity'
@parentEl = $(document)
} = opts
# Make jQuery object if selector is provided
@parentEl = $(@parentEl) if typeof @parentEl is 'string'
constructor: (@opts = {}) ->
# Store the `location` object, allowing for easier stubbing in tests
@_location = location
@loaded = {}
@ -61,19 +68,18 @@ class @UserTabs
@bindEvents()
@tabStateInit()
action = @opts.action
action = @defaultAction if action == 'show'
currAction = @defaultAction if @action is 'show'
# Set active tab
source = $(".#{action}-tab a").attr('href')
@activateTab(action)
source = $(".#{currAction}-tab a").attr('href')
@activateTab(currAction)
bindEvents: ->
# Turn off existing event listeners
$(document).off 'shown.bs.tab', '.nav-links a[data-toggle="tab"]'
@parentEl.off 'shown.bs.tab', '.nav-links a[data-toggle="tab"]'
# Set event listeners
$(document).on 'shown.bs.tab', '.nav-links a[data-toggle="tab"]', @tabShown
@parentEl.on 'shown.bs.tab', '.nav-links a[data-toggle="tab"]', @tabShown
tabStateInit: ->
for action in @actions
@ -88,7 +94,7 @@ class @UserTabs
@setCurrentAction(action)
activateTab: (action) ->
$(".nav-links .#{action}-tab a").tab('show')
@parentEl.find(".nav-links .#{action}-tab a").tab('show')
setTab: (source, action) ->
return if @loaded[action] is true
@ -108,20 +114,20 @@ class @UserTabs
url: "#{source}.json"
success: (data) =>
tabSelector = 'div#' + action
document.querySelector(tabSelector).innerHTML = data.html
@parentEl.find(tabSelector).html(data.html)
@loaded[action] = true
loadActivities: (source) ->
return if @loaded['activity'] is true
$calendarWrap = $('.user-calendar')
$calendarWrap = @parentEl.find('.user-calendar')
$calendarWrap.load($calendarWrap.data('href'))
new Activities()
@loaded['activity'] = true
toggleLoading: (status) ->
$('.loading-status .loading').toggle(status)
@parentEl.find('.loading-status .loading').toggle(status)
setCurrentAction: (action) ->
# Remove possible actions from URL

View file

@ -8,106 +8,107 @@
= render 'shared/show_aside'
.cover-block
.cover-controls
- if @user == current_user
= link_to profile_path, class: 'btn btn-gray' do
= icon('pencil')
- elsif current_user
%span.report-abuse
- if @user.abuse_report
%button.btn.btn-danger{ title: 'Already reported for abuse',
data: { toggle: 'tooltip', placement: 'left', container: 'body' }}
= icon('exclamation-circle')
- else
= link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray',
title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do
= icon('exclamation-circle')
- if current_user
 
= link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
= icon('rss')
.user-profile
.cover-block
.cover-controls
- if @user == current_user
= link_to profile_path, class: 'btn btn-gray' do
= icon('pencil')
- elsif current_user
%span.report-abuse
- if @user.abuse_report
%button.btn.btn-danger{ title: 'Already reported for abuse',
data: { toggle: 'tooltip', placement: 'left', container: 'body' }}
= icon('exclamation-circle')
- else
= link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray',
title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do
= icon('exclamation-circle')
- if current_user
 
= link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
= icon('rss')
.avatar-holder
= link_to avatar_icon(@user, 400), target: '_blank' do
= image_tag avatar_icon(@user, 90), class: "avatar s90", alt: ''
.cover-title
= @user.name
.avatar-holder
= link_to avatar_icon(@user, 400), target: '_blank' do
= image_tag avatar_icon(@user, 90), class: "avatar s90", alt: ''
.cover-title
= @user.name
.cover-desc
%span.middle-dot-divider
@#{@user.username}
%span.middle-dot-divider
Member since #{@user.created_at.to_s(:medium)}
- if @user.bio.present?
.cover-desc
%p.profile-user-bio
= @user.bio
%span.middle-dot-divider
@#{@user.username}
%span.middle-dot-divider
Member since #{@user.created_at.to_s(:medium)}
.cover-desc
- unless @user.public_email.blank?
.profile-link-holder.middle-dot-divider
= link_to @user.public_email, "mailto:#{@user.public_email}"
- unless @user.skype.blank?
.profile-link-holder.middle-dot-divider
= link_to "skype:#{@user.skype}", title: "Skype" do
= icon('skype')
- unless @user.linkedin.blank?
.profile-link-holder.middle-dot-divider
= link_to "https://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do
= icon('linkedin-square')
- unless @user.twitter.blank?
.profile-link-holder.middle-dot-divider
= link_to "https://twitter.com/#{@user.twitter}", title: "Twitter" do
= icon('twitter-square')
- unless @user.website_url.blank?
.profile-link-holder.middle-dot-divider
= link_to @user.short_website_url, @user.full_website_url
- unless @user.location.blank?
.profile-link-holder.middle-dot-divider
= icon('map-marker')
= @user.location
- if @user.bio.present?
.cover-desc
%p.profile-user-bio
= @user.bio
%ul.nav-links.center
%li.activity-tab
= link_to user_calendar_activities_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
Activity
%li.groups-tab
= link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
Groups
%li.contributed-tab
= link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
Contributed projects
%li.projects-tab
= link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
Personal projects
.cover-desc
- unless @user.public_email.blank?
.profile-link-holder.middle-dot-divider
= link_to @user.public_email, "mailto:#{@user.public_email}"
- unless @user.skype.blank?
.profile-link-holder.middle-dot-divider
= link_to "skype:#{@user.skype}", title: "Skype" do
= icon('skype')
- unless @user.linkedin.blank?
.profile-link-holder.middle-dot-divider
= link_to "https://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do
= icon('linkedin-square')
- unless @user.twitter.blank?
.profile-link-holder.middle-dot-divider
= link_to "https://twitter.com/#{@user.twitter}", title: "Twitter" do
= icon('twitter-square')
- unless @user.website_url.blank?
.profile-link-holder.middle-dot-divider
= link_to @user.short_website_url, @user.full_website_url
- unless @user.location.blank?
.profile-link-holder.middle-dot-divider
= icon('map-marker')
= @user.location
%div{ class: container_class }
.tab-content
#activity.tab-pane
.gray-content-block.white.second-block
%div{ class: container_class }
.user-calendar{data: {href: user_calendar_path}}
%h4.center.light
%i.fa.fa-spinner.fa-spin
.user-calendar-activities
%ul.nav-links.center.user-profile-nav
%li.activity-tab
= link_to user_calendar_activities_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
Activity
%li.groups-tab
= link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
Groups
%li.contributed-tab
= link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
Contributed projects
%li.projects-tab
= link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
Personal projects
.content_list{ data: {href: user_path} }
%div{ class: container_class }
.tab-content
#activity.tab-pane
.gray-content-block.white.second-block
%div{ class: container_class }
.user-calendar{data: {href: user_calendar_path}}
%h4.center.light
%i.fa.fa-spinner.fa-spin
.user-calendar-activities
.content_list{ data: {href: user_path} }
= spinner
#groups.tab-pane
- # This tab is always loaded via AJAX
#contributed.contributed-projects.tab-pane
- # This tab is always loaded via AJAX
#projects.tab-pane
- # This tab is always loaded via AJAX
.loading-status
= spinner
#groups.tab-pane
- # This tab is always loaded via AJAX
#contributed.contributed-projects.tab-pane
- # This tab is always loaded via AJAX
#projects.tab-pane
- # This tab is always loaded via AJAX
.loading-status
= spinner
:javascript
var userProfile;