Changes: WDSIcons/es

Revision as of 11:50, 14 March 2019

WDSIcons es una biblioteca con el objetivo de hacerle más fácil a los autores de scripts usar íconos del Sistema de Diseño Fandom (del inglés Fandom Design System) en sus scripts (demo).

Uso

Uso de biblioteca

Para usar WDSIcons, vincula la lógica de tus íconos al evento dev.wds usando mw.hook.

Importando el script

Una vez que hayas establecido la lógica de tu script, puedes importar la biblioteca.

// registrar el gancho antes para evador condiciones de carrera
mw.hook('dev.wds').add(function(wds) {
    // wds es una referencia a window.dev.wds
});

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

Métodos de la biblioteca

La biblioteca tiene las siguientes atributos que controlan el uso de íconos:

wds.registry - objeto que contiene todos los identificadores por cada tipo de archivo
wds.iconset - lista de íconos
wds.sizemap - mapa de tamaño por el subconjunto de tipos con las dimensiones del archivo
wds.icon - generador de archivo de íconos que devuelve un elemento SVG
wds.badge - generador de archivo de insignia que devuelve un elemento SVG
wds.company - generador de archivo de compañía que devuelve un elemento SVG
wds.render - renderizador para los marcadores de lugar de los elementos WDS

Adición de archivos

Se pueden añadir archivos directamente o en forma de variables, con soporte para atributos personalizados.

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);
});

Renderizador de la biblioteca

La biblioteca puede operar en secciones existentes de HTML, o el contenido un artículo.

Marcadores de íconos - el identificador dev-wds-icons-NAME
Marcadores de insignias - el identificador dev-wds-avatar-badges-NAME
Marcadores de compañías - el identificador dev-wds-company-NAME

Estos son sustituidos con los archivos WDS correspondientes. La librería también permite atributos en los marcadores.

Uso en artículos:

<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');
});

Uso en scripts:

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

Demo

WDSIcons/demo

@@ Line 6: / Line 6: @@
 | Author      =
 * [[User:TK-999|TK-999]]
-* [[User:Speedit|Speedit]]
+* [[User:MACH-59330|MACH-59330]]
 | Scope       = ps
 | Updated     = {{Updated|MediaWiki:WDSIcons/code.js}}