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

New single button popups.

master
Artem Sapegin 2014-02-04 10:38:31 +04:00
parent f5428d6635
commit e4a08ce9a3
6 changed files with 83 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
specs/specs.html
View File

@ -26,8 +26,12 @@ window.onhashchange = updateSkin;
})();
</script>
<!--script src="http://yandex.st/jquery/1.10.2/jquery.min.js"></script-->
<script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--<![endif]-->
<script src="../src/social-likes.js"></script>
<style>
@ -47,6 +51,9 @@ td {
padding:20px;
background:#333;
}
section {
margin-bottom:10px;
}
.skin-switcher {
margin-top:-20px;
margin-bottom:40px;
@ -172,8 +179,8 @@ td {
</ul>
<h3>Single button</h3>
<p>
<ul class="social-likes social-likes_single" data-url="http://mail.ru/">
<section>
<ul class="social-likes social-likes_single" data-url="http://maill.ru/">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
@ -182,25 +189,25 @@ td {
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</p>
<p>
<ul class="social-likes social-likes_single social-likes_light" data-url="http://mail.ru/">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</p>
<p>
</section>
<section style="padding-left:100px">
<div class="social-likes social-likes_single social-likes_light" data-url="http://mail.ru/">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
<div class="plusone" title="Плюсануть в Гугле">Google+</div>
<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</div>
</div>
</section>
<section>
<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/" data-single-title="Share me">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
</ul>
</p>
</section>
<h3>Icons only</h3>
<ul class="social-likes social-likes_notext" data-url="http://maps.mail.ru/">

47
src/social-likes.js
View File

@ -250,9 +250,6 @@ SocialLikes.prototype = {
container.wrap($('<div>', {'class': prefix + '_single-w'}));
var wrapper = container.parent();
var defaultLeft = parseInt(container.css('left'), 10);
var defaultTop = parseInt(container.css('top'), 10);
// Widget
var widget = $('<div>', {
'class': getElementClassNames('widget', 'single')
@ -272,23 +269,16 @@ SocialLikes.prototype = {
wrapper.append(widget);
widget.click(function() {
container.css({ left: defaultLeft, top: defaultTop });
showInViewport(container, 20);
closeOnClick(container);
var activeClass = prefix + '__widget_active';
widget.addClass(activeClass);
container.css({left: -(container.width()-widget.width())/2, top: -container.height()});
showInViewport(container);
closeOnClick(container, function() {
widget.removeClass(activeClass);
});
return false;
});
// Close button
var close = $('<div>', {
'class': classPrefix + 'close',
'html': '&times;'
});
container.append(close);
close.click(function() {
container.removeClass(openClass);
});
this.widget = widget;
},
updateCounter: function(e, service, number) {
@ -441,14 +431,17 @@ Button.prototype = {
updateCounter: function(number) {
number = parseInt(number, 10) || 0;
if (number || this.options.zeroes) {
var counterElem = $('<span>', {
'class': this.getElementClassNames('counter'),
'text': number,
});
this.widget.append(counterElem);
var params = {
'class': this.getElementClassNames('counter'),
'text': number,
};
if (!number && !this.options.zeroes) {
params.class += ' ' + prefix + '__counter_empty';
params.text = '';
}
var counterElem = $('<span>', params);
this.widget.append(counterElem);
this.widget.trigger('counter.' + prefix, [this.service, number]);
},
@ -535,18 +528,20 @@ function getElementClassNames(elem, mod) {
return cls + ' ' + cls + '_' + mod;
}
function closeOnClick(elem) {
function closeOnClick(elem, callback) {
function handler(e) {
if ((e.type === 'keydown' && e.which !== 27) || $(e.target).closest(elem).length) return;
elem.removeClass(openClass);
doc.off(events, handler);
if ($.isFunction(callback)) callback();
}
var doc = $(document);
var events = 'click touchstart keydown';
doc.on(events, handler);
}
function showInViewport(elem, offset) {
function showInViewport(elem) {
var offset = 10;
if (document.documentElement.getBoundingClientRect) {
var left = parseInt(elem.css('left'), 10);
var top = parseInt(elem.css('top'), 10);

8
src/styles/base.styl
View File

@ -122,14 +122,6 @@ tweak-inverted-text() {
display:inline-block;
}
&__close {
visibility:visible;
position:absolute;
right:0;
top:0;
cursor:pointer;
}
// Vertical mode
&_vertical {
.social-likes__widget {

36
src/styles/birman/index.styl
View File

@ -22,9 +22,10 @@ hover-button(button, color, text=null) {
}
.social-likes {
margin:(-(margin));
&,
&_single-w {
margin:(-(margin));
line-height:19px;
}
@ -76,7 +77,8 @@ hover-button(button, color, text=null) {
&__widget:hover > &__counter,
&__widget:focus > &__counter,
&__widget:active > &__counter {
&__widget:active > &__counter,
&__widget_active > &__counter {
position:relative;
border-left-color:transparent;
&:before {
@ -91,15 +93,6 @@ hover-button(button, color, text=null) {
}
}
&__close {
padding:2px 4px;
font:16px Verdana, Geneva, sans-serif;
color:#999;
}
&__close:hover {
color:#111;
}
// Vertical mode
&_vertical {
margin:-6px (-(margin));
@ -126,10 +119,13 @@ hover-button(button, color, text=null) {
}
// Single button mode
&__widget_single {
margin:0;
}
&_single {
width:100%;
display:table;
margin:0;
margin:-12px 0 0;
padding:4px 0;
background:#fff;
border:1px solid border_color;
@ -164,9 +160,6 @@ hover-button(button, color, text=null) {
display:none;
}
}
&__close {
display:none;
}
}
@ -174,7 +167,18 @@ hover-button(button, color, text=null) {
.social-likes__icon_single {
background-image:embedurl('icons/single.png');
}
hover-button('single', #3673f4);
.social-likes__widget_single:hover,
.social-likes__widget_single:active,
.social-likes__widget_single:focus,
.social-likes__widget_active {
tweak-inverted-text();
background:#3673f4;
border-color:@background;
color:#fff;
.social-likes__icon_single {
background-image:embedurl('icons/single-hover.png');
}
}
// Facebook
.social-likes__icon_facebook {

36
src/styles/classic/index.styl
View File

@ -13,9 +13,10 @@ margin=3px;
}
.social-likes {
margin:(-(margin));
&,
&_single-w {
margin:(-(margin));
line-height:20px;
}
@ -55,6 +56,9 @@ margin=3px;
color:hsla(0,0%,0%,.5);
cursor:default;
}
&_ready &__counter_empty {
display:none;
}
&__counter:before,
&__counter:after {
@ -80,15 +84,6 @@ margin=3px;
border-right:5px solid;
}
&__close {
padding:2px 4px;
font:16px Verdana, Geneva, Tahoma, sans-serif;
color:#999;
}
&__close:hover {
color:#111;
}
// Vertical mode
&_vertical {
margin:-6px -4px;
@ -110,19 +105,18 @@ margin=3px;
// Single button mode
&_single {
top:-6px;
left:-6px;
margin-top:-16px;
padding:6px 6px 4px;
background:#fff;
box-shadow:0 0 15px hsla(0,0%,0%,.3);
}
&_single &__widget:first-of-type {
margin-right:14px; // Prevent collapse of widget and close button
box-shadow:0 0 10px hsla(0,0%,0%,.25);
}
}
// Single button
.social-likes__widget_single {
margin:0;
}
.social-likes__button_single {
padding-left:19px;
background:#e2e2e2;
@ -132,7 +126,8 @@ margin=3px;
border-color:hsla(0,0%,70%,.8);
border-bottom-color:hsla(0,0%,60%,.8);
}
.social-likes__button_single:hover {
.social-likes__button_single:hover,
.social-likes__widget_active .social-likes__button_single {
background:#f4f4f4;
background:linear-gradient(top, #f0f0f0, #cfcfcf);
color:#222;
@ -150,13 +145,6 @@ margin=3px;
.social-likes__counter_single:after {
border-right-color:#f6f6f6;
}
a.social-likes__counter {
cursor: pointer;
text-decoration:none;
&:hover{
text-decoration:underline;
}
}
// Facebook

24
src/styles/flat/index.styl
View File

@ -18,16 +18,16 @@ button-colors(button, color) {
}
.social-likes {
margin:(-(margin));
transform:translate3d(0,0,0); // Prevent icons shift when appearing
&,
&_single-w {
margin:(-(margin));
line-height:1.5;
}
&,
&__button_single {
&__widget_single {
font-size:14px; // Base font size
}
@ -72,15 +72,6 @@ button-colors(button, color) {
font-size:.85em;
}
&__close {
padding:.2em .4em;
font:1.2em Verdana, Geneva, Tahoma, sans-serif;
color:light_gray;
}
&__close:hover {
color:#111;
}
// Vertical mode
&_vertical {
.social-likes__widget {
@ -135,29 +126,24 @@ button-colors(button, color) {
// Single button mode
&_single {
top:(-(margin));
left:(-(margin));
margin-top:-1.2em;
padding:margin;
background:#fff;
border:1px solid #ddd;
}
&_single &__widget:first-of-type {
margin-right:2em; // Prevent collapse of widget and close button
}
}
// Single button
.social-likes__widget_single {
height:1.5em;
margin:0;
padding:.1em 0;
line-height:1.5;
background:#87c44d;
.social-likes_single-light + & {
color:@background;
}
}
.social-likes__counter_single {
font-size:.75em;
}
.social-likes__icon_single {
top:.07em;
}