if (typeof(PhpDebugBar) == 'undefined') { // namespace var PhpDebugBar = {}; } if (typeof(localStorage) == 'undefined') { // provide mock localStorage object for dumb browsers var localStorage = { setItem: function(key, value) {}, getItem: function(key) { return null; } }; } /** * DebugBar * * Creates a bar that appends itself to the body of your page * and sticks to the bottom. * * The bar can be customized by adding tabs and indicators. * A data map is used to fill those controls with data provided * from datasets. * * @constructor */ PhpDebugBar.DebugBar = (function($) { /** * Returns the value from an object property. * Using dots in the key, it is possible to retreive nested property values * * @param {Object} dict * @param {String} key * @param {Object} default_value * @return {Object} */ function getDictValue(dict, key, default_value) { var d = dict, parts = key.split('.'); for (var i = 0; i < parts.length; i++) { if (!d[parts[i]]) { return default_value; } d = d[parts[i]]; } return d; } // ------------------------------------------------------------------ /** * Tab * * A tab is composed of a tab label which is always visible and * a tab panel which is visible only when the tab is active. * * The panel must contain a widget. A widget is an object which has * an element property containing something appendable to a jQuery object. * * @this {Tab} * @constructor * @param {String} title * @param {Object} widget */ var Tab = function(title, widget) { this.tab = $('') this.tabText = $('').text(title).appendTo(this.tab); this.badge = $('').appendTo(this.tab); this.panel = $('
'); this.replaceWidget(widget); }; /** * Sets the title of the tab * * @this {Tab} * @param {String} text */ Tab.prototype.setTitle = function(text) { this.tab.text(text); }; /** * Sets the badge value of the tab * * @this {Tab} * @param {String} value */ Tab.prototype.setBadgeValue = function(value) { if (value === null) { this.badge.hide(); } else { this.badge.text(value).show(); } }; /** * Replaces the widget inside the panel * * @this {Tab} * @param {Object} new_widget */ Tab.prototype.replaceWidget = function(new_widget) { this.panel.empty().append(new_widget.element); this.widget = new_widget; }; // ------------------------------------------------------------------ /** * Indicator * * An indicator is a text and an icon to display single value information * right inside the always visible part of the debug bar * * @this {Indicator} * @constructor * @param {String} icon * @param {String} tooltip * @param {String} position "right" or "left", default is "right" */ var Indicator = function(icon, tooltip, position) { if (!position) { position = 'right' } this.position = position; this.element = $('').css('float', position); this.label = $('').appendTo(this.element); if (icon) { $('').insertBefore(this.label); } if (tooltip) { this.element.append($('').text(tooltip)); } }; /** * Sets the text of the indicator * * @this {Indicator} * @param {String} text */ Indicator.prototype.setText = function(text) { this.element.find('.text').text(text); }; /** * Sets the tooltip of the indicator * * @this {Indicator} * @param {String} text */ Indicator.prototype.setTooltip = function(text) { this.element.find('.tooltip').text(text); }; // ------------------------------------------------------------------ /** * DebugBar * * @this {DebugBar} * @constructor */ var DebugBar = function() { this.controls = {}; this.dataMap = {}; this.datasets = {}; this.initUI(); this.init(); }; /** * Initialiazes the UI * * @this {DebugBar} */ DebugBar.prototype.initUI = function() { var self = this; this.element = $('
').appendTo('body'); this.header = $('
').appendTo(this.element); this.body = $('
').appendTo(this.element); this.resizeHandle = $('
').appendTo(this.body); this.firstPanelName = null; this.activePanelName = null; // allow resizing by dragging handle this.body.drag('start', function(e, dd) { dd.height = $(this).height(); }).drag(function(e, dd) { var h = Math.max(100, dd.height - dd.deltaY); $(this).css('height', h); localStorage.setItem('phpdebugbar-height', h); }, {handle: '.phpdebugbar-resize-handle'}); // close button this.closeButton = $('').appendTo(this.header); this.closeButton.click(function() { self.hidePanels(); }); // select box for data sets this.datasetSelectBox = $('