Icons in JavaScript

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Ted
Reply | Threaded
Open this post in threaded view
|

Icons in JavaScript

Ted
The icons for the Admonitions are not showing up.

I am creating a web page to convert AsciiDoc to HTML using asciidoctor.js and opal.js by trying to follow the documentation.

In JavaScript I am using:
var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value);

And the HTML output is fine except for the Admonitions, which is rendering them as text.

e.g.
TIP | This is a tip

So I finally found docs that say if you place ":icons: font" in the text of the AsciiDoc, that using the command prompt  >asciidoctor DocName.adoc it will render the correct HTML and use the asciidoctor.css and display the icons. Which worked.

So I've tried adding ":icons: font" to my text stream in JavaScript but it will not pick it up.

Is there some other way I can send that option to opal.js and asciidoctor.js? Or what am I doing wrong?

- Ted @TedAtCIS
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

Ted
I also notice that Admonitions in AsciiDoc at GitHub is rendered as text too. And wondered if it is related to what I'm trying to do.
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

LightGuardjp
Where are you adding the attribute? Attributes should go under the level 0 heading. Also, which version of asciidoctorjs?

Sent from Mailbox


On Wed, May 14, 2014 at 1:22 PM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I also notice that Admonitions in AsciiDoc at GitHub is rendered as text too. And wondered if it is related to what I'm trying to do.


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Icons-in-JavaScript-tp1737p1738.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Ted
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

Ted
I didn't know attributes go under the level 0 heading. So I've now tested this text

= Test

:icons: font

TIP: this is a tip

It does not display the icon. So I just grabbed the latest asciidoctor.js and opal.js and tested again, but it still does not work. I'll examine my text string to see if anything is getting messed up there.

You say it's an attribute... So the docs say
Passing the options Hash to the render method requires a little bit of Opal voodoo:
Opal.hash2(['attributes'], {'attributes': ['notitle!']})

I wonder if that is how you pass it along? I've tried a couple things, but it didn't work.

I would really like it to render icons by default.
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

LightGuardjp
Drop the blank line between the header and attributes, but if you don't want to edit the documents, try the opal voodoo. 

Sent from Mailbox


On Wed, May 14, 2014 at 2:41 PM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I didn't know attributes go under the level 0 heading. So I've now tested this text

= Test

:icons: font

TIP: this is a tip

It does not display the icon. So I just grabbed the latest asciidoctor.js and opal.js and tested again, but it still does not work. I'll examine my text string to see if anything is getting messed up there.

You say it's an attribute... So the docs say
Passing the options Hash to the render method requires a little bit of Opal voodoo:
Opal.hash2(['attributes'], {'attributes': ['notitle!']})

I wonder if that is how you pass it along? I've tried a couple things, but it didn't work.

I would really like it to render icons by default.


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Icons-in-JavaScript-tp1737p1740.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Ted
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

Ted
I just tried that, but it didn't work.

I'll be experimentin' with dee Opal voodoo.

I appreciate your ideas. I feel like I have some new ideas to test. Thank you.
- Ted @TedAtCIS
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

Ted
I've tried a bunch of variations in JavaScript. I have no idea how to make this work.

Opal.hash2('attributes', { 'icons: font' });
var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value);

Can someone show me the code of how to pass :icons: font to opal.js and asciidoctor.js ?
- Ted @TedAtCIS
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

Ted
Well after looking at  AsciidocFX

And Thaddee has created an online sandbox

I am guessing that icons are not supported in asciidoctor.js? Can anyone confirm that?


=== Admonition Blocks

TIP: this is a *tip* admonition paragraph.

Renders as
AdmonitionBlockText.png

I would like to know if there is any way to toggle the font icons and have it render like this
AdmonitionBlockIcon.png
 
- Ted @TedAtCIS
Ted
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

Ted
It does work. I finally got icons to display in a browser by passing attributes to over-ride the default.

This is the default text output for Admonitions using Asciidoctor.js
<td class="icon">
<div class="title">Warning</div>
</td>

To render *Font-Awesome icons* you'll need

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="themes/asciidoctor.css">
<script src="js/opal.js"></script>
<script src="js/asciidoctor.js"></script>	


JavaScript

var asciidoctorAttributes = Opal.hash2(['attributes'], { 'attributes': ['icons=font@'] }); 
var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value, asciidoctorAttributes);

// by adding the @ symbol, attributes added in the AsciiDoc text takes precedence over this hard-coded attribute

This will render the admonitons like this:

<td class="icon">
<i class="icon-warning" title="Warning"></i>
</td>

To render *icons as images* you need to add ":icons: font" to the AsciiDoc text at the top of the document
= Zero Header
:icons: font

This will over-ride the output above, because I've used 'icons=font@' in JavaScript and will render admonitions like this:

<td class="icon">
<img src="./images/icons/warning.png" alt="Warning">
</td>

Of course you'll need to have images in a directory to see them in the browser. I copied the images and icons directories from AsciiDoc.
- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: Icons in JavaScript

mojavelinux
Administrator
Ted,

You are explaining this correctly in part, but as you have discovered there are many layers to making this work correctly. I'll try to fill in some of the gaps.

First off, it's important to understand that the icon-based fonts relies on the presence of the Font Awesome stylesheet (and, transitively the web font) in the output HTML. That HTML must then be loaded in into the browser in its entirety (i.e., loaded as a complete HTML document).

There are two ways to make this happen.

1. Enable the header_footer option when invoking the Asciidoctor.js API. By default, the header_footer option is disabled, thus Asciidoctor only produces the *body* of the HTML output. The Font Awesome stylesheet is part of the HTML head, which is why it only shows up when the header_footer option is enabled.

2. Add the Font Awesome stylesheet to the head of the HTML document explicitly. This is the approach used in the Asciidoctor.js Live Preview extensions for Chrome & Firefox...and also in the AsciiDoc plugins for the Atom and Brackets editors. (See https://github.com/asciidoctor/asciidoctor-chrome-extension/blob/master/js/renderer.js#L20)

In order to get the font-based icon markup in the admonition block output, you need to set the "icons" attribute to "font". You can do this by simply setting the "icons" attribute in the header of the AsciiDoc document:

= Title
:icons: font

You can also pass this value into the Asciidoctor API, as you have discovered:

var options = Opal.hash2(['header_footer', 'attributes'], { 'header_footer': true, 'attributes': ['icons=font'] });
var doc = Opal.Asciidoctor.$convert(document.getElementById("txtAscii").value, options);

The @ at the end of the attribute value is just a nice way of allowing the AsciiDoc document to override settings passed to the API, such as the icon-rendering strategy.

The biggest complexity with font-based icons is how you load the resulting HTML. If you don't do it right, then the browser won't load all the resources (such as the Font Awesome stylesheet) and then you won't get the result you expect. This is especially true if there is JavaScript in the generated HTML.

I think that we'll need to emphasize these points more in the documentation so that users can make better sense of what's going on when troubleshooting a feature that relies on external resources such as icon-based fonts.

-Dan


On Mon, Jun 9, 2014 at 5:10 PM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:
It does work. I finally got icons to display in a browser by passing attributes to over-ride the default.

This is the default text output for Admonitions using Asciidoctor.js
<td class="icon">
<div class="title">Warning</div>
</td>

To render *Font-Awesome icons* you'll need

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="themes/asciidoctor.css">
<script src="js/opal.js"></script>
<script src="js/asciidoctor.js"></script>	


JavaScript

var asciidoctorAttributes = Opal.hash2(['attributes'], { 'attributes': ['icons=font@'] }); 
var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value, asciidoctorAttributes);

// by adding the @ symbol, attributes added in the AsciiDoc text takes precedence over this hard-coded attribute

This will render the admonitons like this:

<td class="icon">
<i class="icon-warning" title="Warning"></i>
</td>

To render *icons as images* you need to add ":icons: font" to the AsciiDoc text at the top of the document
= Zero Header
:icons: font

This will over-ride the output above, because I've used 'icons=font@' in JavaScript and will render admonitions like this:

<td class="icon">
<img src="./images/icons/warning.png" alt="Warning">
</td>

Of course you'll need to have images in a directory to see them in the browser. I copied the images and icons directories from AsciiDoc.



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Icons-in-JavaScript-tp1737p1802.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--