<div class="m-share">
<button type="button" class="a-button a-button--transparent a-button--icon m-share__button" data-a11y-toggle="share-platforms">
<span class="a-button__text">Dela</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-share"></use>
</svg>
</button>
<div class="m-share__platforms" aria-hidden="true" id="share-platforms">
<a href="http://facebook.com/sharer/sharer.php?u=https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen//&title=Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
<a href="https://twitter.com/intent/tweet?url=https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen//&text=Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången" type="button" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-x">
<use xlink:href="#icon-x"></use>
</svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen//&title=Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-linkedin">
<use xlink:href="#icon-linkedin"></use>
</svg>
</a>
</div>
</div>
<div class="m-share{{#if modifiers}} {{getmodifiers modifiers "m-share"}}{{/if}}">
<button type="button" class="a-button a-button--transparent a-button--icon m-share__button" data-a11y-toggle="share-platforms">
<span class="a-button__text">Dela</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-share"></use>
</svg>
</button>
<div class="m-share__platforms" aria-hidden="true" id="share-platforms">
<a href="http://facebook.com/sharer/sharer.php?u={{url}}/&title={{text}}" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
<a href="https://twitter.com/intent/tweet?url={{url}}/&text={{text}}" type="button" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-x">
<use xlink:href="#icon-x"></use>
</svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}/&title={{text}}" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
<span class="a-button__text"></span>
<svg class="icon icon-linkedin">
<use xlink:href="#icon-linkedin"></use>
</svg>
</a>
</div>
</div>
{
"url": "https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen/",
"text": "Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången"
}
@charset 'UTF-8';
@include molecule(share) {
@include e(platforms) {
visibility: visible;
max-height: 80rem;
padding: rhythm(1) 0;
overflow: hidden;
transition:
visibility 0s ease-out,
max-height 0.25s ease-out,
opacity 0.5s ease-out;
transition-delay: 0 0.25 0;
opacity: 1;
&[aria-hidden='true'] {
visibility: hidden;
max-height: 0;
transition-delay: 0.25s, 0, 0.5s;
opacity: 0;
}
}
@include e(button) {
padding-left: 0;
}
@include e(icon) {
margin-right: rhythm(2);
padding: 0;
@include b(icon) {
width: $icon-size * 1.5;
height: $icon-size * 1.5;
&.icon-facebook {
fill: $color-facebook;
}
&.icon-twitter {
fill: $color-twitter;
}
&.icon-linkedin {
fill: $color-linkedin;
}
}
}
@include m(inline) {
display: inline-flex;
align-items: center;
}
}
function openPopup(e) {
e.preventDefault();
const width = 500;
const height = 550;
const left = window.innerWidth / 2 - width / 2;
const top = window.innerHeight / 2 - height / 2;
const url = this.href;
const opts = `${'status=1'
+ ',width='}${width
},height=${height
},top=${top
},left=${left}`;
window.open(url, 'socialMedia', opts);
return false;
}
const popupButtons = Array.prototype.slice.call(
document.querySelectorAll('.js-share-popup'),
);
if (popupButtons) {
popupButtons.forEach((popup) => {
popup.addEventListener('click', openPopup);
});
}
NOTE: Can only be tested in fullscreen preview mode, otherwise the browser will block the popup since it it triggered within an iframe