{"id":355,"date":"2013-01-24T01:38:26","date_gmt":"2013-01-24T01:38:26","guid":{"rendered":"http:\/\/tregner.com\/flare-blog\/?p=355"},"modified":"2013-01-28T18:38:34","modified_gmt":"2013-01-28T18:38:34","slug":"version-filters-in-html5-output","status":"publish","type":"post","link":"https:\/\/tregner.com\/flare-blog\/version-filters-in-html5-output\/","title":{"rendered":"Version Filters in HTML5 Output"},"content":{"rendered":"

Keep the condition tags but skip the target settings.<\/i><\/p>\n

Quick unpaid promotion! Attend MadWorld<\/a> for my session and many others. Meet and learn from top technical communicators.<\/p>\n

sample project<\/a><\/p>\n

\"filter-in-flare-html5-topic\"<\/a><\/p>\n

\"\"You can apply conditions to your Flare content and use those conditions to create a version filter in your Flare HTML5 output. The main ingredients are a select element and a little JavaScript. Here\u2019s how.<\/p>\n

We\u2019ll start with a fresh project based on the Empty template which comes with Flare.<\/p>\n

\"flare-with-empty-project\"<\/a><\/p>\n

To keep it simple, we\u2019ll use the Default condition tag set. But one of the nice things about having condition tag sets is there can be more than one. Since we aren\u2019t going to touch the settings for these tags in the target, this is a situation when a separate set would make sense.<\/p>\n

\"default-conditions\"<\/a><\/p>\n

We can change the conditions to represent versions of a product. Periods are not allowed in the Condition Tag field. If you use periods or full stops (.) in version numbers you will have to find a different character for the tag. But you can still use the period in the text of the drop-down we will create in the topic.<\/p>\n

\"new-conditions\"<\/a><\/p>\n

Now we can create some content to which to apply the tags.<\/p>\n

\"topic-no-conditions-or-filter\"<\/a><\/p>\n

And apply the tags.<\/p>\n

\"adding-condition-to-paragraph\"<\/a><\/p>\n

Here is the topic in the XML Editor with the conditions applied:<\/p>\n

\"topic-with-conditions\"<\/a><\/p>\n

Now let\u2019s look at those tags in the Text Editor.<\/p>\n

\"topic-with-conditions-in-text-editor\"<\/a><\/p>\n

Here is the first tagged paragraph. In the XML for the topic, the MadCap:conditions attribute holds the conditions. The condition is appended to the condition tag set name and a period symbol:<\/p>\n

<p MadCap:conditions=\"Default.1-0\">This is content for version 1-0.<\/p><\/pre>\n
When there is more than one, the conditions are separated by commas.<\/p>\n
<p MadCap:conditions=\"Default.1-0,Default.2-0\">This is content for version 1-0 and 2-0.<\/p><\/pre>\n
File that in your memory. Now let\u2019s add the UI for the filter. We can create a snippet to hold the filter for topic reuse. The snippet will use a select element, the element\u2019s children, and some attributes. Here is the snippet in the Text Editor.<\/p>\n
\"snippet-for-filter\"<\/a><\/p>\n
There is an id attribute on the select element so the JavaScript can find the filter. The select element fires a JavaScript every time the the selection is changed. Here is the snippet in the topic:<\/p>\n
\"snippet-in-topic\"<\/a><\/p>\n
We can\u2019t see the UI for the snippet from the Text Editor or the XML Editor. But we can see a preview when we add the snippet.<\/p>\n
\"insert-snippet-for-filter\"<\/a><\/p>\n
The JavaScript will look at the selected option and show or hide tagged elements based on the selection. Here is the JavaScript in Flare\u2019s Text Editor:<\/p>\n
\"show-hide-javascript\"<\/a><\/p>\n
There are two functions. The first, getElementsWithAttribute, is used by the other function, showHideVersion, to get all of the elements in the topic with the data-mc-conditions attribute. Remember MadCap:conditions in the topic XML? That becomes data-mc-conditions in the HTML5 output topics.<\/p>\n
The showHideVersion function looks for the select element and gets the selected option. Then it loops through all of the elements with data-mc-conditions and shows or hides the elements based on whether the elements include the selected condition.<\/p>\n
The last line of the script ensures the script runs when the page initially loads.<\/p>\n
We can reference the JavaScript in the master page. There is no default master page in the Empty template. We can base the new master page on the MasterPage.flmsp Factory Template. The script will go after the body element in the master page so we will add it through the Text Editor. Note the relative path to the file.<\/p>\n
\"script-reference-in-master-page\"<\/a><\/p>\n
Let\u2019s not forget to add the master page to the target.<\/p>\n
\"adding-master-page-to-target\"<\/a><\/p>\n
At this point we are ready to build. Here again is how the output looks. You can select a version and only content tagged with that version appears.<\/p>\n
\"filter-in-flare-html5-topic-drop-down-not-open\"<\/a><\/p>\n
 <\/p>\n
\"filter-in-flare-html5-topic\"<\/a><\/p>\n
Now you can filter on a single condition in a topic from the published output. In this example and sample, the content must be tagged to appear. But you don’t have to limit yourself to that behavior with your JavaScript. What kind of filter behavior would you expect to see in a version filter? Let me know in the comments.<\/p>\n
sample project<\/a><\/p>\n
Update: There is a follow-up p<\/a>ost<\/a> and sample<\/a>\u00a0which persists the original display value instead of toggling between none and block.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
Keep the condition tags but skip the target settings. Quick unpaid promotion! Attend MadWorld for my session and many others. Meet and learn from top technical communicators. sample project You can apply conditions to your Flare content and use those conditions to create a version filter in your Flare HTML5 output. The main ingredients are… Continue reading Version Filters in HTML5 Output<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[51,53,49,5,50,52],"_links":{"self":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/355"}],"collection":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":21,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/355\/revisions\/401"}],"wp:attachment":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/tags?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}