Oct

Adding the Yahoo YUI! Treemenu Module to ModX CMS System

Ubuntu Share This Trackback

/*****************************************************************
//  Installing a Yahoo YUI! Treemenu into ModX CMS Systems
//  by ShawnC of http://www.shawnc.org
*****************************************************************/

Introduction

Along time ago, I wrote a method of having a Java-script Tree menu in ModX CMS using a script from Dynamic Drive. This modification involved modifying core ModX CMS php
files and It just wasn’t a great method of going about this. Now I have found a much better method of doing this using the excellent Yahoo YUI! Library. This Library
is very small in Size and is one of the best Java-Script Library’s released at this time. Its modular nature is the best thing going for it honestly. Well since I wrote a
Plug in for vBulletin a few weeks ago to use this System, I decided to go ahead and port the modification over to ModX as it is my favorite frame work for a CMS. So Let’s
Get Started on how to Do It! At the end of this Post, you will find a Download Link to the Files needed to Install this modification in your System.

The Basics

Ok this module will basically, offer visitors with java script a Excellent Opening and Closing Tree menu to Navigate your Site very Rapidly. Visitors without Java-script
will not get to see the module, but I have made it so that Search Engine Spiders will still get a excellent Un-Ordered List of your Pages, so for SEO this is a Good
Modification allowing Spiders to have 1 Click access to any page from any page!

Let’s Get Started!

Ok, Go Ahead and Download the Modification Package At the bottom of this post and Unzip it into a Directory you can find. Also Open up a FTP Program and Navigate to your
sites ModX Root Folder ( the one that has the Assets, Manager, Index files/folders in it ). Go ahead and Upload the UPLOAD directory to this location and click overwrite all
if it asks you for that.

Ok So Now All the Java-Script, CSS and Image Files are Uploaded on your Server in the Assets Directory

Editing Your Head Section of the Template

Ok in the Header Section of your Page Templates you want to View this Modification on Add the Following Lines inside of your section ( before )

NOTE : One Tip I Noticed, I Find it wise to include your Sites URL in the links such as this, It will help solve any errors later on the installation

<!-- Addition Javascript for Treemenu by www.shawnc.org -->
<link   href="http://www.earthbeans.org/assets/yui/assets/tree.css" rel="stylesheet" type="text/css" media="screen" />

Above was just a example of what you should change, Below you need to copy/paste into your Template Above the Section

<!-- Addition Javascript for Treemenu by www.shawnc.org -->
<link   href="assets/yui/assets/tree.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="assets/yui/yahoo-dom-event-min.js" type="text/javascript"></script> 
<script src="assets/yui/animation-min.js" type="text/javascript" ></script>
<script src="assets/yui/treeview-min.js" type="text/javascript" ></script>
<!-- Addition Javascript for Treemenu by www.shawnc.org -->

Adding the Actual Tree Module to your Pages

Ok this is done different depending on how your template is designed honestly But I will show you how mine looks and I hope you can figure it out from there.
it’s not really hard, but if you don’t understand HTML then you may need to hire someone to help you with this part as every template is designed different.

Ok, a Basic Explanation of this method. For 1 i am using a Thrash-Box for the Markup, The only truly important parts of this example I will mark with HTML comments
and give a Brief Explanation of what they do.

<div id="NavDiv" style="visibility:hidden;"> <!-- Needed See Note 1 -->
  <div class="cssbox">
    <div class="cssbox_head" style="text-align:left;">
      <h2>Menu</h2>
    </div>
    <div class="cssbox_body" >
      <div id="treeDiv2" style="padding-left:-20px;"> <!-- Needed See Note 2 -->
         [!Wayfinder?startId=`0`  &hereClass=`` &rowTpl=``&titleOfLinks=`description`&selfClass=`` &outerClass=`treeDiv2` &innerClass=`treeDiv2`!] <!-- Needed See Note 3 -->
      </div>
    </div>
  </div>
</div>

Notes :

This DIV must be outside of your Outer Most section for the module to hide the Links until Javascript have made a Tree
This DIV must be there, It is what the Treemenu Javascript looks for to parse the tree
This is the WayFinder Line I used, you may expermint with it but I know the classes should be like that

The Actual YUI! Javascript Magic

Now at the bottom of your template, directly before the Statement, We need to add our Javascript Function to make the Magic Happen It Looks like This
What this does, is Take your existing UnOrder List and turn it into a JavaScript Tree. It also Hides the Container Div until After the Tree has been rendered so
that it looks better.

 
<script type="text/javascript">
//<![CDATA[
 
var ultree;
(function() {
 
    function treeInit() {
        ultree = new YAHOO.widget.TreeView("treeDiv2");
 
       ultree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
       ultree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);      
       ultree.readList();
 
       ultree.subscribe("expand", function(node) {
           });
 
       ultree.subscribe("collapse", function(node) {
           });
 
       ultree.subscribe("labelClick", function(node) {
           });
 
 
        ultree.draw();
				YAHOO.util.Dom.get("NavDiv").style.visibility = 'visible';
    }
 
    YAHOO.util.Event.addListener(window, "load", treeInit);
 
})();
 
//]]>
</script>

Conclusion

Well I hope this makes sense to some people on the usage of the Yahoo YUI! Treeview module. If you have any problems using this code please comment at my blog
and you will recive support much faster then anywhere else as I check it once a day whereas I check other forums on a maybe once a week basis.

Download Links

And what everybody has been waiting for the download link.

( 1 ) Comment

Oct

Ubuntu, KDE and the Yakuake Terminal Application

Ubuntu Share This Trackback

Well, after Switching to KDE as my Desktop Window Manager afew months ago, I have decided that I for the first time in along time I am happy with it, There really isn’t much more i could possibily think of that they should’va added or could have done different. And to top it all off it is even Stable with Crashes happening very seldomly. But as with most people who use Linux in general, I find myself always needing a Terminal or 10 open during the course of my day. ( Atleast to me copying files thru terminal is faster then thru a GUI ) or I need to SSH into a Web Server to fix something. Now I have been using the Gnome Terminal for awhile now just because that was what I got used to and new the default keybindings to it already. But just last week I have found my new Terminal of Choice. And its called Yakuake

Yakuake

Now this is a Drop-down Terminal, By Pressing F12 your KDE Konsole magically drops down into View, you can do whatever you need to do and by Pressing F12 the Terminal Slides back up into its hidden home. My favorite part of this is Well, 1 It doesnt Add a Icon to my Taskbar or Dock Bar, and more importantly with just 1 Key Stroke your Terminal is There, no need to hunt and find a icon and hit it. The speed of that one key is the most important thing for me. This is based on the KDE Konsole and just by right clicking on the Konsole once opened you can configure how it looks/works, So how easy is that. It even supports partial Transparancy ( IE Mine is Transparent in that you can see my Desktop Background but its not real transparent that you cant see the window behind it before the background but still its cool none the less )

Installing Yakuake

Installing this Execellent Terminal is a Oneline Feat as always, just open your current Konsole and copy/paste the following line into it. Once installed, you will have to locate and start it which mine appeared in my System Menu i think. Just locate where in your menu it was installed to, Click it and it should give you a dialog that Yakuake has been started and then just press F12 and it will appear for you to use, then press F12 to hide it again.