id.ftd

-- import: ftd.dev/assets
-- import: fpm

-- ft.page-with-toc: ID in `ftd`
toc: $config.api-toc
sub-sections: $config.doc-header


-- ft.h1: What is `id`?

`id` is the attribute to an element to apply styling or interactivity to that 
specific element.


-- ft.h1: Understanding `id` in `ftd`

We can define `id` to any element using the `id` property. Consider the following
code.


-- ft.code: Giving id to the element
lang: ftd

\-- ftd.text: Hello
id: hello-id

\-- ftd.row:
id: row-id

\-- ftd.text: Hello again


-- ft.markdown:

In the above code, we have given `id` to `ftd.text` and `ftd.row` elements.
We can also define `id` inside a component. Consider the following code:


-- ft.code: Defining id inside component
lang: ftd

\--  component foo:
component: ftd.column

\--- ftd.text: hello
id: hello


-- ft.markdown:

As we can see above, the element `--- ftd.text: hello` has given `id` as `hello`.

In short, we can define `id` to an element using `id: some-id`.


-- ft.h1: `id`s present in DOM node

So far so good! But what are the `id`s present in DOM node? Can we use this `id` 
directly? Let's go through these questions one by one.


-- ft.h2: Can we use this `id` directly?

The answer is NO! These `id` modifies a bit. (But why??). Let's understand this.

Consider the following code:


-- ft.code:
lang: ftd

\--  component foo:
component: ftd.column

\--- ftd.text: Hello
id: hello

\-- foo:

\-- foo:


-- ft.markdown:

In the above code, there are two instances of `foo`. So there are two similar
DOM nodes where the corresponding DOM node of `--- ftd.text: hello` gets `id` as `hello`.
In short, there are two DOM nodes or `div`s with id as `hello`. (Ouch 😣!!). More
problematic aspect is if we want to apply styling or interactivity to only one of
these.


-- ft.image:
src: $assets.files.images.ask-id-to-ftd.png


-- ft.h2: What are the `id`s present in DOM node?

Here's what `ftd` does. In first instance of `foo`, we haven't defined any id for it.
So, the corresponding DOM node of it won't get any `id`, and even the `--- ftd.text: hello`
doesn't get any `id`. 

But the second instance of `foo` have `id` as `foo-id`. So it's corresponding DOM node
gets `id` as `foo-id` and `ftd.text` gets `id` as `foo-id:hello`. 

Lets see how HTML code looks like for both cases. (By the way, these are pseudo 
codes)


-- ft.code: Case 1: The first instance of foo
lang: html

<div style="flex-direction: column; .."> 
    <div>Hello</div>
</div>


-- ft.code: Case 2: The second instance of foo
lang: html

<div id="foo-id" style="flex-direction: column; .."> 
    <div id="foo-id:hello">Hello</div>
</div>


-- ft.markdown:

Here's the conclusion, If you want to give `id` to DOM node of element, then 
provide `id` during invocation of component (as we have done for second case, where 
component `foo` gets `id` as `foo-id` during it's invocation.). The `id` for 
inner element becomes `<parent-id>:<inner-element-id>`. (Similar to `foo-id:hello`
which becomes `id` for DOM node of `ftd.text`element. 😊 )


-- ft.image:
src: $assets.files.images.ftd-give-me-id-yes-got-it.png


-- ft.h2: More Complex example

Let's see more complex id. Consider the code below:


-- ft.code:
lang: ftd

\-- page:
id: page-id

\-- component page:
component: ftd.column

\--- inside-page:
id: inside-page-id


\-- component inside-page:
component: ftd.column

\--- display-text:
id: display-text-id


\-- component display-text:
component: ftd.column

\--- ftd.text: Hello
id: hello-id


-- ft.markdown:

Can you guess what is the `id` which DOM node of `--- ftd.text: hello` gets?
It is `page-id:inside-page-id:display-text-id:hello-id`. I think you know how, but
for explanation sake, here is the reason. (If you've already got it, you can skip 
the next paragraph. 😉)

So, the first innovation is `-- page:` with `id` as `page-id`. It has inner element
`--- inside-page:`, which is another innovation, with `id` as `inside-page-id`. 
So, it's `id` becomes `page-id:inside-page-id`. Now, this has another inner element
`--- display-text:` with `id` as `display-text-id`.So, it's `id` becomes 
`page-id:inside-page-id:display-text-id`. `display-text` has another inner element
`--- ftd.text: Hello` which has `id` as `hello-id`. So the `id` for DOM node of 
this element becomes `page-id:inside-page-id:display-text-id:hello-id`.

Let's check the pseudo HTML code for the above `ftd` code.


-- ft.code:
lang: html

<div id="page-id" style="flex-direction: column; ..">
  <div id="page-id:inside-page-id" style="flex-direction: column; ..">
    <div id="page-id:inside-page-id:display-text-id" style="flex-direction: column; ..">
      <div id="page-id:inside-page-id:display-text-id:hello-id">
        Hello
      </div>
    </div>
  </div>
</div>


-- ft.markdown:

Note: You have to provide `id` to all sequential invocations, in order to have 
id available for element which you want to refer to.


-- ft.image:
src: $assets.files.images.ftd-give-me-an-element-with-id.png