Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-25016

Support nested expand macro

XMLWordPrintable

    • Icon: Suggestion Suggestion
    • Resolution: Duplicate
    • None
    • None
    • We collect Confluence feedback from various sources, and we evaluate what we've collected when planning our product roadmap. To understand how this piece of feedback will be reviewed, see our Implementation of New Features Policy.

      NOTE: This suggestion is for Confluence Server. Using Confluence Cloud? See the corresponding suggestion.

      Currently the bundled expand macro doesn't work well when it's being used nested as something like this:

      A sample of this page has been created here at http://sandbox.onconfluence.com/display/FWDOCS/Test+Nested+Expand+macro

      Quoting one of a user's explanation on how it doesn't work properly:

      # Test Steps Result
      1 Click on '1st... Click here to expand' 2nd and 3rd expandable areas are expanded which feels to be incorrect behavior. Arrows are directed incorrectly two. First arrow points down which means expanded area, however second and third arrows point to the right but the areas are still expanded.
      2 Click on '3rd.. Click here to expand...' Expanded area collapses and the arrow changes direction too, so the direction is wrong again
      3 Click on '1st.. Click here to expand...' 3rd expandable area expands instead of collapsing the whole area

      I can continue the list.
      I think the problems above are enough to say that the functionality of having expandable area in expanded section is not working properly.

      Workaround

      Create expand1, expand2, expand3, etc as a separate macro as described here. Use the user macro instead of the bundled expand macro. It's copying the suggestion at this blog post.

            [CONFSERVER-25016] Support nested expand macro

            HuseinA added a comment -

            To make it look exactly the same as the bundled expand macro, you can use this:

            • Macro Body Processing: Rendered
            • Template: 
              ## @param title:title=Expand Title|type=string|required=false|desc=Title for the text to expand|default=Click here to expand...
##
## Check for a blank first parameter
##
#if ($paramtitle && $paramtitle.length() > 0)
   #set ($expandtitle = $paramtitle)
#elseif ($param0 && $param0.length() > 0)
   #set ($expandtitle = $param0)
#else
   #set ($expandtitle = "Click here to expand...")
#end
#set ($toggleId = $action.random)
#set ($imagePath = "${bootstrap.webAppContextPath}/images/icons")
#set ($imageRight = "$imagePath/grey_arrow_right.gif")
#set ($imageDown = "$imagePath/grey_arrow_down.gif")

<style type="text/css">
@media all {
    .expand-content { margin-left: 20px; }
    .expand-control-text { vertical-align: top; text-decoration:none; }
    .expand-control-image { vertical-align: middle; text-decoration:none; }
}
@media screen {
    .expand-hidden { display: none; }
    .expand-control { cursor: pointer; text-decoration: none; }
}
@media print {
    /* show expander text in print */
    .expand-content { display: block !important; }
}
</style>

## In standard display mode we provide JS for opening and closing the div and initially display
## it closed.
#if ($renderContext.outputType == "display")
    ##
    ## Toggle body div and icon when expander clicked or the user hits enter.
    ##
    <script type="text/javascript">
    //<![CDATA[
        // preload open image (variable not used elsewhere)
        new Image().src = "$imageDown";
        function expandmacroExpand(eventee,clickee) {
            var expander = jQuery(clickee),
                expanderImage = jQuery(".expand-control-image", expander),
                expanderContent = expander.next(),
                e = eventee;
            if (e.type == "mouseup" || (e.type == "keyup" && e.keyCode == 13)) {
                if (!expander.hasClass("on")) {
                    // open
                    expanderImage.attr("src", "$imageDown").attr("alt", "Open");
                    expanderContent.fadeIn("fast").removeClass("expand-hidden");
                    expander.addClass("on");
                } else {
                    // close
                    expander.removeClass("on");
                    expanderContent.fadeOut("fast").addClass("expand-hidden");
                    expanderImage.attr("src", "$imageRight").attr("alt", "Closed");
                }
            }
        }
    //]]>
    </script>
    ##
    ## Display: Expanded content is hidden and twixie is pointing right
    ##
    <div id="expander-$toggleId" class="expand-control" onmouseup="expandmacroExpand(event,this)" onkeyup="expandmacroExpand(event,this)" tabindex="0"><img class="expand-control-image" src="$imageRight"><span class="expand-control-text">$generalUtil.htmlEncode($expandtitle)</span></div>
    <div class="expand-content expand-hidden">$!body</div>
#else ## For exports etc we want the style to be the same but there's no JS so the content must always be visible
    ##
    ## Display: Expanded content is shown and twixie is pointing down.  There are no events defined.
    ##
    <div id="expander-$toggleId" class="expand-control" tabindex="0"><img class="expand-control-image" src="$imageDown"><span class="expand-control-text">$generalUtil.htmlEncode($expandtitle)</span></div>
    <div class="expand-content">$!body</div>
#end

            HuseinA added a comment - To make it look exactly the same as the bundled expand macro, you can use this: Macro Body Processing: Rendered Template: ## @param title:title=Expand Title|type=string|required= false |desc=Title for the text to expand| default =Click here to expand... ## ## Check for a blank first parameter ## # if ($paramtitle && $paramtitle.length() > 0) #set ($expandtitle = $paramtitle) #elseif ($param0 && $param0.length() > 0) #set ($expandtitle = $param0) # else #set ($expandtitle = "Click here to expand..." ) #end #set ($toggleId = $action.random) #set ($imagePath = "${bootstrap.webAppContextPath}/images/icons" ) #set ($imageRight = "$imagePath/grey_arrow_right.gif" ) #set ($imageDown = "$imagePath/grey_arrow_down.gif" ) <style type= "text/css" > @media all { .expand-content { margin-left: 20px; } .expand-control-text { vertical-align: top; text-decoration:none; } .expand-control-image { vertical-align: middle; text-decoration:none; } } @media screen { .expand-hidden { display: none; } .expand-control { cursor: pointer; text-decoration: none; } } @media print { /* show expander text in print */ .expand-content { display: block !important; } } </style> ## In standard display mode we provide JS for opening and closing the div and initially display ## it closed. # if ($renderContext.outputType == "display" ) ## ## Toggle body div and icon when expander clicked or the user hits enter. ## <script type= "text/javascript" > //<![CDATA[ // preload open image (variable not used elsewhere) new Image().src = "$imageDown" ; function expandmacroExpand(eventee,clickee) { var expander = jQuery(clickee), expanderImage = jQuery( ".expand-control-image" , expander), expanderContent = expander.next(), e = eventee; if (e.type == "mouseup" || (e.type == "keyup" && e.keyCode == 13)) { if (!expander.hasClass( "on" )) { // open expanderImage.attr( "src" , "$imageDown" ).attr( "alt" , "Open" ); expanderContent.fadeIn( "fast" ).removeClass( "expand-hidden" ); expander.addClass( "on" ); } else { // close expander.removeClass( "on" ); expanderContent.fadeOut( "fast" ).addClass( "expand-hidden" ); expanderImage.attr( "src" , "$imageRight" ).attr( "alt" , "Closed" ); } } } //]]> </script> ## ## Display: Expanded content is hidden and twixie is pointing right ## <div id= "expander-$toggleId" class= "expand-control" onmouseup= "expandmacroExpand(event, this )" onkeyup= "expandmacroExpand(event, this )" tabindex= "0" ><img class= "expand-control-image" src= "$imageRight" ><span class= "expand-control-text" >$generalUtil.htmlEncode($expandtitle)</span></div> <div class= "expand-content expand-hidden" >$!body</div> # else ## For exports etc we want the style to be the same but there's no JS so the content must always be visible ## ## Display: Expanded content is shown and twixie is pointing down. There are no events defined. ## <div id= "expander-$toggleId" class= "expand-control" tabindex= "0" ><img class= "expand-control-image" src= "$imageDown" ><span class= "expand-control-text" >$generalUtil.htmlEncode($expandtitle)</span></div> <div class= "expand-content" >$!body</div> #end

              smansour Sherif Mansour
              halatas HuseinA
              Votes:
              3 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved: