Skip to content

Commit

Permalink
Merge pull request laravel#699 from falzhobel/profiler-js-finetune
Browse files Browse the repository at this point in the history 
Profiler js finetune
  • Loading branch information
@sparksp
sparksp committed May 23, 2012
2 parents 3e92ee2 + 5f0e70a commit 8038697
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 80 deletions.
10 changes: 8 additions & 2 deletions laravel/profiling/profiler.css
View file
Expand Up @@ -2,7 +2,7 @@
{
font-family:Helvetica, "Helvetica Neue", Arial, sans-serif !important;
font-size:14px !important;
background-color:#222 !important;
background-color:#222 !important;
position:fixed !important;
bottom:0 !important;
right:0 !important;
Expand All @@ -21,7 +21,7 @@ background-repeat:no-repeat;
background-position:5px -8px;
}

.anbu.hidden .anbu-tabs
.anbu-hidden .anbu-tabs
{
background-image:none;
}
Expand Down Expand Up @@ -214,3 +214,9 @@ span.anbu-count
white-space: -o-pre-wrap;
word-wrap: break-word;
}

/* hide panel-open elements, will become visible through anbu.start() */

#anbu-close, #anbu-zoom, .anbu-tab-pane {
visibility: hidden;
}
180 changes: 103 additions & 77 deletions laravel/profiling/profiler.js
View file
Expand Up @@ -5,78 +5,104 @@ var anbu = {
// Binding these elements early, stops jQuery from "querying"
// the DOM every time they are used.

el : {
main : $('.anbu'),
close : $('#anbu-close'),
zoom : $('#anbu-zoom'),
hide : $('#anbu-hide'),
show : $('#anbu-show'),
tab_pane : $('.anbu-tab-pane'),
hidden_tab_pane : $('.anbu-tab-pane:visible'),
tab : $('.anbu-tab'),
tabs : $('.anbu-tabs'),
tab_links : $('.anbu-tabs a'),
window : $('.anbu-window'),
closed_tabs : $('#anbu-closed-tabs'),
open_tabs : $('#anbu-open-tabs'),
content_area : $('.anbu-content-area')
el: {
main: $('.anbu'),
close: $('#anbu-close'),
zoom: $('#anbu-zoom'),
hide: $('#anbu-hide'),
show: $('#anbu-show'),
tab_pane: $('.anbu-tab-pane'),
hidden_tab_pane: $('.anbu-tab-pane:visible'),
tab: $('.anbu-tab'),
tabs: $('.anbu-tabs'),
tab_links: $('.anbu-tabs a'),
window: $('.anbu-window'),
closed_tabs: $('#anbu-closed-tabs'),
open_tabs: $('#anbu-open-tabs'),
content_area: $('.anbu-content-area')
},

// CLASS ATTRIBUTES
// -------------------------------------------------------------
// Useful variable for Anbu.

isZoomed : false, // is anbu in full screen mode
small_height : $('.anbu-content-area').height(), // initial height of content area
active_tab : 'anbu-active-tab', // the name of the active tab css
tab_data : 'data-anbu-tab', // the data attribute of the tab link
mini_button_width : '2.6em', // size of anbu when compact
window_open : false, // is the top window open?
active_pane : '', // current active pane
// is anbu in full screen mode
is_zoomed: false,

// initial height of content area
small_height: $('.anbu-content-area').height(),

// the name of the active tab css
active_tab: 'anbu-active-tab',

// the data attribute of the tab link
tab_data: 'data-anbu-tab',

// size of anbu when compact
mini_button_width: '2.6em',

// is the top window open?
window_open: false,

// current active pane
active_pane: '',

// START()
// -------------------------------------------------------------
// Sets up all the binds for Anbu!

start : function ()
{
// hide initial elements
start: function() {

anbu.el.close.hide();
anbu.el.zoom.hide();
anbu.el.tab_pane.hide();
// hide initial elements
anbu.el.close.css('visibility', 'visible').hide();
anbu.el.zoom.css('visibility', 'visible').hide();
anbu.el.tab_pane.css('visibility', 'visible').hide();

// bind all click events
anbu.el.close.click( function () { anbu.close_window(); });
anbu.el.hide.click( function () { anbu.hide(); });
anbu.el.show.click( function () { anbu.show(); });
anbu.el.zoom.click( function () { anbu.zoom(); });
anbu.el.tab.click( function () { anbu.clicked_tab($(this)); });
anbu.el.close.click(function(event) {
anbu.close_window();
event.preventDefault();
});
anbu.el.hide.click(function(event) {
anbu.hide();
event.preventDefault();
});
anbu.el.show.click(function(event) {
anbu.show();
event.preventDefault();
});
anbu.el.zoom.click(function(event) {
anbu.zoom();
event.preventDefault();
});
anbu.el.tab.click(function(event) {
anbu.clicked_tab($(this));
event.preventDefault();
});

},

// CLICKED_TAB()
// -------------------------------------------------------------
// A tab has been clicked, decide what to do.

clicked_tab : function (tab)
{
clicked_tab: function(tab) {

// if the tab is closed
if(anbu.window_open && anbu.active_pane == tab.attr(anbu.tab_data))
{
if (anbu.window_open && anbu.active_pane == tab.attr(anbu.tab_data)) {
anbu.close_window();
}
else
{
} else {
anbu.open_window(tab);
}

},

// OPEN_WINDOW()
// -------------------------------------------------------------
// Animate open the top window to the appropriate tab.

open_window : function (tab)
{
open_window: function(tab) {

// can't directly assign this line, but it works
$('.anbu-tab-pane:visible').fadeOut(200);
$('.' + tab.attr(anbu.tab_data)).delay(220).fadeIn(300);
Expand All @@ -87,82 +113,82 @@ var anbu = {
anbu.el.zoom.fadeIn(300);
anbu.active_pane = tab.attr(anbu.tab_data);
anbu.window_open = true;
},

},

// CLOSE_WINDOW()
// -------------------------------------------------------------
// Animate closed the top window hiding all tabs.

close_window : function()
{
close_window: function() {

anbu.el.tab_pane.fadeOut(100);
anbu.el.window.slideUp(300);
anbu.el.close.fadeOut(300);
anbu.el.zoom.fadeOut(300);
anbu.el.tab_links.removeClass(anbu.active_tab);
anbu.active_pane = '';
anbu.window_open = false;
},

},

// SHOW()
// -------------------------------------------------------------
// Show the Anbu toolbar when it has been compacted.

show : function ()
{
anbu.el.closed_tabs.fadeOut(600, function () {
anbu.el.open_tabs.fadeIn(200);
})
anbu.el.main.animate({width: '100%'}, 700);
anbu.el.main.removeClass('hidden');
show: function() {

anbu.el.closed_tabs.fadeOut(600, function () {
anbu.el.main.removeClass('anbu-hidden');
anbu.el.open_tabs.fadeIn(200);
});
anbu.el.main.animate({width: '100%'}, 700);

},

// HIDE()
// -------------------------------------------------------------
// Hide the anbu toolbar, show a tiny re-open button.

hide : function ()
{

hide: function() {

anbu.close_window();
anbu.el.window.slideUp(400, function () {
anbu.close_window();
anbu.el.main.addClass('hidden');
anbu.el.open_tabs.fadeOut(200, function () {
anbu.el.closed_tabs.fadeIn(200);
})
anbu.el.main.animate({width: anbu.mini_button_width}, 700);
});

setTimeout(function() {
anbu.el.window.slideUp(400, function () {
anbu.close_window();
anbu.el.main.addClass('anbu-hidden');
anbu.el.open_tabs.fadeOut(200, function () {
anbu.el.closed_tabs.fadeIn(200);
});
anbu.el.main.animate({width: anbu.mini_button_width}, 700);
});
}, 100);

},

// TOGGLEZOOM()
// -------------------------------------------------------------
// Toggle the zoomed mode of the top window.

zoom : function ()
{
if(anbu.isZoomed)
{
zoom: function() {

if (anbu.is_zoomed) {
height = anbu.small_height;
anbu.isZoomed = false;
}
else
{
anbu.is_zoomed = false;
} else {
// the 6px is padding on the top of the window
height = ($(window).height() - anbu.el.tabs.height() - 6) + 'px';
anbu.isZoomed = true;
anbu.is_zoomed = true;
}

anbu.el.content_area.animate({height: height}, 700);
}

}
}

};

jQuery(document).ready(function () {
// launch anbu
// launch anbu on jquery dom ready
jQuery(document).ready(function() {
anbu.start();
});
2 changes: 1 addition & 1 deletion public/laravel/css/style.css
View file
Expand Up @@ -166,7 +166,7 @@ div.home>h2 {
.content table
{
border-collapse:collapse
border:1px solid #eee;
border: 1px solid #eee;
width:100%;
line-height:1.5em;
}
Expand Down

0 comments on commit 8038697

Please sign in to comment.