Commit 80386977 authored by Phill Sparks's avatar Phill Sparks

Merge pull request #699 from falzhobel/profiler-js-finetune

Profiler js finetune
parents 3e92ee27 5f0e70a2
......@@ -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;
......@@ -21,7 +21,7 @@ background-repeat:no-repeat;
background-position:5px -8px;
}
.anbu.hidden .anbu-tabs
.anbu-hidden .anbu-tabs
{
background-image:none;
}
......@@ -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;
}
......@@ -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();
});
\ No newline at end of file
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment