Provide defaults and make sure we everything is container into a parent element
This commit is contained in:
parent
85e672b150
commit
3c9e860f5e
3 changed files with 113 additions and 103 deletions
|
@ -12,4 +12,7 @@ class @User
|
|||
e.preventDefault()
|
||||
|
||||
initTabs: ->
|
||||
new UserTabs(@opts)
|
||||
new UserTabs(
|
||||
parentEl: '.user-profile'
|
||||
action: @opts.action
|
||||
)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue