<div class="toolbar">
<span class="toolbar__label">Partager</span>
<ul class="toolbar__share">
<li><button data-href="https://www.facebook.com/sharer/sharer.php?u=">Facebook</button></li>
<li><button data-href="http://twitter.com/home?status=+">Twitter</button></li>
<li><button data-href="https://www.linkedin.com/shareArticle?mini=true&url=&title=
&summary=">LinkedIn</button></li>
</ul>
</div>
<div class="toolbar">
<span class="toolbar__label">Partager</span>
<ul class="toolbar__share">
<li><button data-href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}">Facebook</button></li>
<li><button data-href="http://twitter.com/home?status={{share_title}}+{{ share_url }}">Twitter</button></li>
<li><button data-href="https://www.linkedin.com/shareArticle?mini=true&url={{ share_url }}&title={{share_title}}
&summary={{ share_url }}">LinkedIn</button></li>
</ul>
</div>
/* No context defined for this component. */
.toolbar {
&__label {
font-size: rem(21);
font-family: $font-primary;
}
&__share {
padding: 0;
margin: $margin-xs 0 0;
> li { display: block }
@include mediaWQuery($media-query-s) {
> li { display: inline-block }
li + li {
margin-left: $margin-m;
}
}
> li > button {
-webkit-appearance: none;
border-radius: 0;
border: 0;
background: transparent;
color: $c-red-medium;
font-size: rem(18);
font-family: $font-secondary;
font-weight: 700;
padding: 0;
&:hover, &:focus {
text-decoration: underline;
cursor: pointer;
}
}
}
}
const openWindow = (windowHref) => {
window.open(windowHref, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600')
}
const shareButtons = document.querySelectorAll('.toolbar__share button');
[].slice.call(shareButtons).forEach(shareButton => {
shareButton.onclick = () => {
openWindow(shareButton.getAttribute('data-href'));
}
})
There are no notes for this item.