Created
November 8, 2018 17:57
Star
You must be signed in to star a gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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">×<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