I have a complex environment which is mostly oriented around / ends up spitting out blocks of HTML, which make up the entire page.
Now, I need a way to "point and click" identify any block on my page from the front-end. At the user's command, they should be able to, when an element is clicked, pull an unique identifier for it and based on that, show more information.
A block could be as simple as:
<h1 class="beautiful-title">Test Title</h1>
And then, another one:
<p class="beautiful-paragraph">Test paragraph, has some nice CSS to it. </p>
And assume, for every block that I want to be identified, I add the
data-identifier attribute, as such, my first block is now:
<h1 class="beautiful-title" data-identifier="block-432">Test Title</h1>
And on click, the browser will pull up
block-432 for me, which I will then use to request a REST API with information for this block, for example
Which would return a JSON response with data (titles, information, videos, etc.) about the said block in the
success response of my call.
My biggest concerns:
- There will be times when I have about 20-30 blocks on a page. It
is crucial and necessary that when the user clicks a special button,
all of the "clickable with information" blocks are shown with a
green border, as in "you can click here to get more info". Thing is,
if I were to search the entire DOM for all of the
data-identifierattribute, it will 100% be slow.
- There will be no pre-loading, so, there won't be any data being pulled for every block there is on the page, this has to happen in a REST / AJAX call, but should I consider pre-loading them?
So, again, are data attributes the way to go here?