dojo_app/js/library/dojox/highlight/widget/Code.js

define([
	"dojo/_base/declare", 
	"dojo/_base/lang", 
	"dojo/_base/array", 
	"dojo/query",
	"dojo/dom-class",
	"dojo/dom-attr",
	"dojo/dom-construct",
	"dojo/request/xhr",
	"dijit/_Widget", 
	"dijit/_Templated", 
	"dojox/highlight"
], function(declare, lang, array, query, domClass, domAttr, domConstruct, xhr, _Widget, _Templated){

	return declare("dojox.highlight.widget.Code", [_Widget, _Templated],{
		// summary:
		//		A simple source code formatting widget that adds line numbering, alternating line colors
		//		and line range support on top of dojox.highlight module.

		url: "",
		range:null,
		style:"",
		listType:"1",
		lang:"",

		// Note: If more control over formatting is required, the order list items can be replaced
		// with a table implementation instead... exercise is left for those that need it...
		templateString:
			'<div class="formatted" style="${style}">'+
				'<div class="titleBar"></div>'+
				'<ol type="${listType}" dojoAttachPoint="codeList" class="numbers"></ol>' +
				'<div style="display:none" dojoAttachPoint="containerNode"></div>' +
			'</div>',
	
		postCreate: function(){
			this.inherited(arguments);
			if(this.url){
				xhr(this.url, {}).then(lang.hitch(this,"_populate"), lang.hitch(this,"_loadError"));
				// load from a url
				/*dojo.xhrGet({
					url: this.url,
					// then poopulate:
					load: lang.hitch(this,"_populate"),
					error: lang.hitch(this,"_loadError")
				});*/
			}else{
				// or just populate from our internal content
				this._populate(this.containerNode.innerHTML);
			}
		},
	
		_populate: function(data){
			// put the content in a common node
			this.containerNode.innerHTML =
				"<pre><code class='" + this.lang + "'>" +
					data.replace(/\</g,"&lt;") +
				"</code></pre>";
			// highlight it
			query("pre > code",this.containerNode).forEach(dojox.highlight.init);
			// FIXME: in ie7, the innerHTML in a real <pre> isn't split by \n's ?
			// split the content into lines
			var lines = this.containerNode.innerHTML.split("\n");
			array.forEach(lines,function(line,i){
				// setup all the lines of the content as <li>'s
				var li = domConstruct.create('li');
				// add some style sugar:
				domClass.add(li, (i % 2 !== 0 ? "even" : "odd"));
				line = "<pre><code>" + line + "&nbsp;</code></pre>";
				line = line.replace(/\t/g," &nbsp; ");
				li.innerHTML = line;
				this.codeList.appendChild(li);
			},this);
			// save our data
			this._lines = query("li",this.codeList);
			this._updateView();
		},
	
		// FIXME: user _setRangeAttr pattern? so you can code.set('range', [1, 100]);
		setRange: function(/* Array */range){
			// summary:
			//		update the view to a new passed range
			if(range instanceof Array){
				this.range = range;
				this._updateView();
			}
		},
	
		_updateView: function(){
			// summary:
			//		set the list to the current range
			if(this.range){
				var r = this.range;
				this._lines
					// hide them all
					.style({ display:"none" })
					.filter(function(n,i){
						// remove nodes out of range
						return (i + 1 >= r[0] && i + 1 <= r[1]);
					})
					// set them visible again
					.style({ display:"" })
				;
				// set the "start" attribute on the OL so numbering works
				domAttr.set(this.codeList,"start",r[0]);
			}
		},
	
		_loadError: function(error){
			// summary:
			//		a generic error handler for the url=""
			console.warn("loading: ", this.url, " FAILED", error);
		}

	});

});