Bug 838277 - FEATURE: Javascript select to hide/display aspects of a book
FEATURE: Javascript select to hide/display aspects of a book
Product: Topic Tool
Classification: Other
Component: FUDCon Docs Hack (Show other bugs)
Unspecified Unspecified
unspecified Severity unspecified
: ---
: ---
Assigned To: Joshua Wulf
Joshua Wulf
Depends On: 839461 839634 842483
  Show dependency treegraph
Reported: 2012-07-08 03:53 EDT by Joshua Wulf
Modified: 2014-10-19 19:01 EDT (History)
3 users (show)

See Also:
Fixed In Version:
Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of:
Last Closed: 2014-07-07 10:51:21 EDT
Type: Bug
Regression: ---
Mount Type: ---
Documentation: ---
Verified Versions:
Category: ---
oVirt Team: ---
RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: ---

Attachments (Terms of Use)

  None (edit)
Description Joshua Wulf 2012-07-08 03:53:07 EDT
This Google Dart documentation page allows you to select your operating system and it will display the appropriate topic.

Common topics remain, os-specific topics are hidden/displayed.

So for Programming with Apache Qpid, it would give the reader the ability to switch between C++, Python, and Java examples.
Comment 2 Joshua Wulf 2012-07-10 19:17:53 EDT
It uses a library called "dartswitcher".

This css code can be used to turn display of blocks on and off: http://www.javascriptkit.com/javatutors/dom3.shtml

I experimented with using a role attribute on a section, and it works. The issue is that the TOC remains, and the section numbering is then out of whack.

Next line of attack:

1. Use Modernizr to detect the capabilities of the browser and degrade gracefully

2. Try this approach to render the TOC and numbering in the browser, so that it will update when sections are displayed / hidden:

Comment 3 Joshua Wulf 2012-07-10 22:56:57 EDT
Something to consider: what does it mean when one of the visible sections refers to an invisible section?
Comment 4 Joshua Wulf 2012-07-21 21:25:42 EDT
Pusher.com have an approach that I just might be able to pull off in time for MRG 2.2.

We wrap our code samples like this in Docbook:

<variablelist role="code-div">
  <varlistentry role="code">
    <listitem><programlisting language="C++">Sender sender = session.Sender("something")</programlisting></listitem>
  <varlistentry role="code">
    <listitem><programlisting language="Python">sender = session.sender("something")</programlisting></listitem>

In standard HTML this renders as very readable output.

With javascript, however, we can offer another level of experience if the reader's browser supports it.

The HTML output of the above looks like this:

<div class="variablelist code-div">
    <dt class="varlistentry code">
      <span class="term">C++</span>
      <pre class="programlisting C++">Sender sender=session.Sender(<span class="perl_String">"something"</span>)</pre>
    <dt class="varlistentry code">
      <span class="term">Python</span>
      <pre class="programlisting Python">sender <span class="perl_Char">=</span> ssn.sender<span class="perl_Char">(</span><span class="perl_String">"something"</span><span class="perl_Char">)</span></pre>

So what we want to do with this is:

1. Find the .code-div class element
2. Create a <ul> element as the first child. This will be the tabs.
3. Create a <div> element directly below the <ul> element. This will be the container for the programlistings.
4. Next we select each <dt> element and the <dd> element directly after it
5. We make the inner HTML of the <dt> element a <li> in our <ul> from step 2.
6. We delete the <dt> node.
7. We give the <dd> element a unique ID, and inject it into the onclick() event in step 8.
8. We give our <li> element in step 5 an onclick() event. This event will hide all children of its .code-div, and show the injected <li>
Comment 5 Joshua Wulf 2012-07-22 00:47:28 EDT
So all you need to do is this:

<variablelist role="code-div">

current supported CODE-LANGS are: C++, Python, Ruby, C#/.NET, Node.js, Java, HTML, JavaScript.

You can add a "language" attribute to each <programlisting> element with no problems.

When your variablelist is rendered using the brand it will appear as nice list of programming examples. If javascript is enabled and the reader is looking at the html or html-single, however, it will turn into a tabbed dialog, and they can select which language they want to look at.
Comment 6 Joshua Wulf 2012-07-22 02:33:05 EDT
Code tabs are now alphasorted automatically in the html output, and the variablelist role to use is the more semantic 'codetabs'.

Comment 7 Joshua Wulf 2012-07-22 04:41:48 EDT
Atm the author has to set the language twice - once in the variablelist term to get the code tabs functionality, once in the programlisting language attribute to get syntax highlighting.

It makes sense to trigger the whole thing of the <programlisting> language attribute. In this case the variablelist <term> will be dropped, and the language extracted from the class of the <dd>.

To make "the other class of the dd who has a class of programlisting" reliable, the xsl should be modified to write "language-XXX" as the class. Investigate!

Note You need to log in before you can comment on or make changes to this bug.