@digital-butlers/share-page-links

SharePageLinks

Usage

Create an HTML markup

<section>
	<a href="" data-network-name="whats-app">WhatsApp</a>
	<a href="" data-network-name="facebook">Facebook</a>
	<a href="" data-network-name="twitter">Twitter</a>
	<a href="" data-network-name="x">X</a>
	<a href="" data-network-name="linkedin">Linkedin</a>
	<a href="" data-network-name="telegram">Telegram</a>
	<a href="" data-network-name="email">Email</a>
</section>

Create SharePageLinks instance

import { SharePageLinks } from '@digital-butlers/components/share-page-links';

const shareLinks = new SharePageLinks({
	messageForShareViaEmail: "This is really important! Don't miss it", // the text to insert in the "body of the message" field (if we share a link to the page in the email)
	pageName: 'Custom page name', // if there is no 'title', 'h1', '[role="heading"][aria-level="1"]' on the page, this text will be used instead
});

shareLinks.init();

Create a copy button

Will copy the current page URL to the clipboard

<button data-copy-button>Copy link</button>

Will copy custom value from 'data-copy-value' attribute

<button data-copy-button data-copy-value="Hello world!">Copy link</button>

API

Config Properties

messageForShareViaEmail

Type: string Default: 'I think it will be interesting for you to read this article' Description: The text to insert in the "subject of the message" field (if we share a link to the page in the email) Description_RU: Текст, который будет вставлен в поле "тема сообщения" (если мы делимся ссылкой на страницу по электронной почте)

pageName

Type: string Default: 'We recommend it for reading' Description: If there is no 'title', 'h1', '[role="heading"][aria-level="1"]' on the page, this text will be used instead Description_RU: Если на странице нет 'title', 'h1', '[role="heading"][aria-level="1"]', будет использован этот текст

on

Type: object Default: {} Description: Object with callbacks Description_RU: Объект с функциями обратного вызова

copyButtonSelector

Type: string Default: '[data-copy-button]' Description: Selector for the copy button Description_RU: Селектор для кнопки копирования

tooltipSelector

Type: string Default: '[data-copy-button-tooltip]' Description: Selector for the tooltip Description_RU: Селектор для всплывающей подсказки

Events callback config object

afterInit

Type: function Default: undefined Description: Callback will be started after SharePageLinks initialization Description_RU: Функция обратного вызова, которая будет запущена после инициализации SharePageLinks

copy

Type: function Default: undefined Description: Callback will be started after Description_RU: Функция обратного вызова, которая будет запущена после копирования

Пример использования

const shareLinks = new SharePageLinks({
	on: {
		copy: (instance, eventTraget) => {
			console.log(`Первым аргуметом в этой функции передается инстанс класса SharePageLinks, вот он:`, instance);
			console.log(`Второй аргумент - элемент на котором сработало событие. Посмотри-ка на него:`, eventTarget);
		},
	},
});

License

MIT