Ek olarak, görünür modellerin üzerine başlık bildirimlerini otomatik olarak eklemek için desteği geri getiriyor. Şu anda bu, ShowCustomModal ile uyumludur. Modal.js desteği sınırlıdır.

İçe aktarma

Kitaplığı kendi komut dosyalarınıza aktarmak için şunu kullanın:

importArticle({
    type: 'script',
    article: 'u:dev:MediaWiki:BannerNotification.js'
});

BannerNotification yapıcısı hemen kullanılamayacak, ancak kullanılabilir olduğunda dev.banners kancasını kullanarak dinleyebilirsiniz:

mw.hook('dev.banners').add(function(BannerNotification) {
    // BannerNotification, başlık yapıcısıdır
    new BannerNotification('Hello world', 'notify').show();
    // Ayrıca `window.dev.banners.BannerNotification` olarak da erişebilirsiniz, ancak buna kendi referansınızı saklamanız tavsiye edilir
});

Usage

Yapılandırma

BannerNotification yapıcısına erişiminiz olduğunda, normal arayüzle oluşturabilirsiniz.

new BannerNotification(content, type, $parent, timeout)

content - Bildirim içeriği. Bir dize ise, HTML olarak yorumlanacaktır. Ona ilettiğiniz şeyi uygun şekilde sterilize ettiğinizden emin olun. Bir dizeden başka bir şey varsa, dizelenecektir. Bu, jQuery nesnesinin veya Öge örneklerinin kullanışlı olmayacağı anlamına gelir. Bu nedenle, herhangi bir olayın, daha sonra belgelerde gösterildiği gibi .$element özelliği kullanılarak oluşturulup .show() ile görüntülendikten sonra eklenmesi gerekecektir.

type - Bildirim türü. Dize. Olası değerler şunlardır: notify, confirm, warn, error

$parent - Bildirimi içeren kapsayıcı. Bir jQuery nesnesi olmalıdır.

timeout - Milisaniye cinsinden bildirim görüntüleme zaman aşımı. Varsayılan olarak, zaman aşımı yoktur.

Yöntemler

BannerNotification nesnelerinde yöntemleri çağırmak, onları oluşturmanın yanı sıra onlarla etkileşim kurmanın en yaygın yoludur. Çoğu zaman, yalnızca onları gösterme konusunda endişelenmeniz gerekecek.

.show()

Bildirimi görüntüler. Bir kip ön plandaysa, yapıcıya açıkça bir $parent geçirilmedikçe, bunun üstüne eklenecektir.

.hide()

Bildirimi gizler.

.setType(type)

Bildirim türünü ayarlar. Başlığın simgesini, yeniden gizlenmeden zaten .show() çağrıldıysa güncellemez. Bu yöntemi kullanmamanız ve bunun yerine tür hesaplandıktan sonra yeni bir nesne oluşturmanız önerilir.

Olası değerler şunlardır: notify, confirm, warn, error

.setContent(content)

Bildirim içeriğini ayarlar. Başlığın içeriğini, yeniden gizlenmeden .show() zaten çağrıldıysa güncellemez. Bu yöntemi kullanmamanız ve bunun yerine içerik hesaplandıktan sonra yeni bir nesne oluşturmanız önerilir.

.onClose(handler)

Bildirim kapatıldığında bir geri çağrı ayarlar. Bir seferde yalnızca bir geri arama olabilir. Zaman aşımı süresi dolduktan sonra bildirim kendiliğinden sona ererse çağrılmaz.

Özellikler

Döndürülen BannerNotification nesnesinin birçok kullanılabilir özelliği vardır. Bunları kullanmak zorunda kalmanız nadirdir, ancak bunları kullanmanız gereken belirli durumlar vardır. Bu özelliklerin salt okunur kullanım için tasarlandığını unutmayın. Doğrudan bir değer atamak, gerçek bildirimi etkilemez. Karmaşık durumlar örnekler bölümünde bulunabilir.

.$element

Başlık için jQuery nesnesi. .show henüz çağrılmamışsa veya .hide çağrılmışsa boş olacaktır. Daha spesifik olarak, .hidden özelliği true olduğunda boş olacaktır. Bu özellik, başlığın içeriğine olay dinleyicileri eklemek veya onlarla başka bir şekilde etkileşim kurmak istiyorsanız kullanışlıdır.

.$parent

jQuery nesnesi, yapım aşamasında üst öge olarak geçti. Yapım aşamasında sağlanmazsa, otomatik olarak hesaplanan üst öge ile güncellenmeyecektir. Yapılandırmayı hiçbiri iletilmediyse, tanımsız olacaktır.

.content

İçerik dizesi. .setContent çağrılırsa güncellenir.

.type

Tür dizesi. .setType çağrılırsa güncellenir.

.hidden

Başlığın gizlenip gizlenmediğini gösteren boole. .show ögesinin çağrılması bunu false olarak ayarlar ve .hide ögesinin çağrılması bunu true olarak ayarlar.

.onCloseHandler

Bildirim kapatıldığında geçerli işleyici. Hiçbiri geçilmediyse, hiçbir şey yapmayan bir işlev olacaktır. Bu özellik, bir yakın işleyici ayarlamak istiyorsanız, ancak aynı zamanda yeni işleyiciniz çalıştırıldıktan sonra onu arayabilmeniz için önceki işleyiciye bir referans tutmak istiyorsanız yararlı olabilir.

Örnekler

Bu, BannerNotifications ile sahip olabileceğiniz en basit etkileşimdir. Aynı zamanda en yaygın olanıdır ve çoğu zaman bu kitaplığı kullanmak için gerçekten bilmeniz gereken her şeydir.

mw.hook('dev.banners').add(function(BannerNotification) {
    new BannerNotification('Hello', 'notify').show();
});

Uluslararası hâle getirilmiş mesajlar kullanıyorsanız, muhtemelen yapmanız gerektiği gibi, i18n-js ile, betiklerinizi yanlışlıkla XSS saldırılarına maruz bırakmadığınızdan emin olmak için .escape() veya .parse() kullanmalısınız.

// Burada, komut dosyanızın mesajlarının bir `i18n` örneğine sahip olduğunuzu varsayıyoruz
mw.hook('dev.banners').add(function(BannerNotification) {
    new BannerNotification(i18n.msg('banner-content').escape(), 'notify').show();
});

Başlık bildirimlerini eklemek için özel bir üste sahip olmak istiyorsanız, üçüncü parametreyi kullanabilirsiniz. Bu, daha nadir kullanım durumlarından biridir, ancak belirli kullanıcı arayüzleri ile kullanışlı olabilir.

mw.hook('dev.banners').add(function(BannerNotification) {
    // Maddenin içeriğine ekleyin. Garip görünecek, ancak bu yalnızca bir örnek!
    var $parent = $('#mw-content-text');

    new BannerNotification('Bu maddedir içeriğidir. Bahse girerim tamamen yanlıştır!', 'notify', $parent).show();
});

Başlığınızın otomatik olarak kaybolması için bir zaman aşımı ayarlamak istiyorsanız dördüncü parametreyi kullanabilirsiniz. Özel bir üst öge ayarlamakla ilgilenmediğimizden, 3. $parent parametresi olarak undefined ögesinin nasıl aktarıldığına dikkat edin. Standart varsayılan değer undefined olsa da null ögesini de kullanabilirsiniz.

mw.hook('dev.banners').add(function(BannerNotification) {
    new BannerNotification('2 saniye sonra kaybolacağım', 'notify', undefined, 2000).show();
});

Başlık bildirim ögesinin kendisine olay eklemek istiyorsanız, ona bir değişkenle bir referans tutmanız gerekir. Ardından, istediğinizi yapmak için $element özelliğini kullanabilirsiniz. Aşağıdaki örnek, şu anda BannerNotification yapıcısının sağladığı zaman aşımı parametresiyle mümkün olmayan ve bu örnekler kadar karmaşık olan iptal edilebilir bir zaman aşımı uygulayacaktır.

mw.hook('dev.banners').add(function(BannerNotification) {
    var banner = new BannerNotification('5 saniye geçmeden bana tıklamazsanız bu bildirim otomatik olarak kendini gizleyecektir. Şimdi bana tıkla!', 'notify').show();
    var $content = banner.$element.find('.wds-banner-notification__text');

    var timeoutId = setTimeout(function() {
        banner.hide();
    }, 5000);

    $content.on('click', function() {
        clearTimeout(timeoutId);
        alert('Tebrikler, felaketi başarıyla önlediniz!');
        $content.text('Şimdi hepimiz güvendeyiz');

        // Not: Bu, simgeyi güncellemeyecektir! Henüz değil, neyse, kütüphanede biraz gözden kaçmış sanırım
        // Yalnızca tekrar tekrar gizlediğiniz ve gösterdiğiniz bir örneği yeniden kullanırken yararlıdır, ancak bu model önerilmez
        banner.setType('confirm');
    });

    banner.onClose(function() {
        alert('Hayır! Elle kapatmaya nasıl cüret edersin! Az önce ne yaptığın hakkında bir fikrin var mı???');
    });
});