← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/console/console-yui-config.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/console/console-yui-config.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: YUI Configuration to Filter Log Messages</title>
 
6
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
 
7
    <link rel="stylesheet" href="../assets/css/main.css">
 
8
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
 
9
    <script src="../../build/yui/yui-min.js"></script>
 
10
</head>
 
11
<body>
 
12
 
 
13
<div id="doc">
 
14
    <h1>Example: YUI Configuration to Filter Log Messages</h1>
 
15
 
 
16
    
 
17
 
 
18
    <div class="yui3-g">
 
19
        <div id="main" class="yui3-u">
 
20
            <div class="content"><style scoped>
 
21
#console {
 
22
    float: left;
 
23
}
 
24
#demo .yui3-console .yui3-console-title {
 
25
    border: 0 none;
 
26
    color: #000;
 
27
    font-size: 13px;
 
28
    font-weight: bold;
 
29
    margin: 0;
 
30
    text-transform: none;
 
31
}
 
32
 
 
33
#demo .yui3-console .yui3-console-entry-meta {
 
34
    margin: 0;
 
35
}
 
36
 
 
37
.filter-controls p label {
 
38
    display: block;
 
39
    margin: .25em 0;
 
40
}
 
41
#demo input {
 
42
    vertical-align: middle;
 
43
}
 
44
 
 
45
.form {
 
46
    clear: left;
 
47
    padding: 1em 0;
 
48
}
 
49
 
 
50
.form span {
 
51
    padding-left: 3em;
 
52
}
 
53
 
 
54
#msg {
 
55
    width: 50%;
 
56
}
 
57
 
 
58
.filter-controls {
 
59
    width: 180px;
 
60
    margin-left: 1em;
 
61
    float: left;
 
62
}
 
63
 
 
64
#preview {
 
65
    background: #eee;
 
66
    border: 1px solid #999;
 
67
    margin: 1em 0;
 
68
    overflow: auto;
 
69
    padding: 1em;
 
70
    width: 480px;
 
71
}
 
72
</style>
 
73
 
 
74
 
 
75
<div class="intro">
 
76
    <p>This example illustrates how to configure your YUI instance to ignore certain log messages to aid in reducing the signal-to-noise ratio when debugging.</p>
 
77
 
 
78
    <p>Log messages filtered out from the YUI config are permanently ignored.  If you want to be able to temporarily hide and reshow messages, use the <a href="../console-filters/">ConsoleFilters plugin</a>.  It is not uncommon to set up <code>logInclude</code> or <code>logExclude</code> in the YUI configuration and use the ConsoleFilters plugin.</p>
 
79
 
 
80
    <p>Log messages can be ignored based on the source (e.g. <code>event</code> or <code>attribute</code>) or based on their log level (info, warn, error).</p>
 
81
 
 
82
</div>
 
83
 
 
84
<div class="example yui3-skin-sam">
 
85
<div id="demo" class="yui3-skin-sam">
 
86
    <div id="console"></div>
 
87
 
 
88
    <div class="filter-controls">
 
89
        <h4>Source filter</h4>
 
90
        <p>
 
91
            <select id="incexc">
 
92
                <option value="logExclude" selected="selected">Exclude</option>
 
93
                <option value="logInclude">Include</option>
 
94
            </select>
 
95
            <label for="filter_a"><input type="checkbox" name="src_filter" value="sourceA" id="filter_a"> <code>sourceA</code></label>
 
96
            <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB</code></label>
 
97
            <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC</code></label>
 
98
        </p>
 
99
    </div>
 
100
 
 
101
    <div class="filter-controls">
 
102
        <h4>Log level</h4>
 
103
        <p>
 
104
            <label for="lvl_info">
 
105
                <input type="radio" name="log_level" id="lvl_info" value="info" checked="checked">
 
106
                info
 
107
            </label>
 
108
            <label for="lvl_warn">
 
109
                <input type="radio" name="log_level" id="lvl_warn" value="warn">
 
110
                warn
 
111
            </label>
 
112
            <label for="lvl_error">
 
113
                <input type="radio" name="log_level" id="lvl_error" value="error">
 
114
                error
 
115
            </label>
 
116
        </p>
 
117
    </div>
 
118
 
 
119
    <div class="form">
 
120
        <h4>Log a message</h4>
 
121
        <div>
 
122
            <input type="text" id="msg" value="This is a log message!">
 
123
            <button type="button" id="log">log message</button>
 
124
 
 
125
            <p>
 
126
                Source:
 
127
                <label for="msg_src_a">
 
128
                    <input type="radio" name="msg_src" id="msg_src_a" value="sourceA" checked="checked">
 
129
                    A
 
130
                </label>
 
131
                <label for="msg_src_b">
 
132
                    <input type="radio" name="msg_src" id="msg_src_b" value="sourceB">
 
133
                    B
 
134
                </label>
 
135
                <label for="msg_src_c">
 
136
                    <input type="radio" name="msg_src" id="msg_src_c" value="sourceC">
 
137
                    C
 
138
                </label>
 
139
 
 
140
                <span>Category:</span>
 
141
                <label for="msg_info">
 
142
                    <input type="radio" name="msg_cat" id="msg_info" value="info" checked="checked">
 
143
                    info
 
144
                </label>
 
145
                <label for="msg_warn">
 
146
                    <input type="radio" name="msg_cat" id="msg_warn" value="warn">
 
147
                    warn
 
148
                </label>
 
149
                <label for="msg_error">
 
150
                    <input type="radio" name="msg_cat" id="msg_error" value="error">
 
151
                    error
 
152
                </label>
 
153
            </p>
 
154
        </div>
 
155
 
 
156
        <h4>Code preview</h4>
 
157
        <pre id="preview">// YUI instance configuration
 
158
var Y = YUI({
 
159
    "logLevel": "info",
 
160
    "logExclude": {
 
161
        "sourceC": true
 
162
    }
 
163
});
 
164
 
 
165
// Log statement
 
166
Y.log(&quot;This is a log message!&quot;, &quot;info&quot;, &quot;sourceA&quot;);</pre>
 
167
    </div>
 
168
</div>
 
169
 
 
170
<script type="text/javascript">
 
171
YUI().use("console", "selector-css3", "json-stringify", function (Y) {
 
172
 
 
173
// Add the default filtering of sourceC messages
 
174
Y.config.logExclude = {
 
175
    sourceC : true
 
176
};
 
177
 
 
178
// Create and render the Console
 
179
var yconsole = new Y.Console({
 
180
    boundingBox: "#console",
 
181
    style: "block"
 
182
}).render();
 
183
 
 
184
 
 
185
// Set up event listeners
 
186
// Source include or exclude select
 
187
Y.on("change", function () {
 
188
    if (this.get("value") === "logInclude") {
 
189
        Y.config.logInclude = Y.config.logExclude;
 
190
        delete Y.config.logExclude;
 
191
    } else {
 
192
        Y.config.logExclude = Y.config.logInclude;
 
193
        delete Y.config.logInclude;
 
194
    }
 
195
    updatePreview();
 
196
}, "#incexc");
 
197
 
 
198
// delegate all checkbox and radio group clicks via a single event subscriber
 
199
// routing to the appropriate function based on the input name
 
200
var clickHandlers = {
 
201
    src_filter : updateSourceFilters,
 
202
    log_level  : updateLogLevel,
 
203
    msg_src    : updatePreview,
 
204
    msg_cat    : updatePreview
 
205
};
 
206
 
 
207
Y.delegate("click", function (e) {
 
208
    var input   = e.currentTarget,
 
209
        handler = clickHandlers[ input.get("name") ];
 
210
 
 
211
    if (handler) {
 
212
        handler(input.get("value"), input.get("checked"));
 
213
    }
 
214
 
 
215
}, "#demo", "input[name]");
 
216
 
 
217
// Log message input and radio groups
 
218
Y.on("keyup", updatePreview, "#msg");
 
219
 
 
220
// Log message button
 
221
Y.on("click", function (e) {
 
222
    var msg = Y.one("#msg").get("value"),
 
223
        cat = Y.one("#demo input[name=msg_cat]:checked").get("value"),
 
224
        src = Y.one("#demo input[name=msg_src]:checked").get("value");
 
225
 
 
226
    Y.log(msg,cat,src);
 
227
}, "#log");
 
228
 
 
229
// Support functions
 
230
function updateSourceFilters(source, checked) {
 
231
    var disposition = Y.one("#incexc").get("value"),
 
232
        cfg = Y.config[disposition]; // Y.config.logInclude or logExclude
 
233
 
 
234
    if (checked) {
 
235
        if (!cfg) {
 
236
            cfg = Y.config[disposition] = {};
 
237
        }
 
238
        cfg[source] = true;
 
239
    } else {
 
240
        delete cfg[source];
 
241
        if (!Y.Object.size(cfg)) {
 
242
            delete Y.config[disposition];
 
243
        }
 
244
    }
 
245
 
 
246
    updatePreview();
 
247
}
 
248
 
 
249
function updateLogLevel(level, checked) {
 
250
    if (checked) {
 
251
        Y.config.logLevel = level;
 
252
        yconsole.set("logLevel", level);
 
253
        updatePreview();
 
254
    }
 
255
}
 
256
 
 
257
function updatePreview() {
 
258
    var filters   = Y.all("#demo input[name=src_filter]:checked"),
 
259
        cfg = {
 
260
            logLevel: Y.one("#demo input[name=log_level]:checked").get("value")
 
261
        };
 
262
 
 
263
    if (filters.size()) {
 
264
        cfg[Y.one("#incexc").get("value")] = Y.Array.hash(filters.get("value"));
 
265
    }
 
266
 
 
267
    Y.one("#preview").set("text",Y.substitute(
 
268
        "// YUI instance configuration\n" +
 
269
        "var Y = YUI({cfg});\n\n" +
 
270
        "// Log statement\n" +
 
271
        'Y.log("{msg}", "{lvl}", "{src}");',
 
272
        {
 
273
            cfg: Y.JSON.stringify(cfg, null, 4),
 
274
            msg: Y.one("#msg").get("value"),
 
275
            lvl: Y.one("#demo input[name=msg_cat]:checked").get("value"),
 
276
            src: Y.one("#demo input[name=msg_src]:checked").get("value")
 
277
        }));
 
278
}
 
279
 
 
280
});
 
281
</script>
 
282
 
 
283
</div>
 
284
 
 
285
<h3>Setting up filters in the YUI configuration</h3>
 
286
<p>The configuration object passed to the YUI constructor supports a few settings that can help manage Console output while debugging.  These configuration options are <code>logExclude</code>, <code>logInclude</code>, <code>logLevel</code>, <code>filter</code>, and <code>filters</code>.</p>
 
287
 
 
288
<p>This example will show the use of the <code>logInclude</code>, <code>logExclude</code>, and <code>logLevel</code> configurations.</p>
 
289
 
 
290
<p>An example configuration might look like this:</p>
 
291
 
 
292
<pre class="code prettyprint">YUI({
 
293
    filter : &#x27;debug&#x27;, &#x2F;&#x2F; request -debug versions of modules for log statements
 
294
    logExclude : {
 
295
        event : true,     &#x2F;&#x2F; Don&#x27;t broadcast log messages from the event module
 
296
        attribute : true, &#x2F;&#x2F; or the attribute module
 
297
        widget : true     &#x2F;&#x2F; or the widget module
 
298
    },
 
299
    logLevel : &#x27;error&#x27;,       &#x2F;&#x2F; Show only errors in the Console
 
300
    useBrowserConsole : false &#x2F;&#x2F; Don&#x27;t use the browser&#x27;s native console
 
301
}).use(&#x27;overlay&#x27;,&#x27;anim&#x27;,&#x27;console&#x27;, function (Y) {
 
302
 
 
303
&#x2F;* Console instances will default to logLevel = &quot;info&quot; *&#x2F;
 
304
 
 
305
});</pre>
 
306
 
 
307
 
 
308
<p><code>logExclude</code> and <code>logInclude</code> prevent the logging subsystem from broadcasting filtered log messages.  <code>logLevel</code>, on the other hand is used by Console instances to filter messages received from the subsystem.</p>
 
309
 
 
310
<p>Updating <code>Y.config.logExclude</code> or <code>Y.config.logInclude</code> at runtime will immediately change the subsystem filtering, but will not recover messages previously sent from that source.</p>
 
311
 
 
312
<pre class="code prettyprint">YUI({
 
313
    logExclude : {
 
314
        event : true
 
315
    }
 
316
}).use(&#x27;console&#x27;, function (Y) {
 
317
 
 
318
&#x2F;* In here, Y.config refers to the config object passed to the constructor *&#x2F;
 
319
 
 
320
&#x2F;&#x2F; Stop broadcasting log messages from the attribute module
 
321
Y.config.logExclude.attribute = true;
 
322
 
 
323
&#x2F;&#x2F; Start broadcasting log messages from the event module again
 
324
delete Y.config.logExclude.event;
 
325
 
 
326
});</pre>
 
327
 
 
328
 
 
329
<p>When a Console is instantiated, barring explicit <code>logLevel</code> attribute configuration, the <code>logLevel</code> will be adopted from the YUI instance's configured <code>logLevel</code>, or <code>Y.Console.LOG_LEVEL_INFO</code> (&quot;info&quot;) as a fallback.  Unlike <code>logExclude</code>, changing the value in the YUI configuration will only affect instantiated Consoles from that point on.  Additionally, you can manually override the <code>logLevel</code> a Console instance will display by updating its <code>logLevel</code> attribute.</p>
 
330
 
 
331
<pre class="code prettyprint">YUI({ logLevel : &quot;warn&quot; }).use(&#x27;console&#x27;, function (Y) {
 
332
 
 
333
var yconsole_1 = new Y.Console(); &#x2F;&#x2F; logLevel == &quot;warn&quot;
 
334
 
 
335
var yconsole_2 = new Y.Console({
 
336
    logLevel : &quot;info&quot; &#x2F;&#x2F; override at construction
 
337
});
 
338
 
 
339
&#x2F;&#x2F; This will not affect yconsole_1 or yconsole_2
 
340
Y.config.logLevel = &quot;error&quot;;
 
341
 
 
342
var yconsole_3 = new Y.Console(); &#x2F;&#x2F; logLevel == &quot;error&quot;
 
343
 
 
344
yconsole_1.set(&quot;logLevel&quot;, &quot;info&quot;); &#x2F;&#x2F; update this instance
 
345
 
 
346
});</pre>
 
347
 
 
348
 
 
349
<p>The interactive portion of this example illustrates the effect of various filter settings against logged messages.  In a real application, it is most likely that the logging configuration won't be changed at runtime but set once in the YUI configuration at construction.</p>
 
350
 
 
351
<p>The most relevant portion of the <a href="#full_code_listing">code for the demo above</a> is the updating of the YUI config and Console attribute.</p>
 
352
 
 
353
<pre class="code prettyprint">&#x2F;&#x2F; Create and render the Console
 
354
var yconsole = new Y.Console({
 
355
    boundingBox: &#x27;#console&#x27;, &#x2F;&#x2F; anchored to the page for the demo
 
356
    style: &quot;block&quot;
 
357
}).render();
 
358
 
 
359
...
 
360
 
 
361
&#x2F;&#x2F; Source include or exclude select
 
362
Y.on(&quot;change&quot;, function () {
 
363
    if (this.get(&quot;value&quot;) === &quot;logInclude&quot;) {
 
364
        Y.config.logInclude = Y.config.logExclude;
 
365
        delete Y.config.logExclude;
 
366
    } else {
 
367
        Y.config.logExclude = Y.config.logInclude;
 
368
        delete Y.config.logInclude;
 
369
    }
 
370
    updatePreview();
 
371
}, &quot;#incexc&quot;);
 
372
 
 
373
&#x2F;&#x2F; These functions are called from a delegated event handler.
 
374
&#x2F;&#x2F; See the Full Code Listing for how they are called.
 
375
function updateSourceFilters(source, checked) {
 
376
    var disposition = Y.one(&quot;#incexc&quot;).get(&quot;value&quot;),
 
377
        cfg = Y.config[disposition]; &#x2F;&#x2F; Y.config.logInclude or logExclude
 
378
 
 
379
    if (checked) {
 
380
        if (!cfg) {
 
381
            cfg = Y.config[disposition] = {};
 
382
        }
 
383
        cfg[source] = true; &#x2F;&#x2F; e.g. Y.config.logInclude.sourceA = true;
 
384
    } else {
 
385
        delete cfg[source];
 
386
 
 
387
        if (!Y.Object.size(cfg)) {
 
388
            delete Y.config[disposition];
 
389
        }
 
390
    }
 
391
 
 
392
    updatePreview();
 
393
}
 
394
 
 
395
function updateLogLevel(level, checked) {
 
396
    if (checked) {
 
397
        Y.config.logLevel = level;
 
398
        yconsole.set(&quot;logLevel&quot;, level);
 
399
        updatePreview();
 
400
    }
 
401
}</pre>
 
402
 
 
403
 
 
404
<h3 id="full_code_listing">Full Code Listing</h3>
 
405
 
 
406
<h4>Markup</h4>
 
407
 
 
408
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
 
409
    &lt;div id=&quot;console&quot;&gt;&lt;&#x2F;div&gt;
 
410
 
 
411
    &lt;div class=&quot;filter-controls&quot;&gt;
 
412
        &lt;h4&gt;Source filter&lt;&#x2F;h4&gt;
 
413
        &lt;p&gt;
 
414
            &lt;select id=&quot;incexc&quot;&gt;
 
415
                &lt;option value=&quot;logExclude&quot; selected=&quot;selected&quot;&gt;Exclude&lt;&#x2F;option&gt;
 
416
                &lt;option value=&quot;logInclude&quot;&gt;Include&lt;&#x2F;option&gt;
 
417
            &lt;&#x2F;select&gt;
 
418
            &lt;label for=&quot;filter_a&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;src_filter&quot; value=&quot;sourceA&quot; id=&quot;filter_a&quot;&gt; &lt;code&gt;sourceA&lt;&#x2F;code&gt;&lt;&#x2F;label&gt;
 
419
            &lt;label for=&quot;filter_b&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;src_filter&quot; value=&quot;sourceB&quot; id=&quot;filter_b&quot;&gt; &lt;code&gt;sourceB&lt;&#x2F;code&gt;&lt;&#x2F;label&gt;
 
420
            &lt;label for=&quot;filter_c&quot;&gt;&lt;input type=&quot;checkbox&quot; name=&quot;src_filter&quot; value=&quot;sourceC&quot; id=&quot;filter_c&quot; checked=&quot;checked&quot;&gt; &lt;code&gt;sourceC&lt;&#x2F;code&gt;&lt;&#x2F;label&gt;
 
421
        &lt;&#x2F;p&gt;
 
422
    &lt;&#x2F;div&gt;
 
423
 
 
424
    &lt;div class=&quot;filter-controls&quot;&gt;
 
425
        &lt;h4&gt;Log level&lt;&#x2F;h4&gt;
 
426
        &lt;p&gt;
 
427
            &lt;label for=&quot;lvl_info&quot;&gt;
 
428
                &lt;input type=&quot;radio&quot; name=&quot;log_level&quot; id=&quot;lvl_info&quot; value=&quot;info&quot; checked=&quot;checked&quot;&gt;
 
429
                info
 
430
            &lt;&#x2F;label&gt;
 
431
            &lt;label for=&quot;lvl_warn&quot;&gt;
 
432
                &lt;input type=&quot;radio&quot; name=&quot;log_level&quot; id=&quot;lvl_warn&quot; value=&quot;warn&quot;&gt;
 
433
                warn
 
434
            &lt;&#x2F;label&gt;
 
435
            &lt;label for=&quot;lvl_error&quot;&gt;
 
436
                &lt;input type=&quot;radio&quot; name=&quot;log_level&quot; id=&quot;lvl_error&quot; value=&quot;error&quot;&gt;
 
437
                error
 
438
            &lt;&#x2F;label&gt;
 
439
        &lt;&#x2F;p&gt;
 
440
    &lt;&#x2F;div&gt;
 
441
 
 
442
    &lt;div class=&quot;form&quot;&gt;
 
443
        &lt;h4&gt;Log a message&lt;&#x2F;h4&gt;
 
444
        &lt;div&gt;
 
445
            &lt;input type=&quot;text&quot; id=&quot;msg&quot; value=&quot;This is a log message!&quot;&gt;
 
446
            &lt;button type=&quot;button&quot; id=&quot;log&quot;&gt;log message&lt;&#x2F;button&gt;
 
447
 
 
448
            &lt;p&gt;
 
449
                Source:
 
450
                &lt;label for=&quot;msg_src_a&quot;&gt;
 
451
                    &lt;input type=&quot;radio&quot; name=&quot;msg_src&quot; id=&quot;msg_src_a&quot; value=&quot;sourceA&quot; checked=&quot;checked&quot;&gt;
 
452
                    A
 
453
                &lt;&#x2F;label&gt;
 
454
                &lt;label for=&quot;msg_src_b&quot;&gt;
 
455
                    &lt;input type=&quot;radio&quot; name=&quot;msg_src&quot; id=&quot;msg_src_b&quot; value=&quot;sourceB&quot;&gt;
 
456
                    B
 
457
                &lt;&#x2F;label&gt;
 
458
                &lt;label for=&quot;msg_src_c&quot;&gt;
 
459
                    &lt;input type=&quot;radio&quot; name=&quot;msg_src&quot; id=&quot;msg_src_c&quot; value=&quot;sourceC&quot;&gt;
 
460
                    C
 
461
                &lt;&#x2F;label&gt;
 
462
 
 
463
                &lt;span&gt;Category:&lt;&#x2F;span&gt;
 
464
                &lt;label for=&quot;msg_info&quot;&gt;
 
465
                    &lt;input type=&quot;radio&quot; name=&quot;msg_cat&quot; id=&quot;msg_info&quot; value=&quot;info&quot; checked=&quot;checked&quot;&gt;
 
466
                    info
 
467
                &lt;&#x2F;label&gt;
 
468
                &lt;label for=&quot;msg_warn&quot;&gt;
 
469
                    &lt;input type=&quot;radio&quot; name=&quot;msg_cat&quot; id=&quot;msg_warn&quot; value=&quot;warn&quot;&gt;
 
470
                    warn
 
471
                &lt;&#x2F;label&gt;
 
472
                &lt;label for=&quot;msg_error&quot;&gt;
 
473
                    &lt;input type=&quot;radio&quot; name=&quot;msg_cat&quot; id=&quot;msg_error&quot; value=&quot;error&quot;&gt;
 
474
                    error
 
475
                &lt;&#x2F;label&gt;
 
476
            &lt;&#x2F;p&gt;
 
477
        &lt;&#x2F;div&gt;
 
478
 
 
479
        &lt;h4&gt;Code preview&lt;&#x2F;h4&gt;
 
480
        &lt;pre id=&quot;preview&quot;&gt;&#x2F;&#x2F; YUI instance configuration
 
481
var Y = YUI({
 
482
    &quot;logLevel&quot;: &quot;info&quot;,
 
483
    &quot;logExclude&quot;: {
 
484
        &quot;sourceC&quot;: true
 
485
    }
 
486
});
 
487
 
 
488
&#x2F;&#x2F; Log statement
 
489
Y.log(&amp;quot;This is a log message!&amp;quot;, &amp;quot;info&amp;quot;, &amp;quot;sourceA&amp;quot;);&lt;&#x2F;pre&gt;
 
490
    &lt;&#x2F;div&gt;
 
491
&lt;&#x2F;div&gt;</pre>
 
492
 
 
493
 
 
494
<h4>JavaScript</h4>
 
495
 
 
496
<pre class="code prettyprint">&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
 
497
YUI().use(&quot;console&quot;, &quot;selector-css3&quot;, &quot;json-stringify&quot;, function (Y) {
 
498
 
 
499
&#x2F;&#x2F; Add the default filtering of sourceC messages
 
500
Y.config.logExclude = {
 
501
    sourceC : true
 
502
};
 
503
 
 
504
&#x2F;&#x2F; Create and render the Console
 
505
var yconsole = new Y.Console({
 
506
    boundingBox: &quot;#console&quot;,
 
507
    style: &quot;block&quot;
 
508
}).render();
 
509
 
 
510
 
 
511
&#x2F;&#x2F; Set up event listeners
 
512
&#x2F;&#x2F; Source include or exclude select
 
513
Y.on(&quot;change&quot;, function () {
 
514
    if (this.get(&quot;value&quot;) === &quot;logInclude&quot;) {
 
515
        Y.config.logInclude = Y.config.logExclude;
 
516
        delete Y.config.logExclude;
 
517
    } else {
 
518
        Y.config.logExclude = Y.config.logInclude;
 
519
        delete Y.config.logInclude;
 
520
    }
 
521
    updatePreview();
 
522
}, &quot;#incexc&quot;);
 
523
 
 
524
&#x2F;&#x2F; delegate all checkbox and radio group clicks via a single event subscriber
 
525
&#x2F;&#x2F; routing to the appropriate function based on the input name
 
526
var clickHandlers = {
 
527
    src_filter : updateSourceFilters,
 
528
    log_level  : updateLogLevel,
 
529
    msg_src    : updatePreview,
 
530
    msg_cat    : updatePreview
 
531
};
 
532
 
 
533
Y.delegate(&quot;click&quot;, function (e) {
 
534
    var input   = e.currentTarget,
 
535
        handler = clickHandlers[ input.get(&quot;name&quot;) ];
 
536
 
 
537
    if (handler) {
 
538
        handler(input.get(&quot;value&quot;), input.get(&quot;checked&quot;));
 
539
    }
 
540
 
 
541
}, &quot;#demo&quot;, &quot;input[name]&quot;);
 
542
 
 
543
&#x2F;&#x2F; Log message input and radio groups
 
544
Y.on(&quot;keyup&quot;, updatePreview, &quot;#msg&quot;);
 
545
 
 
546
&#x2F;&#x2F; Log message button
 
547
Y.on(&quot;click&quot;, function (e) {
 
548
    var msg = Y.one(&quot;#msg&quot;).get(&quot;value&quot;),
 
549
        cat = Y.one(&quot;#demo input[name=msg_cat]:checked&quot;).get(&quot;value&quot;),
 
550
        src = Y.one(&quot;#demo input[name=msg_src]:checked&quot;).get(&quot;value&quot;);
 
551
 
 
552
    Y.log(msg,cat,src);
 
553
}, &quot;#log&quot;);
 
554
 
 
555
&#x2F;&#x2F; Support functions
 
556
function updateSourceFilters(source, checked) {
 
557
    var disposition = Y.one(&quot;#incexc&quot;).get(&quot;value&quot;),
 
558
        cfg = Y.config[disposition]; &#x2F;&#x2F; Y.config.logInclude or logExclude
 
559
 
 
560
    if (checked) {
 
561
        if (!cfg) {
 
562
            cfg = Y.config[disposition] = {};
 
563
        }
 
564
        cfg[source] = true;
 
565
    } else {
 
566
        delete cfg[source];
 
567
        if (!Y.Object.size(cfg)) {
 
568
            delete Y.config[disposition];
 
569
        }
 
570
    }
 
571
 
 
572
    updatePreview();
 
573
}
 
574
 
 
575
function updateLogLevel(level, checked) {
 
576
    if (checked) {
 
577
        Y.config.logLevel = level;
 
578
        yconsole.set(&quot;logLevel&quot;, level);
 
579
        updatePreview();
 
580
    }
 
581
}
 
582
 
 
583
function updatePreview() {
 
584
    var filters   = Y.all(&quot;#demo input[name=src_filter]:checked&quot;),
 
585
        cfg = {
 
586
            logLevel: Y.one(&quot;#demo input[name=log_level]:checked&quot;).get(&quot;value&quot;)
 
587
        };
 
588
 
 
589
    if (filters.size()) {
 
590
        cfg[Y.one(&quot;#incexc&quot;).get(&quot;value&quot;)] = Y.Array.hash(filters.get(&quot;value&quot;));
 
591
    }
 
592
 
 
593
    Y.one(&quot;#preview&quot;).set(&quot;text&quot;,Y.substitute(
 
594
        &quot;&#x2F;&#x2F; YUI instance configuration\n&quot; +
 
595
        &quot;var Y = YUI({cfg});\n\n&quot; +
 
596
        &quot;&#x2F;&#x2F; Log statement\n&quot; +
 
597
        &#x27;Y.log(&quot;{msg}&quot;, &quot;{lvl}&quot;, &quot;{src}&quot;);&#x27;,
 
598
        {
 
599
            cfg: Y.JSON.stringify(cfg, null, 4),
 
600
            msg: Y.one(&quot;#msg&quot;).get(&quot;value&quot;),
 
601
            lvl: Y.one(&quot;#demo input[name=msg_cat]:checked&quot;).get(&quot;value&quot;),
 
602
            src: Y.one(&quot;#demo input[name=msg_src]:checked&quot;).get(&quot;value&quot;)
 
603
        }));
 
604
}
 
605
 
 
606
});
 
607
&lt;&#x2F;script&gt;</pre>
 
608
 
 
609
 
 
610
<h4>CSS</h4>
 
611
 
 
612
<pre class="code prettyprint">&lt;style scoped&gt;
 
613
#console {
 
614
    float: left;
 
615
}
 
616
#demo .yui3-console .yui3-console-title {
 
617
    border: 0 none;
 
618
    color: #000;
 
619
    font-size: 13px;
 
620
    font-weight: bold;
 
621
    margin: 0;
 
622
    text-transform: none;
 
623
}
 
624
 
 
625
#demo .yui3-console .yui3-console-entry-meta {
 
626
    margin: 0;
 
627
}
 
628
 
 
629
.filter-controls p label {
 
630
    display: block;
 
631
    margin: .25em 0;
 
632
}
 
633
#demo input {
 
634
    vertical-align: middle;
 
635
}
 
636
 
 
637
.form {
 
638
    clear: left;
 
639
    padding: 1em 0;
 
640
}
 
641
 
 
642
.form span {
 
643
    padding-left: 3em;
 
644
}
 
645
 
 
646
#msg {
 
647
    width: 50%;
 
648
}
 
649
 
 
650
.filter-controls {
 
651
    width: 180px;
 
652
    margin-left: 1em;
 
653
    float: left;
 
654
}
 
655
 
 
656
#preview {
 
657
    background: #eee;
 
658
    border: 1px solid #999;
 
659
    margin: 1em 0;
 
660
    overflow: auto;
 
661
    padding: 1em;
 
662
    width: 480px;
 
663
}
 
664
&lt;&#x2F;style&gt;</pre>
 
665
 
 
666
 
 
667
 
 
668
</div>
 
669
        </div>
 
670
 
 
671
        <div id="sidebar" class="yui3-u">
 
672
            
 
673
 
 
674
            
 
675
                <div class="sidebox">
 
676
                    <div class="hd">
 
677
                        <h2 class="no-toc">Examples</h2>
 
678
                    </div>
 
679
 
 
680
                    <div class="bd">
 
681
                        <ul class="examples">
 
682
                            
 
683
                                
 
684
                                    <li data-description="The basics of setting up a Console">
 
685
                                        <a href="console-basic.html">Creating a Console for Debugging</a>
 
686
                                    </li>
 
687
                                
 
688
                            
 
689
                                
 
690
                                    <li data-description="Using your YUI instance configuration to filter which messages are reported in the Console">
 
691
                                        <a href="console-yui-config.html">YUI Configuration to Filter Log Messages</a>
 
692
                                    </li>
 
693
                                
 
694
                            
 
695
                                
 
696
                                    <li data-description="Using the Console&#x27;s logSource attribute to consolidate log messages from multiple YUI instances into one Console">
 
697
                                        <a href="console-global.html">Creating a Universal Console</a>
 
698
                                    </li>
 
699
                                
 
700
                            
 
701
                                
 
702
                            
 
703
                        </ul>
 
704
                    </div>
 
705
                </div>
 
706
            
 
707
 
 
708
            
 
709
                <div class="sidebox">
 
710
                    <div class="hd">
 
711
                        <h2 class="no-toc">Examples That Use This Component</h2>
 
712
                    </div>
 
713
 
 
714
                    <div class="bd">
 
715
                        <ul class="examples">
 
716
                            
 
717
                                
 
718
                            
 
719
                                
 
720
                            
 
721
                                
 
722
                            
 
723
                                
 
724
                                    <li data-description="Adding the ConsoleFilters plugin to a Console instance for more granular run time log message filtering">
 
725
                                        <a href="../console-filters/console-filters-intro.html">Using the ConsoleFilters Plugin</a>
 
726
                                    </li>
 
727
                                
 
728
                            
 
729
                        </ul>
 
730
                    </div>
 
731
                </div>
 
732
            
 
733
        </div>
 
734
    </div>
 
735
</div>
 
736
 
 
737
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
738
<script>prettyPrint();</script>
 
739
 
 
740
</body>
 
741
</html>