Skip to content

Instantly share code, notes, and snippets.

@skang77e
Created November 8, 2018 17:57
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save skang77e/bae3509d6e8ce6bb7a88b8edb8586562 to your computer and use it in GitHub Desktop.
<!-- Start lightbox test -->
<script>
//We want to track interaction via GA, but if it doesn't exist, we don't want to throw an error.
if(typeof(ga) !== 'function') {
function ga() {return false;}
}
jQuery(document).ready(function($) {
var modalOpen = false;
//setting a window variable to be used for GA calls, this will be the event label
window.lbhelp = {gaEvent:'powerofmany18'}
function closeModal(e) {
ga('send', 'event', 'lightbox', 'close', window.lbhelp.gaEvent, {nonInteraction:true});
if (e.keyCode == 13 || e.type == 'click' || e.keyCode == 27) { //allow modal to be closed on a mouse click, the escape key, or enter only
$('div.modal-shade').hide();
$('div.modal-content').hide();
$('#skip-link a').get(0).focus()
modalOpen = false;
}
}
function showModal() {
ga('send', 'event', 'lightbox', 'show', window.lbhelp.gaEvent, {nonInteraction:true});
$('div.modal-shade').show();
$('div.modal-content').show();
$('a.close-modal').get(0).focus();
var closeFocus = true;
$(document).keyup(function(e) { //start listening to 'esc' for closing thi modal
if (e.keyCode == 27) { // escape key maps to keycode `27`
closeModal(e);
}
});
modalOpen = true;
document.addEventListener('focus', function( event ) { //capture the focus for accessibility reasons
if (modalOpen) { //but only run this if the modal is open
event.stopPropagation();
if(closeFocus) {
//console.log('link');
document.getElementById('modal-donate-link').focus();
closeFocus = false;
}
else {
//console.log('close');
$('a.close-modal').get(0).focus();
closeFocus = true;
}
}
}, true);
}
$(document.body).prepend('<div class="modal-content" role="dialog" aria-label="Modal Donation Offer" style="box-shadow: 0 5px 15px rgba(0,0,0,.5); position:fixed;top: 10%; left: 50%;transform: translateX(-50%);z-index:1001;width:90%;max-width:650px;display:none"><a role="button" class="close-modal outline-focus" style="position: absolute;top: -1.3em;right: 0;border: none;background: none;color: #FFF;font-size: 2em;cursor:pointer; display: inline;text-align: right;text-decoration:none" aria-label="Close Modal Donation Offer" tabindex="0"><span aria-hidden="true">&times;<a href="https://givingtuesday.georgetown.edu/2018/gt?appealcode=obg802&utm_source=glb&utm_medium=referral&utm_campaign=Web18" tabindex="0" title="Click to Donate" style="display:block" id="modal-donate-link" class="outline-focus"><img src="/sites/default/files/GivingTuesday_urgent.png" style="display: block;max-width: 100%;height: auto;" alt="Photo of Georgetown University Campus, with the following message: Giving Tuesday 2019 #HOYASFOROTHERS. Give Now" />');
$(document.body).append('<div class="modal-shade" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index:1000;background-color: #000;opacity:.8;display:none">');
$('div.modal-content a.close-modal').on('click keydown',closeModal);
$('div.modal-shade').click(closeModal);
$('a#modal-donate-link').on('click', function() {
ga('send', 'event', 'lightbox', 'donate click', window.lbhelp.gaEvent);
})
if(window.location.pathname.indexOf('/edit/') === -1) { //make sure we aren't on the admin on Drupal
//showModal(); //uncomment for testing;
var cookieName = 'givingtuesday18'; //this should be changed per campaign
var cookiePresent = getCookie(cookieName);
if(cookiePresent !== 'true') { //the cookie isn't set so let's set it
var d = new Date();
var expDays = 7; //set the number of days the lightbox should hide for
d.setTime(d.getTime() + (expDays*24*60*60*1000));
var expires = " expires="+ d.toUTCString();
document.cookie = cookieName+'=true;' + expires + ';path=/';
var cookieSet = getCookie(cookieName);
if(cookieSet === 'true') { //make sure we could set the cookie, if we couldn't then there's a chance people will see the modal multiple times, even in the same session on, e.g. a browser that doesn't support cookies.
showModal();
}
}
}
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
</script>
<!-- END lightbox test -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment