WDSIcons/uk

WDSIcons — це набір (бібліотека), призначений для полегшення використання іншими авторами скриптів, що містять іконки Fandom Design System для власних потреб (приклад).

Примітка: підсумковий HTML-код змінений, аби іконки відповідали вимогам FDS:

У додатку всі WDS-значки відображаються з атрибутом id
Система дизайну FDS не присвоює ідентифікатори значкам.
WDSIcons тільки призначає атрибут data-id для надання назв значкам.

Використання

Використання бібліотеки

Аби використовувати WDSIcons, створіть свою послідовність знаків до dev.wds, використовуючи mw.hook.

Імпорт скрипта

Після налаштування послідовності скрипта можна імпортувати й бібліотеку.

// register hook before import to avoid race conditions
mw.hook('dev.wds').add(function(wds) {
    // wds is a shortcut to window.dev.wds
});

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

Методи використання

У сховищі даних ФЕНДОМу є наступні ключі, за допомогою яких ви зможете управляти значками:

wds.registry — ключ, що містить дійсні ідентифікатори для кожного типу значків
wds.iconset — масив значків
wds.sizemap — карта розмірів підмножини типу значків з їх розмірами
wds.icon — генератор іконок, який повертає SVG-картинку
wds.badge — генератор значків, який повертає SVG-картинку
wds.company — генератор зображень брендів, який повертає SVG-картинку
wds.render — відображає WDS-картинку, що служить заповнювачем (placeholder)

Додавання значка

Значки можуть бути додані безпосередньо в скрипт або у вигляді змінних з підтримкою атрибутів.

mw.hook('dev.wds').add(function(wds) {
    $('foo').append(wds.icon('pencil-small', {
        'class': 'edit'
    }));
    var bar = wds.icon('trash-small', {
        'class': 'garbage'
    });
    $('.foo').append(bar);
});

Засіб візуалізації бібліотеки

Бібліотека може працювати з існуючим розділом HTML або вмістом статті.

Іконки заповнюються картинкою з ідентифікатором dev-wds-icons-НАЗВА
Значки заповнюються картинкою з ідентифікатором dev-wds-avatar-badges-НАЗВА
Логотипи брендів заповнюються картинкою з ідентифікатором dev-wds-company-НАЗВА

Вони замінюються відповідними WDS-значками. За допомогою сховища також можна замінити картинки-заповнювачі.

Використання в статті:

<div class="bar"><!--
 --><div class="wds-icon-small" id="dev-wds-icons-gear"><!--
 --></div>
</div>

mw.hook('dev.wds').add(function(wds) {
    wds.render('.bar');
});

Використання в скрипті:

mw.hook('dev.wds').add(function(wds) {
    $('.foo').append(
        $('<div>', {
            'id': 'dev-wds-icons-gear-small'
        })
    );
    wds.render('.foo');
});

Демонстрація

WDSIcons/demo

WDSIcons/uk

Contents