aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--LICENSE.txt1
-rw-r--r--README5
-rw-r--r--finder_menu.info4
-rw-r--r--finder_menu.js118
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.
diff --git a/README b/README
new file mode 100644
index 0000000..954a84b
--- /dev/null
+++ b/README
@@ -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;
+}