public-mirrors/NewsBlur-viq
1
0
Fork 0
mirror of https://github.com/viq/NewsBlur.git synced 2025-09-18 21:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactoring the living crap out of the friends dialog. Pulling out all profile editing into new dialog. Adding stub for blurblog settings (yay!).

Browse source
This commit is contained in:
Samuel Clay 2012-04-04 16:09:01 -07:00
parent fd0d6f8491
commit f185da78c5
8 changed files with 593 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/social/urls.py
View file

@ -3,8 +3,10 @@ from apps.social import views
urlpatterns = patterns('',
url(r'^share_story/?$', views.mark_story_as_shared, name='mark-story-as-shared'),
url(r'^friends/?$', views.friends, name='friends'),
url(r'^load_user_friends/?$', views.load_user_friends, name='load-user-friends'),
url(r'^profile/?$', views.profile, name='profile'),
url(r'^load_user_profile/?$', views.load_user_profile, name='load-user-profile'),
url(r'^save_user_profile/?$', views.save_user_profile, name='save-user-profile'),
url(r'^follow/?$', views.follow, name='social-follow'),
url(r'^unfollow/?$', views.unfollow, name='social-unfollow'),
url(r'^feed_trainer', views.social_feed_trainer, name='social-feed-trainer'),

56
apps/social/views.py
View file

@ -262,29 +262,10 @@ def shared_stories_public(request, username):
shared_stories = MSharedStory.objects.filter(user_id=user.pk)
return HttpResponse("There are %s stories shared by %s." % (shared_stories.count(), username))
@json.json_view
def friends(request):
user = get_user(request)
social_profile, _ = MSocialProfile.objects.get_or_create(user_id=user.pk)
social_services, _ = MSocialServices.objects.get_or_create(user_id=user.pk)
following_profiles = MSocialProfile.profiles(social_profile.following_user_ids)
follower_profiles = MSocialProfile.profiles(social_profile.follower_user_ids)
return {
'services': social_services,
'autofollow': social_services.autofollow,
'user_profile': social_profile.to_json(full=True),
'following_profiles': following_profiles,
'follower_profiles': follower_profiles,
}
@ajax_login_required
@json.json_view
def profile(request):
if request.method == 'POST':
return save_profile(request)
user_id = request.GET.get('user_id', request.user.pk)
user_profile = MSocialProfile.objects.get(user_id=user_id)
current_profile, _ = MSocialProfile.objects.get_or_create(user_id=request.user.pk)
@ -303,8 +284,21 @@ def profile(request):
'profiles': dict([(p.user_id, p.to_json(compact=True)) for p in profiles]),
}
return payload
@ajax_login_required
@json.json_view
def load_user_profile(request):
social_profile, _ = MSocialProfile.objects.get_or_create(user_id=request.user.pk)
social_services, _ = MSocialServices.objects.get_or_create(user_id=request.user.pk)
return {
'services': social_services,
'user_profile': social_profile.to_json(full=True),
}
def save_profile(request):
@ajax_login_required
@json.json_view
def save_user_profile(request):
data = request.POST
profile, _ = MSocialProfile.objects.get_or_create(user_id=request.user.pk)
@ -320,6 +314,22 @@ def save_profile(request):
return dict(code=1, user_profile=profile.to_json(full=True))
@ajax_login_required
@json.json_view
def load_user_friends(request):
social_profile, _ = MSocialProfile.objects.get_or_create(user_id=request.user.pk)
social_services, _ = MSocialServices.objects.get_or_create(user_id=request.user.pk)
following_profiles = MSocialProfile.profiles(social_profile.following_user_ids)
follower_profiles = MSocialProfile.profiles(social_profile.follower_user_ids)
return {
'services': social_services,
'autofollow': social_services.autofollow,
'user_profile': social_profile.to_json(full=True),
'following_profiles': following_profiles,
'follower_profiles': follower_profiles,
}
@ajax_login_required
@json.json_view
def follow(request):
@ -377,11 +387,11 @@ def unfollow(request):
@json.json_view
def find_friends(request):
query = request.GET.get('query')
profiles = MSocialProfile.objects.filter(username__icontains=query)
profiles = MSocialProfile.objects.filter(username__icontains=query)[:3]
if not profiles:
profiles = MSocialProfile.objects.filter(email__icontains=query)
profiles = MSocialProfile.objects.filter(email__icontains=query)[:3]
if not profiles:
profiles = MSocialProfile.objects.filter(blog_title__icontains=query)
profiles = MSocialProfile.objects.filter(blog_title__icontains=query)[:3]
return dict(profiles=profiles)

2
media/css/modals.css
View file

@ -260,6 +260,7 @@
color: #FCFCFC;
}
.NB-modal-submit-save.NB-disabled,
.NB-modal-submit-green.NB-disabled,
.NB-modal-submit-button.NB-disabled,
.NB-modal-submit-back,
.NB-modal-submit-reset,
@ -281,6 +282,7 @@
color: #909090;
}
.NB-modal-submit-save.NB-disabled:hover,
.NB-modal-submit-green.NB-disabled:hover,
.NB-modal-submit-button.NB-disabled:hover {
background-color: #d5d4dB;
background-image: -webkit-gradient(

264
media/css/reader.css
View file

@ -4801,13 +4801,16 @@ background: transparent;
background: transparent url('/media/embed/icons/silk/bricks.png') no-repeat 0 1px;
}
.NB-menu-manage .NB-menu-manage-goodies .NB-menu-manage-image {
background: transparent url('/media/embed/icons/silk/package_green.png') no-repeat 0 2px;
background: transparent url('/media/embed/icons/silk/package_green.png') no-repeat 0 1px;
}
.NB-menu-manage .NB-menu-manage-friends .NB-menu-manage-image {
background: transparent url('/media/embed/icons/silk/rainbow.png') no-repeat 0 2px;
background: transparent url('/media/embed/icons/silk/rainbow.png') no-repeat 0 1px;
}
.NB-menu-manage .NB-menu-manage-profile-editor .NB-menu-manage-image {
background: transparent url('/media/embed/icons/silk/user_orange.png') no-repeat 0 1px;
}
.NB-menu-manage .NB-menu-manage-preferences .NB-menu-manage-image {
background: transparent url('/media/embed/icons/silk/color_wheel.png') no-repeat 0 2px;
background: transparent url('/media/embed/icons/silk/color_wheel.png') no-repeat 0 1px;
}
.NB-menu-manage .NB-menu-manage-account .NB-menu-manage-image {
background: transparent url('/media/embed/icons/silk/weather_sun.png') no-repeat 0 1px;
@ -7280,87 +7283,6 @@ background: transparent;
}
.NB-modal-friends .NB-modal-section.NB-friends-profile {
overflow: hidden;
}
.NB-modal-friends .NB-modal-section.NB-friends-profilephoto {
overflow: hidden;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-profile-photo-group {
float: left;
margin: 12px 0 0 12px;
position: relative;
width: 120px;
font-size: 14px;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-photo-title input {
margin-right: 8px;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-photo-title label {
margin: 2px 0 0 0;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-profile-photo-group img {
width: 50px;
height: 50px;
border: 1px solid #A0A0A0;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-profile-photo-group.is_disabled {
opacity: .4;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-photo-image {
position: relative;
margin: 8px 0 0 22px;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-profile-photo-group .NB-photo-loader {
display: none;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-profile-photo-group.NB-loading .NB-photo-loader {
display: block;
width: 32px;
height: 32px;
position: absolute;
top: 9px;
left: 9px;
z-index: 1;
}
.NB-modal-friends .NB-friends-profilephoto .NB-friends-profile-photo-group.is_loading .photo-upload-placeholder {
opacity: .25;
}
.NB-modal-friends .NB-friends-profilephoto .NB-photo-link {
position: relative;
left: 0px;
bottom: -6px;
width: 120px;
height: 20px;
overflow: hidden;
}
.NB-modal-friends .NB-friends-profilephoto .NB-photo-link input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: 300px solid transparent;
opacity: 0;
filter: alpha(opacity=0);
-o-transform: translate(-300px, -300px) scale(10);
-moz-transform: translate(-800px, 0) scale(10);
cursor: pointer;
}
.NB-modal-friends .NB-friends-profilephoto .NB-gravatar-link {
position: relative;
left: 10px;
bottom: -6px;
height: 20px;
}
.NB-modal-friends .NB-friends-findfriends-profile {
text-align: left;
}
@ -7405,39 +7327,9 @@ background: transparent;
color: #999;
font-size: 13px;
}
.NB-modal-friends .NB-friends-profile .NB-profile-username,
.NB-modal-friends input[type=text] {
float: left;
width: 200px;
margin: 12px 8px 0 0;
}
.NB-modal-friends .NB-friends-profile .NB-count {
float: left;
color: #404040;
font-size: 10px;
font-weight: bold;
margin: 16px 0 0 4px;
}
.NB-modal-friends .NB-friends-profile .NB-count.NB-red {
color: #7F0000;
}
.NB-modal-friends .NB-friends-profile .NB-profile-username {
width: auto;
}
.NB-modal-friends .NB-account-link {
margin-left: 12px;
font-size: 10px;
text-transform: uppercase;
}
.NB-modal-friends .NB-tab-findfriends label {
width: auto ;
}
.NB-modal-friends .NB-tab-profile .NB-modal-submit-button {
float: left;
margin: 12px 0 0 12px;
text-align: center;
}
.NB-modal-friends .NB-profile-section-heading {
text-align: center;
margin: 4px 0;
@ -7445,6 +7337,150 @@ background: transparent;
padding: 0 0 16px;
}
/* ======================== */
/* = Profile Editor Modal = */
/* ======================== */
.NB-modal-profile-editor .NB-tab {
min-height: 80px;
padding: 12px 0;
}
.NB-modal-profile-editor .NB-modal-tabs .NB-modal-loading {
margin: 6px 8px 0 0;
float: left;
}
.NB-modal-profile-editor fieldset {
border: 0;
border-top: 1px solid #E6E6E6;
padding: 0 12px;
margin: 0;
}
.NB-modal-profile-editor fieldset legend {
padding: 0 12px;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
color: #151775;
}
.NB-modal-profile-editor .NB-tab-profile .NB-modal-submit-button {
float: left;
margin: 12px 0 0 12px;
text-align: center;
}
.NB-modal-profile-editor .NB-modal-section.NB-friends-profile {
overflow: hidden;
}
.NB-modal-profile-editor .NB-modal-section.NB-friends-profilephoto {
overflow: hidden;
}
.NB-modal-profile-editor .NB-friends-profile-photo-group {
float: left;
margin: 12px 0 0 12px;
position: relative;
width: 120px;
font-size: 14px;
}
.NB-modal-profile-editor .NB-friends-photo-title input {
margin-right: 8px;
}
.NB-modal-profile-editor .NB-friends-photo-title label {
margin: 2px 0 0 0;
}
.NB-modal-profile-editor .NB-friends-profile-photo-group img {
width: 50px;
height: 50px;
border: 1px solid #A0A0A0;
}
.NB-modal-profile-editor .NB-friends-profile-photo-group.is_disabled {
opacity: .4;
}
.NB-modal-profile-editor .NB-friends-photo-image {
position: relative;
margin: 8px 0 0 22px;
}
.NB-modal-profile-editor .NB-friends-profile-photo-group .NB-photo-loader {
display: none;
}
.NB-modal-profile-editor .NB-friends-profile-photo-group.NB-loading .NB-photo-loader {
display: block;
width: 32px;
height: 32px;
position: absolute;
top: 9px;
left: 9px;
z-index: 1;
}
.NB-modal-profile-editor .NB-friends-profile-photo-group.is_loading .photo-upload-placeholder {
opacity: .25;
}
.NB-modal-profile-editor .NB-photo-link {
position: relative;
left: 0px;
bottom: -6px;
width: 120px;
height: 20px;
overflow: hidden;
}
.NB-modal-profile-editor .NB-photo-link input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: 300px solid transparent;
opacity: 0;
filter: alpha(opacity=0);
-o-transform: translate(-300px, -300px) scale(10);
-moz-transform: translate(-800px, 0) scale(10);
cursor: pointer;
}
.NB-modal-profile-editor .NB-gravatar-link {
position: relative;
left: 10px;
bottom: -6px;
height: 20px;
}
.NB-modal-profile-editor .NB-friends-profile .NB-profile-username,
.NB-modal-profile-editor input[type=text] {
float: left;
width: 200px;
margin: 12px 8px 0 0;
}
.NB-modal-profile-editor .NB-friends-profile .NB-count {
float: left;
color: #404040;
font-size: 10px;
font-weight: bold;
margin: 16px 0 0 4px;
}
.NB-modal-profile-editor .NB-friends-profile .NB-count.NB-red {
color: #7F0000;
}
.NB-modal-profile-editor .NB-friends-profile .NB-profile-username {
width: auto;
}
.NB-modal-profile-editor .NB-friends-profile label {
clear: both;
float: left;
width: 100px;
padding: 12px 8px 0 12px;
}
.NB-modal-profile-editor .NB-account-link {
margin-left: 12px;
font-size: 10px;
text-transform: uppercase;
}
/* ================= */
/* = Profile Badge = */
/* ================= */

41
media/js/newsblur/common/assetmodel.js
View file

@ -1101,21 +1101,26 @@ NEWSBLUR.AssetModel.Reader.prototype = {
},
load_tutorial: function(data, callback) {
this.make_request('/reader/load_tutorial', data, callback);
this.make_request('/reader/load_tutorial', data, callback, null, {
request_type: 'GET'
});
},
fetch_friends: function(callback) {
var pre_callback = _.bind(function(data) {
this.user_profile = new NEWSBLUR.Models.User(data.user_profile);
this.make_request('/social/load_user_friends', null, _.bind(function(data) {
this.user_profile.set(data.user_profile);
this.follower_profiles = new NEWSBLUR.Collections.Users(data.follower_profiles);
this.following_profiles = new NEWSBLUR.Collections.Users(data.following_profiles);
callback(data);
}, this);
this.make_request('/social/friends', null, pre_callback);
}, this), null, {
request_type: 'GET'
});
},
fetch_user_profile: function(user_id, callback) {
this.make_request('/social/profile', {'user_id': user_id}, callback, callback, {request_type: 'GET'});
this.make_request('/social/profile', {'user_id': user_id}, callback, callback, {
request_type: 'GET'
});
},
search_for_friends: function(query, callback) {
@ -1129,12 +1134,24 @@ NEWSBLUR.AssetModel.Reader.prototype = {
this.make_request('/oauth/'+service+'_disconnect/', null, callback);
},
load_current_user_profile: function(callback) {
this.make_request('/social/load_user_profile', null, _.bind(function(data) {
this.user_profile.set(data.user_profile);
callback(data);
}, this), null, {
request_type: 'GET'
});
},
save_user_profile: function(data, callback) {
this.make_request('/social/profile/', data, callback);
this.make_request('/social/save_user_profile/', data, _.bind(function(response) {
this.user_profile.set(response.user_profile);
callback(response);
}, this));
},
follow_user: function(user_id, callback) {
var pre_callback = _.bind(function(data) {
this.make_request('/social/follow', {'user_id': user_id}, _.bind(function(data) {
console.log(["follow data", data]);
this.user_profile.set(data.user_profile);
var following_profile = this.following_profiles.detect(function(profile) {
@ -1150,12 +1167,11 @@ NEWSBLUR.AssetModel.Reader.prototype = {
this.social_feeds.remove(data.follow_subscription);
this.social_feeds.add(data.follow_subscription);
callback(data, follow_user);
}, this);
this.make_request('/social/follow', {'user_id': user_id}, pre_callback);
}, this));
},
unfollow_user: function(user_id, callback) {
var pre_callback = _.bind(function(data) {
this.make_request('/social/unfollow', {'user_id': user_id}, _.bind(function(data) {
this.user_profile.set(data.user_profile);
this.following_profiles.remove(function(profile) {
return profile.get('user_id') == data.unfollow_profile.user_id;
@ -1163,8 +1179,7 @@ NEWSBLUR.AssetModel.Reader.prototype = {
this.social_feeds.remove(data.unfollow_profile.id);
var unfollow_user = new NEWSBLUR.Models.User(data.unfollow_profile);
callback(data, unfollow_user);
}, this);
this.make_request('/social/unfollow', {'user_id': user_id}, pre_callback);
}, this));
},
load_public_story_comments: function(story_id, feed_id, callback) {

27
media/js/newsblur/reader/reader.js
View file

@ -3889,10 +3889,14 @@
NEWSBLUR.classifier = new NEWSBLUR.ReaderClassifierTrainer({'score': score});
},
open_friends_modal: function(score) {
open_friends_modal: function() {
NEWSBLUR.reader_friends = new NEWSBLUR.ReaderFriends();
},
open_profile_editor_modal: function() {
NEWSBLUR.reader_profile_editor = new NEWSBLUR.ReaderProfileEditor();
},
open_recommend_modal: function(feed_id) {
NEWSBLUR.recommend_feed = new NEWSBLUR.ReaderRecommendFeed(feed_id);
},
@ -4869,7 +4873,15 @@
$.make('li', { className: 'NB-menu-separator' }),
$.make('li', { className: 'NB-menu-manage-account' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
$.make('div', { className: 'NB-menu-manage-title' }, 'My Account')
$.make('div', { className: 'NB-menu-manage-title' }, 'Account')
]),
$.make('li', { className: 'NB-menu-manage-profile-editor' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
$.make('div', { className: 'NB-menu-manage-title' }, 'Profile')
]),
$.make('li', { className: 'NB-menu-manage-friends' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
$.make('div', { className: 'NB-menu-manage-title' }, 'Friends')
]),
$.make('li', { className: 'NB-menu-manage-preferences' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
@ -4900,11 +4912,6 @@
$.make('div', { className: 'NB-menu-manage-title' }, 'Goodies'),
$.make('div', { className: 'NB-menu-manage-subtitle' }, 'Extensions and extras.')
]),
$.make('li', { className: 'NB-menu-manage-friends' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
$.make('div', { className: 'NB-menu-manage-title' }, 'Friends'),
$.make('div', { className: 'NB-menu-manage-subtitle' }, 'Find friends to follow.')
]),
(show_chooser && $.make('li', { className: 'NB-menu-manage-feedchooser' }, [
$.make('div', { className: 'NB-menu-manage-image' }),
$.make('div', { className: 'NB-menu-manage-title' }, 'Choose Your 64 sites'),
@ -7291,6 +7298,12 @@
self.open_friends_modal();
}
});
$.targetIs(e, { tagSelector: '.NB-menu-manage-profile-editor' }, function($t, $p){
e.preventDefault();
if (!$t.hasClass('NB-disabled')) {
self.open_profile_editor_modal();
}
});
$.targetIs(e, { tagSelector: '.NB-menu-manage-preferences' }, function($t, $p){
e.preventDefault();
if (!$t.hasClass('NB-disabled')) {

145
media/js/newsblur/reader/reader_friends.js
View file

@ -26,7 +26,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
this.$modal.bind('change', $.rescope(this.handle_change, this));
this.$modal.bind('keyup', $.rescope(this.handle_keyup, this));
this.handle_profile_counts();
this.delegate_change();
},
make_modal: function() {
@ -36,20 +35,19 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
$.make('div', { className: 'NB-modal-tabs' }, [
$.make('div', { className: 'NB-modal-loading' }),
$.make('div', { className: 'NB-modal-tab NB-active NB-modal-tab-findfriends' }, 'Find Friends'),
$.make('div', { className: 'NB-modal-tab NB-modal-tab-profile' }, 'Profile'),
$.make('div', { className: 'NB-modal-tab NB-modal-tab-following' }, 'I\'m Following'),
$.make('div', { className: 'NB-modal-tab NB-modal-tab-followers' }, 'Following Me')
]),
$.make('h2', { className: 'NB-modal-title' }, 'Friends and Followers'),
$.make('div', { className: 'NB-tab NB-tab-findfriends NB-active' }, [
$.make('fieldset', [
$.make('legend', 'Social Connections'),
$.make('div', { className: 'NB-modal-section NB-friends-services'})
]),
$.make('fieldset', [
$.make('legend', 'Your profile'),
$.make('div', { className: 'NB-modal-section NB-friends-findfriends-profile' })
]),
$.make('fieldset', [
$.make('legend', 'Social Connections'),
$.make('div', { className: 'NB-modal-section NB-friends-services'})
]),
$.make('fieldset', [
$.make('legend', 'Search for friends'),
$.make('div', { className: 'NB-modal-section NB-friends-search'}, [
@ -90,7 +88,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
this.autofollow = data.autofollow;
this.make_find_friends_and_services();
this.make_profile_section();
this.make_profile_tab();
this.make_followers_tab();
this.make_following_tab();
callback && callback();
@ -153,59 +150,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
$badge.append($profile_badge);
},
make_profile_tab: function() {
var $profile_container = $('.NB-friends-profile', this.$modal).empty();
var $profile = $.make('form', [
$.make('label', 'Username'),
$.make('div', { className: 'NB-profile-username' }, [
NEWSBLUR.Globals.username,
$.make('a', { className: 'NB-splash-link NB-account-link', href: '#' }, 'Change')
]),
$.make('label', { 'for': 'NB-profile-location' }, 'Location'),
$.make('input', { id: 'NB-profile-location', name: 'location', type: 'text', className: 'NB-input', style: 'width: 220px', value: this.profile.get('location'), "data-max": 40 }),
$.make('span', { className: 'NB-count NB-count-location' }),
$.make('label', { 'for': 'NB-profile-website' }, 'Website'),
$.make('input', { id: 'NB-profile-website', name: 'website', type: 'text', className: 'NB-input', style: 'width: 300px', value: this.profile.get('website'), "data-max": 200 }),
$.make('span', { className: 'NB-count NB-count-website' }),
$.make('label', { 'for': 'NB-profile-bio' }, 'Bio'),
$.make('input', { id: 'NB-profile-bio', name: 'bio', type: 'text', className: 'NB-input', style: 'width: 380px', value: this.profile.get('bio'), "data-max": 80 }),
$.make('span', { className: 'NB-count NB-count-bio' })
]);
$profile_container.html($profile);
this.make_profile_photo_chooser();
this.disable_save();
},
make_profile_photo_chooser: function() {
var $profiles = $('.NB-friends-profilephoto', this.$modal).empty();
_.each(['twitter', 'facebook', 'gravatar'], _.bind(function(service) {
var $profile = $.make('div', { className: 'NB-friends-profile-photo-group NB-friends-photo-'+service }, [
$.make('div', { className: 'NB-friends-photo-title' }, [
$.make('input', { type: 'radio', name: 'profile_photo_service', value: service, id: 'NB-profile-photo-service-'+service }),
$.make('label', { 'for': 'NB-profile-photo-service-'+service }, _.string.capitalize(service))
]),
$.make('div', { className: 'NB-friends-photo-image' }, [
$.make('label', { 'for': 'NB-profile-photo-service-'+service }, [
$.make('div', { className: 'NB-photo-loader' }),
$.make('img', { src: this.services[service][service+'_picture_url'] })
])
]),
(service == 'upload' && $.make('div', { className: 'NB-photo-link' }, [
$.make('a', { href: '#', className: 'NB-photo-upload-link NB-splash-link' }, 'Upload picture'),
$.make('input', { type: 'file', name: 'photo' })
])),
(service == 'gravatar' && $.make('div', { className: 'NB-gravatar-link' }, [
$.make('a', { href: 'http://www.gravatar.com', className: 'NB-splash-link', target: '_blank' }, 'gravatar.com')
]))
]);
if (service == this.profile.get('photo_service')) {
$('input[type=radio]', $profile).attr('checked', true);
}
$profiles.append($profile);
}, this));
},
make_followers_tab: function() {
var $tab = $('.NB-tab-followers', this.$modal).empty();
if (this.profile.get('follower_count') <= 0) {
@ -325,7 +269,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
this.services = data.services;
this.make_find_friends_and_services();
this.make_profile_section();
this.make_profile_tab();
}, this));
},
@ -347,51 +290,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
NEWSBLUR.reader.check_hide_getting_started();
},
close_and_load_account: function() {
this.close(function() {
NEWSBLUR.reader.open_account_modal();
});
},
save_profile: function() {
var data = {
'photo_service': $('input[name=profile_photo_service]:checked', this.$modal).val(),
'location': $('input[name=location]', this.$modal).val(),
'website': $('input[name=website]', this.$modal).val(),
'bio': $('input[name=bio]', this.$modal).val()
};
this.model.save_user_profile(data, _.bind(function() {
this.fetch_friends(_.bind(function() {
this.animate_profile_badge();
}, this));
this.switch_tab('findfriends');
}, this));
this.disable_save();
$('.NB-profile-save-button', this.$modal).text('Saving...');
},
animate_profile_badge: function($badge) {
$badge = $badge || $('.NB-friends-findfriends-profile .NB-profile-badge', this.$modal);
_.delay(_.bind(function() {
$badge.css('backgroundColor', 'white').animate({
'backgroundColor': 'gold'
}, {
'queue': false,
'duration': 600,
'easing': 'linear',
'complete': function() {
$badge.animate({
'backgroundColor': 'white'
}, {
'queue': false,
'duration': 1250,
'easing': 'easeOutQuad'
});
}
});
}, this), 200);
},
search_for_friends: function(query) {
var $loading = $('.NB-friends-search .NB-loading', this.$modal);
var $badges = $('.NB-friends-search .NB-friends-search-badges', this.$modal);
@ -440,8 +338,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
var newtab;
if ($t.hasClass('NB-modal-tab-findfriends')) {
newtab = 'findfriends';
} else if ($t.hasClass('NB-modal-tab-profile')) {
newtab = 'profile';
} else if ($t.hasClass('NB-modal-tab-followers')) {
newtab = 'followers';
} else if ($t.hasClass('NB-modal-tab-following')) {
@ -467,17 +363,9 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
$.targetIs(e, { tagSelector: '.NB-friends-profile-link' }, function($t, $p) {
e.preventDefault();
self.switch_tab('profile');
});
$.targetIs(e, { tagSelector: '.NB-profile-save-button' }, function($t, $p) {
e.preventDefault();
self.save_profile();
});
$.targetIs(e, { tagSelector: '.NB-account-link' }, function($t, $p) {
e.preventDefault();
self.close_and_load_account();
self.close(function() {
NEWSBLUR.reader.open_profile_editor_modal();
});
});
},
@ -526,25 +414,6 @@ _.extend(NEWSBLUR.ReaderFriends.prototype, {
var $count = $input.next('.NB-count').eq(0);
$count.hide();
});
},
delegate_change: function() {
$('.NB-tab-profile', this.$modal).delegate('input[type=radio],input[type=checkbox],select,input[type=text]', 'change', _.bind(this.enable_save, this));
$('.NB-tab-profile', this.$modal).delegate('input[type=text]', 'keydown', _.bind(this.enable_save, this));
},
enable_save: function() {
$('.NB-profile-save-button', this.$modal)
.removeClass('NB-modal-submit-close')
.addClass('NB-modal-submit-green')
.text('Save My Profile');
},
disable_save: function() {
$('.NB-profile-save-button', this.$modal)
.addClass('NB-modal-submit-close')
.removeClass('NB-modal-submit-green')
.text('Change what you like above...');
}
});

350
media/js/newsblur/reader/reader_profile_editor.js Normal file
View file

@ -0,0 +1,350 @@
NEWSBLUR.ReaderProfileEditor = function(options) {
var defaults = {
width: 800
};
this.options = $.extend({}, defaults, options);
this.model = NEWSBLUR.AssetModel.reader();
this.profile = this.model.user_profile;
this.runner();
};
NEWSBLUR.ReaderProfileEditor.prototype = new NEWSBLUR.Modal;
_.extend(NEWSBLUR.ReaderProfileEditor.prototype, {
runner: function() {
this.options.onOpen = _.bind(function() {
this.resize_modal();
}, this);
this.make_modal();
this.open_modal();
this.fetch_user_profile();
this.$modal.bind('click', $.rescope(this.handle_click, this));
this.handle_profile_counts();
this.delegate_change();
},
make_modal: function() {
var self = this;
this.$modal = $.make('div', { className: 'NB-modal NB-modal-profile-editor' }, [
$.make('div', { className: 'NB-modal-tabs' }, [
$.make('div', { className: 'NB-modal-loading' }),
$.make('div', { className: 'NB-modal-tab NB-active NB-modal-tab-profile' }, 'Profile'),
$.make('div', { className: 'NB-modal-tab NB-modal-tab-blurblog' }, 'Blurblog')
]),
$.make('h2', { className: 'NB-modal-title' }, 'Your Profile'),
$.make('div', { className: 'NB-tab NB-tab-profile NB-active' }, [
$.make('fieldset', [
$.make('legend', 'Preview'),
$.make('div', { className: 'NB-modal-section NB-friends-findfriends-profile' })
]),
$.make('fieldset', [
$.make('legend', 'Profile picture'),
$.make('div', { className: 'NB-modal-section NB-friends-profilephoto'})
]),
$.make('fieldset', [
$.make('legend', 'Profile Details'),
$.make('div', { className: 'NB-modal-section NB-friends-profile'}, [
$.make('form', [
$.make('label', 'Username'),
$.make('div', { className: 'NB-profile-username' }, [
NEWSBLUR.Globals.username,
$.make('a', { className: 'NB-splash-link NB-account-link', href: '#' }, 'Change')
]),
$.make('label', { 'for': 'NB-profile-location' }, 'Location'),
$.make('input', { id: 'NB-profile-location', name: 'location', type: 'text', className: 'NB-input', style: 'width: 300px', value: this.profile.get('location'), "data-max": 40 }),
$.make('span', { className: 'NB-count NB-count-location' }),
$.make('label', { 'for': 'NB-profile-website' }, 'Website'),
$.make('input', { id: 'NB-profile-website', name: 'website', type: 'text', className: 'NB-input', style: 'width: 440px', value: this.profile.get('website'), "data-max": 200 }),
$.make('span', { className: 'NB-count NB-count-website' }),
$.make('label', { 'for': 'NB-profile-bio' }, 'Bio'),
$.make('input', { id: 'NB-profile-bio', name: 'bio', type: 'text', className: 'NB-input', style: 'width: 580px', value: this.profile.get('bio'), "data-max": 80 }),
$.make('span', { className: 'NB-count NB-count-bio' })
])
])
]),
$.make('div', { className: 'NB-modal-submit-close NB-profile-save-button NB-modal-submit-button' }, 'Save my profile')
]),
$.make('div', { className: 'NB-tab NB-tab-blurblog' }, [
$.make('fieldset', [
$.make('legend', 'Your Blurblog'),
$.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-preview' })
]),
$.make('fieldset', [
$.make('legend', 'Custom CSS'),
$.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-custom-css'})
]),
$.make('fieldset', [
$.make('legend', 'Comments'),
$.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog'})
]),
$.make('div', { className: 'NB-modal-submit-close NB-profile-save-button NB-modal-submit-button' }, 'Save my blurblog settings')
]),
$.make('div', { className: 'NB-tab NB-tab-following' }),
$.make('div', { className: 'NB-tab NB-tab-followers' })
]);
},
make_profile_section: function() {
var $badge = $('.NB-friends-findfriends-profile', this.$modal).empty();
var $profile_badge;
var profile = this.profile;
if (!profile.get('location') && !profile.get('bio') && !profile.get('website')) {
$profile_badge = $.make('a', {
className: 'NB-friends-profile-link NB-modal-submit-button NB-modal-submit-green',
href: '#'
}, [
'Fill out your profile ',
$.make('img', { src: NEWSBLUR.Globals['MEDIA_URL']+'img/icons/silk/eye.png', style: 'padding-left: 10px' }),
$.make('img', { src: NEWSBLUR.Globals['MEDIA_URL']+'img/icons/silk/eye.png' })
]);
} else {
$profile_badge = new NEWSBLUR.Views.SocialProfileBadge({model: profile});
}
$badge.append($profile_badge);
},
make_profile_photo_chooser: function() {
var $profiles = $('.NB-friends-profilephoto', this.$modal).empty();
_.each(['twitter', 'facebook', 'gravatar'], _.bind(function(service) {
var $profile = $.make('div', { className: 'NB-friends-profile-photo-group NB-friends-photo-'+service }, [
$.make('div', { className: 'NB-friends-photo-title' }, [
$.make('input', { type: 'radio', name: 'profile_photo_service', value: service, id: 'NB-profile-photo-service-'+service }),
$.make('label', { 'for': 'NB-profile-photo-service-'+service }, _.string.capitalize(service))
]),
$.make('div', { className: 'NB-friends-photo-image' }, [
$.make('label', { 'for': 'NB-profile-photo-service-'+service }, [
$.make('div', { className: 'NB-photo-loader' }),
$.make('img', { src: this.services[service][service+'_picture_url'] })
])
]),
(service == 'upload' && $.make('div', { className: 'NB-photo-link' }, [
$.make('a', { href: '#', className: 'NB-photo-upload-link NB-splash-link' }, 'Upload picture'),
$.make('input', { type: 'file', name: 'photo' })
])),
(service == 'gravatar' && $.make('div', { className: 'NB-gravatar-link' }, [
$.make('a', { href: 'http://www.gravatar.com', className: 'NB-splash-link', target: '_blank' }, 'gravatar.com')
]))
]);
if (service == this.profile.get('photo_service')) {
$('input[type=radio]', $profile).attr('checked', true);
}
$profiles.append($profile);
}, this));
},
fetch_user_profile: function(callback) {
$('.NB-modal-loading', this.$modal).addClass('NB-active');
this.model.load_current_user_profile(_.bind(function(data) {
$('.NB-modal-loading', this.$modal).removeClass('NB-active');
this.profile = this.model.user_profile;
this.services = data.services;
this.make_profile_section();
this.make_profile_photo_chooser();
callback && callback();
}, this));
},
open_modal: function(callback) {
var self = this;
this.$modal.modal({
'minWidth': this.options.width,
'maxWidth': this.options.width,
'overlayClose': true,
'onOpen': function (dialog) {
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200);
dialog.data.fadeIn(200, function() {
if (self.options.onOpen) {
self.options.onOpen();
}
});
setTimeout(function() {
$(window).resize();
});
});
},
'onShow': function(dialog) {
$('#simplemodal-container').corner('6px');
if (self.options.onShow) {
self.options.onShow();
}
},
'onClose': function(dialog, callback) {
dialog.data.hide().empty().remove();
dialog.container.hide().empty().remove();
dialog.overlay.fadeOut(200, function() {
dialog.overlay.empty().remove();
$.modal.close(callback);
});
$('.NB-modal-holder').empty().remove();
}
});
},
resize_modal: function(count) {
var $tab = $('.NB-tab.NB-active', this.$modal);
var $modal = this.$modal;
var $modal_container = $modal.closest('.simplemodal-container');
if (count > 50) return;
if ($modal.height() > $modal_container.height() - 24) {
$tab.height($tab.height() - 5);
this.resize_modal(count+1);
}
},
switch_tab: function(newtab) {
var $modal_tabs = $('.NB-modal-tab', this.$modal);
var $tabs = $('.NB-tab', this.$modal);
$modal_tabs.removeClass('NB-active');
$tabs.removeClass('NB-active');
$modal_tabs.filter('.NB-modal-tab-'+newtab).addClass('NB-active');
$tabs.filter('.NB-tab-'+newtab).addClass('NB-active');
this.resize_modal();
},
close_and_load_account: function() {
this.close(function() {
NEWSBLUR.reader.open_account_modal();
});
},
save_profile: function() {
console.log(["save_profile"]);
var data = {
'photo_service': $('input[name=profile_photo_service]:checked', this.$modal).val(),
'location': $('input[name=location]', this.$modal).val(),
'website': $('input[name=website]', this.$modal).val(),
'bio': $('input[name=bio]', this.$modal).val()
};
this.model.save_user_profile(data, _.bind(function() {
this.animate_profile_badge();
this.disable_save();
}, this));
this.disable_save();
$('.NB-profile-save-button', this.$modal).text('Saving...');
},
animate_profile_badge: function($badge) {
$badge = $badge || $('.NB-friends-findfriends-profile .NB-profile-badge', this.$modal);
_.delay(_.bind(function() {
$badge.css('backgroundColor', 'white').animate({
'backgroundColor': 'gold'
}, {
'queue': false,
'duration': 600,
'easing': 'linear',
'complete': function() {
$badge.animate({
'backgroundColor': 'white'
}, {
'queue': false,
'duration': 1250,
'easing': 'easeOutQuad'
});
}
});
}, this), 800);
$badge.closest('.NB-tab').scrollTo(0, {
duration: 1000,
axis: 'y',
easing: 'easeInOutQuint',
offset: 0,
queue: false
});
},
// ===========
// = Actions =
// ===========
handle_click: function(elem, e) {
var self = this;
$.targetIs(e, { tagSelector: '.NB-modal-tab' }, function($t, $p) {
e.preventDefault();
var newtab;
if ($t.hasClass('NB-modal-tab-profile')) {
newtab = 'profile';
} else if ($t.hasClass('NB-modal-tab-blurblog')) {
newtab = 'blurblog';
}
self.switch_tab(newtab);
});
$.targetIs(e, { tagSelector: '.NB-profile-save-button' }, function($t, $p) {
e.preventDefault();
self.save_profile();
});
$.targetIs(e, { tagSelector: '.NB-account-link' }, function($t, $p) {
e.preventDefault();
self.close_and_load_account();
});
},
handle_cancel: function() {
var $cancel = $('.NB-modal-cancel', this.$modal);
$cancel.click(function(e) {
e.preventDefault();
$.modal.close();
});
},
handle_profile_counts: function() {
var focus = function(e) {
var $input = $(e.currentTarget);
var $count = $input.next('.NB-count').eq(0);
var count = parseInt($input.data('max'), 10) - $input.val().length;
$count.text(count);
$count.toggleClass('NB-red', count < 0);
$count.show();
};
$('.NB-tab-profile', this.$modal).delegate('input[type=text]', 'focus', focus)
.delegate('input[type=text]', 'keyup', focus)
.delegate('input[type=text]', 'keydown', focus)
.delegate('input[type=text]', 'change', focus)
.delegate('input[type=text]', 'blur', function(e) {
var $input = $(e.currentTarget);
var $count = $input.next('.NB-count').eq(0);
$count.hide();
});
},
delegate_change: function() {
$('.NB-tab-profile', this.$modal).delegate('input[type=radio],input[type=checkbox],select', 'change', _.bind(this.enable_save, this));
$('.NB-tab-profile', this.$modal).delegate('input[type=text]', 'keydown', _.bind(this.enable_save, this));
},
enable_save: function() {
console.log(["enable_save"]);
$('.NB-profile-save-button', this.$modal)
.removeClass('NB-modal-submit-close')
.addClass('NB-modal-submit-green')
.text('Save My Profile');
},
disable_save: function() {
$('.NB-profile-save-button', this.$modal)
.addClass('NB-modal-submit-close')
.removeClass('NB-modal-submit-green')
.text('Change what you like above...');
}
});