Asciidoctor :: Discussion

Adding Role AND Id to Elements

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

7 messages Options

devunwired

Adding Role AND Id to Elements

I have a simple question to which the answer is likely obvious, but I'm looking past it. I would like to set both a role (i.e. class) and an id on elements in my HTML output. I can do this with just roles like so:

[toggle]#Click Here to Toggle Solution#

.`src/main/java/…/MyClass.java`
[source,java,role="solution"]
----
/* Some Java Code */
----

However, I also want to uniquely identify each of these pairs. I tried the following:

[#first.toggle]#Click Here to Toggle Solution#

.`src/main/java/…/MyClass.java`
[source,java,role="solution",id="first"]
----
/* Some Java Code */
----

…this does what I want to the listing block, but not to the inline text. It includes an anchor BEFORE the text span, rather than adding it to the same element. Is this possible with the inline text? I want to do this b/c I have some simple JQuery code in the output document that should only affect the associated "solution" when the "toggle" is clicked.

My second question is this: I tried using the shorthand notation on the block element and it didn't work at all (i.e. [source,java,#first.solution] instead). Shouldn't this be possible?

mojavelinux

Re: Adding Role AND Id to Elements

Administrator

I'll start with the easy question first:

On Fri, Feb 19, 2016 at 11:21 AM, devunwired [via Asciidoctor :: Discussion] <[hidden email]> wrote:

My second question is this: I tried using the shorthand notation on the block element and it didn't work at all (i.e. [source,java,#first.solution] instead). Shouldn't this be possible?

It needs to be written as:

[source#first.solution,java]

The shorthand always attaches to the block name (the first positional attribute). The block name is the "element" so to speak and the role and id are appended to it using shorthand.

If you don't have a block name (or you are using the implicit one), then you just use the shorthand in that position:

[#first.solution, ...]

-Dan

Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen

mojavelinux

Re: Adding Role AND Id to Elements

Administrator

In reply to this post by devunwired

> It includes an anchor BEFORE the text span, rather than adding it to the same element. Is this possible with the inline text?

That's just how we decided to make the HTML for the built-in html5 backend (for the reason of matching the output of AsciiDoc Python).

To work with the existing HTML in jQuery, you'd just need to query the element by id, then grab the following sibling. (e.g., $('#first-ref').next()).

NOTE: You can't define an id twice in the same document, hence why I proposed "first-ref" instead of "first" in my example.

If you want to change the HTML output, you'd need to customize the inline_quoted template, then pass the directory that contains that template using the -T flag.

https://github.com/asciidoctor/asciidoctor-backends/blob/master/slim/html5/inline_quoted.html.slim

As you can see, you can make the HTML anything you want it to be.

-Dan

On Fri, Feb 19, 2016 at 12:15 PM, Dan Allen <[hidden email]> wrote:

I'll start with the easy question first:

On Fri, Feb 19, 2016 at 11:21 AM, devunwired [via Asciidoctor :: Discussion] <[hidden email]> wrote:
My second question is this: I tried using the shorthand notation on the block element and it didn't work at all (i.e. [source,java,#first.solution] instead). Shouldn't this be possible?

It needs to be written as:

[source#first.solution,java]

The shorthand always attaches to the block name (the first positional attribute). The block name is the "element" so to speak and the role and id are appended to it using shorthand.

If you don't have a block name (or you are using the implicit one), then you just use the shorthand in that position:

[#first.solution, ...]

-Dan

--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen

Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen

mojavelinux

Re: Adding Role AND Id to Elements

Administrator

In reply to this post by devunwired

Btw, we could certainly consider changing this default behavior as part of https://github.com/asciidoctor/asciidoctor/issues/242

-Dan

On Fri, Feb 19, 2016 at 12:23 PM, Dan Allen <[hidden email]> wrote:

> It includes an anchor BEFORE the text span, rather than adding it to the same element. Is this possible with the inline text?

That's just how we decided to make the HTML for the built-in html5 backend (for the reason of matching the output of AsciiDoc Python).

To work with the existing HTML in jQuery, you'd just need to query the element by id, then grab the following sibling. (e.g., $('#first-ref').next()).

NOTE: You can't define an id twice in the same document, hence why I proposed "first-ref" instead of "first" in my example.

If you want to change the HTML output, you'd need to customize the inline_quoted template, then pass the directory that contains that template using the -T flag.

https://github.com/asciidoctor/asciidoctor-backends/blob/master/slim/html5/inline_quoted.html.slim

As you can see, you can make the HTML anything you want it to be.

-Dan

On Fri, Feb 19, 2016 at 12:15 PM, Dan Allen <[hidden email]> wrote:
I'll start with the easy question first:

On Fri, Feb 19, 2016 at 11:21 AM, devunwired [via Asciidoctor :: Discussion] <[hidden email]> wrote:
My second question is this: I tried using the shorthand notation on the block element and it didn't work at all (i.e. [source,java,#first.solution] instead). Shouldn't this be possible?

It needs to be written as:

[source#first.solution,java]

The shorthand always attaches to the block name (the first positional attribute). The block name is the "element" so to speak and the role and id are appended to it using shorthand.

If you don't have a block name (or you are using the implicit one), then you just use the shorthand in that position:

[#first.solution, ...]

-Dan

--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen

--
Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen

Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen

devunwired

Re: Adding Role AND Id to Elements

In reply to this post by mojavelinux

Awesome, thanks! This works great and will be much easier to enter and manage.

devunwired

Re: Adding Role AND Id to Elements

In reply to this post by mojavelinux

Thanks for the tip, I'll keep it in mind.

Since the "clickable text" is a line all it's own right now, I've just moved the role/attribute to be defined over the whole paragraph element. That seems to be working for the short-term. We may still tweak what this item looks like anyway.

mojavelinux

Re: Adding Role AND Id to Elements

Administrator

On Fri, Feb 19, 2016 at 12:37 PM, devunwired [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Since the "clickable text" is a line all it's own right now, I've just moved the role/attribute to be defined over the whole paragraph element. That seems to be working for the short-term.

Yep, that works too.

-Dan

Dan Allen | @mojavelinux | http://google.com/profiles/dan.j.allen