Version 3.18.1

APIs

  • Begin typing in the search box above to see results.
Show:

File: console/js/console.js

 /**
 * Console creates a visualization for messages logged through calls to a YUI
 * instance's <code>Y.log( message, category, source )</code> method. The
 * debug versions of YUI modules will include logging statements to offer some
 * insight into the steps executed during that module's operation. Including
 * log statements in your code will cause those messages to also appear in the
 * Console. Use Console to aid in developing your page or application.
 *
 * Entry categories &quot;info&quot;, &quot;warn&quot;, and &quot;error&quot;
 * are also referred to as the log level, and entries are filtered against the
 * configured logLevel.
 *
 * @module console
 */
 var getCN = Y.ClassNameManager.getClassName,
 CHECKED = 'checked',
 CLEAR = 'clear',
 CLICK = 'click',
 COLLAPSED = 'collapsed',
 CONSOLE = 'console',
 CONTENT_BOX = 'contentBox',
 DISABLED = 'disabled',
 ENTRY = 'entry',
 ERROR = 'error',
 HEIGHT = 'height',
 INFO = 'info',
 LAST_TIME = 'lastTime',
 PAUSE = 'pause',
 PAUSED = 'paused',
 RESET = 'reset',
 START_TIME = 'startTime',
 TITLE = 'title',
 WARN = 'warn',
 
 DOT = '.',
 
 C_BUTTON = getCN(CONSOLE,'button'),
 C_CHECKBOX = getCN(CONSOLE,'checkbox'),
 C_CLEAR = getCN(CONSOLE,CLEAR),
 C_COLLAPSE = getCN(CONSOLE,'collapse'),
 C_COLLAPSED = getCN(CONSOLE,COLLAPSED),
 C_CONSOLE_CONTROLS = getCN(CONSOLE,'controls'),
 C_CONSOLE_HD = getCN(CONSOLE,'hd'),
 C_CONSOLE_BD = getCN(CONSOLE,'bd'),
 C_CONSOLE_FT = getCN(CONSOLE,'ft'),
 C_CONSOLE_TITLE = getCN(CONSOLE,TITLE),
 C_ENTRY = getCN(CONSOLE,ENTRY),
 C_ENTRY_CAT = getCN(CONSOLE,ENTRY,'cat'),
 C_ENTRY_CONTENT = getCN(CONSOLE,ENTRY,'content'),
 C_ENTRY_META = getCN(CONSOLE,ENTRY,'meta'),
 C_ENTRY_SRC = getCN(CONSOLE,ENTRY,'src'),
 C_ENTRY_TIME = getCN(CONSOLE,ENTRY,'time'),
 C_PAUSE = getCN(CONSOLE,PAUSE),
 C_PAUSE_LABEL = getCN(CONSOLE,PAUSE,'label'),
 
 RE_INLINE_SOURCE = /^(\S+)\s/,
 RE_AMP = /&(?!#?[a-z0-9]+;)/g,
 RE_GT = />/g,
 RE_LT = /</g,
 
 ESC_AMP = '&#38;',
 ESC_GT = '&#62;',
 ESC_LT = '&#60;',
 
 ENTRY_TEMPLATE_STR =
 '<div class="{entry_class} {cat_class} {src_class}">'+
 '<p class="{entry_meta_class}">'+
 '<span class="{entry_src_class}">'+
 '{sourceAndDetail}'+
 '</span>'+
 '<span class="{entry_cat_class}">'+
 '{category}</span>'+
 '<span class="{entry_time_class}">'+
 ' {totalTime}ms (+{elapsedTime}) {localTime}'+
 '</span>'+
 '</p>'+
 '<pre class="{entry_content_class}">{message}</pre>'+
 '</div>',
 
 L = Y.Lang,
 create = Y.Node.create,
 isNumber = L.isNumber,
 isString = L.isString,
 merge = Y.merge,
 substitute = Y.Lang.sub;
 
 /**
 A basic console that displays messages logged throughout your application.
 
 @class Console
 @constructor
 @extends Widget
 @param [config] {Object} Object literal specifying widget configuration properties.
 **/
 function Console() {
 Console.superclass.constructor.apply(this,arguments);
 }
 
 Y.Console = Y.extend(Console, Y.Widget,
 
 // Y.Console prototype
 {
 /**
 * Category to prefix all event subscriptions to allow for ease of detach
 * during destroy.
 *
 * @property _evtCat
 * @type string
 * @protected
 */
 _evtCat : null,
 
 /**
 * Reference to the Node instance containing the header contents.
 *
 * @property _head
 * @type Node
 * @default null
 * @protected
 */
 _head : null,
 
 /**
 * Reference to the Node instance that will house the console messages.
 *
 * @property _body
 * @type Node
 * @default null
 * @protected
 */
 _body : null,
 
 /**
 * Reference to the Node instance containing the footer contents.
 *
 * @property _foot
 * @type Node
 * @default null
 * @protected
 */
 _foot : null,
 
 /**
 * Holds the object API returned from <code>Y.later</code> for the print
 * loop interval.
 *
 * @property _printLoop
 * @type Object
 * @default null
 * @protected
 */
 _printLoop : null,
 
 /**
 * Array of normalized message objects awaiting printing.
 *
 * @property buffer
 * @type Array
 * @default null
 * @protected
 */
 buffer : null,
 
 /**
 * Wrapper for <code>Y.log</code>.
 *
 * @method log
 * @param arg* {MIXED} (all arguments passed through to <code>Y.log</code>)
 * @chainable
 */
 log : function () {
 Y.log.apply(Y,arguments);
 
 return this;
 },
 
 /**
 * Clear the console of messages and flush the buffer of pending messages.
 *
 * @method clearConsole
 * @chainable
 */
 clearConsole : function () {
 // TODO: clear event listeners from console contents
 this._body.empty();
 
 this._cancelPrintLoop();
 
 this.buffer = [];
 
 return this;
 },
 
 /**
 * Clears the console and resets internal timers.
 *
 * @method reset
 * @chainable
 */
 reset : function () {
 this.fire(RESET);
 
 return this;
 },
 
 /**
 * Collapses the body and footer.
 *
 * @method collapse
 * @chainable
 */
 collapse : function () {
 this.set(COLLAPSED, true);
 
 return this;
 },
 
 /**
 * Expands the body and footer if collapsed.
 *
 * @method expand
 * @chainable
 */
 expand : function () {
 this.set(COLLAPSED, false);
 
 return this;
 },
 
 /**
 * Outputs buffered messages to the console UI. This is typically called
 * from a scheduled interval until the buffer is empty (referred to as the
 * print loop). The number of buffered messages output to the Console is
 * limited to the number provided as an argument. If no limit is passed,
 * all buffered messages are rendered.
 *
 * @method printBuffer
 * @param limit {Number} (optional) max number of buffered entries to write
 * @chainable
 */
 printBuffer: function (limit) {
 var messages = this.buffer,
 debug = Y.config.debug,
 entries = [],
 consoleLimit= this.get('consoleLimit'),
 newestOnTop = this.get('newestOnTop'),
 anchor = newestOnTop ? this._body.get('firstChild') : null,
 i;
 
 if (messages.length > consoleLimit) {
 messages.splice(0, messages.length - consoleLimit);
 }
 
 limit = Math.min(messages.length, (limit || messages.length));
 
 // turn off logging system
 Y.config.debug = false;
 
 if (!this.get(PAUSED) && this.get('rendered')) {
 
 for (i = 0; i < limit && messages.length; ++i) {
 entries[i] = this._createEntryHTML(messages.shift());
 }
 
 if (!messages.length) {
 this._cancelPrintLoop();
 }
 
 if (entries.length) {
 if (newestOnTop) {
 entries.reverse();
 }
 
 this._body.insertBefore(create(entries.join('')), anchor);
 
 if (this.get('scrollIntoView')) {
 this.scrollToLatest();
 }
 
 this._trimOldEntries();
 }
 }
 
 // restore logging system
 Y.config.debug = debug;
 
 return this;
 },
 
 
 /**
 * Constructor code. Set up the buffer and entry template, publish
 * internal events, and subscribe to the configured logEvent.
 *
 * @method initializer
 * @protected
 */
 initializer : function () {
 this._evtCat = Y.stamp(this) + '|';
 
 this.buffer = [];
 
 this.get('logSource').on(this._evtCat +
 this.get('logEvent'),Y.bind("_onLogEvent",this));
 
 /**
 * Transfers a received message to the print loop buffer. Default
 * behavior defined in _defEntryFn.
 *
 * @event entry
 * @param event {EventFacade} An Event Facade object with the following attribute specific properties added:
 * <dl>
 * <dt>message</dt>
 * <dd>The message data normalized into an object literal (see _normalizeMessage)</dd>
 * </dl>
 * @preventable _defEntryFn
 */
 this.publish(ENTRY, { defaultFn: this._defEntryFn });
 
 /**
 * Triggers the reset behavior via the default logic in _defResetFn.
 *
 * @event reset
 * @param event {EventFacade} Event Facade object
 * @preventable _defResetFn
 */
 this.publish(RESET, { defaultFn: this._defResetFn });
 
 this.after('rendered', this._schedulePrint);
 },
 
 /**
 * Tears down the instance, flushing event subscriptions and purging the UI.
 *
 * @method destructor
 * @protected
 */
 destructor : function () {
 var bb = this.get('boundingBox');
 
 this._cancelPrintLoop();
 
 this.get('logSource').detach(this._evtCat + '*');
 
 bb.purge(true);
 },
 
 /**
 * Generate the Console UI.
 *
 * @method renderUI
 * @protected
 */
 renderUI : function () {
 this._initHead();
 this._initBody();
 this._initFoot();
 
 // Apply positioning to the bounding box if appropriate
 var style = this.get('style');
 if (style !== 'block') {
 this.get('boundingBox').addClass(this.getClassName(style));
 }
 },
 
 /**
 * Sync the UI state to the current attribute state.
 *
 * @method syncUI
 */
 syncUI : function () {
 this._uiUpdatePaused(this.get(PAUSED));
 this._uiUpdateCollapsed(this.get(COLLAPSED));
 this._uiSetHeight(this.get(HEIGHT));
 },
 
 /**
 * Set up event listeners to wire up the UI to the internal state.
 *
 * @method bindUI
 * @protected
 */
 bindUI : function () {
 this.get(CONTENT_BOX).one('button.'+C_COLLAPSE).
 on(CLICK,this._onCollapseClick,this);
 
 this.get(CONTENT_BOX).one('input[type=checkbox].'+C_PAUSE).
 on(CLICK,this._onPauseClick,this);
 
 this.get(CONTENT_BOX).one('button.'+C_CLEAR).
 on(CLICK,this._onClearClick,this);
 
 // Attribute changes
 this.after(this._evtCat + 'stringsChange',
 this._afterStringsChange);
 this.after(this._evtCat + 'pausedChange',
 this._afterPausedChange);
 this.after(this._evtCat + 'consoleLimitChange',
 this._afterConsoleLimitChange);
 this.after(this._evtCat + 'collapsedChange',
 this._afterCollapsedChange);
 },
 
 
 /**
 * Create the DOM structure for the header elements.
 *
 * @method _initHead
 * @protected
 */
 _initHead : function () {
 var cb = this.get(CONTENT_BOX),
 info = merge(Console.CHROME_CLASSES, {
 str_collapse : this.get('strings.collapse'),
 str_title : this.get('strings.title')
 });
 
 this._head = create(substitute(Console.HEADER_TEMPLATE,info));
 
 cb.insertBefore(this._head,cb.get('firstChild'));
 },
 
 /**
 * Create the DOM structure for the console body&#8212;where messages are
 * rendered.
 *
 * @method _initBody
 * @protected
 */
 _initBody : function () {
 this._body = create(substitute(
 Console.BODY_TEMPLATE,
 Console.CHROME_CLASSES));
 
 this.get(CONTENT_BOX).appendChild(this._body);
 },
 
 /**
 * Create the DOM structure for the footer elements.
 *
 * @method _initFoot
 * @protected
 */
 _initFoot : function () {
 var info = merge(Console.CHROME_CLASSES, {
 id_guid : Y.guid(),
 str_pause : this.get('strings.pause'),
 str_clear : this.get('strings.clear')
 });
 
 this._foot = create(substitute(Console.FOOTER_TEMPLATE,info));
 
 this.get(CONTENT_BOX).appendChild(this._foot);
 },
 
 /**
 * Determine if incoming log messages are within the configured logLevel
 * to be buffered for printing.
 *
 * @method _isInLogLevel
 * @protected
 */
 _isInLogLevel : function (e) {
 var cat = e.cat, lvl = this.get('logLevel');
 
 if (lvl !== INFO) {
 cat = cat || INFO;
 
 if (isString(cat)) {
 cat = cat.toLowerCase();
 }
 
 if ((cat === WARN && lvl === ERROR) ||
 (cat === INFO && lvl !== INFO)) {
 return false;
 }
 }
 
 return true;
 },
 
 /**
 * Create a log entry message from the inputs including the following keys:
 * <ul>
 * <li>time - this moment</li>
 * <li>message - leg message</li>
 * <li>category - logLevel or custom category for the message</li>
 * <li>source - when provided, the widget or util calling Y.log</li>
 * <li>sourceAndDetail - same as source but can include instance info</li>
 * <li>localTime - readable version of time</li>
 * <li>elapsedTime - ms since last entry</li>
 * <li>totalTime - ms since Console was instantiated or reset</li>
 * </ul>
 *
 * @method _normalizeMessage
 * @param e {Event} custom event containing the log message
 * @return Object the message object
 * @protected
 */
 _normalizeMessage : function (e) {
 
 var msg = e.msg,
 cat = e.cat,
 src = e.src,
 
 m = {
 time : new Date(),
 message : msg,
 category : cat || this.get('defaultCategory'),
 sourceAndDetail : src || this.get('defaultSource'),
 source : null,
 localTime : null,
 elapsedTime : null,
 totalTime : null
 };
 
 // Extract m.source "Foo" from m.sourceAndDetail "Foo bar baz"
 m.source = RE_INLINE_SOURCE.test(m.sourceAndDetail) ?
 RegExp.1ドル : m.sourceAndDetail;
 m.localTime = m.time.toLocaleTimeString ?
 m.time.toLocaleTimeString() : (m.time + '');
 m.elapsedTime = m.time - this.get(LAST_TIME);
 m.totalTime = m.time - this.get(START_TIME);
 
 this._set(LAST_TIME,m.time);
 
 return m;
 },
 
 /**
 * Sets an interval for buffered messages to be output to the console.
 *
 * @method _schedulePrint
 * @protected
 */
 _schedulePrint : function () {
 if (!this._printLoop && !this.get(PAUSED) && this.get('rendered')) {
 this._printLoop = Y.later(
 this.get('printTimeout'),
 this, this.printBuffer,
 this.get('printLimit'), true);
 }
 },
 
 /**
 * Translates message meta into the markup for a console entry.
 *
 * @method _createEntryHTML
 * @param m {Object} object literal containing normalized message metadata
 * @return String
 * @protected
 */
 _createEntryHTML : function (m) {
 m = merge(
 this._htmlEscapeMessage(m),
 Console.ENTRY_CLASSES,
 {
 cat_class : this.getClassName(ENTRY,m.category),
 src_class : this.getClassName(ENTRY,m.source)
 });
 
 return this.get('entryTemplate').replace(/\{(\w+)\}/g,
 function (_,token) {
 return token in m ? m[token] : '';
 });
 },
 
 /**
 * Scrolls to the most recent entry
 *
 * @method scrollToLatest
 * @chainable
 */
 scrollToLatest : function () {
 var scrollTop = this.get('newestOnTop') ?
 0 :
 this._body.get('scrollHeight');
 
 this._body.set('scrollTop', scrollTop);
 },
 
 /**
 * Performs HTML escaping on strings in the message object.
 *
 * @method _htmlEscapeMessage
 * @param m {Object} the normalized message object
 * @return Object the message object with proper escapement
 * @protected
 */
 _htmlEscapeMessage : function (m) {
 m.message = this._encodeHTML(m.message);
 m.source = this._encodeHTML(m.source);
 m.sourceAndDetail = this._encodeHTML(m.sourceAndDetail);
 m.category = this._encodeHTML(m.category);
 
 return m;
 },
 
 /**
 * Removes the oldest message entries from the UI to maintain the limit
 * specified in the consoleLimit configuration.
 *
 * @method _trimOldEntries
 * @protected
 */
 _trimOldEntries : function () {
 // Turn off the logging system for the duration of this operation
 // to prevent an infinite loop
 Y.config.debug = false;
 
 var bd = this._body,
 limit = this.get('consoleLimit'),
 debug = Y.config.debug,
 entries,e,i,l;
 
 if (bd) {
 entries = bd.all(DOT+C_ENTRY);
 l = entries.size() - limit;
 
 if (l > 0) {
 if (this.get('newestOnTop')) {
 i = limit;
 l = entries.size();
 } else {
 i = 0;
 }
 
 this._body.setStyle('display','none');
 
 for (;i < l; ++i) {
 e = entries.item(i);
 if (e) {
 e.remove();
 }
 }
 
 this._body.setStyle('display','');
 }
 
 }
 
 Y.config.debug = debug;
 },
 
 /**
 * Returns the input string with ampersands (&amp;), &lt, and &gt; encoded
 * as HTML entities.
 *
 * @method _encodeHTML
 * @param s {String} the raw string
 * @return String the encoded string
 * @protected
 */
 _encodeHTML : function (s) {
 return isString(s) ?
 s.replace(RE_AMP,ESC_AMP).
 replace(RE_LT, ESC_LT).
 replace(RE_GT, ESC_GT) :
 s;
 },
 
 /**
 * Clears the timeout for printing buffered messages.
 *
 * @method _cancelPrintLoop
 * @protected
 */
 _cancelPrintLoop : function () {
 if (this._printLoop) {
 this._printLoop.cancel();
 this._printLoop = null;
 }
 },
 
 /**
 * Validates input value for style attribute. Accepts only values 'inline',
 * 'block', and 'separate'.
 *
 * @method _validateStyle
 * @param style {String} the proposed value
 * @return {Boolean} pass/fail
 * @protected
 */
 _validateStyle : function (style) {
 return style === 'inline' || style === 'block' || style === 'separate';
 },
 
 /**
 * Event handler for clicking on the Pause checkbox to update the paused
 * attribute.
 *
 * @method _onPauseClick
 * @param e {Event} DOM event facade for the click event
 * @protected
 */
 _onPauseClick : function (e) {
 this.set(PAUSED,e.target.get(CHECKED));
 },
 
 /**
 * Event handler for clicking on the Clear button. Pass-through to
 * <code>this.clearConsole()</code>.
 *
 * @method _onClearClick
 * @param e {Event} DOM event facade for the click event
 * @protected
 */
 _onClearClick : function (e) {
 this.clearConsole();
 },
 
 /**
 * Event handler for clicking on the Collapse/Expand button. Sets the
 * &quot;collapsed&quot; attribute accordingly.
 *
 * @method _onCollapseClick
 * @param e {Event} DOM event facade for the click event
 * @protected
 */
 _onCollapseClick : function (e) {
 this.set(COLLAPSED, !this.get(COLLAPSED));
 },
 
 
 /**
 * Validator for logSource attribute.
 *
 * @method _validateLogSource
 * @param v {Object} the desired logSource
 * @return {Boolean} true if the input is an object with an <code>on</code>
 * method
 * @protected
 */
 _validateLogSource: function (v) {
 return v && Y.Lang.isFunction(v.on);
 },
 
 /**
 * Setter method for logLevel attribute. Acceptable values are
 * &quot;error&quot, &quot;warn&quot, and &quot;info&quot (case
 * insensitive). Other values are treated as &quot;info&quot;.
 *
 * @method _setLogLevel
 * @param v {String} the desired log level
 * @return String One of Console.LOG_LEVEL_INFO, _WARN, or _ERROR
 * @protected
 */
 _setLogLevel : function (v) {
 if (isString(v)) {
 v = v.toLowerCase();
 }
 
 return (v === WARN || v === ERROR) ? v : INFO;
 },
 
 /**
 * Getter method for useBrowserConsole attribute. Just a pass through to
 * the YUI instance configuration setting.
 *
 * @method _getUseBrowserConsole
 * @return {Boolean} or null if logSource is not a YUI instance
 * @protected
 */
 _getUseBrowserConsole: function () {
 var logSource = this.get('logSource');
 return logSource instanceof YUI ?
 logSource.config.useBrowserConsole : null;
 },
 
 /**
 * Setter method for useBrowserConsole attributes. Only functional if the
 * logSource attribute points to a YUI instance. Passes the value down to
 * the YUI instance. NOTE: multiple Console instances cannot maintain
 * independent useBrowserConsole values, since it is just a pass through to
 * the YUI instance configuration.
 *
 * @method _setUseBrowserConsole
 * @param v {Boolean} false to disable browser console printing (default)
 * @return {Boolean} true|false if logSource is a YUI instance
 * @protected
 */
 _setUseBrowserConsole: function (v) {
 var logSource = this.get('logSource');
 if (logSource instanceof YUI) {
 v = !!v;
 logSource.config.useBrowserConsole = v;
 return v;
 } else {
 return Y.Attribute.INVALID_VALUE;
 }
 },
 
 /**
 * Set the height of the Console container. Set the body height to the
 * difference between the configured height and the calculated heights of
 * the header and footer.
 * Overrides Widget.prototype._uiSetHeight.
 *
 * @method _uiSetHeight
 * @param v {String|Number} the new height
 * @protected
 */
 _uiSetHeight : function (v) {
 Console.superclass._uiSetHeight.apply(this,arguments);
 
 if (this._head && this._foot) {
 var h = this.get('boundingBox').get('offsetHeight') -
 this._head.get('offsetHeight') -
 this._foot.get('offsetHeight');
 
 this._body.setStyle(HEIGHT,h+'px');
 }
 },
 
 /**
 * Over-ride default content box sizing to do nothing, since we're sizing
 * the body section to fill out height ourselves.
 *
 * @method _uiSizeCB
 * @protected
 */
 _uiSizeCB : function() {
 // Do Nothing. Ideally want to move to Widget-StdMod, which accounts for
 // _uiSizeCB
 },
 
 /**
 * Updates the UI if changes are made to any of the strings in the strings
 * attribute.
 *
 * @method _afterStringsChange
 * @param e {Event} Custom event for the attribute change
 * @protected
 */
 _afterStringsChange : function (e) {
 var prop = e.subAttrName ? e.subAttrName.split(DOT)[1] : null,
 cb = this.get(CONTENT_BOX),
 before = e.prevVal,
 after = e.newVal;
 
 if ((!prop || prop === TITLE) && before.title !== after.title) {
 cb.all(DOT+C_CONSOLE_TITLE).setHTML(after.title);
 }
 
 if ((!prop || prop === PAUSE) && before.pause !== after.pause) {
 cb.all(DOT+C_PAUSE_LABEL).setHTML(after.pause);
 }
 
 if ((!prop || prop === CLEAR) && before.clear !== after.clear) {
 cb.all(DOT+C_CLEAR).set('value',after.clear);
 }
 },
 
 /**
 * Updates the UI and schedules or cancels the print loop.
 *
 * @method _afterPausedChange
 * @param e {Event} Custom event for the attribute change
 * @protected
 */
 _afterPausedChange : function (e) {
 var paused = e.newVal;
 
 if (e.src !== Y.Widget.SRC_UI) {
 this._uiUpdatePaused(paused);
 }
 
 if (!paused) {
 this._schedulePrint();
 } else if (this._printLoop) {
 this._cancelPrintLoop();
 }
 },
 
 /**
 * Checks or unchecks the paused checkbox
 *
 * @method _uiUpdatePaused
 * @param on {Boolean} the new checked state
 * @protected
 */
 _uiUpdatePaused : function (on) {
 var node = this._foot.all('input[type=checkbox].'+C_PAUSE);
 
 if (node) {
 node.set(CHECKED,on);
 }
 },
 
 /**
 * Calls this._trimOldEntries() in response to changes in the configured
 * consoleLimit attribute.
 *
 * @method _afterConsoleLimitChange
 * @param e {Event} Custom event for the attribute change
 * @protected
 */
 _afterConsoleLimitChange : function () {
 this._trimOldEntries();
 },
 
 
 /**
 * Updates the className of the contentBox, which should trigger CSS to
 * hide or show the body and footer sections depending on the new value.
 *
 * @method _afterCollapsedChange
 * @param e {Event} Custom event for the attribute change
 * @protected
 */
 _afterCollapsedChange : function (e) {
 this._uiUpdateCollapsed(e.newVal);
 },
 
 /**
 * Updates the UI to reflect the new Collapsed state
 *
 * @method _uiUpdateCollapsed
 * @param v {Boolean} true for collapsed, false for expanded
 * @protected
 */
 _uiUpdateCollapsed : function (v) {
 var bb = this.get('boundingBox'),
 button = bb.all('button.'+C_COLLAPSE),
 method = v ? 'addClass' : 'removeClass',
 str = this.get('strings.'+(v ? 'expand' : 'collapse'));
 
 bb[method](C_COLLAPSED);
 
 if (button) {
 button.setHTML(str);
 }
 
 this._uiSetHeight(v ? this._head.get('offsetHeight'): this.get(HEIGHT));
 },
 
 /**
 * Makes adjustments to the UI if needed when the Console is hidden or shown
 *
 * @method _afterVisibleChange
 * @param e {Event} the visibleChange event
 * @protected
 */
 _afterVisibleChange : function (e) {
 Console.superclass._afterVisibleChange.apply(this,arguments);
 
 this._uiUpdateFromHideShow(e.newVal);
 },
 
 /**
 * Recalculates dimensions and updates appropriately when shown
 *
 * @method _uiUpdateFromHideShow
 * @param v {Boolean} true for visible, false for hidden
 * @protected
 */
 _uiUpdateFromHideShow : function (v) {
 if (v) {
 this._uiSetHeight(this.get(HEIGHT));
 }
 },
 
 /**
 * Responds to log events by normalizing qualifying messages and passing
 * them along through the entry event for buffering etc.
 *
 * @method _onLogEvent
 * @param msg {String} the log message
 * @param cat {String} OPTIONAL the category or logLevel of the message
 * @param src {String} OPTIONAL the source of the message (e.g. widget name)
 * @protected
 */
 _onLogEvent : function (e) {
 
 if (!this.get(DISABLED) && this._isInLogLevel(e)) {
 
 var debug = Y.config.debug;
 
 /* TODO: needed? */
 Y.config.debug = false;
 
 this.fire(ENTRY, {
 message : this._normalizeMessage(e)
 });
 
 Y.config.debug = debug;
 }
 },
 
 /**
 * Clears the console, resets the startTime attribute, enables and
 * unpauses the widget.
 *
 * @method _defResetFn
 * @protected
 */
 _defResetFn : function () {
 this.clearConsole();
 this.set(START_TIME,new Date());
 this.set(DISABLED,false);
 this.set(PAUSED,false);
 },
 
 /**
 * Buffers incoming message objects and schedules the printing.
 *
 * @method _defEntryFn
 * @param e {Event} The Custom event carrying the message in its payload
 * @protected
 */
 _defEntryFn : function (e) {
 if (e.message) {
 this.buffer.push(e.message);
 this._schedulePrint();
 }
 }
 
 },
 
 // Y.Console static properties
 {
 /**
 * The identity of the widget.
 *
 * @property NAME
 * @type String
 * @static
 */
 NAME : CONSOLE,
 
 /**
 * Static identifier for logLevel configuration setting to allow all
 * incoming messages to generate Console entries.
 *
 * @property LOG_LEVEL_INFO
 * @type String
 * @static
 */
 LOG_LEVEL_INFO : INFO,
 
 /**
 * Static identifier for logLevel configuration setting to allow only
 * incoming messages of logLevel &quot;warn&quot; or &quot;error&quot;
 * to generate Console entries.
 *
 * @property LOG_LEVEL_WARN
 * @type String
 * @static
 */
 LOG_LEVEL_WARN : WARN,
 
 /**
 * Static identifier for logLevel configuration setting to allow only
 * incoming messages of logLevel &quot;error&quot; to generate
 * Console entries.
 *
 * @property LOG_LEVEL_ERROR
 * @type String
 * @static
 */
 LOG_LEVEL_ERROR : ERROR,
 
 /**
 * Map (object) of classNames used to populate the placeholders in the
 * Console.ENTRY_TEMPLATE markup when rendering a new Console entry.
 *
 * <p>By default, the keys contained in the object are:</p>
 * <ul>
 * <li>entry_class</li>
 * <li>entry_meta_class</li>
 * <li>entry_cat_class</li>
 * <li>entry_src_class</li>
 * <li>entry_time_class</li>
 * <li>entry_content_class</li>
 * </ul>
 *
 * @property ENTRY_CLASSES
 * @type Object
 * @static
 */
 ENTRY_CLASSES : {
 entry_class : C_ENTRY,
 entry_meta_class : C_ENTRY_META,
 entry_cat_class : C_ENTRY_CAT,
 entry_src_class : C_ENTRY_SRC,
 entry_time_class : C_ENTRY_TIME,
 entry_content_class : C_ENTRY_CONTENT
 },
 
 /**
 * Map (object) of classNames used to populate the placeholders in the
 * Console.HEADER_TEMPLATE, Console.BODY_TEMPLATE, and
 * Console.FOOTER_TEMPLATE markup when rendering the Console UI.
 *
 * <p>By default, the keys contained in the object are:</p>
 * <ul>
 * <li>console_hd_class</li>
 * <li>console_bd_class</li>
 * <li>console_ft_class</li>
 * <li>console_controls_class</li>
 * <li>console_checkbox_class</li>
 * <li>console_pause_class</li>
 * <li>console_pause_label_class</li>
 * <li>console_button_class</li>
 * <li>console_clear_class</li>
 * <li>console_collapse_class</li>
 * <li>console_title_class</li>
 * </ul>
 *
 * @property CHROME_CLASSES
 * @type Object
 * @static
 */
 CHROME_CLASSES : {
 console_hd_class : C_CONSOLE_HD,
 console_bd_class : C_CONSOLE_BD,
 console_ft_class : C_CONSOLE_FT,
 console_controls_class : C_CONSOLE_CONTROLS,
 console_checkbox_class : C_CHECKBOX,
 console_pause_class : C_PAUSE,
 console_pause_label_class : C_PAUSE_LABEL,
 console_button_class : C_BUTTON,
 console_clear_class : C_CLEAR,
 console_collapse_class : C_COLLAPSE,
 console_title_class : C_CONSOLE_TITLE
 },
 
 /**
 * Markup template used to generate the DOM structure for the header
 * section of the Console when it is rendered. The template includes
 * these {placeholder}s:
 *
 * <ul>
 * <li>console_button_class - contributed by Console.CHROME_CLASSES</li>
 * <li>console_collapse_class - contributed by Console.CHROME_CLASSES</li>
 * <li>console_hd_class - contributed by Console.CHROME_CLASSES</li>
 * <li>console_title_class - contributed by Console.CHROME_CLASSES</li>
 * <li>str_collapse - pulled from attribute strings.collapse</li>
 * <li>str_title - pulled from attribute strings.title</li>
 * </ul>
 *
 * @property HEADER_TEMPLATE
 * @type String
 * @static
 */
 HEADER_TEMPLATE :
 '<div class="{console_hd_class}">'+
 '<h4 class="{console_title_class}">{str_title}</h4>'+
 '<button type="button" class="'+
 '{console_button_class} {console_collapse_class}">{str_collapse}'+
 '</button>'+
 '</div>',
 
 /**
 * Markup template used to generate the DOM structure for the Console body
 * (where the messages are inserted) when it is rendered. The template
 * includes only the {placeholder} &quot;console_bd_class&quot;, which is
 * constributed by Console.CHROME_CLASSES.
 *
 * @property BODY_TEMPLATE
 * @type String
 * @static
 */
 BODY_TEMPLATE : '<div class="{console_bd_class}"></div>',
 
 /**
 * Markup template used to generate the DOM structure for the footer
 * section of the Console when it is rendered. The template includes
 * many of the {placeholder}s from Console.CHROME_CLASSES as well as:
 *
 * <ul>
 * <li>id_guid - generated unique id, relates the label and checkbox</li>
 * <li>str_pause - pulled from attribute strings.pause</li>
 * <li>str_clear - pulled from attribute strings.clear</li>
 * </ul>
 *
 * @property FOOTER_TEMPLATE
 * @type String
 * @static
 */
 FOOTER_TEMPLATE :
 '<div class="{console_ft_class}">'+
 '<div class="{console_controls_class}">'+
 '<label class="{console_pause_label_class}"><input type="checkbox" class="{console_checkbox_class} {console_pause_class}" value="1" id="{id_guid}"> {str_pause}</label>' +
 '<button type="button" class="'+
 '{console_button_class} {console_clear_class}">{str_clear}'+
 '</button>'+
 '</div>'+
 '</div>',
 
 /**
 * Default markup template used to create the DOM structure for Console
 * entries. The markup contains {placeholder}s for content and classes
 * that are replaced via Y.Lang.sub. The default template contains
 * the {placeholder}s identified in Console.ENTRY_CLASSES as well as the
 * following placeholders that will be populated by the log entry data:
 *
 * <ul>
 * <li>cat_class</li>
 * <li>src_class</li>
 * <li>totalTime</li>
 * <li>elapsedTime</li>
 * <li>localTime</li>
 * <li>sourceAndDetail</li>
 * <li>message</li>
 * </ul>
 *
 * @property ENTRY_TEMPLATE
 * @type String
 * @static
 */
 ENTRY_TEMPLATE : ENTRY_TEMPLATE_STR,
 
 /**
 * Static property used to define the default attribute configuration of
 * the Widget.
 *
 * @property ATTRS
 * @Type Object
 * @static
 */
 ATTRS : {
 
 /**
 * Name of the custom event that will communicate log messages.
 *
 * @attribute logEvent
 * @type String
 * @default "yui:log"
 */
 logEvent : {
 value : 'yui:log',
 writeOnce : true,
 validator : isString
 },
 
 /**
 * Object that will emit the log events. By default the YUI instance.
 * To have a single Console capture events from all YUI instances, set
 * this to the Y.Global object.
 *
 * @attribute logSource
 * @type EventTarget
 * @default Y
 */
 logSource : {
 value : Y,
 writeOnce : true,
 validator : function (v) {
 return this._validateLogSource(v);
 }
 },
 
 /**
 * Collection of strings used to label elements in the Console UI.
 * Default collection contains the following name:value pairs:
 *
 * <ul>
 * <li>title : &quot;Log Console&quot;</li>
 * <li>pause : &quot;Pause&quot;</li>
 * <li>clear : &quot;Clear&quot;</li>
 * <li>collapse : &quot;Collapse&quot;</li>
 * <li>expand : &quot;Expand&quot;</li>
 * </ul>
 *
 * @attribute strings
 * @type Object
 */
 strings : {
 valueFn: function() { return Y.Intl.get("console"); }
 },
 
 /**
 * Boolean to pause the outputting of new messages to the console.
 * When paused, messages will accumulate in the buffer.
 *
 * @attribute paused
 * @type boolean
 * @default false
 */
 paused : {
 value : false,
 validator : L.isBoolean
 },
 
 /**
 * If a category is not specified in the Y.log(..) statement, this
 * category will be used. Categories &quot;info&quot;,
 * &quot;warn&quot;, and &quot;error&quot; are also called log level.
 *
 * @attribute defaultCategory
 * @type String
 * @default "info"
 */
 defaultCategory : {
 value : INFO,
 validator : isString
 },
 
 /**
 * If a source is not specified in the Y.log(..) statement, this
 * source will be used.
 *
 * @attribute defaultSource
 * @type String
 * @default "global"
 */
 defaultSource : {
 value : 'global',
 validator : isString
 },
 
 /**
 * Markup template used to create the DOM structure for Console entries.
 *
 * @attribute entryTemplate
 * @type String
 * @default Console.ENTRY_TEMPLATE
 */
 entryTemplate : {
 value : ENTRY_TEMPLATE_STR,
 validator : isString
 },
 
 /**
 * Minimum entry log level to render into the Console. The initial
 * logLevel value for all Console instances defaults from the
 * Y.config.logLevel YUI configuration, or Console.LOG_LEVEL_INFO if
 * that configuration is not set.
 *
 * Possible values are &quot;info&quot;, &quot;warn&quot;,
 * &quot;error&quot; (case insensitive), or their corresponding statics
 * Console.LOG_LEVEL_INFO and so on.
 *
 * @attribute logLevel
 * @type String
 * @default Y.config.logLevel or Console.LOG_LEVEL_INFO
 */
 logLevel : {
 value : Y.config.logLevel || INFO,
 setter : function (v) {
 return this._setLogLevel(v);
 }
 },
 
 /**
 * Millisecond timeout between iterations of the print loop, moving
 * entries from the buffer to the UI.
 *
 * @attribute printTimeout
 * @type Number
 * @default 100
 */
 printTimeout : {
 value : 100,
 validator : isNumber
 },
 
 /**
 * Maximum number of entries printed in each iteration of the print
 * loop. This is used to prevent excessive logging locking the page UI.
 *
 * @attribute printLimit
 * @type Number
 * @default 50
 */
 printLimit : {
 value : 50,
 validator : isNumber
 },
 
 /**
 * Maximum number of Console entries allowed in the Console body at one
 * time. This is used to keep acquired messages from exploding the
 * DOM tree and impacting page performance.
 *
 * @attribute consoleLimit
 * @type Number
 * @default 300
 */
 consoleLimit : {
 value : 300,
 validator : isNumber
 },
 
 /**
 * New entries should display at the top of the Console or the bottom?
 *
 * @attribute newestOnTop
 * @type Boolean
 * @default true
 */
 newestOnTop : {
 value : true
 },
 
 /**
 * When new entries are added to the Console UI, should they be
 * scrolled into view?
 *
 * @attribute scrollIntoView
 * @type Boolean
 * @default true
 */
 scrollIntoView : {
 value : true
 },
 
 /**
 * The baseline time for this Console instance, used to measure elapsed
 * time from the moment the console module is <code>use</code>d to the
 * moment each new entry is logged (not rendered).
 *
 * This value is reset by the instance method myConsole.reset().
 *
 * @attribute startTime
 * @type Date
 * @default The moment the console module is <code>use</code>d
 */
 startTime : {
 value : new Date()
 },
 
 /**
 * The precise time the last entry was logged. Used to measure elapsed
 * time between log messages.
 *
 * @attribute lastTime
 * @type Date
 * @default The moment the console module is <code>use</code>d
 */
 lastTime : {
 value : new Date(),
 readOnly: true
 },
 
 /**
 * Controls the collapsed state of the Console
 *
 * @attribute collapsed
 * @type Boolean
 * @default false
 */
 collapsed : {
 value : false
 },
 
 /**
 * String with units, or number, representing the height of the Console,
 * inclusive of header and footer. If a number is provided, the default
 * unit, defined by Widget's DEF_UNIT, property is used.
 *
 * @attribute height
 * @default "300px"
 * @type {String | Number}
 */
 height: {
 value: "300px"
 },
 
 /**
 * String with units, or number, representing the width of the Console.
 * If a number is provided, the default unit, defined by Widget's
 * DEF_UNIT, property is used.
 *
 * @attribute width
 * @default "300px"
 * @type {String | Number}
 */
 width: {
 value: "300px"
 },
 
 /**
 * Pass through to the YUI instance useBrowserConsole configuration.
 * By default this is set to false, which will disable logging to the
 * browser console when a Console instance is created. If the
 * logSource is not a YUI instance, this has no effect.
 *
 * @attribute useBrowserConsole
 * @type {Boolean}
 * @default false
 */
 useBrowserConsole : {
 lazyAdd: false,
 value: false,
 getter : function () {
 return this._getUseBrowserConsole();
 },
 setter : function (v) {
 return this._setUseBrowserConsole(v);
 }
 },
 
 /**
 * Allows the Console to flow in the document. Available values are
 * 'inline', 'block', and 'separate' (the default).
 *
 * @attribute style
 * @type {String}
 * @default 'separate'
 */
 style : {
 value : 'separate',
 writeOnce : true,
 validator : function (v) {
 return this._validateStyle(v);
 }
 }
 }
 
 });
 
 

AltStyle によって変換されたページ (->オリジナル) /