Saya menciptakan sebuah aplikasi/widget kecil untuk menciptakan posting di blog menjadi mempunyai alternatif tampilan “layar penuh”. Tidak benar-benar layar penuh sebenarnya, alasannya yaitu widget ini hanya bekerja dengan cara menyisipkan tabir gres berisi duplikat judul dan konten posting. Kalau Anda ingin menciptakan fitur full screen sungguhan yang sanggup memenuhi seluruh layar, Anda sanggup mempelajari API JavaScript ini ⇒ MDN – Using Full Screen Mode
Untuk memasang widget ini, masuklah ke halaman editor HTML Templat, kemudian letakkan isyarat ini di atas </body>:
<b:if cond='data:blog.pageType == "item"'> <script src='https://cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/full-screen.min.js'/> <script> //<![CDATA[ postFullScreen({ titleSource: document.querySelector('.post-title'), contentSource: document.querySelector('.post-body'), background: "#fff", color: "inherit", fontSize: "120%", padding: 50, maxWidth: 750, openText: "Full Screen Mode", closeText: "Exit full screen mode", appendButtonTo: null, beforeInit: null, afterInit: null }); //]]> </script> </b:if>Atau Saya sarankan lebih baik letakkan isyarat di atas sedekat mungkin dengan posting. Lebih tepatnya di bab paling bawah dari posting:
<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> … </b:section> </b:section> <!-- Letakkan di sini -->Klik Simpan Templat.
Konfigurasi
| Opsi | Keterangan |
|---|---|
| titleSource | Selektor elemen HTML dimana di dalamnya berisi teks judul. Di atas Saya memakai selektor document.querySelector('.post-title') untuk memperoleh teks judul dari dalam elemen <h3 class='post-title'></h3>. Sebagai alternatif, Anda sanggup mencoba untuk memakai selektor document.title untuk memperoleh judul dari address bar. |
| contentSource | Selektor elemen HTML dimana di dalamnya terdapat konten artikel/posting. Pengaturannya sama persis dengan opsi titleSource. |
| background | Digunakan untuk memilih warna latar tabir layar penuh. |
| color | Digunakan untuk memilih warna teks mode layar penuh. inherit artinya warna menyesuaikan dengan warna teks posting. |
| fontSize | Digunakan untuk memilih besar teks di artikel layar penuh. |
| padding | Digunakan untuk memilih padding tabir layar penuh. |
| maxWidth | Digunakan untuk memilih lebar maksimal area artikel layar penuh. |
| openText | Digunakan untuk memilih teks tombol pemicu layar penuh. |
| closeText | Digunakan untuk memilih teks tombol epilog tampilan layar penuh. |
| createButton | Digunakan untuk menciptakan tombol kustom. Lihat klarifikasi di bawah. |
| appendButtonTo | Nilai berupa selektor elemen HTML. Jika nilainya null, tombol akan secara otomatis disisipkan di bawah posting. Jika nilainya false, tombol tidak akan disisipkan secara otomatis (bermanfaat kalau Anda ingin menciptakan tombol pemicu tersendiri secara terpisah). |
| beforeInit | Lihat klarifikasi di bawah. |
| afterInit | Lihat klarifikasi di bawah. |
Penjelasan Ekstra
createButton
Opsi ini dipakai sebagai alternatif kalau Anda tidak suka dengan tampilan tombol pemicu layar penuh secara normal. Anda sanggup memanfaatkan opsi ini untuk menentukan/membuat elemen tombol kustom. Sebagai referensi di sini Saya memakai elemen tautan sebagai tombol:
var buttonMarkup = document.createElement('a'); buttonMarkup.className = "custom-button"; buttonMarkup.style.display = "block"; buttonMarkup.style.marginTop = "20px"; postFullScreen({ openText: "Layar Penuh!", createButton: buttonMarkup }); /* akan menghasilkan ini: <a class="custom-button" style="display:block;margin-top:20px;">Layar Penuh!</a> */Atau Anda juga sanggup memilih nilainya sebagai objek yang sudah ada. Sebagai referensi Anda menciptakan tombol pemicu secara manual di kawasan tertentu, contohnya di sidebar:
<aside> ... <button id="full-screen-button">Layar Penuh</button> ... ... </aside>Kemudian Anda sanggup melaksanakan ini untuk menciptakan tombol tersebut menjadi aktif:
postFullScreen({ createButton: document.getElementById('full-screen-button'), appendButtonTo: false });Jangan lupa untuk mengatur opsi appendButtonTo menjadi false alasannya yaitu kalau tidak tombol tersebut mungkin akan berpindah tempat. Secara umum akan berpindah ke bab selesai posting:
appendButtonTo
Opsi ini dipakai untuk memilih ke mana tombol pemicu tampilan layar penuh akan disisipkan. Berikut ini yaitu sebuah referensi kalau Anda ingin menyisipkan tombol pemicu layar penuh di dalam elemen #button-container:
<div id="button-container"></div>postFullScreen({ ... appendButtonTo: document.getElementById('button-container') });beforeInit dan afterInit
Ini yaitu opsi untuk menciptakan fungsi bebas yang akan tereksekusi sebelum (untuk beforeInit) dan setelah (untuk afterInit) markup tabir tersisip ke blog. Yang paling berkhasiat yaitu beforeInit. Fungsi ini sanggup Anda gunakan untuk memastikan bahwa manipulasi konten posting yang dilakukan oleh JavaScript telah dilakukan sebelum widget ini tereksekusi. Misalnya mengenai Syntax Highlighter atau JavaScript emotikon. Jika Syntax Highlighter atau JavaScript emotikon tidak diaktifkan sebelum widget ini aktif, maka kemungkinannya posting-posting isyarat yang berada di dalam artikel layar penuh tidak akan berwarna, dan emotikon-emotikon di dalam artikel tidak akan menjelma gambar:
postFullScreen({ beforeInit: function() { repText('post-12345'); hljs.initHighlighting(); }, afterInit: function() { alert('OK!'); } });Pengguna jQuery
Jangan lupa untuk menambahkan indeks [0] setelah selektor kalau Anda memakai API selektor elemen jQuery:
postFullScreen({ titleSource: $('.post-title')[0], contentSource: $('.post-body')[0] });