links hitch

links-hitch.js

/**
{
"title": "Link Filters",
"type": "selector",
"description": "Provides pseudo-classes for selecting anchor elements based on the content of their href",
"package": "bkardell.links",
"version": "1"
}
==========
	<h2>link pseudo-class filters</h2>

	<p>Link psudeo-classes provide a mechanism to select anchor elements based on their 
	 href relationship within the current page in order to allow special styling of different
	 kinds of 'internal' links. It is based on especially useful and not terribly difficult to 
	 implement portions of the 
	 <a href="http://www.w3.org/TR/2011/WD-selectors4-20110929/#location">W3C Working Draft from September 29 2011</a>.</p>
	
	<h2>Table of Contents</h2>
	<ol>
		<li><a href="#local">:-links-local</a></li>
		<li><a href="#target">:-links-target</a></li>
	</ol>
	
	
	<h3 class="sectionnumber"><a name="local">1.  The -links-local pseudo-class</a></h3>
	<p>The local pseudo class <span class="sig">:-links-local(<span class="arg">level</span>)</span>,
	is a funtional notation taking one optional non-negative integer argument representing a number of path levels ("/") to match.
	A comparison is done between the current URL and the URL described in the links href attribue.  
	Relative paths are converted to absolute for purposes of this comparison.  Scheme, user name, port, querystring 
	and fragment portions of the urls are not considered.
	</p>

	<div class="example">
		<p>Given the links: </p>
		<ol>
			<li><code>&lt;a href="http://www.example.com"&gt;Home&lt;/a&gt;</code>
		
			</li><li><code>&lt;a href="http://www.example.com/2011"&gt;2011&lt;/a&gt;</code>
		
			</li><li><code>&lt;a
			 href="https://www.example.com/2011/03"&gt;March&lt;/a&gt;</code>
		
			</li><li><code>&lt;a
			 href="http://www.example.com/2011/03/"&gt;March&lt;/a&gt;</code>
		
			</li><li><code>&lt;a href="http://example.com/2011/03"&gt;March&lt;/a&gt;</code>
		   </li>
	   </ol>
	   <p>and the styles:</p>
	   <ol>
			<li><code>a:-links-local {...}</code>
		
			</li><li><code>a:-links-local(0) {...}</code>
		
			</li><li><code>a:-links-local(1) {...}</code>
		
			</li><li><code>a:-links-local(2) {...}</code>
		
			</li><li><code>a:-links-local(3) {...}</code>
		   </li>
		</ol>
		<p>If the document's URI is <code>http://www.example.com/2011/03/</code>: </p>
		<ol>
			<li>Link 1 would receive Style 2
		
			</li><li>Link 2 would receive Styles 2 and 3
		
			</li><li>Link 3 would receive Styles 2, 3, and 4
		
			</li><li>Link 4 would receive Style 1
		
			</li><li>Link 5 would remain unstyled, and Style 5 would not be applied to
			 anything.
		   </li>
		</ol>
	</div>
	
	
	<h3 class="sectionnumber"><a name="target">2.  The -links-target pseudo-class</a></h3>

	<p>The target pseudo class <span class="sig">:-links-target()</span>,
	is a funtional notation taking no arguments. It represents an element which currently serves 
	as the target identified by the fragment identifier in the URL.  If the current URL has no fragment 
	identifier there is no matching target.
	</p>
	<div class="example">
		<p>Examples: </p>
		<p>
		Given the HTML:
                </p>
		<pre>&lt;h3&gt;&lt;a name="glossary"&gt;Glossary&lt;/a&gt;&lt;/h3&gt;</pre>
		</p>
		<p>And the rule:</p>
		<pre>a:-links-target(){
	background-color: yellow;
}</pre>
		<ul>
			<li>If the page's URL were <code>http://example.com/html/top.html?section=glossary</code> the rule WILL NOT match.</li>
			
			<li>If the page's URL were <code>http://example.com/html/glossary</code> the rule WILL NOT match.</li>
			
			<li>If the page's URL were <code>http://example.com/html/top.html#glossary</code> the rule WILL match.</li>
			
		</ul>
	</div>
**/
(function(){
	// parseUri 1.2.2
	// (c) Steven Levithan <stevenlevithan.com>
	// MIT License
	var parseUri = function (str) {
		var	o   = parseUri.options,
			m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
			uri = {},
			i   = 14;
	
		while (i--) uri[o.key[i]] = m[i] || "";
	
		uri[o.q.name] = {};
		uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
			if ($1) uri[o.q.name][$1] = $2;
		});
	
		return uri;
	};
	
	parseUri.options = {
		strictMode: true,
		key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
		q:   {
			name:   "queryKey",
			parser: /(?:^|&)([^&=]*)=?([^&]*)/g
		},
		parser: {
			strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
			loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
		}
	};
	
	Hitch.add([
		{
			name: '-links-local',
			base: 'a[href]',
			filter:    function(match,argsString,o){
				var a, i, wp, lp, 
					w = parseUri(o.location),
					l = parseUri(match.href);
				if(w.host===l.host){
					if(argsString && !isNaN(argsString)){
						a = parseInt(argsString,10);
						wp = w.path.split('/');
						lp = l.path.split('/');
						for(i=0;i<a+1;i++){
							if(wp[i]!==lp[i]){
								return false;
							}
						}
					}
					return true;
				}
			}
		},
		{
			name: '-links-target',
			base: 'a[name]',
			filter:    function(match,argsString,o){
				console.log(window.location.hash && ("#" + match.name === window.location.hash));
				return (window.location.hash && ("#" + match.name === window.location.hash));
			}
		}
	]);
}());