Collapsed Sitemap HELP!

website-publishing
#21

Hi!

I have a certain enormous prototype, and because my colleagues have bookmarked links to individual pages of the prototype, I wanted a script that would collapse all folders in the sitemap no matter what page they start on, but will NOT collapse it again upon navigating to a different page, as that would be super-annoying after opening the folder of interest.

I hobbled together this Axshare plug-in after searching the forums and reading Meirion’s post above. Note: the plugin requires that you have defined the global variable “sitemapCollapsed” in your prototype.

Add the plugin to the footer of each page in Axshare:


<script>

$axure.internal(function($ax){
  $ax.public.getGlobalVariable = $ax.getGlobalVariable = function(name) {
     return $ax.globalVariableProvider.getVariableValue(name);
  };
});
    
if($axure.getGlobalVariable('sitemapCollapsed') != 'true') {
  void(window.parent.jQuery.fn.reverse = [].reverse); 
  void(window.parent.$('.sitemapMinus').reverse().each(function(){this.click()})); 
  $axure.setGlobalVariable('sitemapCollapsed','true');
};
  
</script>

Edit: here is an alternate script that doesn’t rely on a global variable. it collapses the tree only if every single folder is open (as it is on loading the first page). If even a single folder is closed, the tree won’t collapse.

It’s almost inconceivable that someone would manually open every single folder in my prototype, so it shouldn’t interfere with the user at all.


<script>

var collapseSitemap = true;
void(window.parent.$('.sitemapPlus').each(function(){collapseSitemap = false})); 

if(collapseSitemap) {
   void(window.parent.jQuery.fn.reverse = [].reverse); 
   void(window.parent.$('.sitemapMinus').reverse().each(function(){this.click()})); 
};
  
</script>
#22

@josephxbrick thanks for the work to turn it into a plugin - using it that way myself now :slight_smile:

#23

This needs to be a feature request, like bad. Folders should be used to clean up mockup trees, not make them messier.

#24

AMEN!!! :raised_hands:

#25

Thanks @josephxbrick for this great work!

It would be absolutely perfect if only the folders down to the currently displayed page were open (all others collapsed). This way the context would be clearer for those who navigate directly to a certain page (e.g. via bookmark).

#26

Hi!

I updated the plugin such that all folders that lead up to the linked-to page stay open, and all others close. Note that this requires that your prototype has a global variable called “sitemapCollapsed.”

After the prototype opens, you can expand folders however you want and nothing will collapse.
Note that this doesn’t work in Axure 9. I’ll take a look at that in a bit. For now it works only in 8,

<script>
$axure.internal(function($ax){
  $ax.public.getGlobalVariable = $ax.getGlobalVariable = function(name) {
     return $ax.globalVariableProvider.getVariableValue(name);
  };
});

window.parent.jQuery.fn.reverse = [].reverse;
window.onload = function ()  {
  if($axure.getGlobalVariable('sitemapCollapsed') != 'true') {
    window.parent.$('.sitemapMinus').each(function(){
      node = $(this).closest('.sitemapExpandableNode');
      if (node.find('.sitemapHighlight').length > 0 && $(this).parents('.sitemapHighlight').length == 0) {
          $(this).addClass('dontCollapse');
      }
    });
    window.parent.$('.sitemapMinus').not('.dontCollapse').reverse().each(function(){this.click()}); 
    window.parent.$('.sitemapMinus').each(function(){$(this).removeClass('dontCollapse')}); 
    $axure.setGlobalVariable('sitemapCollapsed','true');
  }
}
</script>

Add the plugin to the header and specify all pages.

Live sample

This version of the plugin collapses unused nodes as you navigate the tree (not just when you open the prototype). It does a good job of keeping the tree tidy, and it doesn’t require a global variable. There may be scenarios where this could be annoying, however.

Again: Axure 8 only

<script>
window.parent.jQuery.fn.reverse = [].reverse;
window.onload = function ()  {
window.parent.$('.sitemapMinus').each(function(){
    node = $(this).closest('.sitemapExpandableNode');
    if (node.find('.sitemapHighlight').length > 0 && $(this).parents('.sitemapHighlight').length == 0) {
      $(this).addClass('dontCollapse');
    }
  });
  window.parent.$('.sitemapMinus').not('.dontCollapse').reverse().each(function(){this.click()}); 
  window.parent.$('.sitemapMinus').each(function(){$(this).removeClass('dontCollapse')}); 
}
</script>

Live sample

Publish with folders/tree collapsed
#27

@josephxbrick you’re a hero. Thanks so much.

closed #28

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.