/*
* jQuery MenuBarr-Head
*
* Copyright 2011, Marco Poglie
* THINKPLACE scripts.
* http://www.thinkplace.it
* http://www.poglie.com
*
*/
(function($) {
//
var menuBarrT = function(element, options){
//Defaults are below
var settings = $.extend({}, $.fn.menuBarrTop.defaults, options);
//Trigger the afterLoad callback
settings.afterLoad.call(this);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// INIT-SETTING
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// --------[ ELEMENT base ]-------
var _element = $(element); // l'oggetto selezionato Jquery
var figli = _element.children();
var lunghezzaElement = figli.length;
var elementsFigli =[];
// --------[ PARAMETRI di Configurazione ]-------
var altChiuso = 220;// la misura della barra normalmente chiusa
var altAperto = 220; // il massimo di apertura
var alt = altAperto-altChiuso;
var margine = 10; // il margine tra le cose
var margineY_Logo = alt; // la posizione Y del logo rispettoil lato inferiore della barra
var posY_Logo;
// ------- gli oggetti ------
var content;
var logo;
var menu;
var social; //
var descrizione; //
var quit; // la X chiude
var pagina; // pagina è l'elemento $('#page-content') che viene creato e distrutto dinamicamente
// ------- controllo dei ink ------
var isOpen = false; // Booleana true se la pagina è aperta (viene definito in Abbassa / Alza)
var pageSelect = -1; // l'indice del bottone scelo
var old_pageSelect; // l'indice del bottone precedentemente scelto
// --------[ Memoria ALTEZZE ]-------
var altMenu = 0; // per misurare l'altezza del menu (nel menu è compreso il margine sotto)
var altPagina = 0; // per misurare l'altezza della pagina
var altVecchio = 0;
// --------[ PAGINE ]-------
var pageUrl = "#"; // la pagina che deve aprire
var pagesUrls = Array();
// --------[ Memoria POSIZIONI ]-------
var posAbbasso = 0; // è la misurazione dell'abbassamento in base al contenuto dopo il loading della pagina
var posQuit = 0; // è la posizione della x quit rispetto element che lo contiene
/*
var bgPage;
if(settings.otherSelector!='' && $(settings.otherSelector)){
bgPage = $(settings.otherSelector);
}else{
bgPage = null;
}
*/
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// EVENT functions
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// --------------------------------------[ menu-FIRST ]
var onClickBut = function(event){
event.preventDefault();
event.stopPropagation();
old_pageSelect = pageSelect;
pageSelect = $(this).parent().index();
pageUrl = $(this).attr("href");
settings.clickBut(pageSelect, old_pageSelect); // callBack > ClickQuit
controllaBut();
if(settings.allCallback==false){
if(isOpen){ // se è aperto scambio ...
if(quit) quit.fadeOut();
scambia();
}else{
//
creaPagina(true, function(){
if(settings.otherSelector!='') isOpen=true;
});// solo la prima volta
}
}
};
var onOverBut = function(event){
$(this).stop().animate({color:settings.colorHover}, 600, 'easeOutQuad', function(){});
};
var onOutBut = function(event){
$(this).stop().animate({color:settings.colorTx}, 400, 'easeOutQuad', function(){});
};
// --------------------------------------[ menu-Social ]
var onClickSocial = function(event){
};
var onOverSocial = function(event){
$(this).stop().animate({opacity:.5});
};
var onOutSocial = function(event){
$(this).stop().animate({opacity:1});
};
// --------------------------------------[ x - quit ]
var onClickQuit = function(event){
//
//
$(this).fadeOut();
cancellaPagina(true, true, function(){
//
alza(function(){settings.chiuso();});
settings.clickQuit(pageSelect); // callBack clickQuit
// non uso alza/abbassa qiondi
if(settings.otherSelector!='') isOpen=false;
//
});
};
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Controllo dei BOTTONI
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// il controllo dei bottoni serve ad accendere (colore) il bottone apena cliccato .. elimino gli eventi per quel bottone
var controllaBut = function(index){
if(index!=null){
//window.alert(index);
old_pageSelect = pageSelect;
pageSelect = index;
}
var k;
if(menu) menu.children().each(function(i, el){
_element.append($(el).attr('id'));
k = $(this).index();
if(k==pageSelect){
// il bottone scelto !
rimuoviEventi($(this).children('a'));
$(this).children('a').stop().delay(0).animate({'color':settings.colorSelect});
//$(this).children('a').stop().delay(0).animate({'backgroundColor':settings.colorHover});
$(this).children('a').stop().animate({opacity:1});
$(this).children('a').attr('href','#');
if($('#displayScroll')) $('#displayScroll').text(pageSelect);
}else{
// tutti gli altri bottoni del menu !
/*aggiungiEventi($(this).children('a'));
$(this).children('a').animate({opacity:1});
$(this).animate({'backgroundColor':settings.colorTxBg});
//if($(this).index() == old_pageSelect) $(this).children('a').attr('href',pagesUrls[old_pageSelect]);*/
}
if(k==old_pageSelect){
// il vecchio ritorna allo stato normale
aggiungiEventi($(this).children('a'));
$(this).children('a').stop().animate({'color':settings.colorTx});
//$(this).children('a').stop().animate({'backgroundColor':settings.colorTx});
//if($(this).index() == old_pageSelect) $(this).children('a').attr('href',pagesUrls[old_pageSelect]);
}
});// end each
}
var aggiungiEventi = function(target){
target.bind("click",onClickBut);
target.hover(onOverBut, onOutBut);
}
var rimuoviEventi = function(target){
target.unbind();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// INIT
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
var init = function(setting){
// ciclo i figli di element
figli.each(function() {
var figlio = $(this);
var sottofigli = figlio.children();
content = figlio; // <---
// Posizionamento iniziale degli oggetti, è tutto nascosto o fuori dalla scena
//
// ---[ div#header ]---
_element.css({'top':'-'+_element.height()-50+'px'});
//
if(figlio.attr('id') == "quit-head"){
quit = figlio;
quit.css({'display':'block'});
if(quit){
quit.hover(onOverBut, onOutBut);
quit.bind("click", onClickQuit);
}
}
if(figlio.attr('class') == "content"){
figlio.children().each(function() {
var sottofiglio = $(this);
//
//
// ---[ h1#logo ]--------------------------------------------------------------------------------------
if(sottofiglio.is('h1') && sottofiglio.attr('id') == "logo"){
logo = sottofiglio; // <---
posYcss_Logo = logo.css('top');
posY_Logo = Number(posYcss_Logo.substr(0, posYcss_Logo.length-2));
var fuori = (_element.position().top)+(logo.height())+20;
sottofiglio.css({'top':'-'+fuori+'px'});
}
// ---[ ul#first-menu ]--------------------------------------------------------------------------------
if(sottofiglio.is('ul') && sottofiglio.attr('id') == "first-menu"){
menu = sottofiglio;
altMenu = menu.children('li').height();
var paddingTopMenu = altAperto-altMenu-margine;
//sottofiglio.css('paddingTop',paddingTopMenu);
// ciclo gli elementi li per assegnare gli eventi
// e anche per misurare la larghezza effettiva
var larghezzaMenu = 0;
menu.children().each(function(i){
pagesUrls[i] = $(this).children('a').attr('href');// registro l'array
$(this).css('opacity','0');
//_element.append($(this).width()+' - ');
larghezzaMenu+=$(this).outerWidth(true);
elementsFigli[i] = $(this).children('a').text();
$(this).children('a').css({color:settings.colorTx});
$(this).children('a').bind("click",onClickBut);
$(this).children('a').hover(onOverBut, onOutBut);
});// fine del ciclo ul#first-menu
//_element.append(' = '+Number(larghezzaMenu));
/*
content.css({
'width':larghezzaMenu+'px'
});
*/
}
// ---[ ul#social ]-------------------------------------------------------------------------------------
if(sottofiglio.is('ul') && sottofiglio.attr('id') == "social-menu"){
//sottofiglio.css('bottom',alt+50+'px');
social = sottofiglio; // <---
social.children().each(function(){
$(this).css('opacity','0');
//_element.append($(this).width()+' - ');
larghezzaMenu+=$(this).outerWidth(true);
$(this).children('a').bind("click",onClickSocial);
$(this).children('a').hover(onOverSocial, onOutSocial);
});// fine del ciclo ul#first-menu
}
// ---[ p#description ]--------------------------------------------------------------------------------
if(sottofiglio.is('p') && sottofiglio.attr('id') == "description"){
sottofiglio.css({'opacity':'0'});
descrizione = sottofiglio; // <---
}
});
}
});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// APRI - (crea)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
var apri = function(){
// ------------------------[ START ]----------------------------
// l'animazione iniziale quella che fa entrare la lama head
_element.delay(settings.delay).animate({
'top': -1
}, settings.speed, 'easeOutExpo', function() {
//////////////////////////////////////////////////////////////
// al completamento dell'animazione di entrata di _element...
//////////////////////////////////////////////////////////////
settings.onStart(); // mmmm.. qui è troppo presto, forse meglio dopo l'entrata dell'ultimo bottone...
var count = 0;
if(content.attr('id') == "#quit-head"){
}
// ... controlla se esiste content (#content)
if(content.attr('class') == "content"){
var contentFigli = content.children();
// ciclo solo i figli di content
contentFigli.each(function() {
var sottofiglio = $(this);
// ---[ h1#logo ]---
if(logo){
logo.animate({'top':posY_Logo+'px'}, 300, 'easeOutExpo', function() {});
}
// ---[ ul#first-menu ]---
if(sottofiglio.is('ul') && sottofiglio.attr('id') == "first-menu"){
//_element.append();
//sottofiglio.delay(300).animate({bottom: altAperto-(sottofiglio.height())+'px'}, 1000, 'easeOutExpo', function() {/*chiudi();*/});
menu.children().each(function(i){
$(this).delay(100*i).animate({'opacity':1}, 600, 'easeInOutExpo', function() {
//...all'ultimo restituisco on start
if(i==menu.children().length-1) {/*settings.onStart();*/};
});
});
}
// ---[ ul#social-menu ]---
if(sottofiglio.is('ul') && sottofiglio.attr('id') == "social-menu"){
//sottofiglio.delay(100).animate({bottom: margine+'px'}, 1200, 'easeOutExpo', function() {});
social.children().each(function(i){
$(this).delay(700+100*i).animate({'opacity':'1'}, 600, 'easeInOutExpo', function() { });
});
}
// ---[ p#description ]---
if(sottofiglio.is('p') && sottofiglio.attr('id') == "description" && sottofiglio.css('display')!='none'){
sottofiglio.delay(200).animate({opacity: 1}, 1400, 'easeOutExpo', function() {});
}
count++;
});
}
});
}
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CHIUDI - CANCELLA
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
var chiudi = function(){
// ------------------------[ QUIT ]----------------------------
// l'animazione iniziale quella che fa entrare la lama head
_element.animate({
top : '-'+alt-50+'px'
}, 500, 'easeInBack', function() {
});
}
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Crea PAGINA
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var creaPagina = function(crea, end){
if(crea){
if(settings.otherSelector=='') {
// ---[ '.content default' ]---------------------------------------------------------------
content.append(""); // <---
}else{
if($(settings.otherSelector)){
// ---[ 'other pageContent' ]---------------------------------------------------------------
$(settings.otherSelector).append(""); // <---
}else{
// !!! se ho sbagliato fa ancora content !!!
content.append(""); // <---
}
}
// -------------------------
pagina = $('#page-content');
// -------------------------
pagina.css({
'display':'none',
'text-align':'left',
'position':'absolute',
'bottom':altMenu+(margine*2)+'px'
});
pagina.data('margine',margine);
pagina.data('alt',alt);
pagina.data('altAperto',altAperto);
pagina.data('altChiuso',altChiuso);
//pagina.data('altVecchio',altVecchio);
loadPagina(pagina, false, end); // la prima volta
}else{
//pagina.data('altVecchio',altVecchio); // variabile
loadPagina(pagina, true, end); // ad ogni scambio
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Mostra PAGINA
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var mostraPagina = function(end){
// la pagina viene mostrata solo quando, è stato caricato il contenuto
pagina.fadeIn( 600, 'easeInOutExpo', function() {
if(end) end();
});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Cancella PAGINA
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*var cancellaPagina = function(cancella, end){
pagina.delay(0).fadeOut( 400, 'easeInOutExpo', function() {
end();
if(cancella) $(this).remove();
});
}*/
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Cancella PAGINA
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var cancellaPagina = function(cancella, resetBut, end){
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function chiudiPagina(){
/*pagina.fadeOut( 0, 'easeInOutExpo', function() {
isOpen = false;
end();
if(cancella) $(this).remove();
});*/
if(cancella) pagina.remove();
isOpen = false;
if(end) end();
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
if(resetBut){
old_pageSelect = pageSelect;
pageSelect = -1;
controllaBut();
}
// se la pagina è aperta ed esiste la funzione di chiusura:
if(isOpen && pagina.data('chiudi')){
// uso la funzione 'chiudi()' globalizzata in DATA nel file caricato
// e poi cancello #page-content
pagina.data('chiudi')(function(){
chiudiPagina();
});
}else{
chiudiPagina();
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LOAD la pagina
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var loadPagina = function(elem, scambia, end){
//
if(scambia) $(elem).empty(); // se non è "la prima volta" svuoto il contenuto della pagina precedente
//
if(pageUrl!="#"){
elem.load(pageUrl, function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$(this).append(msg + xhr.status + " " + xhr.statusText);
}else{
/* da quello che ho capito è che dalla versione JQ1.6
restituisce [response] automaticamente nell'oggetto indicato alla chiamata $().load
quindi append non serve*/
//
// $(this).append(response);
//
// misuro la pagina
altVecchio = altPagina;
altPagina = $(this).outerHeight(true);
// I - abbasso la barra secondo la misura ricavata dopo il loading della pagina
// II - mostro la pagina solo dopo che si è abbassata la lama
posAbbasso = -altAperto+altMenu+altPagina+(margine*3);
//
if(settings.otherSelector==''){
abbassa(posAbbasso, function(){
mostraPagina(end);
posizionaQuit();
});
}else{
mostraPagina(end);
posizionaQuit();
}
}
});
}else{
// se l' href è '#' si chiude..
alza(function(){});
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// QUIT/PAGINA - X
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var posizionaQuit = function(){
//_element.append(altAperto);
//_element.append(posAbbasso);
//_element.append(posAbbasso+altAperto);
if(settings.otherSelector==''){
// la X si appoggia in base all'abbasamento dela lama
posQuit = altAperto-(posAbbasso+altAperto)+margine;
}else{
// se la lama non si abassa la X è sempre nello stesso punto
posQuit = altAperto-(altChiuso)+margine;
}
quit.css({'top':posQuit, 'height':'100px', 'display':'none'});
quit.fadeIn();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ABBASSA (apertura)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var abbassa = function(pos, end){
_element.delay(200).animate({top:pos}, 1000, 'easeInOutExpo', function() {
isOpen=true;
end();
});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ALZA (chiusura)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var alza = function(end){
_element.animate({top:alt*-1}, 700, 'easeOutExpo', function() {
isOpen=false;
end();
});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// SCAMBIA (!)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var scambia = function(){
//
cancellaPagina(false, false, function(){ creaPagina(false, function(){
// se uso otherSelector
// non uso alza / abbassa quindi assegno qui isOpen
if(settings.otherSelector!='') isOpen=true;
});
// non uso alza / abbassa
if(settings.otherSelector!='') isOpen=false;
});
//
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// permalink > index
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var permalinktoindex = function(permalink){
// questo metodo è interrogato dal mail per conoscere l'indice in corrispondenza di un determinato permalink associato ala pagina
// quindi:
// ciclo l'elenco di voci nel menu principale
var indexRestituito;
menu.children().each(function(i){
if(permalink==pagesUrls[i]){
indexRestituito = i;
}
});
return indexRestituito
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// MOSTRA
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var mostra = function(){
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// NASCONDI
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var nascondi = function(){
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// RESIZING
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var scala = function(){
}
/***********************************************************************************************************************/
var vars = {
pageSelect: pageSelect,
chiudi: chiudi,
mostra: mostra,
nascondi: nascondi,
controllaBut:controllaBut,
permalinktoindex: permalinktoindex
};
_element.data('vars',vars)
/***********************************************************************************************************************/
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// GOOOOOOO
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
init(settings);
apri();
return this;
};
$.fn.menuBarrTop = function(options) {
return this.each(function(key, value){
var element = $(this);
// Rientro anticipato dell'attrubuto se questo elemento ha già un plugin istanza
if (element.data('menubarrtop')) return element.data('menubarrtop');
// COSTRUTTORE: -----------------------------
var menubarrtop = new menuBarrT(this, options);
// ------------------------------------------
// memorizzo il l'istanza in data
element.data('menubarrtop', menubarrtop);
});
};
//Default settings
$.fn.menuBarrTop.defaults = {
delay: 0,
speed: 700,
alignMenu:'left',
otherSelector:'',
colorTx:'#000000',
colorTxBg:'#FFFFFF',
colorHover:'#CCCCCC',
colorSelect:'#FF0000',
allCallback:false,
afterLoad: function(){},
onStart: function(){},
clickQuit: function(){},
clickBut: function(){}
};
$.fn._reverse = [].reverse;
})(jQuery);