/*
*** viewSource jQuery plugin ***
Copyright (c) 2010 Sander Säde http://dukelupus.com
Licensed under MPL version 1.1 - http://www.mozilla.org/MPL/MPL-1.1.txt
*** Purpose ***
Show the source of the current web page or a part of it in its current state. Useful in HTML/JS/CSS demonstration pages, allowing users to easily see your HTML source.
Optional support for the google-code-prettify (http://code.google.com/p/google-code-prettify/) script - you must include prettify.css and prettify.js to your web page.
Includes HTMLEncode (Copyright (c) 2006-2010 Thomas Peri, http://www.tumuski.com/) and text selection code snippet from http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse (slightly modified)
*** Use ***
Include the script to your web page head after jQuery -
Two methods:
1. Add $(someselector).viewSource(code-to-show-selector); to document.ready. This will bind onclick event to the element(s) specified by your selector - i.e. clicking on those elements will show the source.
2. Call $().showSource(code-to-show-selector); yourself to immediately show the source.
Note: "code-to-show-selector" is optional selector for the element which code to show. If left empty or passed an empty string, it will default to "html", ie. whole page.
*/
/// Bind click event to whatever we've given
(function($) {
$.fn.viewSource = function(selector) {
return this.each(function() {
$(this).bind("click", function() { $.fn.showSource(selector); });
});
};
$.fn.showSource = function(selector) {
if (selector == undefined || selector == "")
selector = "html";
var currentSource = $(selector).html(); //let's get the source before we meddle with it
var display = "";
//append our elements and source
$("body").append(display);
$("#viewSource_content").html("" + htmlEncode(currentSource, 1, 4) + "
");
try {
prettyPrint();
}
catch (e) {
//silent exception, if PrettyPrint script is not included
}
//select all text
$("#viewSource_selectAll").click(function() {
SelectText("#viewSource_content");
});
//fade out the source display and remove it from the page
$("#viewSource_close").click(function() {
$("#viewSource_display").fadeOut(400,
function() { $("#viewSource_display").remove(); })
});
//http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
SelectText = function(element) {
var text = $(element).get(0)
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
};
};
} (jQuery));
var htmlEncode = function(source, display, tabs) {
var i, s, ch, peek, line, result, next, endline, push, spaces;
// Stash the next character and advance the pointer
next = function() {
peek = source.charAt(i);
i += 1;
};
// Start a new "line" of output, to be joined later by
endline = function() {
line = line.join('');
if (display) {
// If a line starts or ends with a space, it evaporates in html
// unless it's an nbsp.
line = line.replace(/(^ )|( $)/g, ' ');
}
result.push(line);
line = [];
};
// Push a character or its entity onto the current line
push = function() {
if (ch < ' ' || ch > '~') {
line.push('&#' + ch.charCodeAt(0) + ';');
} else {
line.push(ch);
}
};
// Use only integer part of tabs, and default to 4
tabs = (tabs >= 0) ? Math.floor(tabs) : 4;
result = [];
line = [];
i = 0;
next();
while (i <= source.length) { // less than or equal, because i is always one ahead
ch = peek;
next();
// HTML special chars.
switch (ch) {
case '<':
line.push('<');
break;
case '>':
line.push('>');
break;
case '&':
line.push('&');
break;
case '"':
line.push('"');
break;
case "'":
line.push(''');
break;
default:
// If the output is intended for display,
// then end lines on newlines, and replace tabs with spaces.
if (display) {
switch (ch) {
case '\r':
// If this \r is the beginning of a \r\n, skip over the \n part.
if (peek === '\n') {
next();
}
endline();
break;
case '\n':
endline();
break;
case '\t':
// expand tabs
spaces = tabs - (line.length % tabs);
for (s = 0; s < spaces; s += 1) {
line.push(' ');
}
break;
default:
// All other characters can be dealt with generically.
push();
}
} else {
// If the output is not for display,
// then none of the characters need special treatment.
push();
}
}
}
endline();
// If you can't beat 'em, join 'em.
result = result.join('
');
if (display) {
// Break up contiguous blocks of spaces with non-breaking spaces
result = result.replace(/ {2}/g, ' ');
}
// tada!
return result;
};