Permalink
Browse files

It is now possible to follow users stories and comments (they will be…

… highlighted)

Updated karma icon to retina resolution
  • Loading branch information...
1 parent a91c0d5 commit 76791e913bdd9bfd7ce8ee88ca885361fe553d25 @tommoor committed Mar 10, 2013
Showing with 127 additions and 36 deletions.
  1. +2 −1 README.md
  2. +22 −1 hn.css
  3. BIN images/follow.png
  4. BIN images/karma.png
  5. BIN images/star.png
  6. BIN images/unfollow.png
  7. +100 −33 js/hn.js
  8. +3 −1 manifest.json
View
@@ -38,4 +38,5 @@ HackerNew is released under the MIT license. It is simple and easy to understand
## Credits
* Uses jQuery hover intent plugin by [Brian Cherne](http://cherne.net/brian/resources/jquery.hoverIntent.html)
-* Form styling from [Twitter Bootstrap](https://github.com/twitter/bootstrap)
+* Entypo pictograms by [Daniel Bruce](http://www.entypo.com)
+* Form styles from [Twitter Bootstrap](https://github.com/twitter/bootstrap)
View
23 hn.css
@@ -372,6 +372,14 @@ form textarea {
min-width: 600px;
}
+a.highlighted {
+ margin: -2px 0;
+ padding: 2px 3px;
+ background: #ed7233;
+ color: #fff !important;
+ border-radius: 2px;
+}
+
font u a:link,
.comment a:link {
color: #2279B2;
@@ -482,6 +490,17 @@ a.toggle-replies.collapsed {
list-style: none;
}
+#profile-bubble .follow-user,
+#profile-bubble .unfollow-user {
+ cursor: pointer;
+ margin: 0 -10px 5px -10px;
+ padding: 5px 10px;
+}
+
+#profile-bubble .follow-user:hover,
+#profile-bubble .unfollow-user:hover {
+ background: #000;
+}
/*********** Ident Icons ***********/
@@ -498,7 +517,9 @@ a.toggle-replies.collapsed {
border-radius: 3px;
}
-.icon-karma { background: url(chrome-extension://__MSG_@@extension_id__/images/star.png) no-repeat top left; }
+.icon-karma { background: url(chrome-extension://__MSG_@@extension_id__/images/karma.png) no-repeat top left; background-size: 100%;}
+.icon-follow { background: url(chrome-extension://__MSG_@@extension_id__/images/follow.png) no-repeat top left; background-size: 100%;}
+.icon-unfollow { background: url(chrome-extension://__MSG_@@extension_id__/images/unfollow.png) no-repeat top left; background-size: 100%;}
.icon-12secondstv { background-position: 0 0; }
.icon-43people { background-position: 0 -17px; }
.icon-43places { background-position: 0 -34px; }
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Deleted file not rendered
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
133 js/hn.js
@@ -76,7 +76,7 @@ var hn = {
refreshFilters: function(){
- var filters = hn.getFilters();
+ var filters = hn.getStorage('filters');
var $filters = '';
for(var i=0, l=filters.length; i < l; i++){
@@ -101,24 +101,42 @@ var hn = {
});
$('a.filter.remove').live('click', function(){
- hn.removeFilter($(this).data('filter'));
+ hn.removeStorage("filters", $(this).data('filter'));
hn.filterStories();
hn.refreshFilters();
});
$('#add-filter').keyup(function(ev){
if (ev.keyCode == 13) {
- hn.addFilter($(this).val());
+ hn.addStorage("filters", $(this).val());
$(this).val('');
hn.refreshFilters();
}
});
$('.add-filter').live('click', function(ev){
- hn.addFilter($(this).data('filter'));
+ hn.addStorage("filters", $(this).data('filter'));
hn.refreshFilters();
});
-
+
+ $('.follow-user').live('click', function(ev){
+ hn.addStorage("follows", $(this).data('username'));
+ hn.updateHighlights();
+
+ // toggle visible button
+ $(this).hide();
+ $(this).parent().find('.unfollow-user').show();
+ });
+
+ $('.unfollow-user').live('click', function(ev){
+ hn.removeStorage("follows", $(this).data('username'));
+ hn.updateHighlights();
+
+ // toggle visible button
+ $(this).hide();
+ $(this).parent().find('.follow-user').show();
+ });
+
$('textarea').first().autogrow();
$('.toggle-replies').click(hn.toggleReplies);
@@ -273,10 +291,12 @@ var hn = {
.data('uniq', uniq);
},
- loadUserDetails: function(){
-
+ loadUserDetails: function(ev){
+
var $temp = $('<div/>');
var url = $(this).attr('href') + ' table';
+ var username = $(this).text();
+
hn.identelem = $(this);
hn.renderProfileBubble();
@@ -304,28 +324,29 @@ var hn = {
};
if (filtered.length) {
- // clean list of profile urls :-)
- hn.loadUserProfiles(filtered, karma);
+ hn.renderProfileBubble([], filtered, username, karma);
+
+ // clean list of profile urls through social lib
+ hn.loadUserProfiles(filtered, function(identities){
+ hn.renderProfileBubble(identities, urls, username, karma);
+ });
} else {
- hn.renderProfileBubble([], [], karma);
+ // otherwise just render a plain profile bubble
+ hn.renderProfileBubble([], [], username, karma);
}
});
},
- loadUserProfiles: function(urls, karma){
-
- hn.renderProfileBubble([], urls, karma);
+ loadUserProfiles: function(urls, callback){
var name = 'ident' + (new Date).getTime();
var port = chrome.extension.connect({name: name});
port.postMessage({urls: urls});
- port.onMessage.addListener(function(identities){
- hn.renderProfileBubble(identities, urls, karma);
- });
+ port.onMessage.addListener(callback);
hn.identport = port;
},
- renderProfileBubble: function(identities, urls, karma){
+ renderProfileBubble: function(identities, urls, username, karma){
if (identities || urls || karma) {
@@ -348,11 +369,12 @@ var hn = {
name: karma
});
}
-
+
// reset bubble
var $profile = $('#profile-bubble .profile');
$profile.empty().removeClass('loading');
+ // loaded
if (identities && identities.length > 0){
var ul = $('<ul class="profile-list"></ul>').appendTo($profile);
@@ -363,6 +385,18 @@ var hn = {
$('<li><a href="' + identities[x].profileUrl + '" target="_blank"><div class="icon ' + identities[x].spriteClass + '"></div> <span class="icon-label">' + identities[x].domain + '</span></a></li>').appendTo(ul);
}
}
+
+ // following / highlights
+ var follows = hn.getStorage("follows");
+ $profile.prepend('<a data-username="'+username+'" class="follow-user"><div class="icon icon-follow"></div><span class="icon-label">Follow</span><span class="username">'+username+'</span></a></a>' +
+ '<a data-username="'+username+'" class="unfollow-user"><div class="icon icon-unfollow"></div><span class="icon-label">Unfollow</span><span class="username">'+username+'</span></a>');
+
+ if ($.inArray(username, follows) == -1) {
+ $('.unfollow-user', $profile).hide();
+ } else {
+ $('.follow-user', $profile).hide();
+ }
+
} else {
$profile.addClass('loading');
}
@@ -388,6 +422,8 @@ var hn = {
augmentStories: function($context){
+ var follows = hn.getStorage("follows");
+
if (!$context) {
var $context = $('body');
}
@@ -401,7 +437,15 @@ var hn = {
// extract story info
var domain = $('.comhead', $title).text().replace(/\(|\)/g, '');
- var username = $('a', $details).first().text();
+ var $username = $('a', $details).first();
+ var username = $username.text();
+
+ // following
+ if ($.inArray(username, follows) != -1) {
+ $username.addClass('highlighted');
+ } else {
+ $username.removeClass('highlighted');
+ }
// add filtering options
$link.before('<div class="filter-menu"><span>&#215;</span> <div class="quick-filter"><em></em> <ul>'+
@@ -420,11 +464,34 @@ var hn = {
},
augmentComments: function(){
+
$('span.comment').each(function(){
var $wrapper = $(this).parent();
var $meta = $wrapper.find('span.comhead');
$meta.append('<a class="toggle-replies">collapse<a>');
+
+ });
+
+ hn.updateHighlights();
+ },
+
+ updateHighlights: function() {
+
+ var follows = hn.getStorage("follows");
+
+ $('span.comment').each(function(){
+ var $wrapper = $(this).parent();
+ var $meta = $wrapper.find('span.comhead');
+ var $username = $('a', $meta).first();
+ var username = $username.text();
+
+ // following
+ if ($.inArray(username, follows) != -1) {
+ $username.addClass('highlighted');
+ } else {
+ $username.removeClass('highlighted');
+ }
});
},
@@ -468,7 +535,7 @@ var hn = {
checkFiltered: function(title, domain, username){
- var filters = hn.getFilters();
+ var filters = hn.getStorage('filters');
var filter;
for(var i=0, l=filters.length; i < l; i++){
@@ -496,33 +563,33 @@ var hn = {
return false;
},
- getFilters: function(){
- return JSON.parse(localStorage.getItem("filters")) || [];
+ getStorage: function(name){
+ return JSON.parse(localStorage.getItem(name)) || [];
},
- setFilters: function(filters){
- return localStorage.setItem("filters", JSON.stringify(filters));
+ setStorage: function(name, data){
+ return localStorage.setItem(name, JSON.stringify(data));
},
- addFilter: function(filter){
- var f = hn.getFilters();
- var pos = f.indexOf(filter);
+ addStorage: function(name, item){
+ var f = hn.getStorage(name);
+ var pos = f.indexOf(item);
// if the filter doesnt already exist
if (pos == -1) {
- f.push(filter);
- hn.setFilters(f);
+ f.push(item);
+ hn.setStorage(name, f);
}
},
- removeFilter: function(filter){
- var f = hn.getFilters();
- var pos = f.indexOf(filter);
+ removeStorage: function(name, item){
+ var f = hn.getStorage(name);
+ var pos = f.indexOf(item);
// if the filter exists
if (pos != -1) {
f.splice(pos, 1);
- hn.setFilters(f);
+ hn.setStorage(name, f);
}
}
};
View
@@ -11,7 +11,9 @@
},
"manifest_version": 2,
"web_accessible_resources": [
- "images/star.png",
+ "images/karma.png",
+ "images/follow.png",
+ "images/unfollow.png",
"images/loading.gif",
"images/loading-light.gif",
"images/icons.png",

0 comments on commit 76791e9

Please sign in to comment.