Skip to content

Instantly share code, notes, and snippets.

@ryanschuhler
Created June 22, 2013 00:11
Show Gist options
  • Save ryanschuhler/5835257 to your computer and use it in GitHub Desktop.
Save ryanschuhler/5835257 to your computer and use it in GitHub Desktop.
This script toggles the class "pop-click-active" on any div with the class "pop-click" when it is clicked. When the user clicks anywhere on the screen that is not tagged with "pop-click-content", it will then remove the class. This is helpful for things like menus that will appear when something is clicked and disappear when they are clicked off…
AUI().use(
'aui-base',
function(A) {
var popClicks = A.all('.pop-click');
var popClickHandle;
var togglePopClick = function(event) {
event.stopPropagation();
var targetNode = event.target;
if (targetNode.hasClass('pop-click-content') || targetNode.ancestor('.pop-click-content')) {
return;
}
var activePopClick = A.one('.pop-click-active');
if (activePopClick) {
activePopClick.removeClass('pop-click-active');
}
var currentTargetNode = event.currentTarget;
if (currentTargetNode.hasClass('pop-click') && (currentTargetNode != activePopClick)) {
currentTargetNode.addClass('pop-click-active');
}
activePopClick = A.one('.pop-click-active');
if (activePopClick && !popClickHandle) {
popClickHandle = A.getDoc().on('click', togglePopClick);
}
else if (popClickHandle && !activePopClick) {
popClickHandle.detach();
popClickHandle = null;
}
};
popClicks.on('click', togglePopClick);
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment