Pontianak Web & Open Source

Jasa Buat Website Pontianak. Pontianak Web & Open Source

Drupal: Membuat Rotasi Sticky Node Teaser dengan jQuery

Min, 2011-08-28 15:06 -- mbahlol

Website yang kita buat biasanya memiliki daftar konten terbaru, yang biasa terdiri dari judul dan teasernya. Ini ditandai dengan link supaya kita bisa membaca artikel tersebut dalam versi lengkapnya misal read more, baca selengkapnya. Secara standar konten-konten tersebut mulai dari yang terbaru diposisi paling atas dan yang paling lama di posisi terakhir. Tapi bagaimana jika kita ingin menampilkan konten yang kita anggap penting ditempatkan diposisi paling atas. Ini bisa dilakukan dengan memberi sticky pada konten tersebut.

Dalam Drupal pemberian sticky dapat dilakukan di mode edit node tersebut pada bagian Publishing options -> Sticky at top of lists.

Drupal: Membuat Rotasi Sticky Node Teaser dengan jQuery

Bisa dilihat digambar bawah, ada 3 artikel sticky yang ditandai kotak abu-abu. Nah disini rencananya mau menampilkan satu persatu artikel sticky tersebut dengan menggunakan jQuery. Artikel sticky ini tetap berada di atas walaupun kita menambahkan artikel baru.

Drupal: Membuat Rotasi Sticky Node Teaser dengan jQuery

Untuk themes aku gunakan custom themes dengan base theme bluemarine Untuk cara membuat themes bisa dilihat di Drupal theme dan Membuat Sub Theme Zen. Singkatnya aku buat folder dengan nama temaku (sites/all/themes/temaku), dan diisi dengan file temaku.info , berikut konfigurasi file temaku.info. Bisa dilihat aku juga menambahkan sebuah file css. Setelah selesai membuat file dan folder themes, themes akan bisa dipilih seperti biasa.

; $Id$
name = Temaku
description = Temaku untuk belajar jQuery
version = 1.0
core = 6.x
base theme = bluemarine
stylesheets[all][] = temaku.css

 

Bagian themes sudah selesai, berikutnya membuat script untuk merotasi artikel sticky tersebut. Supaya script tersebut dipanggil oleh drupal maka edit file .info dengan menambahkan baris scripts[] = js/sticky_rotator.js pada akhir file. Dalam contoh file .js aku simpan didalam folder sites/all/themes/temaku/js supaya rapi aja.

; $Id$
name = Temaku
description = Temaku untuk belajar jQuery
version = 1.0
core = 6.x
base theme = bluemarine
stylesheets[all][] = temaku.css

scripts[] = js/sticky_rotator.js

Berikutnya membuat file sticky_rotator.js, berikut isinya. Agak panjang sih, semoga penjelasannya cukup.

// $Id$
/**
* Rotasi Sticky node dengan jQuery
*/
// Tentukan namespace, jika sudah ada atau empty assign ke sebelah kiri
var StickyRotate = StickyRotate || {};

/**
* Mulai init() fungsi rotasi.
*/
StickyRotate.init = function() {
    // cari css class .sticky dengan jQuery($), simpan di stickies.
    var stickies = $(".sticky");
    
    // Periksa apakah sticky <= 1 atau node sedang berada dalam edit form
    // yang diinginkan adalah jika stickies > 1 dan dalam mode view
    if (stickies.size() <= 1 || $('#node-form').size() > 0) {
        return;
    }
    
    // menentukan tinggi dari stickies, disini height yang paling tinggi
    // yang akan digunakan supaya tinggi tidak turun naik jika ada node dengan
    // teaser yang lebih sedikit. Defaultnya 100
    var highest = 100;
    stickies.each(function () {
        var stickyHeight = $(this).height();
        if(stickyHeight > highest) {
            highest = stickyHeight;
        }
    });
    
    // hide stickies dan set css sesuai dengan height
    stickies.hide().css('height', highest + 'px');
    // tentukan var public untuk fungsi berikutnya
    StickyRotate.counter = 0;
    // menyediakan fungsi berikutnya ke objek stikies
    StickyRotate.stickies = stickies;
    // item yang pertama saja yang dimunculkan dengan efek fadeIn.
    // Beberapa efek lain (fadeIn, fadeOut, slideDown, slideUp)
    // speed ada 3: slow, def atau normal, fast
    stickies.eq(0).fadeIn('fast');
    // setiap 5 detik / 5000 milidetik fungsi StickyRotate.periodicRefresh akan dipanggil
    setInterval(StickyRotate.periodicRefresh, 5000);
};

/**
* Fungsi kedua untuk menampilkan sticky yang baru.
*/
StickyRotate.periodicRefresh = function () {
    // buar variable biar lebih pendek yang diketik
    var stickies = StickyRotate.stickies;
    // index current stickies
    var count = StickyRotate.counter;
    // index stickies terakhir
    var lastSticky = stickies.size() - 1;
    // tentukan item yang ditampilkan berikutnya
    // periksa jika sudah mencapai last index maka mulai dari pertama lagi
    // jika tidak +1
    var newcount;
    if (count == lastSticky) {
        newcount = StickyRotate.counter = 0;
    }
    else {
        newcount = StickyRotate.counter = count + 1;
    }
    // yang lama fadeOut yang baru fadeIn
    // ambil 1 item dengan eq() trus fadeOut dengan 2 argument slow dan
    // memanggil fungsi untuk menampilkan newcount (item yang baru) dengan efek fadeIn
    stickies.eq(count).fadeOut('slow', function () {
        stickies.eq(newcount).fadeIn('slow');
    });
};

// event handler saat page load panggil fungsi StickyRotate.init
$(document).ready(StickyRotate.init);

Nah setelah menyimpan file tersebut, balik lagi ke browser, clear cache dan lihat hasilnya. Sticky konten akan bergantian muncul. Jadi konten yang dianggap penting akan tetap berada diatas dan lumayan mengurangi space untuk tampilannya.

Udah lama pensiun main coding begini, semoga catatan kali ini cukup penjelasannya.

Sumber: Drupal 6 Javascript and jQuery