Membuat Kode Inline Sharing Menu

() translation by (you can also view the original English article)

Dalam tutorial ini, kita akan belajar bagaimana membuat apa itu yang disebut dengan "inline sharing menu". Interface ini bekerja dengan menampilkan menu yang memungkinkan pembaca men-share halaman, dengan mengutip teks yang di-highlight (orang indonesia menyebutnya diblok). Anda akan menemukan interface yang serupa di beberapa situs populer seperti Medium.

Sebelum kita mulai membuat sharing menu, kita akan mempelajari lebih dekat bagaimana interface serupa di Medium bekerja, seperti saat itu muncul dan bagaimana posisinya terhadap area yang di-highlight (diblok). Ini adalah langkah yang membantu yang akan memberi kita wawasan teknis yang tepat, yang nanti akan menentukan bagaimana kita menulis kode kita sendiri

Mari kita mulai!

Memeriksa Interface dari Medium

Pada gambar berikut, kita dapat melihat bahwa sharing menu pada Medium muncul di tengah teks yang di-highlight, berapa pun panjangnya; apakah kita hanya memilih satu kata, satu kalimat, atau seluruh paragraf.

Highlighted word with the sharing button in Mediumcom — UI Inline Sharing di Medium

Bila kita lihat melalui Chrome DevTools, kita dapat menemukan bahwa posisi sharing menu diberikan property top dan left dalam baris style-nya. Kita juga bisa melihat sharing button juga diberikan tambahan class modifier, highlightMenu--active, yang membuatnya terlihat.

Catatan: Jika anda belum mengenal istilah seperti Modifier, Block, dan Element, anda harus melihat tutorial terdahulu: Perkenalan Metodologi BEM.

Style yang memposisikan inline sharing menu di Medium

Di tab Styles, kita bisa melihat bahwa posisi awalnya diatur melalui CSS dengan position absolute, property z-index untuk menaikkan di atas elemen lain pada halaman, top, dan dengan visibility property untuk membuat sharing button tidak terlihat.

Ringkasnya, kita memerlukan:

Ambil panjang area yang dipilih sehingga kita bisa menentukan centre point dari selection.
Buat modifier untuk memunculkan element-nya.
Atur posisi saring menu dengan property top dan left yang ditambahkan ke inline style.

Membuat Sharing Menu

Dalam contoh ini kita akan memasukkan tombol Facebook dan Twitter ke dalam sharing menu. Kami mengirim ikon Facebook dan Twitter dalam SVG, diapit antara button dan beberapa elemen div. Selain itu, seperti yang dapat anda lihat dari cuplikan berikut, kami juga menambahkan elemen span untuk membentuk segitiga di bagian bawah menu.

1	<div class="sharing">
2	<div class="sharing__buttons">
3	<button id="share" title="Share">
4	<svg class="icon icon--facebook" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; width: 24px; height: 24px" xml:space="preserve"><g></g><g><g><path d="M426.8,64H85.2C73.5,64,64,73.5,64,85.2l0,341.6c0,11.7,9.5,21.2,21.2,21.2H256V296h-45.9v-56H256v-41.4 c0-49.6,34.4-76.6,78.7-76.6c21.2,0,44,1.6,49.3,2.3v51.8l-35.3,0c-24.1,0-28.7,11.4-28.7,28.2V240h57.4l-7.5,56H320v152h106.8 c11.7,0,21.2-9.5,21.2-21.2V85.2C448,73.5,438.5,64,426.8,64z"/></g></g></svg>
5	</button>
6	<button id="tweet" title="Tweet">
7	<svg class='icon icon--twitter' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512; width: 24px; height: 24px' xml:space='preserve'><path d='M492,109.5c-17.4,7.7-36,12.9-55.6,15.3c20-12,35.4-31,42.6-53.6c-18.7,11.1-39.4,19.2-61.5,23.5
8	C399.8,75.8,374.6,64,346.8,64c-53.5,0-96.8,43.4-96.8,96.9c0,7.6,0.8,15,2.5,22.1c-80.5-4-151.9-42.6-199.6-101.3
9	c-8.3,14.3-13.1,31-13.1,48.7c0,33.6,17.2,63.3,43.2,80.7C67,210.7,52,206.3,39,199c0,0.4,0,0.8,0,1.2c0,47,33.4,86.1,77.7,95c-8.1,2.2-16.7,3.4-25.5,3.4c-6.2,0-12.3-0.6-18.2-1.8c12.3,38.5,48.1,66.5,90.5,67.3c-33.1,26-74.9,41.5-120.3,41.5
10	c-7.8,0-15.5-0.5-23.1-1.4C62.8,432,113.7,448,168.3,448C346.6,448,444,300.3,444,172.2c0-4.2-0.1-8.4-0.3-12.5
11	C462.6,146,479,129,492,109.5z'/>
12	</svg>
13	</button>
14	</div>
15	<span class="sharing__triangle"></span>
16	</div>

Ini bukan aturan definitif dalam menentukan warna dan bentuk menu; jangan ragu untuk menggunakan style menu yang sesuai dengan desain situs anda. Yang perlu diperhatikan adalah ukuran tombolnya; tinggi dan lebarnya. Sharing menu kita adalah, seperti yang bisa anda lihat di bawah, lebar 84px dan tinggi 40px. Kami akan menggunakan kedua nilai ini untuk memposisikan sharing menu di bagian tengah area yang di-highlight nantinya.

Inline sharing menu size inspected through Chrome DevTools

Style tersebut mengatur initial position dan visibility.

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

Dan yang terakhir, class akan kita tambahkan untuk membuat tombol sharing visible atau terlihat.

1	.sharing--shown {
2	visibility: visible;
3	}

Membuat Menu Sharing yang Fungsional

Pada tahap ini, inline sharing menu kita tidak boleh terlihat di halaman. Selain itu, saat kita mengklik tombol Facebook dan Twitter, jendela sharing tidak terlihat di mana pun. Jadi, di bagian ini, kita akan menulis JavaScript untuk membuat tombol kita fungsional. Dan kita mulainya dengan, getHighlight () function.

function getHighlight() {

    var selection = window.getSelection(); // 1.

    var object = {
		parent : null,
		text   : '',
		rect   : null
    };

	// If selection is not empty.
    if ( selection.rangeCount > 0 ) {
        object = {
            text   : selection.toString().trim(), // get the text.
            parent : selection.anchorNode.parentNode, // get the element wrapping the text.
            rect   : selection.getRangeAt(0).getBoundingClientRect() // get the bounding box.
        };
    }

    return object; // 2.
}

Function ini akan:

Mengambil area yang di-highlight menggunakan native JavaScript function, getSelection()
Return Objek yang berisi teks yang dipilih, elemen yang membungkus teks, dan Rectangle Object dari area yang dipilih yang memberi kita ukuran serta posisinya - top, bottom, left dan right - di dalam halaman.

Function kita selanjunya adalah showMenu(). Sesuai namanya function ini akan memperlihatkan sharing menu.

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.
	/**
	 * Only show the sharing button if the selected is a paragraph.
	 */
    if ( highlight.parent.nodeName !== 'P' ) {
        return;
    }

	// 4.
    var width = ( highlight.rect.width / 2 ) - 42;
    /**
     * The "42" is acquired from our sharing buttons width devided by 2.
     */

    sharing.setAttribute( 'class', 'sharing sharing--shown' );
	sharing.style.left = ( highlight.rect.left + width ) + 'px';
	sharing.style.top  = ( highlight.rect.top - 40 ) + 'px';
	/**
	 * "40" is the height of our sharing buttons.
	 * Herein, we lift it up above the higlighted area top position.
	 */
}

Secara khusus, kode dalam function ini melakukan hal sebagai berikut:

Mendapatkan Objek dari function getHighlighted ().
Menyembunyikan dan mengatur sharing menu ke posisi awalnya saat area yang di-highlight kosong; tidak berisi text.
Mencegah agar tombol tidak muncul jika teks yang di-highlight tidak dibungkus dalam paragraf.
Terakhir, atur posisi top dan left, dan tambahkan class sharing--shown untuk membuat sharing button terlihat. Saya juga menambahkan beberapa line pada inline comment yang menjelaskan dari mana beberapa nomor yang ditentukan berasal.

Kami akan berasumsi bahwa sebagian besar pengguna menggunakan mouse untuk meng-highlight konten di web, sehingga kami mengaitkan function ini dengan event mouseup. Perangkat mobile biasanya akan memiliki menu kontekstual mereka sendiri pada pilihan teks, jadi kami hanya fokus di web untuk tutorial ini.

safari ios — Text selection di Safari iOS

Kami melakukan delay eksekusi meski pun hanya 100ms menggunakan function setTimeout (), untuk memastikan konten dipilih dengan benar.

1	document.body.addEventListener( 'mouseup', function() {
2	setTimeout( showMenu, 100 );
3	} );

Function terakhir kami, openShareWindow (), adalah dengan menjalankan window sharing saat tombol pada menu diklik. Dalam tutorial ini, kami akan menggunakannya terutama untuk menghadirkan Twitter sharing window karena Facebook memiliki JavaScript SDK sendiri.

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();
	}
}

Klik ... Klik ...

Selanjutnya, kita mengaitkan tombol sharing dengan event click dan melampirkan function yang akan menjalankan sharing window.

// Facebook.
document.getElementById( 'share' ).addEventListener( 'click', function() {

    var highlight = getHighlight();

    if ( highlight.text !== '' && highlight.parent.nodeName === 'P' ) {
        FB.ui({
            method : 'share',
            mobile_iframe: true,
            href   : 'http://bitly.com/2aiHmCs',
            quote  : highlight.text // pass the text as Quote
        });
    }

    event.preventDefault();
} );

Untuk tombol sharing Facebook, kita menggunakan Facebook JavaScript SDK. SDK memungkinkan kita untuk membypass text untuk muncul di sharing window melalui parameter quote.

Twitter tidak menyediakan JavaScript SDK untuk ini. Jadi di sini kita menggunakan function sendiri, openShareWindow (), dan membypass sebuah formatted URL yang sesuai dengan pedoman mereka beserta ukuran windownya.

document.getElementById( 'tweet' ).addEventListener( 'click', function() {

    var highlight = getHighlight();

    if ( highlight.text !== '' && highlight.parent.nodeName === '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();
} );

Saat kita mengklik tombol Twitter sharing, seharusnya itu membuat window bersangkutan muncul, seperti berikut.

Kesimpulan

Kita siap dengan inline sharing menu kita! Menuju ke demo untuk melihat bagaimana ini beraksi, atau source code untuk melihat function ini secara penuh. Selanjutnya, anda dapat meng-improve inline sharing menu dengan transition atau animation untuk memberikan experience yang lebih menarik.

Resource yang Lebih Mendalam

Ada beberapa API JavaScript yang kami gunakan untuk membuat sharing menu ini up dan running. Beberapa telah disampaikan dalam Envato Tuts+ tutorial sebelumnya, sementara yang lain mungkin benar-benar baru untuk anda. Jadi, di sini saya sudah menyertakan referensi untuk melengkapi tutorial ini.