arnaucode
7 years ago
7 changed files with 147 additions and 0 deletions
Unified View
Diff Options
-
+37 -0README.md
-
+17 -0bower.json
-
BINimg/hackernews.png
-
BINimg/reddit.png
-
+41 -0index.html
-
+10 -0socialCountBadge.css
-
+42 -0socialCountBadge.js
@ -0,0 +1,37 @@ |
|||||
|
# socialCountBadge |
||||
|
|
||||
|
## Install |
||||
|
``` |
||||
|
bower install --save socialCountBadge |
||||
|
``` |
||||
|
|
||||
|
Add to the index.html: |
||||
|
```html |
||||
|
<link href="bower_components/socialCountBadge/socialCountBadge.css" rel="stylesheet"> |
||||
|
|
||||
|
|
||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
||||
|
<script src="bower_components/socialCountBadge/socialCountBadge.js"></script> |
||||
|
``` |
||||
|
|
||||
|
Declare the badges variable: |
||||
|
```html |
||||
|
<script> |
||||
|
var badges = { |
||||
|
hn: { |
||||
|
link: "https://news.ycombinator.com/item?id=16069200", |
||||
|
url:"https://hacker-news.firebaseio.com/v0/item/16069200.json", |
||||
|
callback: parseHN, |
||||
|
img: "img/hackernews.png", |
||||
|
count: null |
||||
|
}, |
||||
|
reddit: { |
||||
|
link: "https://www.reddit.com/r/Python/comments/7o23lb/hacking_wifi_to_inject_cryptocurrency_miner_to/", |
||||
|
url:"https://www.reddit.com/r/Python/comments/7o23lb/hacking_wifi_to_inject_cryptocurrency_miner_to.json", |
||||
|
callback: parseReddit, |
||||
|
img: "img/reddit.png", |
||||
|
count: null |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
``` |
||||
@ -0,0 +1,17 @@ |
|||||
|
{ |
||||
|
"name": "socialCountBadge", |
||||
|
"main": "socialCountBadge.js", |
||||
|
"authors": [ |
||||
|
"arnaucode <arnaucode@gmail.com>" |
||||
|
], |
||||
|
"description": "", |
||||
|
"license": "MIT", |
||||
|
"homepage": "https://arnaucode.com", |
||||
|
"ignore": [ |
||||
|
"**/.*", |
||||
|
"node_modules", |
||||
|
"bower_components", |
||||
|
"test", |
||||
|
"tests" |
||||
|
] |
||||
|
} |
||||
| Before | After |
|---|---|
|
|
| Width: 400 | Height: 400 | Size: 14 KiB |
| Before | After |
|---|---|
|
|
| Width: 720 | Height: 720 | Size: 49 KiB |
@ -0,0 +1,41 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>socialCountBadge - demo</title> |
||||
|
|
||||
|
<link rel="stylesheet" href="socialCountBadge.css"> |
||||
|
|
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
|
||||
|
<div id="socialCountBadge"></div> |
||||
|
|
||||
|
|
||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
||||
|
<script src="socialCountBadge.js"></script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<script> |
||||
|
var badges = { |
||||
|
hn: { |
||||
|
link: "https://news.ycombinator.com/item?id=16069200", |
||||
|
url:"https://hacker-news.firebaseio.com/v0/item/16069200.json", |
||||
|
callback: parseHN, |
||||
|
img: "img/hackernews.png", |
||||
|
count: null |
||||
|
}, |
||||
|
reddit: { |
||||
|
link: "https://www.reddit.com/r/Python/comments/7o23lb/hacking_wifi_to_inject_cryptocurrency_miner_to/", |
||||
|
url:"https://www.reddit.com/r/Python/comments/7o23lb/hacking_wifi_to_inject_cryptocurrency_miner_to.json", |
||||
|
callback: parseReddit, |
||||
|
img: "img/reddit.png", |
||||
|
count: null |
||||
|
} |
||||
|
}; |
||||
|
socialCountBadge_init(); |
||||
|
</script> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,10 @@ |
|||||
|
.scc_badge { |
||||
|
border-radius: 50%; |
||||
|
background-color: #000; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
padding-left: 8px; |
||||
|
padding-right: 8px; |
||||
|
text-align: center; |
||||
|
margin-left: -10px; |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
|
||||
|
|
||||
|
|
||||
|
function get(badge) { |
||||
|
var result = null; |
||||
|
var url = badge.url; |
||||
|
var callback = badge.callback; |
||||
|
$.get(url, callback); |
||||
|
} |
||||
|
|
||||
|
function parseHN(data) { |
||||
|
console.log(data); |
||||
|
badges.hn.count = data.score; |
||||
|
dataToBadge(badges.hn); |
||||
|
} |
||||
|
function parseReddit(data) { |
||||
|
console.log(data); |
||||
|
badges.reddit.count = data[0].data.children[0].data.ups; |
||||
|
dataToBadge(badges.reddit); |
||||
|
} |
||||
|
function dataToBadge(badge) { |
||||
|
console.log(badge); |
||||
|
var html = ""; |
||||
|
html += "<a target='_blank' href='" + badge.link + "'>"; |
||||
|
html += "<img src='" + badge.img + "' style='width:30px;' />"; |
||||
|
html += "<span class='scc_badge'>" + badge.count + "</span>"; |
||||
|
html += "</a> "; |
||||
|
document.getElementById("socialCountBadge").innerHTML += html; |
||||
|
} |
||||
|
|
||||
|
function socialCountBadge_init() { |
||||
|
//create htmk badges
|
||||
|
|
||||
|
|
||||
|
|
||||
|
//get badges data
|
||||
|
get(badges.hn) |
||||
|
get(badges.reddit) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
var html = ""; |
||||