Skip to content

Instantly share code, notes, and snippets.

@bganicky
Created April 14, 2010 10:56
Show Gist options
  • Select an option

  • Save bganicky/365679 to your computer and use it in GitHub Desktop.

Select an option

Save bganicky/365679 to your computer and use it in GitHub Desktop.
var FancyLogin = {};
/*
* First things first.
* 1. take the login block and put it where it belongs
* 2. initialize the overlay
* 3. call function which handles behavior
*
*/
FancyLogin.init = function () {
FancyLogin.block = $('#block-user-0');
FancyLogin.target = $('.top-navigation .item-list .first');
if (!FancyLogin.block.length) {
return;
}
FancyLogin.block.appendTo(FancyLogin.target);
FancyLogin.Overlay.init();
FancyLogin.attachEvents();
};
/*
* Basically handles the clicking ;)
* - clicking the trigger show/hides the login
* - clicking the overlay hides the login
*
*/
FancyLogin.attachEvents = function () {
var trigger = FancyLogin.target.find('a');
trigger.click(function () {
if (!FancyLogin.block.is(':visible')) {
FancyLogin.show();
return false;
}
else {
FancyLogin.hide();
return false;
}
});
FancyLogin.Overlay.element.click(FancyLogin.hide);
};
/*
* Showing and hiding the block.
* It basically does 2 things:
* - shows/hides the overlay
* - shows/hides the login itself
* Show method has an extra feature of focusing the user name input.
*
*/
FancyLogin.show = function () {
FancyLogin.Overlay.show();
FancyLogin.block.fadeIn('slow');
$('#edit-name').focus();
};
FancyLogin.hide = function () {
FancyLogin.Overlay.hide();
FancyLogin.block.fadeOut('slow');
};
/* Overlay module */
FancyLogin.Overlay = {
init: function () {
FancyLogin.Overlay.element = $('<div id="overlay">').appendTo('body');
},
show: function () {
FancyLogin.Overlay.element.fadeIn('slow');
},
hide: function () {
FancyLogin.Overlay.element.fadeOut('slow');
}
};
$(document).ready(FancyLogin.init);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment