Documentación de Los Complementos de Impress

Documentación de los complementos
de Impress.js
El conjunto predeterminado de complementos
Muchas características impress.js se implementarán y se implementarán como
complementos. Cada complemento tiene documentación de usuario en un archivo
README.md en su propio directorio .
Los complementos de este directorio se denominan complementos

predeterminados y, como era de esperar, están habilitados de forma
predeterminada. Sin embargo, la mayoría de ellos no harán nada por defecto, sino
que requerirán que el usuario los invoque de alguna manera. Por ejemplo:
 El complemento de navegación espera a que el usuario presione algunas

teclas, flechas, página abajo, página arriba, espacio o pestaña.
 El complemento de reproducción automática busca el atributo HTML data-
autoplaypara ver si debe hacer lo suyo.
 El complemento de la barra de herramientas busca un <div>elemento para
hacerse visible.
Complementos adicionales
Sin embargo, hay más funciones disponibles en presentaciones que
permiten complementos adicionales . Los complementos adicionales son
complementos de terceros que no forman parte de impress.js, pero que, sin
embargo, hemos recopilado en el repositorio impress-extras para proporcionar un
acceso conveniente y estandarizado a ellos. Para incluir los complementos
adicionales al revisar impress.js, use git clone --recursive. Incluso entonces, no se
activan por defecto en una presentación, sino que cada uno debe incluirse con su
propia <script>etiqueta.
Nota: El activar complementos adicionales se inicializan automáticamente por
los extras plugin.
Ejemplo HTML y CSS

En general, los complementos harán algo sensato, o nada, por defecto. Por lo
tanto, no se requiere HTML o CSS en particular. El archivo README de cada
complemento documenta el HTML y CSS que puede usar con ese complemento.
Para su conveniencia, a continuación hay algunos ejemplos de código HTML y
CSS que cubren todos los complementos que desee usar o adaptar.
Ejemplo de HTML para habilitar complementos y

complementos adicionales
<head>

<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
<link rel="stylesheet" href="../../extras/mermaid/mermaid.forest.css">
</head>
<body>
<div id="impress" data-autoplay="10">
<div class="step"
data-autoplay="15"
data-rel-x="1000"
data-rel-y="1000">
<h1>Slide content</h1>
<ul>
<li class="substep">Point 1</li>
<li class="substep">Point 2</li>
</ul>
<div class="notes">
Speaker notes are shown in the impressConsole.
</div>
</div>
</div>
<div id="impress-toolbar"></div>
<div class="impress-progressbar"><div></div></div>
<div class="impress-progress"></div>
<div id="impress-help"></div>
<script type="text/javascript"
src="../../extras/highlight/highlight.pack.js"></script>
src="../../extras/mermaid/mermaid.min.js"></script>
src="../../extras/markdown/markdown.js"></script>
<script type="text/javascript" src="../../extras/mathjax/MathJax.js?
config=TeX-AMS_CHTML"></script>
</body>
Ejemplo de CSS relacionado con complementos y

complementos adicionales
/* Using the substep plugin, hide bullet points at first, then show them one by
one. */
#impress .step .substep {
opacity: 0;
}
#impress .step .substep.substep-visible {

opacity: 1;
transition: opacity 1s;
}
/*
Speaker notes allow you to write comments within the steps, that will not
be displayed as part of the presentation. However, they will be picked up
and displayed by impressConsole.js when you press P.
*/
.notes {
display: none;
}
/* Toolbar plugin */
.impress-enabled div#impress-toolbar {
position: fixed;
right: 1px;
bottom: 1px;
opacity: 0.6;
z-index: 10;
}
.impress-enabled div#impress-toolbar > span {
margin-right: 10px;
}
.impress-enabled div#impress-toolbar.impress-toolbar-show {
display: block;
}
.impress-enabled div#impress-toolbar.impress-toolbar-hide {
display: none;
}
/* If you disable pointer-events (like in the impress.js official demo), you

need to re-enable them for the toolbar.
And the speaker console while at it.*/
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }
/* Progress bar */
.impress-enabled .impress-progressbar {
position: absolute;
right: 318px;
bottom: 1px;
left: 118px;
border-radius: 7px;
border: 2px solid rgba(100, 100, 100, 0.2);
}
.impress-enabled .impress-progressbar DIV {
width: 0;
height: 2px;
border-radius: 5px;
background: rgba(75, 75, 75, 0.4);
transition: width 1s linear;
}
.impress-enabled .impress-progress {
position: absolute;
left: 59px;
bottom: 1px;
text-align: left;
opacity: 0.6;
}
.impress-enabled #impress-help {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #EEEEEE;
font-size: 80%;
position: fixed;
left: 2em;
bottom: 2em;
width: 24em;
border-radius: 1em;
padding: 1em;
text-align: center;
z-index: 100;
font-family: Verdana, Arial, Sans;
}
.impress-enabled #impress-help td {
padding-left: 1em;
padding-right: 1em;
}
Para desarrolladores
La visión de impress.js es proporcionar una biblioteca central compacta que haga
las presentaciones reales, con una colección de complementos que brindan
funcionalidad adicional. Un conjunto predeterminado de complementos se
distribuye junto con el núcleo impress.js, y se encuentra en este directorio. Se
llaman complementos predeterminados porque se distribuyen y se activan cuando
los usuarios usan js / impress.js en sus presentaciones.
Construyendo js / impress.js
La forma común de usar impress.js es vincular al archivo js / impress.js . Esta es
una simple concatenación del núcleo impress.js y todos los complementos en este
directorio. Si edita o agrega código en src / , puede ejecutarlo node build.jspara
recrear el js/impress.jsarchivo distribuible . El script de compilación también crea
un archivo minificado, pero esto no está incluido en el repositorio de git.
Consejo: errores de compilación

Si su código tiene errores de análisis, build.jsimprimirá una excepción poco útil
como
/home/hingo/hacking/impress.js/js/impress.js
/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:271
throw new JS_Parse_Error(message, line, col, pos);
^
Error
at new JS_Parse_Error (/home/hingo/hacking/impress.js/node_modules/uglify-
js/lib/parse-js.js:263:18)
at js_error (/home/hingo/hacking/impress.js/node_modules/uglify-
at croak (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-
js.js:733:9)
at token_error (/home/hingo/hacking/impress.js/node_modules/uglify-
at unexpected (/home/hingo/hacking/impress.js/node_modules/uglify-
at Object.semicolon [as 1]
(/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:766:43)
at prog1 (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-
js.js:1314:21)
at simple_statement (/home/hingo/hacking/impress.js/node_modules/uglify-
at /home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-
js.js:814:19
at block_ (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-
js.js:1003:20)
Le complacerá saber que la concatenación del archivo no minificado js /
impress.js ya ha tenido éxito en este momento. Simplemente abra una prueba en
su navegador, y el navegador le mostrará la línea y el error.
Estructura, denominación y política.

Cada complemento está contenido dentro de su propio directorio. El nombre del
directorio es el nombre del complemento. Por ejemplo, imagine un complemento
llamado pluginA :
src/plugins/plugina/
El archivo javascript principal debe usar el nombre del directorio como su nombre
raíz:
src/plugins/plugina/plugina.js
Para la mayoría de los complementos, un solo .jsarchivo es suficiente.
Tenga en cuenta que el nombre del complemento también se usa como un
espacio de nombres para varias cosas. Por ejemplo, el complemento
de reproducción automática se puede configurar configurando el data-
autoplay="5" atributo en a div.
Como regla general, los identificadores, las clases y los atributos dentro
del div#impresselemento raíz pueden usar el nombre del complemento
directamente (por ejemplo data-autoplay="5"). Sin embargo, fuera del elemento
raíz, debe usar impress-pluginname(p <div id="impress-toolbar">. Ej ., La última
forma (más larga) también se aplica a todos los eventos, deben tener el
prefijo impress:pluginname.
Debe usar nombres claros y descriptivos para sus complementos. Pero a veces
puede optimizar para un espacio de nombres corto. Por lo tanto, el complemento
de posicionamiento relativo se llama relpara mantener cortos los atributos
html. ¡No deberías abusar de esta idea!
Tenga en cuenta que para los complementos predeterminados, que son todos los
complementos en este directorio, NO se permiten archivos css, html o de
imagen .
Los complementos predeterminados no deben agregar ninguna variable global.
Pruebas
El directorio de complementos también debe incluir pruebas, que deben usar
las bibliotecas QUnit y Syn en prueba / . Puede realizar tantas pruebas como
desee, pero se sugiere que se llame a su primer y principal archivo de
prueba plugina_tests.html y plugina_tests.jsrespectivamente. Debe agregar
su .jsarchivo de prueba en /qunit_test_runner.html , y el .jsarchivo debe
comenzar cargando el .htmlarchivo de prueba en iframe#presentation-
iframe. Consulte el complemento de navegación-ui para ver un ejemplo.
Puede probar su complemento de la forma que desee, pero el enfoque general es
que la prueba cargue el archivo js / impress.js producido por build.js. De esta
manera, está probando lo que los usuarios realmente usarán, en lugar del código
fuente sin compilar.
Cómo escribir un complemento
Encapsulación
Para evitar contaminar el espacio de nombres global, los complementos deben
encapsularlos en la función anónima estándar de javascript:
/**
* Plugin A - An example plugin
*
* Description...
*
* Copyright 2016 Firstname Lastname, email or github handle
* Released under the MIT license.
*/
(function ( document, window ) {
// Plugin implementation...
})(document, window);
Complementos de inicio
Clasificamos los complementos en varias categorías, según cómo y cuándo se
llaman, y qué hacen.
Un complemento init es el tipo más simple de complemento. Simplemente escucha

el impress().init()método para enviar el impress:initevento, momento en el cual
el complemento puede inicializarse y comenzar a hacer lo que haga, por ejemplo,
llamando a métodos en la API pública devuelta por impress().
El impress:initevento tiene el div#impresselemento como su targetatributo,
mientras que event.detail.apicontiene el mismo objeto que se devuelve al
llamar impress(). Es habitual almacenar el objeto api enviado por el evento en
lugar de llamar impress()desde el espacio de nombres global.
Ejemplo:
/**
* Plugin A - An example plugin
*
* Description...
*
* Copyright 2016 Firstname Lastname, email or github handle
* Released under the MIT license.
*/
(function ( document, window ) {
var root;
var api;
var lib;
document.addEventListener( "impress:init", function( event ) {

root = event.target;
api = event.detail.api;
lib = api.lib;
// Element attributes starting with "data-", become available under

// element.dataset. In addition hyphenized words become camelCased.
var data = root.dataset;
// Get value of `<div id="impress" data-plugina-foo="...">`
var foo = data.pluginaFoo;
// ...
}
})(document, window);
Tanto Navigation como Autoplay son complementos de inicio.
Para proporcionar la capacidad de configuración del usuario final en su

complemento, una buena idea podría ser leer los atributos html de la presentación
impresa. El complemento de reproducción automática hace exactamente esto,
puede proporcionar un valor predeterminado en el div#impresselemento o en cada
uno div.step.
Un complemento solo debe usar atributos html en su espacio de nombres
designado, que es
data-pluginName-*="value"
Por ejemplo, si pluginA ofrece opciones de configuración fooy barse vería así:
<div id="impress" data-plugina-foo="5" data-plugina-bar="auto" >
Complementos previos al inicio

Algunos complementos deben ejecutarse antes de que impress (). Init () haga
algo. Estos son típicamente filtros : quieren modificar el html a través de llamadas
DOM, antes de que impress.js core analice la presentación. Llamamos a
estos complementos pre-init .
Un complemento pre-init debe llamarse sincrónicamente antes

de impress().init()ejecutarse. Los complementos pueden registrarse para ser
llamados en la fase previa al inicio llamando a:
impress.addPreInitPlugin( plugin [, weight] );
El argumento plugindebe ser una función. weightes opcional y por defecto 10. Los
complementos se ordenan por peso cuando se ejecutan, con un peso menor
primero.
El complemento de posicionamiento relativo es un ejemplo de un complemento
previo al inicio.
Complementos Pre-StepLeave
Un complemento pre-stepleave se llama sincrónicamente desde impress.js core al
comienzo de impress().goto().
Para registrar un complemento, llame
impress.addPreStepLeavePlugin( plugin [, weight] );
Cuando se ejecuta la función del complemento, se le pasará un argumento similar
al eventobjeto de los controladores de eventos DOM:
event.target contiene el paso actual, que estamos a punto de abandonar.
event.detail.next contiene el elemento al que estamos a punto de hacer la
transición.
event.detail.reason contiene una cadena, una de "siguiente", "anterior" o "goto",
que le indica qué función API se llamó para iniciar la transición.
event.detail.transitionDuration contiene la transición Duración para la próxima
transición.
Un complemento previo a stepleave puede alterar los valores en event.detail(a
excepción de reason), y esto puede cambiar el comportamiento de la próxima
transición. Por ejemplo, el gotocomplemento establecerá event.detail.nextque
apunte a algún otro elemento, haciendo que la presentación salte a ese paso.
Complementos de GUI
Un complemento GUI es en realidad solo un complemento init, pero es una
categoría especial que expone widgets o efectos visibles en la presentación. Por
ejemplo, podría proporcionar botones en los que se pueda hacer clic para ir a la
diapositiva siguiente y anterior.
Tenga en cuenta que todos los complementos enviados en el conjunto

predeterminado no deben producir ningún elemento html visible a menos que el
usuario lo solicite. Una práctica recomendada es permitir que el usuario agregue
un elemento div, con una identificación que equivalga al espacio de nombres del
complemento, en el lugar donde desea ver los elementos visuales de la interfaz de
usuario que proporciona el complemento:
<div id="impress-plugina"></div>
Otra forma de mostrar los elementos de un complemento de UI podría ser permitir
que el usuario presione explícitamente una tecla, como "H" para un diálogo de
ayuda.
El complemento de la barra de herramientas es un ejemplo de un complemento de

GUI. Presenta una barra de herramientas donde otros complementos pueden
agregar sus botones de forma centralizada.
Recuerde que para los complementos predeterminados, incluso los complementos

de GUI, no se permiten archivos html, archivos css o imágenes. Todo debe ser
generado desde javascript. La idea es que los usuarios puedan crear widgets
temáticos con su propio CSS. (Por supuesto, un complemento es bienvenido para
proporcionar ejemplos de CSS que se pueden copiar :-)
Dependencias
Si pluginB depende de la existencia de pluginA , y también pluginA debe
ejecutarse antes de pluginB , entonces pluginB no debería escuchar
el impress:initevento, sino que pluginA debería enviar su propio evento init,
que pluginB escucha.
Ejemplo:
// pluginA
document.addEventListener("impress:init", function (event) {
// plugin A does it's own initialization first...
// Signal other plugins that plugin A is now initialized

var root = document.querySelector( "div#impress" );
var event = document.createEvent("CustomEvent");
event.initCustomEvent("impress:plugina:init', true, true, { "plugina" :
"data..." });
root.dispatchEvent(event);
}, false);
// pluginB
document.addEventListener("impress:plugina:init", function (event) {
// plugin B implementation
}, false);
Un complemento debe usar el espacio impress:pluginname:*de nombres para
cualquier evento que envíe.
En teoría, todos los complementos siempre pueden enviar uno inity otros
eventos, pero en la práctica los estamos agregando según sea necesario.

Documentación de Los Complementos de Impress

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Documentación de Los Complementos de Impress

Cargado por

Copyright:

Formatos disponibles

Documentación de los complementos

Los complementos de este directorio se denominan complementos

 El complemento de navegación espera a que el usuario presione algunas

Ejemplo HTML y CSS

Ejemplo de HTML para habilitar complementos y

Ejemplo de CSS relacionado con complementos y

#impress .step .substep.substep-visible {

/* If you disable pointer-events (like in the impress.js official demo), you

Consejo: errores de compilación

Estructura, denominación y política.

Los complementos predeterminados no deben agregar ninguna variable global.

Cómo escribir un complemento

Un complemento init es el tipo más simple de complemento. Simplemente escucha

document.addEventListener( "impress:init", function( event ) {

// Element attributes starting with "data-", become available under

Para proporcionar la capacidad de configuración del usuario final en su

Complementos previos al inicio

Un complemento pre-init debe llamarse sincrónicamente antes

Tenga en cuenta que todos los complementos enviados en el conjunto

El complemento de la barra de herramientas es un ejemplo de un complemento de

Recuerde que para los complementos predeterminados, incluso los complementos

// Signal other plugins that plugin A is now initialized

También podría gustarte