Як створити вбудоване меню з кнопками соціальних мереж

23

Від автора: у цьому уроці ми навчимося робити так зване вбудоване меню з кнопками соціальних мереж. Выпрыгивающее меню дозволяє читачам поділитися сторінкою за допомогою виділеного шматка тексту. Схожий інтерфейс можна зустріти на деяких популярних сайтах.

Перш ніж ми перейдемо до створення нашого меню, ми розберемо інтерфейс сайту Medium, дізнаємося, коли меню з’являється на екрані, а також як воно розташоване по відношенню до виділеного тексту. Це важливий етап нашої роботи, який забезпечить нас потрібними технічними знаннями. В рамках цього етапу ми зрозуміємо, як нам потрібно писати код. Поїхали!

Вивчимо інтерфейс Medium

По зображенню нижче видно, що меню соціальних мереж на сайті Medium з’являється по центру виділеного тексту, довжина тексту не має значення, будь то одне слово, речення або весь параграф.

Як створити вбудоване меню з кнопками соціальних мереж

Якщо відкрити панель розробника Chrome і заглянути під капот, можна дізнатися, що положення меню задано за допомогою инлайновых стилів top і left. Також видно, що біля кнопки репоста в соціальних мережах є клас-модифікатор highlightMenu—active. Даний клас відповідає за видимість кнопки.

Як створити вбудоване меню з кнопками соціальних мереж

На вкладці стилі видно, що позиціювання в CSS задано в absolute, властивість z-index піднімає меню вище інших елементів на сторінці, а властивості top і visibility виштовхують кнопки за межі видимої області. Узагальнюючи, нам знадобиться:

визначити довжину обраної області, щоб обчислити її середину;

створити модифікатор, щоб показувати елемент;

задавати розташування меню за допомогою властивостей top і left через инлайновые стилі.

Створюємо меню з кнопками соціальних мереж

В цьому прикладі в меню ми додамо кнопки Facebook і Twitter. Кнопки Facebook і Twitter будуть у форматі SVG і будуть обгорнуті в кнопку button і пару тегів div. Також за кодом нижче видно, що ми додали тег span, який буде створювати трикутник в нижній частині меню.

Якихось чітких правил за кольорами і формою меню немає, можете вільно проектувати меню під свій сайт. Варто звернути увагу на розмір кнопок: на їх висоту і ширину. Наше меню, як видно нижче, становить 84px в ширину і 40px у висоту. Трохи пізніше ці два значення ми будемо використовувати для центрування нашого меню над виділеною областю тексту.

Як створити вбудоване меню з кнопками соціальних мереж

Стилі з вихідним положенням і видимістю.

.sharing {
position: absolute;
visibility: hidden;
top: 0;
left: 0;
z-index: 500;
}

І нарешті, клас, який буде додаватися і робити кнопки соціальних мереж видимими.

.sharing—shown {
visibility: visible;
}

Додаємо функціонал

На даному етапі наше меню не повинно бути видно на сторінці. Також при натисканні на кнопки Facebook і Twitter не з’являється вікно репоста в соціальних мережах. У цій частині ми напишемо код JavaScript і змусимо наші кнопки працювати. А почнемо ми з функції getHighlight().

function getHighlight() {
var selection = window.getSelection(); // 1.
var object = {
parent : null,
text : «,
rect : null
};
// Якщо вибірка не порожня.
if ( selection.rangeCount > 0 ) {
object = {
text : selection.toString().trim(), // витягуємо текст.
parent : selection.anchorNode.parentNode, // отримуємо батьківський блок-обгортку тексту.
rect : selection.getRangeAt(0).getBoundingClientRect() // отримуємо рамку.
};
}
return object; // 2.
}

Що робить функція:

витягає виділення рідний JS функції getSelection();

повертає об’єкт з виділеним текстом, блоком-обгорткою тексту, а також об’єктом Rectangle, який дає нам розмір і позицію елемента всередині сторінки (top, bottom, left, right).

Наша наступна функція називається showMenu(). Судячи з назви, функція буде показувати меню.

var sharing = document.querySelector( ‘.sharing’ );
function showMenu() {
// 1.
var highlight = getHighlight();
// 2.
if ( highlight.text === » ) {
sharing.setAttribute( ‘class’, ‘sharing’ );
sharing.style.left = 0;
sharing.style.top = 0;
return;
}
// 3.
/**
* Показуємо меню тільки в разі, якщо виділена область параграф.
*/
if ( highlight.parent.вузла !== ‘P’ ) {
return;
}
// 4.
var width = ( highlight.rect.width / 2 ) — 42;
/**
* «42» отримано шляхом поділу ширини кнопок на 2.
*/
sharing.setAttribute( ‘class’, ‘sharing sharing—shown’ );
sharing.style.left = ( highlight.rect.left + width ) + ‘px’;
sharing.style.top = ( highlight.rect.top — 40 ) + ‘px’;
/**
* «40» – висота наших кнопок.
* Тут ми піднімаємо меню над верхньою межею виділеного тексту.
*/
}

Що робить функція:

отримуємо об’єкт з функції getHighlighted();

якщо виділена область порожня, ховаємо меню і повертаємо його у вихідне положення;

робимо так, щоб меню не з’являлося, якщо виділений текст не обгорнутий в тег параграфа;

встановлюємо властивості top і left, а також додаємо клас sharing—shown, щоб зробити меню видимим. Я залишив невеликі коментарі, де пояснив, звідки беруться деякі значення.

Ми зробимо припущення, що більшість користувачів виділяють контент за допомогою миші, і повісимо цю функцію на подію mouseup. У мобільних пристроях зазвичай є своє контекстне меню для виділеного тексту, так що ми загостримо увагу в цьому уроці тільки на десктопної версії.

Як створити вбудоване меню з кнопками соціальних мереж

Щоб переконатися, що контент обраний правильно, ми додамо затримку в 100ms з допомогою функції setTimeout().

document.body.addEventListener. ( ‘mouseup’, function() {
setTimeout( showMenu, 100 );
} );

Наша остання функція openShareWindow() буде відкривати вікно репоста у соціальних мережах при натисканні на кнопки. Так як у Facebook є свій JavaScript SDK, то цю функцію ми будемо використовувати в першу чергу для Twitter.

function openShareWindow( url, w, h ) {
var screenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var screenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : doc.documentElement.clientWidth ? doc.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : doc.documentElement.clientHeight ? doc.documentElement.clientHeight : screen.height;
var left = ( ( width / 2 ) — ( w / 2 ) ) + screenLeft;
var top = ( ( height / 2 ) — ( h / 2 ) ) + screenTop;
var newWin = window.open( url, «», «scrollbars=no,width=» + w + «,height=» + h + «,top=» + top + «,left=» + left );
if ( newWin ) {
newWin.focus();
}
}

Клік…клік…

Тепер необхідно прив’язати до кнопки подія click і функцію, яка буде відкривати вікно репоста.

// Facebook.
document.getElementById( ‘share’ ).addEventListener. ( ‘click’, function() {
var highlight = getHighlight();
if ( highlight.text !== «&& highlight.parent.вузла === ‘P’ ) {
FB.ui({
method : ‘share’,
mobile_iframe: true,
href : ‘http://bitly.com/2aiHmCs’,
quote : highlight.text // передаємо текст у вигляді цитати
});
}
event.preventDefault();
} );

Для кнопки Facebook ми скористаємося Facebook JavaScript SDK. SDK дозволяє передавати текст у вікно репоста через параметр quote.

Як створити вбудоване меню з кнопками соціальних мереж

У Twitter немає власного JavaScript SDK. Ось тут ми і скористаємося функцією openShareWindow(), в яку будемо передавати відформатований під розмір вікна за спеціальними умовами URL.

document.getElementById( ‘tweet’ ).addEventListener. ( ‘click’, function() {
var highlight = getHighlight();
if ( highlight.text !== «&& highlight.parent.вузла === ‘P’ ) {
var docURL = encodeURIComponent( ‘http://bitly.com/2aiHmCs’ );
var tweetText = encodeURIComponent( highlight.text );
var tweetURL = ‘https://twitter.com/intent/tweet?via=wdtuts&url=’ + docURL + ‘&text=’ + tweetText;
openShareWindow( tweetURL, 600, 420 );
}
event.preventDefault();
} );

По кліку на кнопку Twitter повинно з’являтися таке вікно.

Як створити вбудоване меню з кнопками соціальних мереж

Висновок

Ми повністю закінчили роботу над меню кнопок соціальних мереж! Перейдіть за посиланням, щоб оцінити демо в дії або подивитися на повний код. Ви можете покращити меню, додати йому плавних переходів і анімації, щоб воно стало ще більш привабливим.