vitalif-js
/
social-likes-nojq
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Contrib buttons.

master
Artem Sapegin 2013-06-20 14:53:19 +04:00
parent 5c456e4f83
commit 998e0307f4
7 changed files with 125 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Readme.md
View File

@ -86,6 +86,8 @@ Place `googleplusonecount.php` somewhere on your server. And change buttons HTML
### Adding your own button
You can find some custom buttons in `contrib` folder.
Define `socialLikesButtons` hash:
```javascript

3
contrib/Readme.md Normal file
View File

@ -0,0 +1,3 @@
# Social Likes Custom Buttons
You only need to copy CSS file from `css` folder and copypaste JS/HTML from HTML file.

40
contrib/css/github.css Normal file
View File

@ -0,0 +1,40 @@
/** Author: Artem Sapegin, http://sapegin.me, 2012 */
.social-likes__button_github,
.social-likes__button_github:link,
.social-likes__button_github:visited {
padding-left: 19px;
background: #e6e6e6;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eaeaea));
background: -webkit-linear-gradient(top, #fafafa 0%, #eaeaea 100%);
background: -moz-linear-gradient(top, #fafafa 0%, #eaeaea 100%);
background: -o-linear-gradient(top, #fafafa 0%, #eaeaea 100%);
background: -ms-linear-gradient(top, #fafafa 0%, #eaeaea 100%);
background: linear-gradient(top, #fafafa 0%, #eaeaea 100%);
color: #555;
border-color: #d4d4d4;
border-bottom-color: #bcbcbc;
text-decoration: none;
}
.social-likes__button_github:hover {
background: #efefef;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #f0f0f0));
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(top, #fff 0%, #f0f0f0 100%);
color: #444;
border-color: #d4d4d4;
border-bottom-color: #bcbcbc;
}
.social-likes__icon_github {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAABelBMVEX///9UVFRUVFRXV1dVVVVOTk5YWFhNTU2hoaHJycm2trZTU1NVVVVYWFj8/Pz///////9kZGT///////9UVFRVVVW0tLRVVVVWVlZUVFRVVVVVVVVUVFRUVFSpqalVVVWsrKxPT09cXFxVVVX///+GhoZVVVV6enr///97e3tfX19hYWGtra2EhIS4uLhGRkavr69fX194eHi3t7dWVlZsbGyJiYlVVVWDg4NjY2NUVFR5eXlZWVlra2t0dHSOjo6tra1WVlaGhoaamppxcXFnZ2eSkpJoaGikpKSBgYHk5OShoaF9fX3Pz8/9/f3///9paWmOjo7a2tpYWFhmZmaJiYlbW1tkZGRaWlpjY2NwcHD///////9TU1NXV1fS0tL///+zs7ONjY26urp/f39ra2tzc3N7e3tWVla1tbX///9fX19XV1deXl5tbW1jY2NtbW1nZ2dUVFRWVla/v7/k5OSOjo5mZmaNjY1nZ2ePj4/k5ORVVVVWVlaXk6uTAAAAfHRSTlMAgs73Whf9FMTK0Vb5+5hQMN5EQ/X40vL1fYr2ienT89MdjVRFluWuQOqX5LKa0Aut6etc/S2V/kz4mEr99H0ty/7oRIf00soqmsTe7M58HszWdPlnnrbc/PfgKwFQ+30T0Jaj2fLp1/fRGOH5ztvy5eTL+FS/y+tD7c/AHyR2AgAAAK9JREFUeF4kxzEOQUEUBdB7X7y5MT8Tr1CMqNDZBmzBIi1ErIENaBQSjWTC//7pDnqiLedGATBgE5Ge7xS1G9o91NRrzBOYl1xrztsyK4vviut48YTBmaRNP/cj/g6S7CZcx0baJ4O7Y7S7+G+MtoyMjIzWIN4xRkZGRjdGEDD6f4ERDIIYUUAC4+owRhCYyZLCyMjIIPTjZxYjGEzneMfE8I6ziJNz3lwODg7OdwwAC+kdv4tFptkAAAAASUVORK5CYII=");
background-position: 3px 3px;
}
.social-likes__counter_github {
background: #fafafa;
border-color: #d4d4d4;
}
.social-likes__counter_github:after {
border-right-color: #fafafa;
}

36
contrib/github.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title>Social Likes GitHub button</title>
<link href="../social-likes.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
<script src="../social-likes.min.js"></script>
<!-- GitHub button CSS -->
<link href="css/github.css" rel="stylesheet">
</head>
<body>
<h3>GitHub button</h3>
<script>
// Don't forget to change your name and repo name: sapegin/social-likes
var socialLikesButtons = {
github: {
counterUrl: 'https://api.github.com/repos/sapegin/social-likes?callback=?',
convertNumber: function(data) {
return data.data.watchers_count;
},
clickUrl: 'https://github.com/sapegin/social-likes/'
}
};
</script>
<ul class="social-likes">
<li class="github" title="Star on GitHub">GitHub</li>
</ul>
</body>
</html>

BIN
contrib/icons/github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 758 B

34
contrib/styles/github.styl Normal file
View File

@ -0,0 +1,34 @@
/** Author: Artem Sapegin, http://sapegin.me, 2012 */
@import "nib/gradients"
@import "nib/vendor";
.social-likes__button_github,
.social-likes__button_github:link,
.social-likes__button_github:visited {
padding-left:19px;
background:#e6e6e6;
background:linear-gradient(top, #fafafa, #eaeaea);
color:#555;
border-color:#d4d4d4;
border-bottom-color:#bcbcbc;
text-decoration:none;
}
.social-likes__button_github:hover {
background:#efefef;
background:linear-gradient(top, #fff, #f0f0f0);
color:#444;
border-color:#d4d4d4;
border-bottom-color:#bcbcbc;
}
.social-likes__icon_github {
background-image:embedurl('../icons/github.png');
background-position:3px 3px;
}
.social-likes__counter_github {
background:#fafafa;
border-color:#d4d4d4;
}
.social-likes__counter_github:after {
border-right-color:#fafafa;
}

11
src/Gruntfile.js
View File

@ -37,6 +37,15 @@ module.exports = function(grunt) {
'include css': true,
'urlfunc': 'embedurl'
}
},
contrib: {
files: {
'../contrib/css/github.css': '../contrib/styles/github.styl'
},
options: {
'urlfunc': 'embedurl',
'compress': false
}
}
},
csso: {
@ -51,7 +60,7 @@ module.exports = function(grunt) {
watch: {
stylus: {
files: 'styles/**',
tasks: 'stylus'
tasks: 'stylus:compile'
}
},
imgo: {