diff options
| -rw-r--r-- | LICENSE.txt | 1 | ||||
| -rw-r--r-- | README | 5 | ||||
| -rw-r--r-- | finder_menu.info | 4 | ||||
| -rw-r--r-- | finder_menu.js | 118 |
4 files changed, 126 insertions, 2 deletions
diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..632e489 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1 @@ +TODO: add license information. @@ -0,0 +1,5 @@ +Finder Menu +=========== + +This module implements the Finder Dropdown menu described +at http://www.alistapart.com/articles/complexdynamiclists. diff --git a/finder_menu.info b/finder_menu.info index 25244e2..2f11110 100644 --- a/finder_menu.info +++ b/finder_menu.info @@ -1,5 +1,5 @@ ; $Id$ -name = Finder Menu. +name = Finder Menu description = Show menu with Finder style. core = 6.x -dependencies[] = +dependencies[] = menu diff --git a/finder_menu.js b/finder_menu.js new file mode 100644 index 0000000..a0cf5b1 --- /dev/null +++ b/finder_menu.js @@ -0,0 +1,118 @@ +/*
+ * ul2finder
+ * written by Christian Heilmann (http://icant.co.uk)
+ * turns the nested list with the ID "finder" into a dynamic list
+ * uses the CSS classes defined in the variables
+ */
+function ul2finder()
+{
+ // Define variables used and classes to be applied/removed
+ var i,uls,als,finder;
+ var parentClass='parent';
+ var showClass='shown';
+ var hideClass='hidden';
+ var openClass='open';
+
+ // check if our finder list exists, if not, stop all activities
+ finder=document.getElementById('finder');
+ if(!finder){return;}
+
+ // add the class domenabled to the body
+ cssjs('add',document.body,'domenabled')
+
+ // loop through all lists inside finder, position and hide them
+ // by applying the class hidden
+ uls=document.getElementById('finder').getElementsByTagName('ul');
+ for(i=0;i<uls.length;i++)
+ {
+ cssjs('add',uls[i],hideClass);
+ }
+
+ // loop through all links of inside finder
+ lis=document.getElementById('finder').getElementsByTagName('li');
+ for(i=0;i<lis.length;i++)
+ {
+ // if the li containing the link has no nested list, skip this one
+ if(!lis[i].getElementsByTagName('ul')[0])
+ {
+
+ continue;
+ }
+ var newa=document.createElement('a');
+ newa.href='#';
+ newa.appendChild(document.createTextNode(lis[i].firstChild.nodeValue));
+ lis[i].replaceChild(newa,lis[i].firstChild);
+ // otherwise apply the parent class
+ cssjs('add',newa,parentClass);
+
+ // if the user clicks on the link
+ lis[i].getElementsByTagName('a')[0].onclick=function()
+ {
+ // loop through all lists inside finder
+ for(var i=0;i<uls.length;i++)
+ {
+ // avoid the list connected to this link
+ var found=false;
+ for(j=0;j<uls[i].getElementsByTagName('ul').length;j++)
+ {
+ if(uls[i].getElementsByTagName('ul')[j] ==
+ this.parentNode.getElementsByTagName('ul')[0])
+ {
+ found=true;
+ break;
+ }
+ }
+ // and hide all others
+ if(!found)
+ {
+ cssjs('add',uls[i],hideClass)
+ cssjs('remove',uls[i],showClass)
+ cssjs('remove',uls[i].parentNode.getElementsByTagName('a')[0],openClass)
+ cssjs('add',uls[i].parentNode.getElementsByTagName('a')[0],parentClass)
+ }
+ }
+ // change the current link from parent to open
+ cssjs('swap',this,parentClass,openClass)
+ // show the current nested list
+ cssjs('add',this.parentNode.getElementsByTagName('ul')[0],showClass)
+
+ // don't follow the real HREF of the link
+ return false;
+ }
+ }
+ /*
+ * cssjs
+ * written by Christian Heilmann (http://icant.co.uk)
+ * eases the dynamic application of CSS classes via DOM
+ * parameters: action a, object o and class names c1 and c2 (c2 optional)
+ * actions: swap exchanges c1 and c2 in object o
+ * add adds class c1 to object o
+ * remove removes class c1 from object o
+ * check tests if class c1 is applied to object o
+ * example: cssjs('swap',document.getElementById('foo'),'bar','baz');
+ */
+ function cssjs(a,o,c1,c2)
+ {
+ switch (a){
+ case 'swap':
+ o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
+ break;
+ case 'add':
+ if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
+ break;
+ case 'remove':
+ var rep=o.className.match(' '+c1)?' '+c1:c1;
+ o.className=o.className.replace(rep,'');
+ break;
+ case 'check':
+ return new RegExp('\\b'+c1+'\\b').test(o.className)
+ break;
+ }
+ }
+}
+
+// Check if the browser supports DOM, and start the script if it does.
+if(document.getElementById && document.createTextNode)
+{
+ window.onload=ul2finder;
+}
|