diff --git a/src/shareon.ts b/src/shareon.ts index 79e27a0..6f517c4 100644 --- a/src/shareon.ts +++ b/src/shareon.ts @@ -1,11 +1,9 @@ interface PublishPreset { url: string, title: string, - extra: { - media: string, - text: string, - via: string, - } + media: string, + text: string, + via: 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}`, 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}`, - odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.extra.media ? `&imageUrl=${d.extra.media}` : ''}`, - pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.extra.media ? `&media=${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.media ? `&media=${d.media}` : ''}`, pocket: (d) => `https://getpocket.com/edit.php?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}` : ''}`, - twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.extra.via ? `&via=${d.extra.via}` : ''}`, - viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.extra.text ? `%0D%0A%0D%0A${d.extra.text}` : ''}`, - vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.extra.media ? `&image=${d.extra.media}` : ''}`, - whatsapp: (d) => `whatsapp://send?text=${d.title}%0D%0A${d.url}${d.extra.text ? `%0D%0A%0D%0A${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.via ? `&via=${d.via}` : ''}`, + 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.media ? `&image=${d.media}` : ''}`, + 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 shareonContainers = document.getElementsByClassName('shareon'); + // iterate over
for (let i = 0; i < shareonContainers.length; i += 1) { const container = shareonContainers[i] as HTMLElement; + // iterate over children of
for (let j = 0; j < container.children.length; j += 1) { const child = container.children[j] as HTMLElement; - const preset: PublishPreset = { - url: encodeURIComponent(child.dataset.url || container.dataset.url || window.location.href), - 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 || ''), - }, - }; + if (child) { + const classListLength = child.classList.length; - initShareonChild( - child as HTMLElement, - preset, - ); + // iterate over classes of the child element + for (let k = 0; k < classListLength; k += 1) { + 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 + } + } + } } } };