2011-12-21 18:23:53 -08:00
|
|
|
NEWSBLUR.ReaderFriends = function(options) {
|
|
|
|
var defaults = {
|
2011-12-25 20:50:59 -08:00
|
|
|
width: 800
|
2011-12-21 18:23:53 -08:00
|
|
|
};
|
|
|
|
|
|
|
|
this.options = $.extend({}, defaults, options);
|
|
|
|
this.model = NEWSBLUR.AssetModel.reader();
|
|
|
|
|
|
|
|
this.runner();
|
|
|
|
};
|
|
|
|
|
|
|
|
NEWSBLUR.ReaderFriends.prototype = new NEWSBLUR.Modal;
|
|
|
|
|
|
|
|
_.extend(NEWSBLUR.ReaderFriends.prototype, {
|
|
|
|
|
|
|
|
runner: function() {
|
2011-12-25 20:50:59 -08:00
|
|
|
this.options.onOpen = _.bind(function() {
|
|
|
|
this.resize_modal();
|
|
|
|
}, this);
|
|
|
|
|
2011-12-21 18:23:53 -08:00
|
|
|
this.make_modal();
|
|
|
|
this.open_modal();
|
2011-12-22 13:36:03 -08:00
|
|
|
this.fetch_friends();
|
2011-12-21 18:23:53 -08:00
|
|
|
|
|
|
|
this.$modal.bind('click', $.rescope(this.handle_click, this));
|
2011-12-26 16:50:04 -08:00
|
|
|
this.handle_profile_counts();
|
2011-12-21 18:23:53 -08:00
|
|
|
this.handle_change();
|
|
|
|
},
|
|
|
|
|
|
|
|
make_modal: function() {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
this.$modal = $.make('div', { className: 'NB-modal NB-modal-friends' }, [
|
|
|
|
$.make('div', { className: 'NB-modal-tabs' }, [
|
2011-12-22 13:36:03 -08:00
|
|
|
$.make('div', { className: 'NB-modal-loading' }),
|
|
|
|
$.make('div', { className: 'NB-modal-tab NB-active NB-modal-tab-findfriends' }, 'Find Friends'),
|
2011-12-25 20:50:59 -08:00
|
|
|
$.make('div', { className: 'NB-modal-tab NB-modal-tab-profile' }, 'Profile'),
|
2011-12-22 13:36:03 -08:00
|
|
|
$.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')
|
2011-12-21 18:23:53 -08:00
|
|
|
]),
|
|
|
|
$.make('h2', { className: 'NB-modal-title' }, 'Friends and Followers'),
|
2011-12-22 13:36:03 -08:00
|
|
|
$.make('div', { className: 'NB-tab NB-tab-findfriends NB-active' }, [
|
2011-12-24 00:30:37 -08:00
|
|
|
$.make('fieldset', [
|
|
|
|
$.make('legend', 'Social Connections'),
|
|
|
|
$.make('div', { className: 'NB-modal-section NB-friends-services'})
|
|
|
|
]),
|
|
|
|
$.make('fieldset', [
|
2011-12-26 16:50:04 -08:00
|
|
|
$.make('legend', 'Your profile'),
|
|
|
|
$.make('div', { className: 'NB-modal-section NB-friends-findfriends-profile' })
|
2011-12-24 12:46:41 -08:00
|
|
|
]),
|
|
|
|
$.make('fieldset', [
|
|
|
|
$.make('legend', 'Search for friends'),
|
|
|
|
$.make('div', { className: 'NB-modal-section NB-friends-search'}, [
|
|
|
|
$.make('label', { 'for': 'NB-friends-search-input' }, 'Username or email:'),
|
2011-12-25 20:50:59 -08:00
|
|
|
$.make('input', { type: 'text', className: 'NB-input', id: 'NB-friends-search-input' }),
|
|
|
|
$.make('div', { className: 'NB-friends-search-badge' })
|
2011-12-24 12:46:41 -08:00
|
|
|
])
|
2011-12-26 16:50:04 -08:00
|
|
|
]),
|
|
|
|
$.make('fieldset', [
|
|
|
|
$.make('legend', 'People You Know'),
|
|
|
|
$.make('div', { className: 'NB-modal-section NB-friends-findlist'}, [
|
|
|
|
$.make('div', { className: 'NB-ghost' }, 'You\'re auto-following new friends, so no need to manually follow them. Score!')
|
|
|
|
])
|
2011-12-24 00:30:37 -08:00
|
|
|
])
|
2011-12-22 13:36:03 -08:00
|
|
|
]),
|
2011-12-25 20:50:59 -08:00
|
|
|
$.make('div', { className: 'NB-tab NB-tab-profile' }, [
|
|
|
|
$.make('fieldset', [
|
|
|
|
$.make('legend', 'Profile picture'),
|
|
|
|
$.make('div', { className: 'NB-modal-section NB-friends-profilephoto'})
|
|
|
|
]),
|
|
|
|
$.make('fieldset', [
|
|
|
|
$.make('legend', 'Profile'),
|
|
|
|
$.make('div', { className: 'NB-modal-section NB-friends-profile'})
|
|
|
|
]),
|
|
|
|
$.make('div', { className: 'NB-modal-submit-close NB-profile-save-button NB-modal-submit-button' }, 'Save my profile')
|
|
|
|
]),
|
2011-12-23 18:28:16 -08:00
|
|
|
$.make('div', { className: 'NB-tab NB-tab-following' }),
|
|
|
|
$.make('div', { className: 'NB-tab NB-tab-followers' })
|
2011-12-21 18:23:53 -08:00
|
|
|
]);
|
|
|
|
},
|
|
|
|
|
2011-12-22 13:36:03 -08:00
|
|
|
fetch_friends: function() {
|
2011-12-23 18:28:16 -08:00
|
|
|
$('.NB-modal-loading', this.$modal).addClass('NB-active');
|
|
|
|
this.model.fetch_friends(_.bind(function(data) {
|
2011-12-25 20:50:59 -08:00
|
|
|
this.make_find_friends_and_services(data);
|
2011-12-26 16:50:04 -08:00
|
|
|
this.make_profile_section(data);
|
|
|
|
this.make_profile_tab(data);
|
|
|
|
this.make_followers_tab(data);
|
|
|
|
this.make_following_tab(data);
|
2011-12-23 18:28:16 -08:00
|
|
|
}, this));
|
2011-12-22 13:36:03 -08:00
|
|
|
},
|
|
|
|
|
2011-12-25 20:50:59 -08:00
|
|
|
make_find_friends_and_services: function(data) {
|
2011-12-22 13:36:03 -08:00
|
|
|
console.log(["data", data]);
|
2011-12-23 18:28:16 -08:00
|
|
|
$('.NB-modal-loading', this.$modal).removeClass('NB-active');
|
2011-12-22 13:36:03 -08:00
|
|
|
var $services = $('.NB-friends-services', this.$modal).empty();
|
|
|
|
|
|
|
|
_.each(['twitter', 'facebook'], function(service) {
|
|
|
|
var $service;
|
|
|
|
if (data.services[service][service+'_uid']) {
|
2011-12-24 00:30:37 -08:00
|
|
|
$service = $.make('div', { className: 'NB-friends-service NB-connected NB-friends-service-'+service }, [
|
2011-12-22 13:36:03 -08:00
|
|
|
$.make('div', { className: 'NB-friends-service-title' }, _.capitalize(service)),
|
|
|
|
$.make('div', { className: 'NB-friends-service-connect NB-modal-submit-button NB-modal-submit-close' }, 'Disconnect')
|
|
|
|
]);
|
|
|
|
} else {
|
2011-12-24 00:30:37 -08:00
|
|
|
$service = $.make('div', { className: 'NB-friends-service NB-friends-service-'+service }, [
|
2011-12-22 13:36:03 -08:00
|
|
|
$.make('div', { className: 'NB-friends-service-title' }, _.capitalize(service)),
|
2011-12-23 18:28:16 -08:00
|
|
|
$.make('div', { className: 'NB-friends-service-connect NB-modal-submit-button NB-modal-submit-green' }, [
|
|
|
|
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/' + service + '_icon.png' }),
|
2011-12-26 16:50:04 -08:00
|
|
|
'Find ' + _.capitalize(service) + ' Friends'
|
2011-12-23 18:28:16 -08:00
|
|
|
])
|
2011-12-22 13:36:03 -08:00
|
|
|
]);
|
|
|
|
}
|
|
|
|
$services.append($service);
|
|
|
|
});
|
|
|
|
|
|
|
|
$autofollow = $.make('div', { className: 'NB-friends-service NB-friends-autofollow'}, [
|
|
|
|
$.make('input', { type: 'checkbox', className: 'NB-friends-autofollow-checkbox', id: 'NB-friends-autofollow-checkbox', checked: data.autofollow ? 'checked' : null }),
|
|
|
|
$.make('label', { className: 'NB-friends-autofollow-label', 'for': 'NB-friends-autofollow-checkbox' }, [
|
|
|
|
'Auto-follow',
|
|
|
|
$.make('br'),
|
|
|
|
'my friends'
|
|
|
|
])
|
|
|
|
]);
|
2011-12-24 00:30:37 -08:00
|
|
|
$services.prepend($autofollow);
|
2011-12-23 18:28:16 -08:00
|
|
|
this.resize();
|
|
|
|
},
|
|
|
|
|
2011-12-26 16:50:04 -08:00
|
|
|
make_profile_section: function(data) {
|
|
|
|
var $badge = $('.NB-friends-findfriends-profile', this.$modal).empty();
|
|
|
|
var $profile_badge;
|
|
|
|
var profile = data.social_profile;
|
|
|
|
|
|
|
|
if (!profile.location && !profile.bio && !profile.website && !profile.photo_url) {
|
|
|
|
$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 = this.make_profile_badge(profile);
|
|
|
|
}
|
|
|
|
|
|
|
|
$badge.append($profile_badge);
|
|
|
|
},
|
|
|
|
|
|
|
|
make_profile_tab: function(data) {
|
2011-12-25 20:50:59 -08:00
|
|
|
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'),
|
2011-12-26 16:50:04 -08:00
|
|
|
$.make('input', { id: 'NB-profile-location', name: 'location', type: 'text', className: 'NB-input', style: 'width: 220px', value: data.social_profile.location, "data-max": 40 }),
|
|
|
|
$.make('span', { className: 'NB-count NB-count-location' }),
|
2011-12-25 20:50:59 -08:00
|
|
|
$.make('label', { 'for': 'NB-profile-website' }, 'Website'),
|
2011-12-26 16:50:04 -08:00
|
|
|
$.make('input', { id: 'NB-profile-website', name: 'website', type: 'text', className: 'NB-input', style: 'width: 300px', value: data.social_profile.website, "data-max": 256 }),
|
|
|
|
$.make('span', { className: 'NB-count NB-count-website' }),
|
2011-12-25 20:50:59 -08:00
|
|
|
$.make('label', { 'for': 'NB-profile-bio' }, 'Bio'),
|
2011-12-26 16:50:04 -08:00
|
|
|
$.make('input', { id: 'NB-profile-bio', name: 'bio', type: 'text', className: 'NB-input', style: 'width: 380px', value: data.social_profile.bio, "data-max": 160 }),
|
|
|
|
$.make('span', { className: 'NB-count NB-count-bio' })
|
2011-12-25 20:50:59 -08:00
|
|
|
]);
|
|
|
|
$profile_container.html($profile);
|
2011-12-26 16:50:04 -08:00
|
|
|
this.make_profile_photo_chooser(data);
|
2011-12-25 20:50:59 -08:00
|
|
|
this.disable_save();
|
|
|
|
},
|
|
|
|
|
2011-12-26 16:50:04 -08:00
|
|
|
make_profile_photo_chooser: function(data) {
|
2011-12-25 20:50:59 -08:00
|
|
|
var $profiles = $('.NB-friends-profilephoto', this.$modal).empty();
|
2011-12-24 00:30:37 -08:00
|
|
|
|
2011-12-25 12:27:05 -08:00
|
|
|
_.each(['twitter', 'facebook', 'gravatar'], function(service) {
|
2011-12-24 00:30:37 -08:00
|
|
|
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 }, _.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: data.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')
|
|
|
|
]))
|
|
|
|
]);
|
2011-12-25 20:50:59 -08:00
|
|
|
if (service == data.social_profile.photo_service) {
|
|
|
|
$('input[type=radio]', $profile).attr('checked', true);
|
|
|
|
}
|
2011-12-24 00:30:37 -08:00
|
|
|
$profiles.append($profile);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2011-12-26 16:50:04 -08:00
|
|
|
make_followers_tab: function(data) {
|
2011-12-23 18:28:16 -08:00
|
|
|
if (!data.followers || !data.followers.length) {
|
2011-12-25 12:27:05 -08:00
|
|
|
var $ghost = $.make('div', { className: 'NB-ghost NB-modal-section' }, 'Nobody has yet subscribed to your shared stories.');
|
2011-12-23 18:28:16 -08:00
|
|
|
$('.NB-tab-followers', this.$modal).empty().append($ghost);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2011-12-26 16:50:04 -08:00
|
|
|
make_following_tab: function(data) {
|
2011-12-23 18:28:16 -08:00
|
|
|
if (!data.following || !data.following.length) {
|
2011-12-25 12:27:05 -08:00
|
|
|
var $ghost = $.make('div', { className: 'NB-ghost NB-modal-section' }, 'You have not yet subscribed to anybody\'s shared stories.');
|
2011-12-23 18:28:16 -08:00
|
|
|
$('.NB-tab-following', this.$modal).empty().append($ghost);
|
|
|
|
}
|
2011-12-22 13:36:03 -08:00
|
|
|
},
|
|
|
|
|
2011-12-26 16:50:04 -08:00
|
|
|
make_profile_badge: function(profile) {
|
|
|
|
var $badge = $.make('div', { className: "NB-profile-badge" }, [
|
|
|
|
$.make('div', { className: 'NB-profile-badge-photo' }, [
|
|
|
|
$.make('img', { src: profile.photo_url })
|
|
|
|
]),
|
|
|
|
$.make('div', { className: 'NB-profile-badge-username' }, profile.username),
|
|
|
|
$.make('div', { className: 'NB-profile-badge-location' }, profile.location),
|
|
|
|
$.make('div', { className: 'NB-profile-badge-bio' }, profile.bio)
|
|
|
|
]);
|
|
|
|
return $badge;
|
|
|
|
},
|
|
|
|
|
2011-12-21 18:23:53 -08:00
|
|
|
open_modal: function(callback) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
this.$modal.modal({
|
2011-12-25 20:50:59 -08:00
|
|
|
'minWidth': this.options.width,
|
|
|
|
'maxWidth': this.options.width,
|
2011-12-21 18:23:53 -08:00
|
|
|
'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();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2011-12-25 20:50:59 -08:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2011-12-22 13:36:03 -08:00
|
|
|
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');
|
2011-12-25 20:50:59 -08:00
|
|
|
this.resize_modal();
|
2011-12-22 13:36:03 -08:00
|
|
|
},
|
|
|
|
|
2011-12-23 18:28:16 -08:00
|
|
|
connect: function(service) {
|
|
|
|
var options = "location=0,status=0,width=800,height=500";
|
|
|
|
var url = "/social/" + service + "_connect";
|
|
|
|
this.connect_window = window.open(url, '_blank', options);
|
|
|
|
},
|
|
|
|
|
2011-12-22 13:36:03 -08:00
|
|
|
disconnect: function(service) {
|
|
|
|
var $service = $('.NB-friends-service-'+service, this.$modal);
|
|
|
|
$('.NB-friends-service-connect', $service).text('Disconnecting...');
|
2011-12-24 00:30:37 -08:00
|
|
|
this.model.disconnect_social_service(service, _.bind(function(data) {
|
2011-12-25 20:50:59 -08:00
|
|
|
this.make_find_friends_and_services(data);
|
2011-12-24 00:30:37 -08:00
|
|
|
this.make_profile(data);
|
|
|
|
}, this));
|
2011-12-22 13:36:03 -08:00
|
|
|
},
|
|
|
|
|
2011-12-23 18:28:16 -08:00
|
|
|
post_connect: function(data) {
|
2011-12-24 00:30:37 -08:00
|
|
|
$('.NB-error', this.$modal).remove();
|
2011-12-23 18:28:16 -08:00
|
|
|
if (data.error) {
|
2011-12-24 00:30:37 -08:00
|
|
|
var $error = $.make('div', { className: 'NB-error' }, [
|
|
|
|
$.make('span', { className: 'NB-raquo' }, '» '),
|
|
|
|
data.error
|
|
|
|
]).css('opacity', 0);
|
2011-12-23 18:28:16 -08:00
|
|
|
$('.NB-friends-services', this.$modal).append($error);
|
2011-12-24 00:30:37 -08:00
|
|
|
$error.animate({'opacity': 1}, {'duration': 1000});
|
|
|
|
this.resize();
|
2011-12-23 18:28:16 -08:00
|
|
|
} else {
|
|
|
|
this.fetch_friends();
|
2011-12-24 00:30:37 -08:00
|
|
|
NEWSBLUR.reader.hide_find_friends();
|
2011-12-23 18:28:16 -08:00
|
|
|
}
|
|
|
|
},
|
2011-12-25 20:50:59 -08:00
|
|
|
|
|
|
|
close_and_load_account: function() {
|
|
|
|
this.close(function() {
|
|
|
|
NEWSBLUR.reader.open_account_modal();
|
|
|
|
});
|
|
|
|
},
|
2011-12-23 18:28:16 -08:00
|
|
|
|
2011-12-25 20:50:59 -08:00
|
|
|
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_social_profile(data, _.bind(function() {
|
|
|
|
this.fetch_friends();
|
|
|
|
this.switch_tab('findfriends');
|
2011-12-26 16:50:04 -08:00
|
|
|
this.animate_profile_badge();
|
2011-12-25 20:50:59 -08:00
|
|
|
}, this));
|
2011-12-26 16:50:04 -08:00
|
|
|
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);
|
|
|
|
console.log(["$badge", $badge]);
|
|
|
|
_.delay(_.bind(function() {
|
|
|
|
$badge.css('backgroundColor', 'white').animate({
|
|
|
|
'backgroundColor': 'orange'
|
|
|
|
}, {
|
|
|
|
'queue': false,
|
|
|
|
'duration': 1200,
|
|
|
|
'easing': 'easeInQuad',
|
|
|
|
'complete': function() {
|
|
|
|
$badge.animate({
|
|
|
|
'backgroundColor': 'white'
|
|
|
|
}, {
|
|
|
|
'queue': false,
|
|
|
|
'duration': 650,
|
|
|
|
'easing': 'easeOutQuad'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}, this), 200);
|
2011-12-25 20:50:59 -08:00
|
|
|
},
|
|
|
|
|
2011-12-21 18:23:53 -08:00
|
|
|
// ===========
|
|
|
|
// = Actions =
|
|
|
|
// ===========
|
|
|
|
|
|
|
|
handle_click: function(elem, e) {
|
|
|
|
var self = this;
|
|
|
|
|
2011-12-22 13:36:03 -08:00
|
|
|
$.targetIs(e, { tagSelector: '.NB-modal-tab' }, function($t, $p) {
|
2011-12-21 18:23:53 -08:00
|
|
|
e.preventDefault();
|
2011-12-22 13:36:03 -08:00
|
|
|
var newtab;
|
|
|
|
if ($t.hasClass('NB-modal-tab-findfriends')) {
|
|
|
|
newtab = 'findfriends';
|
2011-12-25 20:50:59 -08:00
|
|
|
} else if ($t.hasClass('NB-modal-tab-profile')) {
|
|
|
|
newtab = 'profile';
|
2011-12-22 13:36:03 -08:00
|
|
|
} else if ($t.hasClass('NB-modal-tab-followers')) {
|
|
|
|
newtab = 'followers';
|
|
|
|
} else if ($t.hasClass('NB-modal-tab-following')) {
|
|
|
|
newtab = 'following';
|
|
|
|
}
|
|
|
|
self.switch_tab(newtab);
|
2011-12-21 18:23:53 -08:00
|
|
|
});
|
2011-12-22 13:36:03 -08:00
|
|
|
$.targetIs(e, { tagSelector: '.NB-friends-service-connect' }, function($t, $p) {
|
2011-12-21 18:23:53 -08:00
|
|
|
e.preventDefault();
|
2011-12-22 13:36:03 -08:00
|
|
|
var service;
|
|
|
|
var $service = $t.closest('.NB-friends-service');
|
|
|
|
if ($service.hasClass('NB-friends-service-twitter')) {
|
|
|
|
service = 'twitter';
|
|
|
|
} else if ($service.hasClass('NB-friends-service-facebook')) {
|
|
|
|
service = 'facebook';
|
|
|
|
}
|
|
|
|
if ($service.hasClass('NB-connected')) {
|
|
|
|
self.disconnect(service);
|
|
|
|
} else {
|
|
|
|
self.connect(service);
|
|
|
|
}
|
2011-12-21 18:23:53 -08:00
|
|
|
});
|
2011-12-25 20:50:59 -08:00
|
|
|
$.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) {
|
2011-12-21 18:23:53 -08:00
|
|
|
e.preventDefault();
|
|
|
|
|
2011-12-25 20:50:59 -08:00
|
|
|
self.save_profile();
|
|
|
|
});
|
|
|
|
$.targetIs(e, { tagSelector: '.NB-account-link' }, function($t, $p) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
self.close_and_load_account();
|
2011-12-21 18:23:53 -08:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
handle_cancel: function() {
|
|
|
|
var $cancel = $('.NB-modal-cancel', this.$modal);
|
|
|
|
|
|
|
|
$cancel.click(function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
$.modal.close();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2011-12-26 16:50:04 -08:00
|
|
|
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();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2011-12-21 18:23:53 -08:00
|
|
|
handle_change: function() {
|
2011-12-25 20:50:59 -08:00
|
|
|
$('.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));
|
2011-12-21 18:23:53 -08:00
|
|
|
},
|
|
|
|
|
|
|
|
enable_save: function() {
|
2011-12-26 16:50:04 -08:00
|
|
|
$('.NB-profile-save-button', this.$modal).addClass('NB-modal-submit-green').text('Save My Profile');
|
2011-12-21 18:23:53 -08:00
|
|
|
},
|
|
|
|
|
|
|
|
disable_save: function() {
|
2011-12-26 16:50:04 -08:00
|
|
|
$('.NB-profile-save-button', this.$modal).removeClass('NB-modal-submit-green').text('Change what you like above...');
|
2011-12-21 18:23:53 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
});
|