|
|
|
@ -26,57 +26,83 @@ var anbu = {
|
|
|
|
|
// -------------------------------------------------------------
|
|
|
|
|
// 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 ()
|
|
|
|
|
{
|
|
|
|
|
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);
|
|
|
|
|
anbu.el.main.removeClass('hidden');
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// HIDE()
|
|
|
|
|
// -------------------------------------------------------------
|
|
|
|
|
// Hide the anbu toolbar, show a tiny re-open button.
|
|
|
|
|
|
|
|
|
|
hide : function ()
|
|
|
|
|
{
|
|
|
|
|
hide: function() {
|
|
|
|
|
|
|
|
|
|
anbu.close_window();
|
|
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
anbu.el.window.slideUp(400, function () {
|
|
|
|
|
anbu.close_window();
|
|
|
|
|
anbu.el.main.addClass('hidden');
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// launch anbu on jquery dom ready
|
|
|
|
|
jQuery(document).ready(function() {
|
|
|
|
|
// launch anbu
|
|
|
|
|
anbu.start();
|
|
|
|
|
});
|