Fandom Developers Wiki
Advertisement

Modal kitaplığı, Fandom'un yerleşik kiplerinin daha kolay ve daha hızlı oluşturulması ve görüntülenmesi için bir kitaplıktır.

Kullanım[]

İç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:
  • edit      
  • talk      
  • talk-two      
  • categorization      
  • move      
  • new      
  • photo      
  • video      
  • search      
  • mytools      
  • follow
  • share
  • logo
  • logo2      
  • logo3      
  • logo4      
  • logo9      
  • drag      
  • trash      
  • activity      
  • random      
  • close      
  • edit-pencil      
  • edit-pencil-small      
  • blog      
  • message      
  • lock      
  • remove      
  • details      
  • info-icon      
  • ok      
  • error      
  • contribute      
  • question      
  • close-notification      
  • popout      
  • embed      
  • email
  • share2      
  • gear      
  • facebook
  • external      
  • progress      
  • play      
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();
Deneyin!

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();
Deneyin!

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();
Deneyin!

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();
Deneyin!
Advertisement