Dynamically hide content in body and TOC

<oXygen/> general issues.
tomjohnson1492
Posts: 132

Dynamically hide content in body and TOC

Mon Nov 03, 2014 9:49 am

This issue is kind of a continuation of the one here: http://www.oxygenxml.com/forum/topic10918.html.

Check out this sample page: http://idratherbewriting.com/ditaqrg/#jquery_content_selector.html.

If you select a programming language from the language selector, the content in the main body filters to show only the content tagged for that language.

What I can't figure out his how to apply the same filtering to items in the Table of Contents.

I'm guessing that because the OxygenXML webhelp is frames-based, there are really 3 separate frames here. As it relates to jQuery, what happens to the main content frame doesn't affect what happens in the TOC pane or the header pane.

In this demo, I've set up a jquery style selector that adds a class to the body element. This changes the styles and certain things get hidden. It looks like this:

Code: Select all


    function removeAddBodyClass(){
    $("body").removeClass();
    $("body").addClass($.cookie('body_colour'));
    $("#bck_toc").removeClass();
    $("#bck_toc").addClass($.cookie('body_colour'));
    }   
   
    removeAddBodyClass();
   
    $("#selector").change(function(){
    $.cookie('body_colour', $("#selector").val());
    removeAddBodyClass();
    });
   
    $("#selector > option").each(function() {
    if($(this).val() == $.cookie('body_colour')){
    $(this).attr("selected","selected");
    }
    });


I added it to webhelp_topic_js.

I also added some custom styles to my skin.css file:

Code: Select all

/* by default, java is shown because on initial page load, we don't want blank spaces with no code.*/
   
    /*hide other languages*/
    body [data-platform*="cpp"], #bck_toc li.cpp {
    display:none;
    }
   
    body [data-platform*="dotnet"], #bck_toc li.dotnet {
    display:none;
    }
   
    body [data-platform*="php"], #bck_toc li.php {
    display:none;
    }
   
    /*when java is selected...*/
   
    body.java [data-platform*="java"] {
    display:block;
    }
   
    body.java .ph[data-platform*="java"] {
    display:inline;
    }
   
    #bck_toc.java li.java {
        display:block;
    }
   
    /*when cpp is selected...*/
    body.cpp [data-platform*="cpp"] {
    display:block;
    }
   
    body.cpp .ph[data-platform*="cpp"] {
    display:inline;
    }
   
    #bck_toc.cpp li.cpp{
        display:block;
    }
   
    body.cpp [data-platform*="java"] {
    display:none;
    }
   
    /*when dotnet is selected...*/
   
    body.dotnet [data-platform*="dotnet"] {
    display:block;
    }
   
    body.dotnet .ph[data-platform*="dotnet"] {
    display:inline;
    }
   
    #bck_toc.dotnet li.dotnet {
        display:block;
    }
   
    body.dotnet [data-platform*="java"] {
    display:none;
    }
   
    /*when php is selected...*/
    body.php [data-platform*="php"] {
    display:block;
    }
   
    body.php .ph[data-platform*="php"] {
    display:inline;
    }
   
    #bck_toc.php li.php {
        display:block;
    }
   
    body.php [data-platform*="java"] {
    display:none;
    }
   


The same jquery style selector adds a class to #bck_toc just as it does to body. This should allow the same effects to happen as with the body element, but this never happens because the TOC is in a separate page (I believe).

Is there any way to add or remove classes via jQuery such that it works across frames? I really want to be able to hide certain entries in the TOC that have a specific class.
tomjohnson1492
Posts: 132

Re: Dynamically hide content in body and TOC

Mon Nov 03, 2014 10:48 am

This script looks similar to what I'm trying to do: https://github.com/jeremygriffith/Dynamic-Conditional-Display-in-HTML. Maybe I'd have better luck using it? Or would I run into the same problems? Can you give detailed instructions on how to implement either this or some other technique that would allow me to dynamically filter conditions (based on classes) when a user selects an option from a menu of some kind?
bogdan_cercelaru
Posts: 200

Re: Dynamically hide content in body and TOC

Mon Nov 03, 2014 4:07 pm

Hello,

All you have to do is to change your removeAddBodyClass() function implementation with the following

Code: Select all

function removeAddBodyClass(){
    /* For topics loaded in iFrame */
    $("body").removeClass();
    $("body").addClass($.cookie('body_colour'));
    /* For TOC */
    $("#bck_toc", parent.document).removeClass();
    $("#bck_toc", parent.document).addClass($.cookie('body_colour'));
}


Please let us know if you need further assistance.

Best regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
tomjohnson1492
Posts: 132

Re: Dynamically hide content in body and TOC

Mon Nov 03, 2014 5:13 pm

Awesome!!! Thank you so much. That simple adjustment makes the code work perfectly. I really appreciate it!

Tom
tomjohnson1492
Posts: 132

Re: Dynamically hide content in body and TOC

Mon Nov 03, 2014 5:29 pm

If I could trouble you for one more bit of info (and this is a nice-to-have more than an absolute need):

In the ditamap (that becomes the TOC in the webhelp output), if I add something like this:

Code: Select all

<topicref href="sample.dita" product="acme"/>


The product attribute doesn't get included in the webhelp output.

In regular dita topics, I made an adjustment to allow this by opening the dita2htmllmpl.xsl file found in the following directory: [Oxygen Install Directory]/frameworks/dita/DITA-OT/plugins/org.dita.xhtml/xsl/xslhtml.

I located the line that begins "<xsl:template name="commonattributes">" and replaced that section with the following:

Code: Select all

  <xsl:template name="commonattributes">
    <xsl:param name="default-output-class"/>
    <xsl:apply-templates select="@xml:lang"/>
    <xsl:apply-templates select="@dir"/>
    <xsl:apply-templates select="*[contains(@class, '
      ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/>
    <xsl:apply-templates select="." mode="set-output-class">
      <xsl:with-param name="default" select="$default-output-class"/>
    </xsl:apply-templates>
    <xsl:if test="@audience">
      <xsl:attribute name="data-audience"><xsl:value-of
        select="@audience"/></xsl:attribute>
    </xsl:if>
    <xsl:if test="@platform">
      <xsl:attribute name="data-platform"><xsl:value-of
        select="@platform"/></xsl:attribute>
    </xsl:if>
    <xsl:if test="@id">
      <xsl:attribute name="id"><xsl:value-of
        select="@id"/></xsl:attribute>
    </xsl:if>
  </xsl:template>


Then the product attribute passed through to the output (as data-platform).

How do I allow the same product attribute to pass through to the TOC output? The only attribute that seems to pass through is the class attribute. Using the class attribute works just fine -- but it's a little inconsistent, because I have to remember that the TOC won't use product but rather outputclass for the filtering attribute. Ideally I'd like to just use product.

It seems like the TOC is processed with a different XSL file, but I couldn't figure out what to edit in that file.

Thanks,

Tom
sorin_ristache
Posts: 4144

Re: Dynamically hide content in body and TOC

Thu Nov 06, 2014 5:39 pm

tomjohnson1492 wrote:Then the product attribute passed through to the output (as data-platform).


In the code that you posted it seems only the values of the audience, platform and id attributes are passed to output, not product.


tomjohnson1492 wrote:How do I allow the same product attribute to pass through to the TOC output? The only attribute that seems to pass through is the class attribute. Using the class attribute works just fine -- but it's a little inconsistent, because I have to remember that the TOC won't use product but rather outputclass for the filtering attribute.


I suggest using the outputclass attribute in both regular topics and in the map, which will be passed in the output as one additional token in the value of the class attribute. If you use the outputclass in the source XML files you will have to apply no modification in any XSLT file, you will have no inconsistency between regular topics and the TOC, and you will have the value of the outputclass attribute added to the value of the class attribute in the output. So you will be able to process the custom value of the outputclass in the same way in the output for both regular topics and the TOC, as the custom value will be added to the class attribute.
Regards,
Sorin

<oXygen/> XML Editor Support
tomjohnson1492
Posts: 132

Re: Dynamically hide content in body and TOC

Thu Nov 06, 2014 6:06 pm

Sorry, I meant to type platform there instead of product. I want to use platform instead of outputclass because I'm not sure if I'll always use this consolidated output method. Sure you can't just share how to do it?
sorin_ristache
Posts: 4144

Re: Dynamically hide content in body and TOC

Thu Nov 06, 2014 6:29 pm

At least 2 different XSL files will need to be modified if you want to pass the product attribute value to output.

The outputclass alternative is easier and more DITA like, this is why I suggested it. The product attribute is really for profiling/filtering DITA content, not for passing values to output. You just add an outputclass attribute in the XML source file (both regular DITA topics and DITA maps) and that value will be automatically added in the output to the class attribute value of that element.

If you really must pass the product attribute to the output then I will find out and post here for you all the places that you need to modify in the WebHelp transformation.
Regards,
Sorin

<oXygen/> XML Editor Support
shudson310
Posts: 89
Location: USA

Re: Dynamically hide content in body and TOC

Wed Mar 15, 2017 3:58 pm

I like this dynamic ability for displaying certain content. Rather than having the user select a particular parameter to drive this, I'd like to use an external config file to hide or display multiple topics. Think of it as product features. I only want to display help for particular features if the user has those features enabled. This is driven by an external XML config file.

I'd like to read the config file and then dynamically hide those features that are not listed. Is this possible with the approach described in this thread?
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com

Return to “Other Issues”

Who is online

Users browsing this forum: No registered users and 0 guests