1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
/*
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
Available via Academic Free License >= 2.1 OR the modified BSD license.
see: http://dojotoolkit.org/license for details
*/
if(!dojo._hasResource["dojox.highlight.widget.Code"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.highlight.widget.Code"] = true;
dojo.provide("dojox.highlight.widget.Code");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.highlight");
// A simple source code formatting widget that adds line numbering, alternating line colors
// and line range support on top of dojox.highlight module.
dojo.declare("highlight.Code",[dijit._Widget, dijit._Templated],{
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... Excercise 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){
// load from a url
dojo.xhrGet({
url: this.url,
// then poopulate:
load: dojo.hitch(this,"_populate"),
error: dojo.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,"<") +
"</code></pre>";
// highlight it
dojo.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");
dojo.forEach(lines,function(line,i){
// setup all the lines of the content as <li>'s
var li = dojo.doc.createElement('li');
// add some style sugar:
dojo.addClass(li, (i % 2 !== 0 ? "even" : "odd"));
line = "<pre><code>" + line + " </code></pre>";
line = line.replace(/\t/g," ");
li.innerHTML = line;
this.codeList.appendChild(li);
},this);
// save our data
this._lines = dojo.query("li",this.codeList);
this._updateView();
},
setRange: function(/* Array */range){
// summary: update the view to a new passed range
if(dojo.isArray(range)){
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
dojo.attr(this.codeList,"start",r[0]);
}
},
_loadError: function(error){
// summary: a generic error handler for the url=""
console.warn("loading: ", this.url, " FAILED", error);
}
});
}
|
