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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
|
if(!dojo._hasResource["dijit.layout.ContentPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.layout.ContentPane"] = true;
dojo.provide("dijit.layout.ContentPane");
dojo.require("dijit._Widget");
dojo.require("dijit.layout._LayoutWidget");
dojo.require("dojo.parser");
dojo.require("dojo.string");
dojo.requireLocalization("dijit", "loading", null, "zh,pt,da,tr,ru,ROOT,de,sv,ja,he,fi,nb,el,ar,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu");
dojo.declare(
"dijit.layout.ContentPane",
dijit._Widget,
{
// summary:
// A widget that acts as a Container for other widgets, and includes a ajax interface
// description:
// A widget that can be used as a standalone widget
// or as a baseclass for other widgets
// Handles replacement of document fragment using either external uri or javascript
// generated markup or DOM content, instantiating widgets within that content.
// Don't confuse it with an iframe, it only needs/wants document fragments.
// It's useful as a child of LayoutContainer, SplitContainer, or TabContainer.
// But note that those classes can contain any widget as a child.
// example:
// Some quick samples:
// To change the innerHTML use .setContent('<b>new content</b>')
//
// Or you can send it a NodeList, .setContent(dojo.query('div [class=selected]', userSelection))
// please note that the nodes in NodeList will copied, not moved
//
// To do a ajax update use .setHref('url')
//
// href: String
// The href of the content that displays now.
// Set this at construction if you want to load data externally when the
// pane is shown. (Set preload=true to load it immediately.)
// Changing href after creation doesn't have any effect; see setHref();
href: "",
// extractContent: Boolean
// Extract visible content from inside of <body> .... </body>
extractContent: false,
// parseOnLoad: Boolean
// parse content and create the widgets, if any
parseOnLoad: true,
// preventCache: Boolean
// Cache content retreived externally
preventCache: false,
// preload: Boolean
// Force load of data even if pane is hidden.
preload: false,
// refreshOnShow: Boolean
// Refresh (re-download) content when pane goes from hidden to shown
refreshOnShow: false,
// loadingMessage: String
// Message that shows while downloading
loadingMessage: "<span class='dijitContentPaneLoading'>${loadingState}</span>",
// errorMessage: String
// Message that shows if an error occurs
errorMessage: "<span class='dijitContentPaneError'>${errorState}</span>",
// isLoaded: Boolean
// Tells loading status see onLoad|onUnload for event hooks
isLoaded: false,
// class: String
// Class name to apply to ContentPane dom nodes
// TODO: this should be called "baseClass" like in the other widgets
"class": "dijitContentPane",
// doLayout: String/Boolean
// false - don't adjust size of children
// true - looks for the first sizable child widget (ie, having resize() method) and sets it's size to
// however big the ContentPane is (TODO: implement)
// auto - if there is a single sizable child widget (ie, having resize() method), set it's size to
// however big the ContentPane is
doLayout: "auto",
postCreate: function(){
// remove the title attribute so it doesn't show up when i hover
// over a node
this.domNode.title = "";
if(!this.containerNode){
// make getDescendants() work
this.containerNode = this.domNode;
}
if(this.preload){
this._loadCheck();
}
var messages = dojo.i18n.getLocalization("dijit", "loading", this.lang);
this.loadingMessage = dojo.string.substitute(this.loadingMessage, messages);
this.errorMessage = dojo.string.substitute(this.errorMessage, messages);
var curRole = dijit.getWaiRole(this.domNode);
if (!curRole){
dijit.setWaiRole(this.domNode, "group");
}
// for programatically created ContentPane (with <span> tag), need to muck w/CSS
// or it's as though overflow:visible is set
dojo.addClass(this.domNode, this["class"]);
},
startup: function(){
if(this._started){ return; }
if(this.doLayout != "false" && this.doLayout !== false){
this._checkIfSingleChild();
if(this._singleChild){
this._singleChild.startup();
}
}
this._loadCheck();
this.inherited(arguments);
},
_checkIfSingleChild: function(){
// summary:
// Test if we have exactly one widget as a child, and if so assume that we are a container for that widget,
// and should propogate startup() and resize() calls to it.
// TODO: if there are two child widgets (a data store and a TabContainer, for example),
// should still find the TabContainer
var childNodes = dojo.query(">", this.containerNode || this.domNode),
childWidgets = childNodes.filter("[widgetId]");
if(childNodes.length == 1 && childWidgets.length == 1){
this.isContainer = true;
this._singleChild = dijit.byNode(childWidgets[0]);
}else{
delete this.isContainer;
delete this._singleChild;
}
},
refresh: function(){
// summary:
// Force a refresh (re-download) of content, be sure to turn off cache
// we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane
return this._prepareLoad(true);
},
setHref: function(/*String|Uri*/ href){
// summary:
// Reset the (external defined) content of this pane and replace with new url
// Note: It delays the download until widget is shown if preload is false
// href:
// url to the page you want to get, must be within the same domain as your mainpage
this.href = href;
// we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane
return this._prepareLoad();
},
setContent: function(/*String|DomNode|Nodelist*/data){
// summary:
// Replaces old content with data content, include style classes from old content
// data:
// the new Content may be String, DomNode or NodeList
//
// if data is a NodeList (or an array of nodes) nodes are copied
// so you can import nodes from another document implicitly
// clear href so we cant run refresh and clear content
// refresh should only work if we downloaded the content
if(!this._isDownloaded){
this.href = "";
this._onUnloadHandler();
}
this._setContent(data || "");
this._isDownloaded = false; // must be set after _setContent(..), pathadjust in dojox.layout.ContentPane
if(this.parseOnLoad){
this._createSubWidgets();
}
if(this.doLayout != "false" && this.doLayout !== false){
this._checkIfSingleChild();
if(this._singleChild && this._singleChild.resize){
this._singleChild.startup();
this._singleChild.resize(this._contentBox || dojo.contentBox(this.containerNode || this.domNode));
}
}
this._onLoadHandler();
},
cancel: function(){
// summary:
// Cancels a inflight download of content
if(this._xhrDfd && (this._xhrDfd.fired == -1)){
this._xhrDfd.cancel();
}
delete this._xhrDfd; // garbage collect
},
destroy: function(){
// if we have multiple controllers destroying us, bail after the first
if(this._beingDestroyed){
return;
}
// make sure we call onUnload
this._onUnloadHandler();
this._beingDestroyed = true;
this.inherited("destroy",arguments);
},
resize: function(size){
dojo.marginBox(this.domNode, size);
// Compute content box size in case we [later] need to size child
// If either height or width wasn't specified by the user, then query node for it.
// But note that setting the margin box and then immediately querying dimensions may return
// inaccurate results, so try not to depend on it.
var node = this.containerNode || this.domNode,
mb = dojo.mixin(dojo.marginBox(node), size||{});
this._contentBox = dijit.layout.marginBox2contentBox(node, mb);
// If we have a single widget child then size it to fit snugly within my borders
if(this._singleChild && this._singleChild.resize){
this._singleChild.resize(this._contentBox);
}
},
_prepareLoad: function(forceLoad){
// sets up for a xhrLoad, load is deferred until widget onShow
// cancels a inflight download
this.cancel();
this.isLoaded = false;
this._loadCheck(forceLoad);
},
_isShown: function(){
// summary: returns true if the content is currently shown
if("open" in this){
return this.open; // for TitlePane, etc.
}else{
var node = this.domNode;
return (node.style.display != 'none') && (node.style.visibility != 'hidden');
}
},
_loadCheck: function(/*Boolean*/ forceLoad){
// call this when you change onShow (onSelected) status when selected in parent container
// it's used as a trigger for href download when this.domNode.display != 'none'
// sequence:
// if no href -> bail
// forceLoad -> always load
// this.preload -> load when download not in progress, domNode display doesn't matter
// this.refreshOnShow -> load when download in progress bails, domNode display !='none' AND
// this.open !== false (undefined is ok), isLoaded doesn't matter
// else -> load when download not in progress, if this.open !== false (undefined is ok) AND
// domNode display != 'none', isLoaded must be false
var displayState = this._isShown();
if(this.href &&
(forceLoad ||
(this.preload && !this._xhrDfd) ||
(this.refreshOnShow && displayState && !this._xhrDfd) ||
(!this.isLoaded && displayState && !this._xhrDfd)
)
){
this._downloadExternalContent();
}
},
_downloadExternalContent: function(){
this._onUnloadHandler();
// display loading message
this._setContent(
this.onDownloadStart.call(this)
);
var self = this;
var getArgs = {
preventCache: (this.preventCache || this.refreshOnShow),
url: this.href,
handleAs: "text"
};
if(dojo.isObject(this.ioArgs)){
dojo.mixin(getArgs, this.ioArgs);
}
var hand = this._xhrDfd = (this.ioMethod || dojo.xhrGet)(getArgs);
hand.addCallback(function(html){
try{
self.onDownloadEnd.call(self);
self._isDownloaded = true;
self.setContent.call(self, html); // onload event is called from here
}catch(err){
self._onError.call(self, 'Content', err); // onContentError
}
delete self._xhrDfd;
return html;
});
hand.addErrback(function(err){
if(!hand.cancelled){
// show error message in the pane
self._onError.call(self, 'Download', err); // onDownloadError
}
delete self._xhrDfd;
return err;
});
},
_onLoadHandler: function(){
this.isLoaded = true;
try{
this.onLoad.call(this);
}catch(e){
console.error('Error '+this.widgetId+' running custom onLoad code');
}
},
_onUnloadHandler: function(){
this.isLoaded = false;
this.cancel();
try{
this.onUnload.call(this);
}catch(e){
console.error('Error '+this.widgetId+' running custom onUnload code');
}
},
_setContent: function(cont){
this.destroyDescendants();
try{
var node = this.containerNode || this.domNode;
while(node.firstChild){
dojo._destroyElement(node.firstChild);
}
if(typeof cont == "string"){
// dijit.ContentPane does only minimal fixes,
// No pathAdjustments, script retrieval, style clean etc
// some of these should be available in the dojox.layout.ContentPane
if(this.extractContent){
match = cont.match(/<body[^>]*>\s*([\s\S]+)\s*<\/body>/im);
if(match){ cont = match[1]; }
}
node.innerHTML = cont;
}else{
// domNode or NodeList
if(cont.nodeType){ // domNode (htmlNode 1 or textNode 3)
node.appendChild(cont);
}else{// nodelist or array such as dojo.Nodelist
dojo.forEach(cont, function(n){
node.appendChild(n.cloneNode(true));
});
}
}
}catch(e){
// check if a domfault occurs when we are appending this.errorMessage
// like for instance if domNode is a UL and we try append a DIV
var errMess = this.onContentError(e);
try{
node.innerHTML = errMess;
}catch(e){
console.error('Fatal '+this.id+' could not change content due to '+e.message, e);
}
}
},
_onError: function(type, err, consoleText){
// shows user the string that is returned by on[type]Error
// overide on[type]Error and return your own string to customize
var errText = this['on' + type + 'Error'].call(this, err);
if(consoleText){
console.error(consoleText, err);
}else if(errText){// a empty string won't change current content
this._setContent.call(this, errText);
}
},
_createSubWidgets: function(){
// summary: scan my contents and create subwidgets
var rootNode = this.containerNode || this.domNode;
try{
dojo.parser.parse(rootNode, true);
}catch(e){
this._onError('Content', e, "Couldn't create widgets in "+this.id
+(this.href ? " from "+this.href : ""));
}
},
// EVENT's, should be overide-able
onLoad: function(e){
// summary:
// Event hook, is called after everything is loaded and widgetified
},
onUnload: function(e){
// summary:
// Event hook, is called before old content is cleared
},
onDownloadStart: function(){
// summary:
// called before download starts
// the string returned by this function will be the html
// that tells the user we are loading something
// override with your own function if you want to change text
return this.loadingMessage;
},
onContentError: function(/*Error*/ error){
// summary:
// called on DOM faults, require fault etc in content
// default is to display errormessage inside pane
},
onDownloadError: function(/*Error*/ error){
// summary:
// Called when download error occurs, default is to display
// errormessage inside pane. Overide function to change that.
// The string returned by this function will be the html
// that tells the user a error happend
return this.errorMessage;
},
onDownloadEnd: function(){
// summary:
// called when download is finished
}
});
}
|
