johan/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Better line (and line range) permalinking UX at github.com

Video description, where I borrow @holman's demo of the tribal knowledge you currently need to have to use this great feature, while mentioning how you use this user script after installing it.
♡Copyheart 2012, Johan Sundström. Copying is an act of love. Please share and use however you like!
NB: This user script doesn't rely on jQuery (so it'll happily run in Chrome's Isolated Worlds user script sand box, besides in Greasemonkey, where the site's version is around, or dotjs, where it's around all the time). If you are github and don't need to care about that, or want the shorter one, grab https://github.com/johan/user.js/blob/master/github.com/line-permalinks.user.js#L9-44 instead.

  
## index.html
<!DOCTYPE html><html><head>
<!-- for a pretty version with embedded video docs at http://bl.ocks.org/4053870 -->
<title>Github UX improv</title>
</head><body>
<iframe src='http://popcorn.webmadecontent.org/1tl_' width='853' height='523' frameborder='0' mozallowfullscreen webkitallowfullscreen oallowfullscreen allowfullscreen></iframe>
<script>var s = frameElement.style; s.height = '523px'; s.width = '853px';</script>
</body></html>

## line-permalinks.user.js
// ==UserScript==
// @name        Select text to make github line(-range) permalink
// @namespace   http://github.com/johan/
// @match       https://github.com/*
// @exampleURL  https://github.com/johan/user.js/blob/master/github.com/line-permalinks.user.js
// @description If you select text in a permalinkable file at github, the url updates automagically
// ==/UserScript==

if (typeof window.getSelection === 'function' &&
    typeof history.replaceState === 'function')
  document.body.addEventListener('mouseup', permalink, false);

function permalink() {
  function hash(h) {
    h = location.href.replace(/(#.*)?$/, h);
    history.replaceState(history.state, document.title, h);
  }

  function line(node) {
    var xp = 'ancestor-or-self::*[@id][1]'
      , me = document.evaluate(xp, node, null, 9, null).singleNodeValue
      , no = me && /^LC(\d+)$/.exec(me.id || '');
    return no && +no[1];
  }

  function $(q) { return document.querySelector(q); }

  var s = window.getSelection()
    , a = line(s.anchorNode)
    , b = line(s.focusNode)
    , end = 'focusOffset'
    , lines, line;

  if (a && b && s.type === 'Range') {
    if (a > b) {
      end = a; a = b; b = end;
      end = 'anchorOffset';
    }
    if (!s[end])
      b -= 1; // it's a whole-line selection, e g: triple-clicked in Chrome
    hash('#L'+ a + (a !== b ? '..'+b : ''));
    lines = document.querySelectorAll('*[id^=LC][style^="background-color:"]');
    [].forEach.call(lines, function(line) { line.style.backgroundColor = ''; });
    while (a <= b && (line = document.getElementById('LC'+ a++)))
      line.style.backgroundColor = 'rgb(255, 255, 204)';
  }
}
	<!DOCTYPE html><html><head>
	<!-- for a pretty version with embedded video docs at http://bl.ocks.org/4053870 -->
	<title>Github UX improv</title>
	</head><body>
	<iframe src='http://popcorn.webmadecontent.org/1tl_' width='853' height='523' frameborder='0' mozallowfullscreen webkitallowfullscreen oallowfullscreen allowfullscreen></iframe>
	<script>var s = frameElement.style; s.height = '523px'; s.width = '853px';</script>
	</body></html>
	// ==UserScript==
	// @name Select text to make github line(-range) permalink
	// @namespace http://github.com/johan/
	// @match https://github.com/*
	// @exampleURL https://github.com/johan/user.js/blob/master/github.com/line-permalinks.user.js
	// @description If you select text in a permalinkable file at github, the url updates automagically
	// ==/UserScript==

	if (typeof window.getSelection === 'function' &&
	typeof history.replaceState === 'function')
	document.body.addEventListener('mouseup', permalink, false);

	function permalink() {
	function hash(h) {
	h = location.href.replace(/(#.*)?$/, h);
	history.replaceState(history.state, document.title, h);
	}

	function line(node) {
	var xp = 'ancestor-or-self::*[@id][1]'
	, me = document.evaluate(xp, node, null, 9, null).singleNodeValue
	, no = me && /^LC(\d+)$/.exec(me.id \|\| '');
	return no && +no[1];
	}

	function $(q) { return document.querySelector(q); }

	var s = window.getSelection()
	, a = line(s.anchorNode)
	, b = line(s.focusNode)
	, end = 'focusOffset'
	, lines, line;

	if (a && b && s.type === 'Range') {
	if (a > b) {
	end = a; a = b; b = end;
	end = 'anchorOffset';
	}
	if (!s[end])
	b -= 1; // it's a whole-line selection, e g: triple-clicked in Chrome
	hash('#L'+ a + (a !== b ? '..'+b : ''));
	lines = document.querySelectorAll('*[id^=LC][style^="background-color:"]');
	[].forEach.call(lines, function(line) { line.style.backgroundColor = ''; });
	while (a <= b && (line = document.getElementById('LC'+ a++)))
	line.style.backgroundColor = 'rgb(255, 255, 204)';
	}
	}