j-Typed

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Basado en typed.js por Matt Boldt
El valor debe ser matriz

Configuración:

La configuración es la misma que typed.js. La única diferencia es que todas las claves están en minúsculas. Esto es para mantener la coherencia con otros componentes. La única configuración agregada es id.

NUEVO: selector {String} puede contener un elemento anidado para representar texto
NUEVO: text {String} en el formato Text 1|Text 2|Text 3|Text N; de lo contrario, el texto se carga según path.
typespeed {Number} en milisegundos (predeterminado: 0)
startdelay {Number} en milisegundos (predeterminado: 0)
backspeed {Number} en milisegundos (predeterminado: 0)
smartbackspace {Boolean} esto solo retrocedería las palabras después de "Esto es un" (predeterminado: true)
shuffle {Boolean} barajar las cadenas (predeterminado: true)
backdelay {String} tiempo antes de retroceder (predeterminado: 700)
fadeout {Boolean} se desvanece en lugar de retroceder (predeterminado: false)
Clase CSS fadeoutclass {String} para animación de desvanecimiento (predeterminado: typed-fade-out)
fadeoutdelay {Number} retardo de desvanecimiento en milisegundos (predeterminado: 500)
Cadenas de bucle loop {Boolean} (predeterminado: false)
loopcount {String/Number} cantidad de bucles (predeterminado: Infinity)
showcursor {Boolean} muestra el cursor (predeterminado: true)
Carácter del cursor cursorchar {String} (predeterminado: |)
autoinsertcss {Boolean} inserta CSS para el cursor y se desvanece en HTML <head> (predeterminado: true)
contenttype {String} tipo de contenido html o null para texto sin formato (predeterminado: html)

Eventos globales:

Nuevamente, igual que typed.js. Se agregó el parámetro component.

ON('typed.onComplete', function(typed, component) {})
ON('typed.preStringTyped', function(pos, typed, component) {})
ON('typed.onStringTyped', function(pos, typed, component) {})
ON('typed.onLastStringBackspaced', function(typed, component) {})
ON('typed.onTypingPaused', function(pos, typed, component) {})
ON('typed.onTypingResumed', function(pos, typed, component) {})
ON('typed.onReset', function(typed, component) {})
ON('typed.onStop', function(pos, typed, component) {})
ON('typed.onStart', function(pos, typed, component) {})
ON('typed.onDestroy', function(typed, component) {})

Úselo con <ui-component name="typed">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Denis Granec. Fuente: repositorio de componentes Componentator, licencia MIT.

example.html

<div style="height:100px">
	<ui-component name="typed" path="messages" config="loop:true" style="white-space:pre"></ui-component>
</div>
<div style="height:50px">
	<ui-component name="typed" path="messages2" config="loop:true;typespeed:100;backspeed:50"></ui-component>
</div>

<script>
	var messages = 'npm install total.js^1000\n`+ <b>total.js@3.1.0</b>` ^1000\n`added <b>1 package</b> from 23 contributors and audited 1 package in <b>1.348s</b>` ^1000\n`found 0 vulnerabilities`';
	var messages2 = ['Hello world!', '<b>Total.js</b> is awesome!', 'jComponent is <b>awesome</b>!', 'Lorem ipsum', 'Lorem dolor'];

	var count = 0;
	ON('typed.onComplete', function(typed, component) {
		if (typed.el.id === 'myconsole') {
			count++;

			if (count === 5)
				typed.loop = false;
		}
	});
</script>