[work in progress]

revamping home page UI based on work made for CSS validator and Unicorn:
- usage of tabtastic for the method (uri, upload) choice
- usage ot toggle scripting for extended options
- menu moved to bottom of page, giving most important page
  real estate to form interface

5 files changed, 341 insertions, 0 deletions

diff --git a/htdocs/scripts/tabtastic/addclasskillclass.js b/htdocs/scripts/tabtastic/addclasskillclass.js
new file mode 100644
index 0000000..f199fc8
--- /dev/null
+++ b/htdocs/scripts/tabtastic/addclasskillclass.js
@@ -0,0 +1,14 @@
+//*** This code is copyright 2002-2003 by Gavin Kistner and Refinery; www.refinery.com

+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt

+//*** Reuse or modification is free provided you abide by the terms of that license.

+//*** (Including the first two lines above in your source code satisfies the conditions.)

+

+//***Adds a new class to an object, preserving existing classes

+function AddClass(obj,cName){ KillClass(obj,cName); return obj && (obj.className+=(obj.className.length>0?' ':'')+cName); }

+

+//***Removes a particular class from an object, preserving other existing classes.

+function KillClass(obj,cName){ return obj && (obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),'')); }

+

+//***Returns true if the object has the class assigned, false otherwise.

+function HasClass(obj,cName){ return (!obj || !obj.className)?false:(new RegExp("\\b"+cName+"\\b")).test(obj.className) }

+

diff --git a/htdocs/scripts/tabtastic/addcss.js b/htdocs/scripts/tabtastic/addcss.js
new file mode 100644
index 0000000..a6c9f42
--- /dev/null
+++ b/htdocs/scripts/tabtastic/addcss.js
@@ -0,0 +1,59 @@
+//*** This code is copyright 2002-2003 by Gavin Kistner, gavin@refinery.com
+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
+//*** Reuse or modification is free provided you abide by the terms of that license.
+//*** (Including the first two lines above in your source code satisfies the conditions.)
+
+// Add a new stylesheet to the document;
+// url [optional] A url to an external stylesheet to use
+// idx [optional] The index in document.styleSheets to insert the new sheet before
+function AddStyleSheet(url,idx){
+	var css,before=null,head=document.getElementsByTagName("head")[0];
+
+	if (document.createElement){
+		if (url){
+			css = document.createElement('link');
+			css.rel  = 'stylesheet';
+			css.href = url;
+		} else css = document.createElement('style');
+		css.media = 'all';
+		css.type  = 'text/css';
+
+		if (idx>=0){
+			for (var i=0,ct=0,len=head.childNodes.length;i<len;i++){
+				var el = head.childNodes[i];
+				if (!el.tagName) continue;
+				var tagName = el.tagName.toLowerCase();
+				if (ct==idx){
+					before = el;
+					break;
+				}
+				if (tagName=='style' || tagName=='link' && (el.rel && el.rel.toLowerCase()=='stylesheet' || el.type && el.type.toLowerCase()=='text/css') ) ct++;
+			}
+		}
+		head.insertBefore(css,before);
+
+		return document.styleSheets[before?idx:document.styleSheets.length-1];
+	} else return alert("I can't create a new stylesheet for you. Sorry.");
+}
+// e.g. var newBlankSheetAfterAllOthers = AddStyleSheet(); 
+// e.g. var newBlankSheetBeforeAllOthers = AddStyleSheet(null,0);
+// e.g. var externalSheetAfterOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css');
+// e.g. var externalSheetBeforeOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css',0);
+
+
+// Cross-browser method for inserting a new rule into an existing stylesheet.
+// ss       - The stylesheet to stick the new rule in
+// selector - The string value to use for the rule selector
+// styles   - The string styles to use with the rule
+function AddRule(ss,selector,styles){
+	if (!ss) return false;
+	if (ss.insertRule) return ss.insertRule(selector+' {'+styles+'}',ss.cssRules.length);
+	if (ss.addRule){
+		ss.addRule(selector,styles);
+		return true;
+	}
+	return false;
+}
+
+// e.g. AddRule( document.styleSheets[0] , 'a:link' , 'color:blue; text-decoration:underline' );
+// e.g. AddRule( AddStyleSheet() , 'hr' , 'display:none' );
diff --git a/htdocs/scripts/tabtastic/attachevent.js b/htdocs/scripts/tabtastic/attachevent.js
new file mode 100644
index 0000000..eaad7b8
--- /dev/null
+++ b/htdocs/scripts/tabtastic/attachevent.js
@@ -0,0 +1,34 @@
+//*** This code is copyright 2003 by Gavin Kistner, gavin@refinery.com

+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt

+//*** Reuse or modification is free provided you abide by the terms of that license.

+//*** (Including the first two lines above in your source code satisfies the conditions.)

+

+

+//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted

+//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false);

+

+function AttachEvent(obj,evt,fnc,useCapture){

+	if (!useCapture) useCapture=false;

+	if (obj.addEventListener){

+		obj.addEventListener(evt,fnc,useCapture);

+		return true;

+	} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);

+	else{

+		MyAttachEvent(obj,evt,fnc);

+		obj['on'+evt]=function(){ MyFireEvent(obj,evt) };

+	}

+} 

+

+//The following are for browsers like NS4 or IE5Mac which don't support either

+//attachEvent or addEventListener

+function MyAttachEvent(obj,evt,fnc){

+	if (!obj.myEvents) obj.myEvents={};

+	if (!obj.myEvents[evt]) obj.myEvents[evt]=[];

+	var evts = obj.myEvents[evt];

+	evts[evts.length]=fnc;

+}

+function MyFireEvent(obj,evt){

+	if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;

+	var evts = obj.myEvents[evt];

+	for (var i=0,len=evts.length;i<len;i++) evts[i]();

+}

diff --git a/htdocs/scripts/tabtastic/tabtastic.js b/htdocs/scripts/tabtastic/tabtastic.js
new file mode 100644
index 0000000..e1ed43e
--- /dev/null
+++ b/htdocs/scripts/tabtastic/tabtastic.js
@@ -0,0 +1,92 @@
+//*** This library is copyright 2004 by Gavin Kistner, gavin@refinery.com
+//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
+//*** Reuse or modification is free provided you abide by the terms of that license.
+//*** (Including the first two lines above in your source code mostly satisfies the conditions.)
+
+//*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html
+//*** Version 1.0    20040430   Initial release.
+//***         1.0.2  20040501   IE5Mac, IE6Win compat.
+//***         1.0.3  20040501   Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes)
+//***         1.0.4  20040521   Added scroll-back hack to prevent scrolling down to page anchor. Then commented out :)
+
+AttachEvent(window,'load',function(){
+	var tocTag='ul',tocClass='tabset_tabs',tabTag='a',contentClass='tabset_content';
+
+
+	function FindEl(tagName,evt){
+		if (!evt && window.event) evt=event;
+		if (!evt) return DebugOut("Can't find an event to handle in DLTabSet::SetTab",0);
+		var el=evt.currentTarget || evt.srcElement;
+		while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode;
+		return el;
+	}
+
+	function SetTabActive(tab){
+		if (tab.tabTOC.activeTab){
+			if (tab.tabTOC.activeTab==tab) return;
+			KillClass(tab.tabTOC.activeTab,'active');
+			if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active');
+			//if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display='';
+			if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive');
+			if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive');
+		}
+		AddClass(tab.tabTOC.activeTab=tab,'active');
+		if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active');				
+		//if (tab.tabContent) tab.tabContent.style.display='block';
+		if (tab.prevTab) AddClass(tab.prevTab,'preActive');
+		if (tab.nextTab) AddClass(tab.nextTab,'postActive');
+	}
+	function SetTabFromAnchor(evt){
+		//setTimeout('document.body.scrollTop='+document.body.scrollTop,1);
+		SetTabActive(FindEl('a',evt).semanticTab);
+	}
+
+	
+	function Init(){
+		window.everyTabThereIsById = {};
+		
+		var anchorMatch = /#([a-z][\w.:-]*)$/i,match;
+		var activeTabs = [];
+		
+		var tocs = document.getElementsByTagName(tocTag);
+		for (var i=0,len=tocs.length;i<len;i++){
+			var toc = tocs[i];
+			if (!HasClass(toc,tocClass)) continue;
+
+			var lastTab;
+			var tabs = toc.getElementsByTagName(tabTag);
+			for (var j=0,len2=tabs.length;j<len2;j++){
+				var tab = tabs[j];
+				if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue;
+				if (lastTab){
+					tab.prevTab=lastTab;
+					lastTab.nextTab=tab;
+				}
+				tab.tabTOC=toc;
+				everyTabThereIsById[tab.tabID=match[1]]=tab;
+				tab.tabContent = document.getElementById(tab.tabID);
+				
+				if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab;
+				
+				lastTab=tab;
+			}
+			AddClass(toc.getElementsByTagName('li')[0],'firstchild');
+		}
+
+		for (var i=0,len=activeTabs.length;i<len;i++){
+			SetTabActive(activeTabs[i]);
+		}
+
+		for (var i=0,len=document.links.length;i<len;i++){
+			var a = document.links[i];
+			if (!(match=anchorMatch.exec(a.href))) continue;
+			if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false);
+		}
+		
+		if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a);
+		
+		//Comment out the next line and include the file directly if you need IE5Mac or Opera7 support.
+		AddStyleSheet('style/tabtastic.css',0);
+	}
+	Init();
+},false);
\ No newline at end of file
diff --git a/htdocs/scripts/toggle.js b/htdocs/scripts/toggle.js
new file mode 100644
index 0000000..910be74
--- /dev/null
+++ b/htdocs/scripts/toggle.js
@@ -0,0 +1,142 @@
+// toggling event visibility
+// $Id: toggle.js,v 1.1 2007-02-20 01:56:44 ot Exp $
+// v1.0 David Dorward for the W3C CSS Validation Service, 18/12/2006
+// Based on v2.01 Kent Brewster, 6/8/2006 http://www.mindsack.com
+
+// namespace protection: one global variable to rule them all
+var W3C = {};
+W3C.QA = {};
+W3C.QA.Validator = {};
+W3C.QA.Validator.CSS = {};
+W3C.QA.Validator.CSS.toggle = 
+{	
+	init : function(toggle, closed, hidden)
+	{
+		// three class names, fed in from init call
+		this.toggleClass = toggle;
+		this.toggleClosed = closed;
+		this.toggleHidden = hidden;
+		this.toggleText = "toggletext";
+		// crawl through the document, look for toggled elements
+		this.crawl(document.body);
+	},
+	crawl : function(el)
+	{
+		// get this element's next sibling
+		var nextSib = this.getNextSibling(el);
+		
+		// if it has a class name, the class name matches our toggle class
+		if (el.className && el.className.match(this.toggleClass))
+		{
+			// labels are nice, but redundant with the link we are adding
+		 	for (i=0;i<el.childNodes.length;i++)
+		  	{
+		    	  current_child_node=el.childNodes[i];
+			  if (current_child_node.tagName && current_child_node.className && current_child_node.className.match(this.toggleText))
+			  // we only want to match an element with a class
+			  {
+			            current_child_node.className = 'hideme';
+        			    if (current_child_node.tagName.toLowerCase() == "legend")
+        			    {
+        			            var paragraph = document.createElement('p');
+        			    }
+            			    else 
+            			    {
+            		                    var paragraph = document.createElement(current_child_node.tagName.toLowerCase());
+            		            }
+            		            var link = document.createElement('a');
+            			    var text = current_child_node.childNodes[0].nodeValue;
+            			    
+            			    //text = text.replace("_", " ", "g");
+            			    //var text = "Show/Hide extra validation options";
+            			    text = document.createTextNode(text);
+            			    link.appendChild(text);
+            			    link.href="#" + el.id;
+            			    link.onclick = this.newToggleState(this,paragraph,el);
+            			    paragraph.appendChild(link);
+            			    paragraph.className += ' toggle closed';
+            			    el.parentNode.insertBefore(paragraph, el);
+			  }
+			}
+
+
+			// if the next sib ought to be hidden and it isn't already, hide it
+			// you can hard-code class=hidden in the HTML if you like, and avoid the Flash of Unstyled Content
+			if (el.className.match(this.toggleClosed))
+			{
+				el.className += ' ' + this.toggleHidden;
+				//el.parentNode.className += ' ' + this.toggleClosed;
+			}
+		}
+		
+		// is there more to do? Do it, if so:
+		if (el.firstChild) 
+		{
+    			this.crawl(el.firstChild);
+  		}
+		if (nextSib) 
+		{
+			this.crawl(nextSib);
+		}
+	},
+	newToggleState : function(o,element,nextEl) {
+		return function () { return o.toggleState(element,nextEl) };
+	},
+	toggleState : function(el,nextEl)
+	{
+		// there's got to be a way to get this without stating it explicitly
+		var o = W3C.QA.Validator.CSS.toggle;
+				
+		// change the style of the triggering element
+		if(el.className.match(o.toggleClosed))
+		{
+			el.className = el.className.replace(o.toggleClosed, '');
+		}
+		else
+		{
+			el.className = el.className + ' ' + o.toggleClosed;
+		}
+		
+		// yes, we need to check if it's really there; other scripts could have removed it
+		if(nextEl && nextEl.className.match('hidden'))
+		{
+			nextEl.className = nextEl.className.replace(o.toggleHidden, '');
+		}
+		else
+		{
+			nextEl.className += ' ' + o.toggleHidden;
+		}
+		return false;
+	},
+	getNextSibling : function(el)
+	{
+		var nextSib = el.nextSibling;
+		
+		// hack for Gecko browsers
+		if (nextSib && nextSib.nodeType != 1)
+		{
+			nextSib = nextSib.nextSibling;
+		}
+		return nextSib;
+	},
+	getEl : function(v)
+	{
+		var tg = (v) ? v : event;
+		var el = null;
+		if (tg.target) 
+		{
+			el = (tg.target.nodeType == 3) ? tg.target.parentNode : tg.target;
+		} 
+		else 
+		{ 
+			el = tg.srcElement;
+		}
+		return el;
+	}
+};
+
+// feed it the CSS class names of your choice
+window.onload = function()
+{ 
+	W3C.QA.Validator.CSS.toggle.init('alttoggle', 'closed', 'hidden');
+};