Merge pull request #699 from falzhobel/profiler-js-finetune
Profiler js finetune
This commit is contained in:
Phill Sparks
commit
80386977aa
|
|
@ -2,7 +2,7 @@ .anbu
|
|||
{
|
||||
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;
|
||||
|
|
@ -21,7 +21,7 @@ .anbu-tabs
|
|||
background-position:5px -8px;
|
||||
}
|
||||
|
||||
.anbu.hidden .anbu-tabs
|
||||
.anbu-hidden .anbu-tabs
|
||||
{
|
||||
background-image:none;
|
||||
}
|
||||
|
|
@ -214,3 +214,9 @@ .anbu pre
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -87,15 +113,15 @@ 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);
|
||||
|
|
@ -103,38 +129,41 @@ var anbu = {
|
|||
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);
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -142,27 +171,24 @@ var anbu = {
|
|||
// -------------------------------------------------------------
|
||||
// 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();
|
||||
});
|
||||
|
|
@ -166,7 +166,7 @@ .content>h1:not(:first-child) {
|
|||
.content table
|
||||
{
|
||||
border-collapse:collapse
|
||||
border:1px solid #eee;
|
||||
border: 1px solid #eee;
|
||||
width:100%;
|
||||
line-height:1.5em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue