From 021d523d41fd21a2ac8b446e02292662defc6f00 Mon Sep 17 00:00:00 2001 From: Brad Kent Date: Mon, 16 Jun 2014 11:08:34 -0500 Subject: [PATCH] Create Debug.jquery.js --- Debug.jquery.js | 163 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 Debug.jquery.js diff --git a/Debug.jquery.js b/Debug.jquery.js new file mode 100644 index 00000000..7e733156 --- /dev/null +++ b/Debug.jquery.js @@ -0,0 +1,163 @@ +/** + * Enhance debug output + * Add expand/collapse functionality to groups and arrays + * Add FontAwesome icons + */ + +$(function() { + var fontAwesomeCss = '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'; + $('', { rel: 'stylesheet', href: fontAwesomeCss }).appendTo('head'); + $('.debug').debugEnhance(); + $().debugEnhance('addCss', '.debug'); +}); + +(function ($) { + + var classExpand = 'fa-plus-square-o', + classCollapse = 'fa-minus-square-o', + icons = { + '.expand-all' : '', + //'.collapsed' : '', + //'.expanded' : '', + '.timestamp' : '', + '.assert' : '', + '.count' : '', + '.info' : '', + '.warn' : '', + '.error' : '', + '.time' : '' + }; + + jQuery.fn.debugEnhance = function(method) { + + var self = this; + + if ( method == 'addCss' ) { + addCss(arguments[1]); + } + + this.each( function() { + var $debug = $(this), + $expand_all = $('').prop({ + 'href':'#' + }).html('Expand All').addClass('expand-all'); + if ( $debug.find('.group-header').length ) { + $expand_all.click( function() { + $debug.find('.group-header').each( function() { + if ( !$(this).nextAll('.group').eq(0).is(':visible') ) { + debugGroupFold(this); + } + }); + return false; + }); + $debug.find('.debug-content').before($expand_all); + } + }); + $('.group-header', this).each( function(){ + var $toggle = $(this), + $target = $toggle.next(); + if ( $target.is(':empty') || !$.trim($target.html()).length ) { + return; + } + $toggle.attr('data-toggle', 'group'); + if ( !$target.hasClass('expanded') && !$target.find('.error, .warn, .group.expanded').length ) { + $toggle.prepend(''); + $target.hide(); + } else { + $toggle.prepend(''); + } + $target.removeClass('collapsed expanded'); + }); + $('.t_array', this).each( function(){ + var $expander = $(''+ + 'Array(' + + '···' + + ')' + + ''); + if ( !$.trim( $(this).find('.t_array-inner').html() ).length ) { + // empty array -> don't add expand/collapse + $(this).find('br').hide(); + $(this).find('.t_array-inner').hide(); + return; + } + $(this).find('.t_keyword').first(). + wrap(''). + after(' '); + if ( !$(this).parents('.t_array').length ) { + // outermost array -> leave open + $(this).before($expander.hide()); + } else { + $(this).hide().before($expander); + } + }); + $('.t_key', this).each( function(){ + var html = $(this).html(), + matches = html.match(/\[(.*)\]/), + k = matches[1], + isInt = k.match(/^\d+$/), + className = isInt ? 't_key t_int' : 't_key'; + html = '[' + k + ']'; + $(this).replaceWith(html); + }); + $.each(icons, function(k,v){ + $(k, self).each(function(){ + $(this).prepend(v); + }); + }); + this.on('click', '[data-toggle=group]', function(){ + debugGroupFold(this); + return false; + }); + this.on('click', '[data-toggle=array]', function(){ + debugArrayFold(this); + return false; + }); + return this; + }; + + function debugGroupFold(toggle) { + var $toggle = $(toggle), + $target = $toggle.next(); + if ( $target.is(':visible') ) { + $target.slideUp('fast', function(){ + $toggle.find('i').addClass(classExpand).removeClass(classCollapse); + }); + } else { + $target.slideDown('fast', function(){ + $toggle.find('i').addClass(classCollapse).removeClass(classExpand); + }); //.css('display',''); + } + } + + function debugArrayFold(toggle) { + var $toggle = $(toggle), + $target = $toggle.hasClass('t_array-expand') ? + $toggle.next() : + $toggle.closest('.t_array'); + if ( $toggle.hasClass('t_array-expand') ) { + $toggle.hide(); + $target.show(); + } else { + $target.hide(); + $target.prev().show(); // show the "collapsed version" + } + } + + function addCss(scope) { + var css = ''+ + '.debug i.fa, .debug .assert i { font-size: 1.33em; line-height: 1; margin-right: .33em; }'+ + '.debug i.fa-plus-circle { opacity: 0.42 }'+ + '.debug i.fa-calendar { font-size: 1.1em; }'+ + //'.debug .assert i { font-size: 1.3em; line-height: 1; margin-right: .33em; }'+ + '.debug a.expand-all { color: inherit; text-decoration: none; }'+ + '.debug a.expand-all { display: block; font-size:1.25em; margin-bottom:.5em; }'+ + '.debug .group-header { cursor: pointer; }'+ + '.debug .t_array-collapse, .debug .t_array-expand { cursor: pointer; }'+ + '.debug .t_array-collapse i.fa, .debug .t_array-expand i.fa { font-size: inherit; }'; + if ( scope ) { + css = css.replace(new RegExp(/\.debug/g), scope+' '); + } + $('').appendTo('head'); + } + +}( jQuery ));