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: '
'+ '
'+ '
    ' + '
    ' + '
    ', 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 = "
    " +
    					data.replace(/\
    "; // highlight it query("pre > code",this.containerNode).forEach(dojox.highlight.init); // FIXME: in ie7, the innerHTML in a real
     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 
  1. 's var li = domConstruct.create('li'); // add some style sugar: domClass.add(li, (i % 2 !== 0 ? "even" : "odd")); line = "
    " + line + " 
    "; line = line.replace(/\t/g,"   "); 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); } }); });