Skip to content

Instantly share code, notes, and snippets.

@LeonardoCA
Created September 14, 2012 12:09
Show Gist options
  • Save LeonardoCA/3721572 to your computer and use it in GitHub Desktop.
Save LeonardoCA/3721572 to your computer and use it in GitHub Desktop.
Ajax Panel
(function($, undefined) {
/**
* Shows info on Ajax request
*/
$.nette.ext('diagnostics.jsonpanel', {
start: function (xhr, settings) {
var $panel = this.getPanel();
if (!$panel) return;
if (this.singleReport) this.clear();
$(this.getTitle(++this.counter, 'request')).appendTo($panel);
$("<p><b>Type</b> : " + settings.type + "</p>").appendTo($panel);
$("<p><b>Url</b> : <a href='" + settings.url + "' target='_blank'>" + settings.url + "</a></p>").appendTo($panel);
},
success: function (payload) {
var $panel = this.getPanel();
if (!$panel || !payload || payload.length == 0) return;
$(this.getTitle(this.counter, 'response')).appendTo($panel);
$.each(this.getMonitored(), function(i, key) {
var count;
$helper = $('<div class="nette-ContainerPanel-parameters">');
if (key in payload) {
var count = 0;
$.each(payload[key], function(name, value) {
var output;
var code = null;
output = '<i style="color: #060">' + (typeof value) + '</i> ';
if (value === null) {
output += '<i style="color: #900">null</i>';
} else if (value === "") {
output += '<i style="color: #ccc">empty string</i>';
} else if (typeof value === 'boolean') {
output += '<i style="color: #900">' + (value ? 'true' : 'false') + '</i>';
} else if (typeof value === 'undefined') {
output += '<i style="color: #ccc">undefined</i>';
} else if (typeof value === 'number') {
output += '<i style="color: #009">' + value + '</i>';
} else {
//output += value.substr(0,100);
code = $('<pre class="nette-dump">').text(value);
code = $('<code style="display: inline;" class="nette-collapsed">').text(value.substr(0,100));
}
if (code) {
$('<a href="#" rel="next"><span class="php-key">' + name + '</span> <abbr>►</abbr> </a>').appendTo($helper);
var pre = $('<pre class="nette-dump" style="display:block;">');
code.appendTo(pre);
pre.appendTo($helper);
} else {
$('<p><b style="color: #009; font-wight: bold">' + name + "</b> : " + output + "</p>").appendTo($helper);
}
count++;
});
count = "("+ count +")";
} else {
count = "(<i>not present</i>)";
}
$("<h3 style='font-weight:bold;'>" + key + " " + count + "</h3>").appendTo($panel);
$helper.appendTo($panel);
});
}
}, {
counter: 0,
singleReport: true,
initialize: function () {
if (!($("#nette-debug").length > 0)) return false;
var panel = $('<div id="nette-debug-panel-nette-ajax-json" class="nette.panel nette-mode-float" style="background-color: #FFFFFF;position:fixed;top:100px;left:0;width:300px;">').appendTo($("#nette-debug"));
panel.html('<h1 id="nette-ajax-json-panel-title">Ajax Panel<span class="pull-right" style="font-size: 16px;">'
+ 'Single:<a href="#" id="nette-debug-panel-nette-ajax-json-mode" onclick="javacript:$.nette.ext(\'diagnostics.jsonpanel\').toggleMode();return false;">' + (this.singleReport ? 'on' : 'off') + '</a>'
+ ' | <a href="#" id="nette-debug-panel-nette-ajax-clear" onclick="javacript:$.nette.ext(\'diagnostics.jsonpanel\').clear();">Clear</a>'
+'</span></h1><div id="nette-ajax-json-panel" style="position:relative;max-height:700px;overflow:auto;width:100%;"></div>');
//$('body').css('margin-left', '300px');
return $("#nette-ajax-json-panel");
},
clear: function () {
this.panel.html('');
},
toggleMode: function () {
this.singleReport = !this.singleReport;
$("#nette-debug-panel-nette-ajax-json-mode").text(this.singleReport ? 'on' : 'off');
},
getMonitored: function () {
return ['state', 'snippets', 'bsmodals'];
},
getTitle: function (count, type) {
return '<h2 style="font:11pt/1.5 sans-serif;margin:0;padding:2px 8px;background:#3484d2;color:white">Ajax ' + type + ' #' + count + '</h2>';
},
getPanel: function () {
if (!this.panel) this.panel = this.initialize();
return this.panel;
}
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment