NewsBlur/media/js/newsblur/reader/reader_profile_editor.js

651 lines
30 KiB
JavaScript

NEWSBLUR.ReaderProfileEditor = function(options) {
var defaults = {
width: 800
};
this.options = $.extend({}, defaults, options);
this.model = NEWSBLUR.assets;
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.$modal.bind('change', $.rescope(this.handle_change, 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' }, [
$.make('div', { className: 'NB-icon' }),
'Profile',
$.make('div', { className: 'NB-icon-dropdown' })
]),
$.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: 410px', 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: 520px', value: this.profile.get('bio'), "data-max": 160 }),
$.make('span', { className: 'NB-count NB-count-bio' }),
$.make('label', { 'for': 'NB-profile-privacy-public' }, [
'Privacy',
(!NEWSBLUR.Globals.is_premium && $.make('div', { className: 'NB-profile-privacy-notpremium' }, [
'You must have a ',
$.make('div', { className: 'NB-splash-link NB-premium-link' }, 'premium account'),
' to change privacy.'
]))
]),
$.make('div', { className: 'NB-profile-privacy-options' }, [
$.make('div', { className: 'NB-profile-privacy-option' }, [
$.make('input', {
id: 'NB-profile-privacy-public',
name: 'protected',
type: 'radio',
value: 'public',
checked: !this.profile.get('protected') &&
!this.profile.get('private'),
disabled: !NEWSBLUR.Globals.is_premium
}),
$.make('label', { 'for': 'NB-profile-privacy-public', className: 'NB-profile-protected-label' }, [
$.make('b', 'Public:'),
$.make('span', 'My shared stories are public and anybody can reply to me')
])
]),
$.make('div', { className: 'NB-profile-privacy-option' }, [
$.make('input', {
id: 'NB-profile-privacy-protected',
name: 'protected',
type: 'radio',
value: 'protected',
checked: this.profile.get('protected') &&
!this.profile.get('private'),
disabled: !NEWSBLUR.Globals.is_premium
}),
$.make('label', { 'for': 'NB-profile-privacy-protected', className: 'NB-profile-protected-label' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + 'img/icons/circular/g_icn_lock.png' }),
$.make('b', 'Protected:'),
$.make('span', 'My shared stories are public but only people I approve can reply')
])
]),
$.make('div', { className: 'NB-profile-privacy-option' }, [
$.make('input', {
id: 'NB-profile-privacy-private',
name: 'protected',
type: 'radio',
value: 'private',
checked: this.profile.get('protected') &&
this.profile.get('private'),
disabled: !NEWSBLUR.Globals.is_premium
}),
$.make('label', { 'for': 'NB-profile-privacy-private', className: 'NB-profile-protected-label' }, [
$.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + 'img/icons/circular/g_icn_lock.png' }),
$.make('b', 'Private:'),
$.make('span', 'Only people I approve can see my shared stories and reply to me')
])
])
])
])
])
]),
$.make('div', { className: 'NB-disabled NB-modal-submit-green NB-profile-save-button NB-modal-submit-button' }, 'Change your profile above')
]),
$.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('label', { 'for': 'NB-profile-blurblog-address' }, 'Blurblog address'),
$.make('a', { href: this.profile.get('feed_link'), target: '_blank', className: 'NB-profile-blurblog-address NB-splash-link' }, this.profile.get('feed_link')),
$.make('label', { 'for': 'NB-profile-blurblog-title' }, 'Blurblog title'),
$.make('input', { type: 'text', id: 'NB-profile-blurblog-title', name: 'blurblog_title', value: this.profile.get('feed_title'), className: 'NB-input NB-profile-blurblog-title' }),
$.make('label', 'Background color'),
this.make_color_palette()
])
]),
$.make('fieldset', [
$.make('legend', 'Custom CSS for your Blurblog'),
$.make('div', { className: 'NB-modal-section NB-profile-editor-blurblog-custom-css'}, [
$.make('textarea', { 'className': 'NB-profile-blurblog-css', name: 'custom_css' }, this.profile.get('custom_css'))
])
]),
$.make('fieldset', [
$.make('legend', 'Blurblog Options'),
$.make('div', { className: 'NB-modal-section'}, [
$.make('div', { className: 'NB-preference NB-preference-permalinkdirect' }, [
$.make('label', { className: 'NB-preference-label'}, [
'Blurblog permalinks'
]),
$.make('div', { className: 'NB-preference-options' }, [
$.make('div', [
$.make('input', { id: 'NB-preference-permalinkdirect-0', type: 'radio', name: 'bb_permalink_direct', value: 'false', checked: true }),
$.make('label', { 'for': 'NB-preference-permalinkdirect-0' }, [
'Link to my blurblog and shared comments'
])
]),
$.make('div', [
$.make('input', { id: 'NB-preference-permalinkdirect-1', type: 'radio', name: 'bb_permalink_direct', value: 'true' }),
$.make('label', { 'for': 'NB-preference-permalinkdirect-1' }, [
'Link directly to the original story'
])
])
])
])
])
]),
$.make('div', { className: 'NB-disabled NB-modal-submit-green NB-blurblog-save-button NB-modal-submit-button' }, 'Change your blurblog settings above')
]),
$.make('div', { className: 'NB-tab NB-tab-following' }),
$.make('div', { className: 'NB-tab NB-tab-followers' })
]);
},
make_color_palette: function() {
var user_profile = this.user_profile;
var colors = [
// ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(153, 153, 153)","rgb(183, 183, 183)",
// "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(239, 239, 239)", "rgb(243, 243, 243)", "rgb(255, 255, 255)"],
// ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
// "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
];
var $colors = $.make('div', { className: 'NB-profile-blurblog-colors' });
_.each(colors, function(color_line) {
var $color_line = $.make('div', { className: 'NB-profile-blurblog-colorline' });
_.each(color_line, function(color) {
var $color = $.make('span', { className: 'NB-profile-blurblog-color', style: 'background-color: ' + color }).data('color', color);
$color_line.append($color);
});
$colors.append($color_line);
});
return $colors;
},
choose_color: function() {
var user_profile = this.profile;
var $colors = $('.NB-profile-blurblog-color', this.$modal);
$colors.each(function() {
var $color = $(this);
var color = $color.data('color');
if (user_profile.get('custom_bgcolor') == color) {
$color.addClass('NB-active');
return false;
}
});
},
populate_data: function() {
var profile = this.profile;
$('textarea[name=custom_css]', this.$modal).val(this.profile.get('custom_css'));
$('input[name=bb_permalink_direct]', this.$modal).each(function() {
if ($(this).val() == ""+profile.get('bb_permalink_direct')) {
$(this).prop('checked', true);
}
});
},
make_profile_section: function() {
var $badge = $('.NB-friends-findfriends-profile', this.$modal).empty();
var $profile_badge;
var profile = this.profile;
$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();
$profiles.append($.make('div', { className: "NB-photo-upload-error NB-error" }));
_.each(['nothing', 'upload', '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: service == 'nothing' || !this.services[service][service+'_picture_url'] ?
NEWSBLUR.Globals.MEDIA_URL + 'img/reader/default_profile_photo.png' :
this.services[service][service+'_picture_url']
})
])
]),
(service == 'upload' && $.make('div', { className: 'NB-photo-link' }, [
$.make('form', { method: 'post', enctype: 'multipart/form-data', encoding: 'multipart/form-data' }, [
$.make('a', { href: '#', className: 'NB-photo-upload-link NB-splash-link' }, 'upload picture'),
$.make('input', { type: 'file', name: 'photo', id: "NB-photo-upload-file", className: 'NB-photo-upload-file' })
])
])),
(service == 'gravatar' && $.make('div', { className: 'NB-gravatar-link' }, [
$.make('a', { href: 'http://www.gravatar.com', className: 'NB-splash-link', target: '_blank' }, 'gravatar.com')
])),
(_.contains(['facebook', 'twitter'], service) && $.make('div', { className: 'NB-friends-link' }, [
$.make('div', { className: 'NB-splash-link' }, 'connect')
]))
]);
if (service == this.profile.get('photo_service') ||
(service == 'nothing' && !this.profile.get('photo_service'))) {
$('input[type=radio]', $profile).prop('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();
this.choose_color();
this.populate_data();
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();
});
},
close_and_load_friends: function() {
this.close(function() {
NEWSBLUR.reader.open_friends_modal();
});
},
close_and_load_feedchooser: function() {
this.close(function() {
NEWSBLUR.reader.open_feedchooser_modal();
});
},
serialize_preferences: function($container) {
var preferences = {};
$container = $container || this.$modal;
$('input[type=radio]:checked, select', $container).each(function() {
var name = $(this).attr('name');
var preference = preferences[name] = $(this).val();
if (preference == 'true') preferences[name] = true;
else if (preference == 'false') preferences[name] = false;
});
$('input[type=checkbox]', $container).each(function() {
preferences[$(this).attr('name')] = $(this).is(':checked');
});
$('input[type=hidden],input[type=text],textarea', $container).each(function() {
preferences[$(this).attr('name')] = $(this).val();
});
return preferences;
},
save_profile: function() {
var privacy_private = $('input#NB-profile-privacy-private', this.$modal).is(':checked');
var privacy_protected = $('input#NB-profile-privacy-protected', this.$modal).is(':checked') || privacy_private;
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(),
'protected': privacy_protected,
'private': privacy_private
};
this.model.save_user_profile(data, _.bind(function(data) {
this.animate_profile_badge();
this.disable_save_profile();
$('input[name=website]', this.$modal).val(this.profile.get('website'));
}, this));
this.disable_save_profile();
$('.NB-profile-save-button', this.$modal).text('Saving...');
},
save_blurblog: function() {
var data = this.serialize_preferences($(".NB-tab-blurblog"));
data['custom_bgcolor'] = $('.NB-profile-blurblog-color.NB-active', this.$modal).data('color');
this.model.save_blurblog_settings(data, _.bind(function() {
this.disable_save_blurblog();
}, this));
this.disable_save_blurblog();
$('.NB-blurblog-save-button', this.$modal).text('Saving...');
},
animate_profile_badge: function($badge) {
$badge = $('table', $badge) || $('.NB-friends-findfriends-profile .NB-profile-badge table', 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
});
},
set_active_color: function($color) {
$('.NB-profile-blurblog-color.NB-active', this.$modal).removeClass('NB-active');
$color.addClass('NB-active');
this.enable_save_blurblog();
},
// ===========
// = 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-blurblog-save-button' }, function($t, $p) {
e.preventDefault();
self.save_blurblog();
});
$.targetIs(e, { tagSelector: '.NB-account-link' }, function($t, $p) {
e.preventDefault();
self.close_and_load_account();
});
$.targetIs(e, { tagSelector: '.NB-friends-link' }, function($t, $p) {
e.preventDefault();
self.close_and_load_friends();
});
$.targetIs(e, { tagSelector: '.NB-profile-blurblog-color' }, function($t, $p) {
e.preventDefault();
self.set_active_color($t);
});
$.targetIs(e, { tagSelector: '.NB-premium-link' }, function($t, $p) {
e.preventDefault();
self.close_and_load_feedchooser();
});
},
handle_change: function(elem, e) {
var self = this;
$.targetIs(e, { tagSelector: '.NB-photo-upload-file' }, function($t, $p) {
e.preventDefault();
self.handle_photo_upload();
});
},
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();
});
},
handle_photo_upload: function() {
var self = this;
var $loading = $('.NB-modal-loading', this.$modal);
var $error = $('.NB-photo-upload-error', this.$modal);
var $file = $('.NB-photo-upload-file', this.$modal);
$error.slideUp(300);
$loading.addClass('NB-active');
var params = {
url: NEWSBLUR.URLs['upload-avatar'],
type: 'POST',
dataType: 'json',
success: _.bind(function(data, status) {
if (data.code < 0) {
this.error_uploading_photo();
} else {
$loading.removeClass('NB-active');
console.log(["success uploading", data, status, this]);
NEWSBLUR.assets.user_profile.set(data.user_profile);
this.services = data.services;
this.make_profile_section();
this.make_profile_photo_chooser();
}
}, this),
error: _.bind(this.error_uploading_photo, this),
cache: false,
contentType: false,
processData: false
};
if (window.FormData) {
var formData = new FormData($file.closest('form')[0]);
params['data'] = formData;
$.ajax(params);
} else {
// IE9 has no FormData
params['secureuri'] = false;
params['fileElementId'] = 'NB-photo-upload-file';
params['dataType'] = 'json';
$.ajaxFileUpload(params);
}
$file.replaceWith($file.clone());
return false;
},
error_uploading_photo: function() {
var $loading = $('.NB-modal-loading', this.$modal);
var $error = $('.NB-photo-upload-error', this.$modal);
$loading.removeClass('NB-active');
$error.text("There was a problem uploading your photo.");
$error.slideDown(300);
},
delegate_change: function() {
$('.NB-tab-profile', this.$modal).delegate('input[type=radio],input[type=checkbox],select', 'change', _.bind(this.enable_save_profile, this));
$('.NB-tab-profile', this.$modal).delegate('input[type=text]', 'keydown', _.bind(this.enable_save_profile, this));
$('.NB-tab-blurblog', this.$modal).delegate('input[type=text],textarea', 'keydown', _.bind(this.enable_save_blurblog, this));
$('.NB-tab-blurblog', this.$modal).delegate('input,textarea', 'change', _.bind(this.enable_save_blurblog, this));
},
enable_save_profile: function() {
$('.NB-profile-save-button', this.$modal)
.removeClass('NB-disabled')
.text('Save My Profile');
},
enable_save_blurblog: function() {
$('.NB-blurblog-save-button', this.$modal)
.removeClass('NB-disabled')
.text('Save My Blurblog Settings');
},
disable_save_profile: function() {
$('.NB-profile-save-button', this.$modal)
.addClass('NB-disabled')
.text('Saved!');
},
disable_save_blurblog: function() {
$('.NB-blurblog-save-button', this.$modal)
.addClass('NB-disabled')
.text('Saved!');
}
});