Optimize code
* optimize loops to reduce execution time * inline functions to reduce output file size * flatten PublishPreset structure * remove extra checkspull/16/head
parent
24561c6a45
commit
6eae37e54f
105
src/shareon.ts
105
src/shareon.ts
|
@ -1,11 +1,9 @@
|
||||||
interface PublishPreset {
|
interface PublishPreset {
|
||||||
url: string,
|
url: string,
|
||||||
title: string,
|
title: string,
|
||||||
extra: {
|
media: string,
|
||||||
media: string,
|
text: string,
|
||||||
text: string,
|
via: string,
|
||||||
via: string,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type UrlBuilder = (data: PublishPreset) => string;
|
type UrlBuilder = (data: PublishPreset) => string;
|
||||||
|
@ -14,57 +12,80 @@ const NETWORKS: { [name: string]: UrlBuilder } = {
|
||||||
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
|
facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
|
||||||
linkedin: (d) => `https://www.linkedin.com/shareArticle?mini=true&url=${d.url}&title=${d.title}`,
|
linkedin: (d) => `https://www.linkedin.com/shareArticle?mini=true&url=${d.url}&title=${d.title}`,
|
||||||
messenger: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`,
|
messenger: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`,
|
||||||
odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.extra.media ? `&imageUrl=${d.extra.media}` : ''}`,
|
odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.media ? `&imageUrl=${d.media}` : ''}`,
|
||||||
pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.extra.media ? `&media=${d.extra.media}` : ''}`,
|
pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.media ? `&media=${d.media}` : ''}`,
|
||||||
pocket: (d) => `https://getpocket.com/edit.php?url=${d.url}`,
|
pocket: (d) => `https://getpocket.com/edit.php?url=${d.url}`,
|
||||||
reddit: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
|
reddit: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
|
||||||
telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.extra.text ? `&text=${d.extra.text}` : ''}`,
|
telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.text ? `&text=${d.text}` : ''}`,
|
||||||
twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.extra.via ? `&via=${d.extra.via}` : ''}`,
|
twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}`,
|
||||||
viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.extra.text ? `%0D%0A%0D%0A${d.extra.text}` : ''}`,
|
viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
|
||||||
vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.extra.media ? `&image=${d.extra.media}` : ''}`,
|
vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.media ? `&image=${d.media}` : ''}`,
|
||||||
whatsapp: (d) => `whatsapp://send?text=${d.title}%0D%0A${d.url}${d.extra.text ? `%0D%0A%0D%0A${d.extra.text}` : ''}`,
|
whatsapp: (d) => `whatsapp://send?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
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; });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const initializeShareon = () : void => {
|
const initializeShareon = () : void => {
|
||||||
const shareonContainers = document.getElementsByClassName('shareon');
|
const shareonContainers = document.getElementsByClassName('shareon');
|
||||||
|
|
||||||
|
// iterate over <div class="shareon">
|
||||||
for (let i = 0; i < shareonContainers.length; i += 1) {
|
for (let i = 0; i < shareonContainers.length; i += 1) {
|
||||||
const container = shareonContainers[i] as HTMLElement;
|
const container = shareonContainers[i] as HTMLElement;
|
||||||
|
|
||||||
|
// iterate over children of <div class="shareon">
|
||||||
for (let j = 0; j < container.children.length; j += 1) {
|
for (let j = 0; j < container.children.length; j += 1) {
|
||||||
const child = container.children[j] as HTMLElement;
|
const child = container.children[j] as HTMLElement;
|
||||||
|
|
||||||
const preset: PublishPreset = {
|
if (child) {
|
||||||
url: encodeURIComponent(child.dataset.url || container.dataset.url || window.location.href),
|
const classListLength = child.classList.length;
|
||||||
title: encodeURIComponent(child.dataset.title || container.dataset.title || document.title || ''),
|
|
||||||
extra: {
|
|
||||||
media: encodeURIComponent(child.dataset.media || container.dataset.media || ''),
|
|
||||||
text: encodeURIComponent(child.dataset.text || container.dataset.text || ''),
|
|
||||||
via: encodeURIComponent(child.dataset.via || container.dataset.via || ''),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
initShareonChild(
|
// iterate over classes of the child element
|
||||||
child as HTMLElement,
|
for (let k = 0; k < classListLength; k += 1) {
|
||||||
preset,
|
const cls = child.classList.item(k);
|
||||||
);
|
|
||||||
|
// if it's one of the networks
|
||||||
|
if (Object.prototype.hasOwnProperty.call(NETWORKS, cls)) {
|
||||||
|
const preset = {
|
||||||
|
url: encodeURIComponent(
|
||||||
|
child.dataset.url
|
||||||
|
|| container.dataset.url
|
||||||
|
|| window.location.href,
|
||||||
|
),
|
||||||
|
title: encodeURIComponent(
|
||||||
|
child.dataset.title
|
||||||
|
|| container.dataset.title
|
||||||
|
|| document.title,
|
||||||
|
),
|
||||||
|
media: encodeURIComponent(
|
||||||
|
child.dataset.media
|
||||||
|
|| container.dataset.media
|
||||||
|
|| '',
|
||||||
|
),
|
||||||
|
text: encodeURIComponent(
|
||||||
|
child.dataset.text
|
||||||
|
|| container.dataset.text
|
||||||
|
|| '',
|
||||||
|
),
|
||||||
|
via: encodeURIComponent(
|
||||||
|
child.dataset.via
|
||||||
|
|| container.dataset.via
|
||||||
|
|| '',
|
||||||
|
),
|
||||||
|
};
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
break; // once a network is detected we don't want to check further
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue