HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Category Tree and Links manager (via JSON)
IceHeart. (Guild Admin) 1/4/2009 7:28 AM EST : Category Tree and Links manager (via JSON) link
IceHeart.
Posts: 110
Posts With Wolves

So, after doing the Category tree via XML, I was rather bugged that I could not use that for non-paying sites so I put myself to try and get a way to make it work for those.
See my post about doing this very same thing with XML<here>

After trying different ways of getting to load a Third party-hosted file, I had to settle down to using a JSON formatted file.

While JSON is very good for machine to machine interaction, I personally dislike it for manual edits, as I think its far too easy to make a syntax mistake that's going to be hard to find. Nevertheless, the ability to load cross-domain data is invaluable.

So, hoping this may be useful for somebody.. here it is..

I was having some trouble this time getting everything into a single post, so I have split into multiple parts. See below.
Top • Bottom

IceHeart. (Guild Admin) 1/4/2009 7:29 AM EST : RE: Category Tree and Links manager (via JSON) link
IceHeart.
Posts: 110
Posts With Wolves
Step 1- The Data file itself:
copy the following template <in Green> to Notepad and save it to a file, we'll call it "myJsonTreeData.js"

//Start of Data File
/*
Category Template:
{cName : "",
cItems : [

]
}

Link Template:
{lName : "", lUrl : "" }

*/

//Category variable name:
jsonCatTreeSample=

[
{cName : "Category1",
cItems : [
{cName : "SubCategory 1-1",
cItems : [
{lName : "Link 1-1-1", lUrl : "http://www.quildportal.com" },
{lName : "Link 1-1-2", lUrl : "http://www.quildportal.com" },
{lName : "Link 1-1-3", lUrl : "http://www.quildportal.com" }
]
},
{cName : "SubCategory 1-2",
cItems : [
{lName : "Link 1-2-1", lUrl : "http://www.quildportal.com" },
{lName : "Link 1-2-2", lUrl : "http://www.quildportal.com" }
]
}
]
},
{cName : "Category 2",
cItems : [
{lName : "Link 2-1", lUrl : "http://www.quildportal.com" },
{cName : "SubCategory 2-1",
cItems : [
{lName : "Link 2-1-1", lUrl : "http://www.quildportal.com" },
{lName : "Link 2-1-2", lUrl : "http://www.quildportal.com" }
]
},
{cName : "SubCategory 2-2",
cItems : [
]
},
{cName : "SubCategory 2-3",
cItems : [
]
}
]
},
{cName : "Category 3",
cItems : [
{lName : "Link 3-1", lUrl : "http://www.quildportal.com" },

]
} ,
{cName : "Category 4",
cItems : [

]
},
{cName : "Random and Funny links",
cItems : [
{lName : "30-Second Bunny Theatre", lUrl : "http://www.angryalien.com" },
{lName : "Ctrl+Alt+Del", lUrl : "http://www.ctrlaltdel-online.com/comic.php" }
]
}
]

// End of Data File

Step 2- Tweak the Data File to your own needs, by adding, deleting, renaming categories, adding links etc. Use the Category Template and Link template included.
Keep in mind the following things:
-Be VERY careful with opening and closing brackets.
- A category has a name and a cItems collection; each cItems collection is enclosed by []
- A link has a name and an URL.
- a cItems collection can contain categories, links, or a mix of both
- Each item (category or link) in itself is enclosed by {}
- you can have empty collections. in this case, a single row item will be generated with the text 'This category has no items yet"
- Be VERY careful with commas after each item. The LAST item in a collection does NOT have accoma after it.

Save this updated data file (keep the.js extension) and upload it to your 3rd paty host. Lets say the link is now "http://your.host.com/myJsonTreeData.js"
Top • Bottom

IceHeart. (Guild Admin) 1/4/2009 7:46 AM EST : RE: Category Tree and Links manager (via JSON) link
IceHeart.
Posts: 110
Posts With Wolves
Step 3- Create a Free HTML Box in your page, and add the following:

First, insert your data file by embedding it in a script tag, as follows:

Of course, replace to the correct URL of your file.

Then add the following code <in green> afterwards:

(note that the opening '<' for the script tag has been removed in order to be able to post in forum)

EDIT: I had some trouble posting the script due to some escaped characters. I reviewed it and I believe its correct, but just to be safe, I have uploaded a copy of the file which you can find <here>

script type="text/javascript>
function ToggleTreeItem(listID){
if(document.getElementById('IdCatTreeLst_'+listID).style.display=="none")
{document.getElementById('IdCatTreeLst_'+listID).style.display="block";document.getElementById('IdSp_Toggle_'+listID).innerHTML="[ - ] "; }
else
{document.getElementById('IdCatTreeLst_'+listID).style.display="none";document.getElementById('IdSp_Toggle_'+listID).innerHTML="[ + ] "; }
}

function jsonCatTreeToHTMLList (listName, itemsArray, itemOrd){
  var strHTML="";
    if (!itemOrd) itemOrd="";
    if (itemsArray.length>0) {
        for (var i=0; i<itemsArray.length; i++) {
            if (itemsArray [ i ] .lName) {      // item is a link
                strHTML+="<li><div class=\"NormGridRow \">";
                strHTML+="<a "
                strHTML+=" href=\""+itemsArray [ i ].lUrl          //Customize this line for additional functionality
                strHTML+="\">"+itemsArray [ i ].lName+"</a>";
                strHTML+="</div></li>";
            }
            else if (itemsArray [ i ] .cName) {     //item is a new sub category
                strHTML+="<li><div class=\"ForumCategoryHeader \">";
                strHTML+="<span id=\"IdSp_Toggle_"+listName+"_"+itemOrd+i+"\">[ + ]</span>";
                strHTML+="<a onclick=\"ToggleTreeItem(\'"+listName+"_"+itemOrd+i+"\')\" style=\"cursor:pointer\">"+itemsArray [ i ].cName+"</a></div>";
                strHTML+="<ul id=\"IdCatTreeLst_"+listName+"_"+itemOrd+i+"\" style=\"margin-left: 1em; padding-left:1em; list-style:none; display:none;\" >";
                strHTML+=jsonCatTreeToHTMLList(listName,itemsArray [ i ].cItems,itemOrd+i);
                strHTML+="</ul></li>";
            }
        }
    } 
    else {
    strHTML="<li>This category does not have any items yet</li>"
    }
    return strHTML;
}
</script>

And add the Tree root container with this line:
<ul id="CategoryTree" style="margin-left: 0em; padding-left:0em; list-style:none;"></ul>


Step 4- Done!
That should work as is.
Top • Bottom

IceHeart. (Guild Admin) 1/4/2009 8:00 AM EST : RE: Category Tree and Links manager (via JSON) link
IceHeart.
Posts: 110
Posts With Wolves
Additional customizations:
There are a couple additional things you can do with this:

A- More than 1 Category Tree in the same page:
- Rename the variable var jsonCatTreeSample in the data file and in the script call
jsonCatTreeToHTMLList('CatTreeName',jsonCatTreeSample)
to two different things (Tree1 and tree2, or whatever),
-rename the CatTreeName  in the script call
jsonCatTreeToHTMLList('CatTreeName',jsonCatTreeSample) to TreeName1 and TreeName2, or whatever - (this is required to uniquely identify all items in the tree)
- Rename the root list <ul id="CategoryTree" > and the root list call $('#CategoryTree') to something else (CatTree1 and CatTree2, or whatever)

B- Modify the click action
See the line
strHTML+=" href=\""+itemsArray [ i ].lUrl //Customize this line for additional functionality
in the main script? You can customize this to do other things onclick/onhover etc instead of just opening a link (need to know a little bit of javaScript thou).

B.1- Use an Iframe to show content in the right side
->For example, you can combine this with Mottie's excellent'Embedded page Selection' script to produce an embedded selection of external links, with a categorized Tree.
You can see this particular tweak at my test site <here>
I can't guarantee I'lll keep that permanently, as I poke around a lot, but I'll try to keep it for some time.

B.2-replace and inject the content if a <div> section in the right side
->Or, you can do it with internal links, say, to your forums, and useRansim's Right content script, as seen <in this post>

B.3-Mix Inject code for local links with open new page for external links
-> You can use ransim's code as above for local links, and force open new page for external links. You can seee this particular tweak in my main site's 'Shadowpedia' <here>

-> Or, you can add a rel="facebox" to the anchors, and generate a facebox-style Image gallery....

-> Or...

Hope that somebody finds this useful!
Cheers!
- Ice

 
Top • Bottom

IceHeart. (Guild Admin) 1/10/2009 2:54 AM EST : RE: Category Tree and Links manager (via JSON) link
IceHeart.
Posts: 110
Posts With Wolves
If you're doing the B.3-Mix Inject code for local links with open new page for external links in a 'right side box' tweak as described above, I have found that the jQuery.load method reacts differently in IE and FF, and occasionally generates a 'permission denied' error, even when loading pages that are in the same domain. I really haven't been able to understand 'why' it does it, but IE being IE....

If you find this same problem when applying the code above, the following fix should work:

In the 'right side box', remove the jQquery code and leave ONLY the DIV that you will be using for displaying the results, as such:

<div id="LinkContent">Click on a Link at the left...</div>

then, modify the script you use in the Gallery tree in the left side, and use the following version (either included in a tag, or saved to a file and loaded) - I prefer to save it, as i reuse the same script in other parts of the site as well:


function ToggleTreeItem(listID){
if(document.getElementById('IdCatTreeLst_'+listID).style.display=="none")
{document.getElementById('IdCatTreeLst_'+listID).style.display="block";document.getElementById('IdSp_Toggle_'+listID).innerHTML="[ - ] "; }
else
{document.getElementById('IdCatTreeLst_'+listID).style.display="none";document.getElementById('IdSp_Toggle_'+listID).innerHTML="[ + ] "; }
}

function getLink(urlLink) {
   if (urlLink.match("guildportal.com")) {                      
       var toLoad =urlLink+'  td.MessageBodyCell1:first';
        $().get(toLoad, function (data) {
           $('#LinkContent').html(data);
           $('#LinkContent').show('fast');
        });
    return;
   }
  else { window.open(urlLink) };
}

function jsonCatTreeToHTMLList (listName, itemsArray, itemOrd){
  var strHTML="";
    if (!itemOrd) itemOrd="";
    if (itemsArray.length>0) {
        for (var i=0; i<itemsArray.length; i++) {
            if (itemsArray[ i ].lName) {      // item is a link
                strHTML+="<li><div class=\"NormGridRow \">";
                strHTML+="<a class=\"CatTreeLinkItem\"  "
                strHTML+=" href=\"javascript:getLink(\'"+itemsArray[ i ].lUrl+"\')"          //Customize this line for additional functionality
                strHTML+="\" >"+itemsArray[ i ].lName+"</a>";
                strHTML+="</div></li>";
            }
            else if (itemsArray[ i ].cName) {     //item is a new sub category
                strHTML+="<li><div class=\"ForumCategoryHeader \">";
                strHTML+="<span id=\"IdSp_Toggle_"+listName+"_"+itemOrd+i+"\">[ + ] </span>";
                strHTML+="<a onclick=\"ToggleTreeItem(\'"+listName+"_"+itemOrd+i+"\')\" style=\"cursor:pointer\">"+itemsArray[ i ].cName+"</a></div>";
                strHTML+="<ul id=\"IdCatTreeLst_"+listName+"_"+itemOrd+i+"\" style=\"margin-left: 1em; padding-left:1em; list-style:none; display:none;\" >";
                strHTML+=jsonCatTreeToHTMLList(listName,itemsArray[ i ].cItems,itemOrd+i);
                strHTML+="</ul></li>";
            }
        }
    } 
    else {
    strHTML="<li>This category does not have any items yet</li>"
    }
    return strHTML;
}

This should correct the problem with IE and work both in IE and FF, by using the jQuery get methond instead of load, and pre-checking for the "guildportal.com" domain so it will show it at the right side, or will open a new window if it is an external link, therefore avoiding the cross-domain security problem.

Cheers
-Ice

Top • Bottom

Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%