Collapsed Sitemap HELP!

website-publishing
#9

:bow:

That worked! Kinda… it minimized all of my nodes, but it gave me the error "File Not Found
url : /16.54.19/$(%27.sitemapMinus%27).each(function()%7Bthis.click()%7D) "

Maybe I inserted it into the wrong spot? Thoughts?

#10

If you have it in an open link action be sure to prefix it with javascript:

javascript:void($('.sitemapMinus').each(function(){this.click()}))
#11

So close… I inserted “$(’.sitemapMinus’).each(function(){this.click()})” into the sitemap.js file under “$(’.sitemapPageLink’).click(node_click)” and it is correctly collapsing the nodes when I generated the HTML (my happy dance was pretty impressive) but when I published it to AxShare they were expanded.

I also tried to enter it in as a onpageload event with javascript:void but that didn’t work either.

Any more magic?

#12

For it to work on AxShare you might have to use this:

javascript:void(window.parent.$('.sitemapMinus').each(function(){this.click()}))

in an OnPageLoad event.

Unfortunately, since the page is loaded into an iframe on the sitemap page, this won’t run until that page is loaded meaning you’ll see the sitemap, then when the page loads it will collapse.

#13

:bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow::bow:

You are amazing my friend.

I need your address… I’m sending you brownies… or bacon… or my first born. You choose.

#14

aside to @nkrisc

I’d go with the bacon. I nearly have my own first born and I’ve learnt never to trust brownies. And - Bacon. Always bacon…

#15

Bacon brownies… Mmmmm

#16

This works great! Does anyone know how to modify this to collapse ALL subfolders and pages too?

#17

I took a look on the Version 8 sitemap and I see the problem you’re referencing. It will look like everything is collapsed, but if you open a top level folder/page the children will be expanded even though the icon indicates the collapsed state. I imagine you’d have to write the script to start bottommost child nodes and click your way up the tree to the top level nodes.

The sitemap is mostly nested unordered lists so it wouldn’t be a terribly difficult script to write, but it’s a little too tedious for me to bother with. Sorry :frowning:

#18

I’m confused. Where / how exactly do I add this code? Thanks!

#19

Hi easyishard,

It looks like Nathan is suggesting you put this in the “Hyperlink” field of an “Open Link” action under the OnPageLoad event.

#20

Done it. Turns out it is quite simple… traverse the list backwards.

This version should collapse all levels of folders in Version 8:



javascript:void(window.parent.jQuery.fn.reverse = [].reverse); void(window.parent.$('.sitemapMinus').reverse().each(function(){this.click()}));
#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.