This service will be undergoing maintenance at 00:00 UTC, 2017-10-23 It is expected to last about 30 minutes
Bug 838277 - FEATURE: Javascript select to hide/display aspects of a book
FEATURE: Javascript select to hide/display aspects of a book
Status: CLOSED WONTFIX
Product: Topic Tool
Classification: Other
Component: FUDCon Docs Hack (Show other bugs)
unspecified
Unspecified Unspecified
unspecified Severity unspecified
: ---
: ---
Assigned To: Joshua Wulf
Joshua Wulf
:
Depends On: 839461 839634 842483
Blocks:
  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:
Environment:
Last Closed: 2014-07-07 10:51:21 EDT
Type: Bug
Regression: ---
Mount Type: ---
Documentation: ---
CRM:
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
http://modernizr.com/docs/

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

http://www.alistapart.com/articles/building-books-with-css3/
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">
    <term>C++</term>
    <listitem><programlisting language="C++">Sender sender = session.Sender("something")</programlisting></listitem>
  </varlistentry>
  <varlistentry role="code">
    <term>Python</term>
    <listitem><programlisting language="Python">sender = session.sender("something")</programlisting></listitem>
  </varlistentry>
</variablelist>

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">
  <dl>
    <dt class="varlistentry code">
      <span class="term">C++</span>
    </dt>
    <dd>
      <pre class="programlisting C++">Sender sender=session.Sender(<span class="perl_String">"something"</span>)</pre>
    </dd>
    <dt class="varlistentry code">
      <span class="term">Python</span>
    </dt>
    <dd>
      <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>
    </dd>
  </dl>
</div>


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">
  <varlistentry>
    <term>CODE-LANG</term>
    <listitem><programlisting>...</programlisting></listitem>
  </varlistentry>
  <varlistentry>
    <term>CODE-LANG</term>
    <listitem><programlisting>...</programlisting></listitem>
  </varlistentry>
</variablelist>

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'.

https://github.com/jwulf/fudcon-docs-hack/commit/eeb3394c3b4bf40907d052cf058348febc75b9f6
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.