#Macros for HTML tabs
#Usage:
#\tab {name}{tab-id}{title}{checked}
#\tabcontent {tab-id}
# content
#\endtabcontent

# Ensure that the {name} is unique for the group.
# i.e A group of tabs can have the same name, whereas
# {tab-id} should be unique. In addition, the argument
# for \tabcontent macro should match the {tab-id} for the
# corresponding \tab.

# The {checked} argument ensures that the tab is selected
# by default when the HTML page is loaded. For the other
# tabs that are not selected, pass and empty argument {}.
#
# Note that these macros work with the online template only.
#
# Example:
# \if defined(onlinedocs)
#   \tab {build-qt-app}{tab-cmake}{CMake}{checked}
#   \tab {build-qt-app}{tab-qmake}{qmake}{}
#   \tabcontent {tab-cmake}
# \else
#   \section1 Using CMake
# \endif
#   CMake-specific instructions go here
# \if defined(onlinedocs)
#   \endtabcontent
#   \tabcontent {tab-qmake}
# \else
#   \section1 Using qmake
# \endif
#   qmake-specific instructions go here
# \if defined(onlinedocs)
#   \endtabcontent
# \endif

macro.tab.HTML = "<input type=\"radio\" name=\"tabs_\1\" id=\"\2\" \4/><label for=\"\2\">\3</label><style>#\2:checked ~ .\2{display: block;}</style>"
macro.tabcontent = "\\div {class=\"tabcontent \1\"}"
macro.endtabcontent = "\\enddiv"

HTML.extraimages += template/style/htmltabs.css

HTML.headerstyles += \
    "  <link rel=\"stylesheet\" type=\"text/css\" href=\"images/htmltabs.css\" />\n"

HTML.headerscripts += \
    "  <script type=\"text/javascript\">\n" \
    " \$(document).ready(function(){\n" \
    "   \$(\"input[type=radio]\").on(\"click\", function() {\n" \
    "   var lbl = \$(this).next().text();\n" \
    "   \$(\"input[type=radio]:not(checked)\").filter(function() {\n" \
    "     if (\$(this).next().text() == lbl)\n" \
    "         \$(this).prop(\"checked\", true);\n" \
    "   });\n" \
    "   });\n" \
    " });\n" \
    "  </script>\n"