Tek.js

text writer with many options, using pure javascript
author: @giath_atrash
© copyright: 2022 - 2023

---

USAGE :

first we need to define the class

var tek = new Tek();

we can add some options

var tek = new Tek({
	animationSpeed: 50,  // defualt
	separator: ',,', // defualt
});

now we have to add new element to our class

we can use cssSelector [div, .class, #id, etc...]

tek.el('.element');

you can add words using html attribute like :

<div data-words="Hello,,world"></div>

or you can make it as array when adding new element like :

this method is asynchronous function

tek.el('.element', ["Hello", "World"]);

---

RUN :

to run the writer you need the item_id
you can get it after adding new element
now we can run using run() method with item_id as argument

tek.el('.element', ["Hello", "World"])
.then(item_id => {
	tek.run(item_id);
});

run() method is asynchronous too,
but what we can do with it ??

tek.el('.element', ["Hello", "World"])
.then(item_id => {
	tek.run(item_id).then(() => {
		// last word of array just finshed
		// this place will fire once
		// so do something
		console.log("i'm have done!");
	});
});

what if we have 999 item ??

how we can run all of it
using getAll() method
this method is asynchronous too

tek.getAll(items => {
	for(i in items){
		items[i].run();
	}
});

---

ITEM OPTIONS :

tek.el('.element', [...words], {
	colors: [], // object
	colorMode: "convert", // string
	delay: 1500, // number
	writeSpeed: 100, // number
	hideMode: "backspace", // string
	loop: true, // boolean
});

colors :

defualt: []
type: object

• #hex
  
• rgb()
  
• hsl()
  
• colorName

example :

colors: ["red", "#f0f", "rgb(0,0,0)", "hsl(0deg 100% 200%)"],

colorMode :

defualt: convert
type: string

• blink
  
• fade => recommended
  
• convert

delay :

defulat : 1500
type: number
how much time need to wait for start removing the word

writeSpeed :

defualt: 100
type: number
words write and remove speed

hideMode :

defualt: backspace
type: string

• fadeOut
  
• backspace

loop :

defualt: true
type: boolean

---

METHODS :

el() :

add new element to class
@param {string} cssSelector
@param {object} words - can be blank if [data-words] exits
@param {object} options
@return asyn function

run() :

start writing
@param {string} item_id
@return asyn function

getAll() :

get all items
@return asyn function

stop() :

stop writing and looping
@param {string} item_id
@return asyn function

delete() :

delete item from class for no running it again
@param {string} item_id
@return asyn function

info() :

get item info and options
@param {string} item_id
@return asyn function