0

2

Intermediate

Create front end Asset Tree using an Asset Listing & jQuery

With the use of only an asset listing and some jQuery, we can create a front end HTML asset map that you can use for many different things.

By Bart Banda

First of all, you will need to make sure you are including jQuery in your design. Then start by creating an asset listing somewhere on your site. Set the assets you want to list, for this example you can try and just set it to list Pages (inherited), Files (inherited), and Folder assets.

Do the following configurations as well:

• Set root node of where to start listing assets from
• Set Direct Links Only to Yes
• Set a Dynamic Parameter to be a Replacement Root node, set the source to be Get Variable Name and the source value to "root".

That's it for the asset listing details screen, now onto the Default Format bodycopy div. Put the following HTML in there:

<li>
   <a id="link-2991" onclick="loadChildren('#' + this.id); return false" class="expand" rel="2991" href="#">+</a> Create front end Asset Tree using an Asset Listing & jQuery
</li>

Next, customise the Page Body bodycopy div, I like to seperate the HTML and the JS so have 2 bodycopy divs (both set to Raw HTML presentation format and content type).

In the first bodycopy, put the following HTML:

<div id="asset-map">
  <ul>
    
  </ul>
</div>

<div id="temp-html" style="display:none"></div>

In the second bodycopy div, we put the jQuery goodness:

<script type="text/javascript">
//<![CDATA[

//Function for loading the child assets of root node
function loadChildren(theA){
   if($(theA).hasClass('loaded')){ //If we have already loaded a list, dont load again
      if($(theA).hasClass('open')){ //If the child UL is open, close it and do stuff
         $(theA).parent().children('ul').hide();
         $(theA).removeClass('open');
         $(theA).html('+');
      }else{  //If the child UL is closed, open it and do stuff
         $(theA).parent().children('ul').show();
         $(theA).addClass('open');
         $(theA).html('-');
      }
   }else{ //If we havent loaded these children, then make AJAX load
      //Construct the AJAX request URL
      var requestURL = 'http://community.squiz.net/intermediate/create-front-end-asset-tree-using-an-asset-listing-and-jquery?root=' + $(theA).attr('rel') + ' #asset-map ul';
      $(theA).parent().append(' <em class="child-loader">Loading...</em>'); //Temporary loading message
      $('#temp-html').load(requestURL, function() {
         //After load is complete, do all this stuff
         $(theA).parent().children('.child-loader').remove();
         $(theA).parent().append($('#temp-html').html());
         $(theA).addClass('loaded').addClass('open');
         $(theA).html('-');
         $('#temp-html').html('');
      });
   }
   return false;
}

//]]>
</script>

Almost done, we need to put something in the No results page body for assets with no child assets:

<div id="asset-map">
  <ul>
    <li><em>Empty</em></li>
  </ul>
</div>

And that's it! Check it out on the front end or on the demo below for the action. You can apply CSS and additional HTML to the Default Format listing to spice it up.

You can use this for:

• Creating a document management system
• Letting editors with no /_admin access easily navigate through the asset map and jump into /_edit mode of a page
• Document listings
• Whatever you want....

You can also customise the asset listing further by having different display formats for file assets as they will never have any child assets. This guide is just to help you get going and getting the AJAX requests happening. You should also apply a blank user definded design to the asset listing so that the AJAX requests come back quicker.

Enjoy :)

Tutorial Feedback

There are currently no comments. Post one, you will be first!

Add Your Feedback

You must be logged in to leave a comment. You can sign-up for free!