console.js revision 60f5c306297c0d0dc6d239ee618ee333f4c40746
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney/**
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney * Console creates a visualization for messages logged through calls to a YUI
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * instance's <code>Y.log( message, category, source )</code> method. The
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * debug versions of YUI modules will include logging statements to offer some
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * insight into the steps executed during that module's operation. Including
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * log statements in your code will cause those messages to also appear in the
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Console. Use Console to aid in developing your page or application.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Entry categories &quot;info&quot;, &quot;warn&quot;, and &quot;error&quot;
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * are also referred to as the log level, and entries are filtered against the
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * configured logLevel.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @module console
eaa9719567e2ec55d96f9298077f5fc0effe1ed3Satyen Desai * @class Console
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @extends Widget
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @param conf {Object} Configuration object (see Configuration attributes)
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @constructor
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai */
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desaifunction Console() {
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai Console.superclass.constructor.apply(this,arguments);
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai}
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desaivar getCN = Y.ClassNameManager.getClassName,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai CHECKED = 'checked',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai CLEAR = 'clear',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai CLICK = 'click',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai COLLAPSED = 'collapsed',
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney CONSOLE = 'console',
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney CONTENT_BOX = 'contentBox',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai DISABLED = 'disabled',
feaab31990f7893c59257f33cd9f708a6c0e7ddbSatyen Desai ENTRY = 'entry',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai ERROR = 'error',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai HEIGHT = 'height',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai INFO = 'info',
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney INNER_HTML = 'innerHTML',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai LAST_TIME = 'lastTime',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai PAUSE = 'pause',
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney PAUSED = 'paused',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai RESET = 'reset',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai START_TIME = 'startTime',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai TITLE = 'title',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai WARN = 'warn',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai DOT = '.',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
eaa9719567e2ec55d96f9298077f5fc0effe1ed3Satyen Desai C_BUTTON = getCN(CONSOLE,'button'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CHECKBOX = getCN(CONSOLE,'checkbox'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CLEAR = getCN(CONSOLE,CLEAR),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_COLLAPSE = getCN(CONSOLE,'collapse'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_COLLAPSED = getCN(CONSOLE,COLLAPSED),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CONSOLE_CONTROLS = getCN(CONSOLE,'controls'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CONSOLE_HD = getCN(CONSOLE,'hd'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CONSOLE_BD = getCN(CONSOLE,'bd'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CONSOLE_FT = getCN(CONSOLE,'ft'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_CONSOLE_TITLE = getCN(CONSOLE,TITLE),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_ENTRY = getCN(CONSOLE,ENTRY),
eaa9719567e2ec55d96f9298077f5fc0effe1ed3Satyen Desai C_ENTRY_CAT = getCN(CONSOLE,ENTRY,'cat'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_ENTRY_CONTENT = getCN(CONSOLE,ENTRY,'content'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_ENTRY_META = getCN(CONSOLE,ENTRY,'meta'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_ENTRY_SRC = getCN(CONSOLE,ENTRY,'src'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_ENTRY_TIME = getCN(CONSOLE,ENTRY,'time'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai C_PAUSE = getCN(CONSOLE,PAUSE),
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney C_PAUSE_LABEL = getCN(CONSOLE,PAUSE,'label'),
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai RE_INLINE_SOURCE = /^(\S+)\s/,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai RE_AMP = /&/g,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai RE_GT = />/g,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai RE_LT = /</g,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai ESC_AMP = '&#38;',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai ESC_GT = '&#62;',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai ESC_LT = '&#60;',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
1233f432158f66c7692b2d4a9ad206d6ca27e4b6Matt Sweeney ENTRY_TEMPLATE_STR =
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney '<div class="{entry_class} {cat_class} {src_class}">'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai '<p class="{entry_meta_class}">'+
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney '<span class="{entry_src_class}">'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai '{sourceAndDetail}'+
eaa9719567e2ec55d96f9298077f5fc0effe1ed3Satyen Desai '</span>'+
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney '<span class="{entry_cat_class}">'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai '{label}</span>'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai '<span class="{entry_time_class}">'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai ' {totalTime}ms (+{elapsedTime}) {localTime}'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai '</span>'+
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai '</p>'+
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney '<pre class="{entry_content_class}">{message}</pre>'+
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney '</div>',
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai L = Y.Lang,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai create = Y.Node.create,
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney isNumber = L.isNumber,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai isString = L.isString,
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney merge = Y.merge,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai substitute = Y.substitute;
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen DesaiY.mix(Console, {
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney /**
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * The identity of the widget.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney * @property Console.NAME
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @type String
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @static
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai */
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai NAME : CONSOLE,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai /**
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Static identifier for logLevel configuration setting to allow all
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * incoming messages to generate Console entries.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
982119a5f53b6531610b5d29c631550a6222da1fSatyen Desai * @property Console.LOG_LEVEL_INFO
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @type String
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @static
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai */
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai LOG_LEVEL_INFO : INFO,
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai /**
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney * Static identifier for logLevel configuration setting to allow only
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * incoming messages of logLevel &quot;warn&quot; or &quot;error&quot;
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * to generate Console entries.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @property Console.LOG_LEVEL_WARN
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney * @type String
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney * @static
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai */
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai LOG_LEVEL_WARN : WARN,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai /**
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Static identifier for logLevel configuration setting to allow only
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * incoming messages of logLevel &quot;error&quot; to generate
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Console entries.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @property Console.LOG_LEVEL_ERROR
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @type String
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @static
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai */
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai LOG_LEVEL_ERROR : ERROR,
982119a5f53b6531610b5d29c631550a6222da1fSatyen Desai
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai /**
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Map (object) of classNames used to populate the placeholders in the
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * Console.ENTRY_TEMPLATE markup when rendering a new Console entry.
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <p>By default, the keys contained in the object are:</p>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <ul>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <li>entry_class</li>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <li>entry_meta_class</li>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <li>entry_cat_class</li>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <li>entry_src_class</li>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <li>entry_time_class</li>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * <li>entry_content_class</li>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * </ul>
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai *
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @property Console.ENTRY_CLASSES
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @type Object
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai * @static
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai */
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai ENTRY_CLASSES : {
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai entry_class : C_ENTRY,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai entry_meta_class : C_ENTRY_META,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai entry_cat_class : C_ENTRY_CAT,
69ce664b1e66d48ae3ae5be08488f38b4855fc8bSatyen Desai entry_src_class : C_ENTRY_SRC,
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney entry_time_class : C_ENTRY_TIME,
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney entry_content_class : C_ENTRY_CONTENT
007d778311954420082ea0ea11f663d75d6a02c9Satyen Desai },
57775f39a19dc392e5882d5217d5a9148688aa4aMatt Sweeney
/**
* 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 Console.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 Console.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 Console.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 Console.FOOTER_TEMPLATE
* @type String
* @static
*/
FOOTER_TEMPLATE :
'<div class="{console_ft_class}">'+
'<div class="{console_controls_class}">'+
'<label for="{id_guid}" 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.substitute. 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>label</li>
* <li>totalTime</li>
* <li>elapsedTime</li>
* <li>localTime</li>
* <li>sourceAndDetail</li>
* <li>message</li>
* </ul>
*
* @property Console.ENTRY_TEMPLATE
* @type String
* @static
*/
ENTRY_TEMPLATE : ENTRY_TEMPLATE_STR,
/**
* Static property used to define the default attribute configuration of
* the Widget.
*
* @property Console.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 v && Y.Lang.isFunction(v.on);
}
},
/**
* 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 : {
value : {
title : "Log Console",
pause : "Pause",
clear : "Clear",
collapse : "Collapse",
expand : "Expand"
}
},
/**
* 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 () {
var logSource = this.get('logSource');
return logSource instanceof YUI ?
logSource.config.useBrowserConsole : null;
},
setter : 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;
}
}
}
}
});
Y.extend(Console,Y.Widget,{
/**
* 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.set(INNER_HTML,'');
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 (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 {Event.Facade} 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 {Event.Facade} 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 + '*');
Y.Event.purgeElement(bb, true);
bb.set('innerHTML','');
},
/**
* Generate the Console UI.
*
* @method renderUI
* @protected
*/
renderUI : function () {
this._initHead();
this._initBody();
this._initFoot();
},
/**
* 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).query('button.'+C_COLLAPSE).
on(CLICK,this._onCollapseClick,this);
this.get(CONTENT_BOX).query('input[type=checkbox].'+C_PAUSE).
on(CLICK,this._onPauseClick,this);
this.get(CONTENT_BOX).query('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>label - logLevel/category label for the entry</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,
label : 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.label = m.category;
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 a clone of the message object with proper escapement
* @protected
*/
_htmlEscapeMessage : function (m) {
m = Y.clone(m);
m.message = this._encodeHTML(m.message);
m.label = this._encodeHTML(m.label);
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.queryAll(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;
}
},
/**
* 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));
},
/**
* 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;
},
/**
* 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');
}
},
/**
* 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,
el;
if ((!prop || prop === TITLE) && before.title !== after.title) {
el = cb.query(DOT+C_CONSOLE_TITLE);
if (el) {
el.set(INNER_HTML,after.title);
}
}
if ((!prop || prop === PAUSE) && before.pause !== after.pause) {
el = cb.query(DOT+C_PAUSE_LABEL);
if (el) {
el.set(INNER_HTML,after.pause);
}
}
if ((!prop || prop === CLEAR) && before.clear !== after.clear) {
el = cb.query(DOT+C_CLEAR);
if (el) {
el.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.queryAll('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.queryAll('button.'+C_COLLAPSE),
method = v ? 'addClass' : 'removeClass',
str = this.get('strings.'+(v ? 'expand' : 'collapse'));
bb[method](C_COLLAPSED);
if (button) {
button.set('innerHTML',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 = Console;