Echo-js

Tygari — Sun, 04 Apr 2021 21:01:01 +0000

I have chosen to write my first article about a tool I wrote.

Echo-js is a tool for creating / rearranging /deleting repetitive children within a parent element dynamically within the HTML DOM.

In my coding, I kept coming across cases where I needed to quickly and easily write many repetitive element children, rearrange those children, and sometimes delete specific children.

I had heard about some such tools within frameworks, but I was still working on learning the core language. I wasn't ready to tackle tricky and confusing frameworks, yet nothing existed in the core language for what felt like a simple task.

Over time I developed complex functions to accomplish this but they were limited and had many issues. As I learned more about programming I was able to refine those functions into simpler and more efficient scripts. Then I discovered the Web Components API within core Javascript and wrote Echo-js version 1. I wrote a web component to do the job of the above but it required using a specific tag which still felt wrong.

After a year, I discovered the MutationObserver API within core Javascript to fix this issue. With this, I was able to solve the tag issue and allow the Echo-js tool to work with any tag. So I then wrote Echo-js version 2.

Add this script code to ones page to make use of the Echo-js tool.
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tygari/echo-js/echo.js" sync></script>

Echo-js uses two new attributes currently not in use by any core HTML tag or API.

The echo attribute takes in a string of ID's or a numeric value and creates children based on the code attribute.

The code attribute takes in a string of HTML code that is then used as the template dictated by the echo attribute. When not assigned an HTML string or assigned an invalid HTML string this attribute will default to <div></div>.

At the start, Echo-js only took in a string of ID's assigned to the echo attribute and a string of HTML code assigned to the code. Over time I added more and more features to give this tool more versatility. As I found bugs I fixed them. Over time I refined the code to make it more efficient.

Echo-js, when given a string of words, will create a child for each word and apply each word as an ID to those children in the order of the words from left to right.

Written HTML
<div id="test" echo="bar foo barfoo" code="<span></span>"></div>

DOM HTML

<div id="test" echo="bar foo barfoo" code="<span></span>">
    <span id="bar"></span>
    <span id="foo"></span>
    <span id="barfoo"></span>
</div>

The children can be targeted and altered.

Javascript
document.getElementById('bar').style.color = 'red'; document.getElementById('bar').innerText = 'red'; document.getElementById('foo').style.color = 'yellow'; document.getElementById('foo').innerText = 'yellow'; document.getElementById('barfoo').style.color = 'blue'; document.getElementById('barfoo').innerText = 'blue';

DOM HTML

<div id="test" echo="bar foo barfoo" code="<span></span>">
    <span id="bar" style="color:red">red</span>
    <span id="foo" style="color:yellow">yellow</span>
    <span id="barfoo" style="color:blue">blue</span>
</div>

Now that each span is individualized, time to alter the echo attribute by rearranging the order of its words.

Javascript
document.getElementById("test").setAttribute("echo", "barfoo bar foo");

DOM HTML

<div id="test" echo="barfoo bar foo" code="<span></span>">
    <span id="barfoo" style="color:blue">blue</span>
    <span id="bar" style="color:red">red</span>
    <span id="foo" style="color:yellow">yellow</span>
</div>

Echo-js will copy all the children, then delete them from the HTML DOM, then paste them back in the new order. It will preserve any unique alterations applied to each child.

Even adding another word to the list won't harm the already present children. In the order position of the new word string, a new child will be created based on the code attribute.

Javascript
document.getElementById("test").setAttribute("echo", "barfoo bar foobar foo");

DOM HTML

<div id="test" echo="barfoo bar foobar foo" code="<span></span>">
    <span id="barfoo" style="color:blue">blue</span>
    <span id="bar" style="color:red">red</span>
    <span id="foobar"></span>
    <span id="foo" style="color:yellow">yellow</span>
</div>

Suppose one decides they no longer desire a specific child. Simply removing the name from the echo attribute word string will delete it from the HTML DOM.

Javascript
document.getElementById("test").setAttribute("echo", "bar foobar foo");

DOM HTML

<div id="test" echo="bar foobar foo" code="<span></span>">
    <span id="bar" style="color:red">red</span>
    <span id="foobar"></span>
    <span id="foo" style="color:yellow">yellow</span>
</div>

A word of warning, altering the code attribute wipes everything clean, then reapplies echo from a fresh start.

Javascript
document.getElementById("test").setAttribute("code", "<p></p>");

DOM HTML

<div id="test" echo="bar foobar foo" code="<p></p>">
    <p id="bar"></p>
    <p id="foobar"></p>
    <p id="foo"></p>
</div>

If the programmer simply needs a set number of children without any ID's, they may use a number instead of a word string.

Written HTML
<div id="test" echo="5" code="<p></p>"></div>

DOM HTML

<div id="test" echo="5" code="<p></p>">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

Now to number these children.

Javascript
document.getElementById('test').children[0].innerText = '1'; document.getElementById('test').children[1].innerText = '2'; document.getElementById('test').children[2].innerText = '3'; document.getElementById('test').children[3].innerText = '4'; document.getElementById('test').children[4].innerText = '5';

DOM HTML

<div id="test" echo="5" code="<p></p>">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

Changing the number to a higher number will result in new children being added, without losing any uniqueness of the older children.

Javascript
document.getElementById("test").setAttribute("echo", "8");

DOM HTML

<div id="test" echo="8" code="<p></p>">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p></p>
    <p></p>
    <p></p>
</div>

In the inverse reducing the number to a smaller number will simply delete the excess children. It will retain the children's uniqueness below the number.

Javascript
document.getElementById("test").setAttribute("echo", "3");

DOM HTML

<div id="test" echo="3" code="<p></p>">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

These are the simpler capabilities of this tool.

Echo attribute can be assigned an array and it will process it directly.
Echo attribute can be assigned a variable and it will find it within the global scape and retrieve the data.
If assigned a variable an auto attribute can be set to watch the variable and Echo-js will periodically check the variable for changes. When it detects a change it will auto update the echo attribute to match the altered variable.

Code attribute can, besides a string of HTML code,, accept directions to an HTML Template to retrieve code or a variable like echo.

There are many options for a programmer to set the tool to work in a way most efficient to them.

The README details every aspect of the tool. It gives examples of every potential option.

My personal, most audacious use of this tool has been with a simple single HTML line.

<div id="twodarray" echo="1000" code="<div echo='1000' code='<div onclick=()></div>'></div>" auto="false"></div>

Echo.js was able to successfully create a 2D array of 1000 children each holding 1000 children for 1001001 total elements of parent, children, and grandchildren.

Any suggestions or feedback would be much appreciated.

Please report any bugs or unusual behavior one may experience so a patch may be applied as soon as possible for all who may use this tool.

DEV Community: Tygari

Echo-js