Usage

İçe aktarma

Modal kitaplığı betiğinizin içine aktarmak için şunu kullanın:

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

Betiğinin nesnesi hemen kullanılabilir olmayacak, ancak mw.hook aracılığıyla bir kanca çağıracak. Var olduğundan emin olmak için şunları kullanabilirsiniz:

mw.hook('dev.modal').add(function(modal) {
    // `modal` nesnesi, window.dev.modal ile aynı kitaplığın dışa aktarılan nesnesidir.
});

Dışa aktarılmış nesne

Kitaplık, çeşitli özelliklere sahip bir nesneyi kullanıma sunar:

Modal

Kütüphanenin ana sınıfı. Örnekleme, modalı kitaplığa kaydeder.

ModalButton

Modal düğmeleri için sınıf.

modals

Tüm kayıtlı modalarla nesne.

_init

Kancadan önce çağrılan işlev, Fandom'un modal bileşeni yüklendiğinde geri arama olarak çalışır.

_modal

Fandom'un kitaplık tarafından dahili olarak kullanılan modal bileşeni.

Modeller

Modal

Modal nesneyi temsil eden sınıf.

Parametreler

id

Modalın benzersiz kimliği. Bu parametre gereklidir.

context

Modal olayların bağlanması gereken nesne.

size

Modalın boyutu. Kabul edilen değerler small, medium, large ve content-size şeklindedir.

content

Modalın içeriği

Bir dizeye ayarlanırsa, modalın içerdiği HTML'yi temsil eder.

UI-js içe aktarılırken bir nesneye ayarlanırsa (UI-js, Modal'dan önce içe aktarılmalıdır, aksi hâlde çalışmaz), nesneyi dev.ui işlevi aracılığıyla çalıştırır ve oluşturulan HTML'yi modalın içeriği olarak ayarlar.

Not: Kitaplık düğümde .outerHTML ögesini çağırdığından, UI-js aracılığıyla düğümlerde ayarlanan DOM olaylarının kaydı silinecektir.

title

Modalın başlığı. Varsayılan olarak "Modal" olarak ayarlanmıştır. Bu, isHTML ayarlanmadığı sürece varsayılan olarak güvenlidir, bu durumda uygun şekilde çıkış yapılmalıdır.

isHTML

Modal başlığının HTML olarak geçirilip geçirilmediği.

buttons

ModalButton modelinin parametrelerini temsil eden nesne dizisi.

events

Modala kaydedilecek olay dinleyicilerine olay adlarının haritası. Bu olaylar modal düğmelerle çağrılabilir.

Varsayılan olarak, Fandom'un modal bileşeni, kapat düğmesine tıklandığında çağrılan bir close olayını kaydeder.

Olay nesnesinin değerleri, yalnızca olay dinleyicileri olarak kaydedilen tekli işlevler veya hepsini olay dinleyicileri olarak kaydeden işlev dizileri olabilir.

class / classes

Modal sınıflarını temsil eden dize veya bir dizi dizesi.

close

Modal kapatıldığında çağrılan işlev, modal kapanmaya devam etmezse false döndürebilir.

closeEscape

Esc düğmesine basıldığında modalın kapatılıp kapatılmayacağı. Varsayılan olarak etkin, devre dışı bırakmak için false olarak ayarlayın.

closeTitle

Modalı kapatmak için X düğmesindeki başlık.

Özellikler

İşte Modal bir örneğin kullanılabilir özellikleri. Çoğu, yukarıda açıklanan giriş parametrelerine dayalıdır.

• id
• context
• buttons
• classes
• closeFunc — Modu kapattıktan sonra yedek çağrı.
• closeEscape
• closeTitle
• content — Bir dize olarak modalın HTML'si.
• events — Bu olaylar başlatıldığında, olay adlarının geri arama işlevleri dizilerine eşlenmesi.
• size
• title
• titleIsHTML — Başlığın çıkış yapılmadan görüntülenip görüntülenmeyeceği.
• _loading — Modalın bileşeni oluşturulduğunda çözümlenen dahili söz nesnesi.
• _modal — Modal fabrika tarafından döndürülen dahili modal nesne.

Yöntemler

İşte bir Modal örneğinin kullanılabilir yöntemleri. Çoğu, yukarıda bahsedilen özellikler için ayarlayıcı olarak kullanılır. Bu yöntemlerin her biri, kolayca birbirine zincirlenebilmeleri için bir öz örnek döndürür.

• create() — Modal bileşenin oluşturulmasını başlatır ve oluşturma tamamlandığında çözülen bir söz verir.
• show() — Modalı gösterir. Oluşturulması henüz bitmediyse, oluşturuluncaya kadar bekleyecek ve ardından modalı gösterecektir.
• close() / hide() — Modalı kapatır.
• setButtons(buttons)
• setClass(class)
• setClasses(classes)
• setClose(close)
• setCloseEscape(closeEscape)
• setCloseTitle(title)
• setContent(content)
• setEvent(name, listener)
• setEvents(events) — Not: Bu, modalın diğer tüm olaylarını sıfırlar.
• setSize(size)
• setTitle(title, isHTML)
• _close() — Kapatma olayı tetiklendikten sonra dahili yedek çağrı. Modalın yeniden oluşturulmasını başlatır.
• _created(modal) — Modal bileşen oluşturulduktan sonra dahili yedek çağrı.

ModalButton

Modalın altbilgisindeki bir düğmeyi temsil eden sınıf.

Parametreler

type

Düğme türü. Varsayılan olarak button olarak ayarlıdır. Şunlardan birine ayarlanabilir:

• link
• input
• button

primary

Düğmenin birincil olup olmadığı. Düğmeye bir primary sınıfı ekler.

normal

Düğmeye bir normal sınıfı ekler.

text / value

Düğmedeki metin. Bu parametre gereklidir.

events / event

Düğmenin tetiklediği olaylar dizisi veya tek bir olayı tetikliyorsa bir dize.

classes

primary ve normal sınıflara ek olarak sınıf dizisi.

id

Düğmenin kimliği

disabled

Düğmenin devre dışı bırakılıp bırakılmadığı.

sprite / imageClass

Düğmeye Sprite sınıfı eklendi. Mevcut sprite sınıfları şunlardır:

href

type, link olarak ayarlanmışsa düğmenin bağlandığı konum.

title

type, link olarak ayarlanmışsa, bağlantının başlığı.

target

type, link olarak ayarlanmışsa, bağlantının hedefi.

name

type, input olarak ayarlanmışsa, giriş ögesinin adı.

Özellikler

Düğme nesnesinin kullanılabilir özellikleri. Amaçları parametrelerde açıklanmıştır.

• primary
• normal
• classes
• disabled
• events
• href
• id
• name
• text
• type
• sprite
• target
• title

Yöntemler

Düğme nesnesinin kullanılabilir yöntemleri. Bunların çoğu, yukarıda açıklanan özellikler için ayarlayıcılardır.

• create — Modal düğmeyi işlemek için gereken Mustache parametrelerini döndürür.
• setClasses
• setDisabled
• setEvents / setEvent
• setHref
• setID
• setName
• setText
• setSprite
• setTarget
• setTitle

Örnekler

Yukarıdaki belgeler kafa karıştırıcı olabileceğinden, burada gösterilerle birlikte birkaç örnek verilmiştir. Kullanım bölümünde bahsedilen sarmalayıcılar kullanılmayacaktır.

Basit modal

Bu örnek, varsayılan başlık, SimpleModal kimliği ve "Hello World!" ile içerik olarak küçük bir modal oluşturur.

var modal = new window.dev.modal.Modal({
    content: 'Hello World!',
    id: 'SimpleModal',
    size: 'small'
});
modal.create();
modal.show();

Orta boy modal

Bu örnek, "'Medium size modal" başlığına ve MediumModal kimliğine sahip orta boyutlu bir model oluşturur.

var modal = new window.dev.modal.Modal({
    content: 'This is a medium-sized modal.',
    id: 'MediumModal',
    size: 'medium',
    title: 'Medium-sized modal'
});
modal.create();
modal.show();

UI-js modal

Bu örnek, UI-js tarafından oluşturulan ve sayfa içeriğiyle aynı boyuta sahip bir modal oluşturur.

var modal = new window.dev.modal.Modal({
    content: {
        children: [
            'This modal uses UI-js to generate the content and it\'s the same size as the content.',
            {
                attr: {
                    alt: 'Fandom logo',
                    title: 'Fandom logo',
                    src: 'https://vignette.wikia.nocookie.net/central/images/8/8f/FANDOM-logo.svg/revision/latest/scale-to-width-down/300'
                },
                type: 'img'
            }
        ],
        type: 'div'
    },
    id: 'UIModal',
    size: 'content-size'
});
modal.create();
modal.show();

Düğme modalı

Bu örnek, çeşitli düğme türlerine sahip bir modal oluşturur. Biri devre dışı, biri birincil, biri giriş ögesi ve biri de bağlantı.

var modal = new window.dev.modal.Modal({
    buttons: [
        {
            classes: ['my-custom-class'],
            event: 'custom1',
            id: 'my-custom-id',
            primary: true,
            text: 'Primary button'
        },
        {
            disabled: true,
            text: 'Disabled button'
        },
        {
            event: 'custom2',
            sprite: 'ok',
            text: ' '
        },
        {
            event: 'custom3',
            name: 'my-name',
            type: 'input',
            value: 'This is actually an input element!'
        },
        {
            href: mw.util.getUrl('Special:Random'),
            target: 'hmm',
            text: 'This is a link!',
            title: 'This is the link\'s title!',
            type: 'link'
        }
    ],
    content: 'This modal has buttons!',
    events: {
        custom1: function() {
            new BannerNotification('Custom event 1!', 'confirm').show();
        },
        custom2: function() {
            new BannerNotification('Custom event 2!', 'warn').show();
        },
        custom3: function() {
            new BannerNotification('Custom event 3!', 'error').show();
        }
    },
    id: 'ButtonsModal'
});
modal.create();
modal.show();