Add default styles for buttons

pull/1/head
Nikita Karamov 2020-03-25 21:47:00 +01:00
parent 2ac9e2b382
commit 3023b8d9af
No known key found for this signature in database
GPG Key ID: E40DFE6E993540FF
2 changed files with 128 additions and 0 deletions

View File

@ -1 +1,60 @@
import './style.scss';
interface PublishPreset {
url: string,
title: string,
extra?: {
media?: null|string,
text?: null|string,
via?: null|string,
}
}
type UrlBuilder = (data: PublishPreset) => string;
const NETWORKS: { [name: string]: UrlBuilder } = {
};
function initShareonChild(child: HTMLElement, preset: PublishPreset) {
if (child) {
child.classList.forEach((cls) => {
if (Object.prototype.hasOwnProperty.call(NETWORKS, cls)) {
const url = NETWORKS[cls](preset);
if (child.tagName.toLowerCase() === 'a') {
child.setAttribute('href', url);
child.setAttribute('rel', 'noopener noreferrer');
child.setAttribute('target', '_blank');
} else {
child.addEventListener('click', () => { window.open(url, '_blank', 'noopener,noreferrer').opener = null; });
}
}
});
}
}
window.onload = () => {
const shareonContainers = document.getElementsByClassName('shareon');
for (let i = 0; i < shareonContainers.length; i += 1) {
const container = shareonContainers[i] as HTMLElement;
for (let j = 0; j < container.children.length; j += 1) {
const child = container.children[j] as HTMLElement;
const preset: PublishPreset = {
url: child.dataset.url || container.dataset.url || window.location.href,
title: child.dataset.title || container.dataset.title || document.title || '',
extra: {
media: child.dataset.media || container.dataset.media || null,
text: child.dataset.text || container.dataset.text || null,
via: child.dataset.via || container.dataset.via || null,
},
};
initShareonChild(
child as HTMLElement,
preset,
);
}
}
};

View File

@ -0,0 +1,69 @@
$button-size: 36px;
$icon-size: 20px;
$padding-ver: 0.3*$icon-size;
$padding-hor: $icon-size / 2;
$padding-icon: ($button-size - $icon-size) / 2;
$height: $button-size - 2*$padding-ver;
$width: $button-size - 2*$padding-hor;
.shareon {
& > * {
display: inline-block;
position: relative;
height: $height;
min-width: $width;
padding: $padding-ver $padding-hor;
background-color: #ccc;
border-radius: $icon-size / 6;
border: none;
box-sizing: content-box;
color: white;
line-height: 1.5;
transition: opacity 300ms ease;
vertical-align: middle;
&:hover {
cursor: pointer;
opacity: .7;
}
&:not(:empty) {
font-size: 0.8 * $icon-size;
text-decoration: none;
&::before {
position: relative;
height: 100%;
width: $icon-size+$padding-icon;
top: 0;
left: 0;
background-position: 0 50%;
}
}
&::before {
display: inline-block;
position: absolute;
height: $icon-size;
width: $icon-size;
top: $padding-icon;
left: $padding-icon;
background-repeat: no-repeat;
background-size: $icon-size $icon-size;
content: '';
vertical-align: bottom;
}
}
}