-
-
Save doubleedesign/6c7e7f17db872ca367052de21e157369 to your computer and use it in GitHub Desktop.
/** | |
* Convert milliseconds to the desired format | |
* @param milliseconds | |
* @param format | |
* @returns {*} | |
* @see https://gist.github.com/flangofas/714f401b63a1c3d84aaa | |
*/ | |
function convertMilliseconds(milliseconds, format) { | |
var total_days, total_hours, total_minutes, total_seconds; | |
total_seconds = parseInt(Math.floor(milliseconds / 1000)); | |
total_minutes = parseInt(Math.floor(total_seconds / 60)); | |
total_hours = parseInt(Math.floor(total_minutes / 60)); | |
total_days = parseInt(Math.floor(total_hours / 24)); | |
switch(format) { | |
case 'seconds': | |
return total_seconds; | |
break; | |
case 'minutes': | |
return total_minutes; | |
break; | |
case 'hours': | |
return total_hours; | |
break; | |
case 'days': | |
return total_days; | |
break; | |
default: | |
console.log('No format parameter given to convertMilliseconds()'); | |
return; | |
break; | |
} | |
} |
window.addEventListener('load', function() { | |
initPopUpSubscription(); | |
/** | |
* Popup subscription form | |
*/ | |
function initPopUpSubscription() { | |
// Get elements | |
var popup = document.getElementById('subscribe-modal'); | |
var delay = popup.dataset.delay * 1000; // seconds to milliseconds | |
var frequency = popup.dataset.frequency; | |
var form_id = popup.dataset.form_id; | |
// Check if the user has already subscribed according to their local storage | |
var alreadySubscribed = localStorage.getItem('subscribed'); | |
// If a dismissed_date is stored in local storage, check how long ago it was | |
var alreadyDismissed = localStorage.getItem('dismissed_date'); | |
var howLongSinceDismissed = 100; | |
if (alreadyDismissed != null) { | |
var today = new Date().getTime(); | |
var dismissed = parseInt(alreadyDismissed); | |
var todayInDays = convertMilliseconds(today, 'days'); | |
var dismissedDays = convertMilliseconds(dismissed, 'days'); | |
howLongSinceDismissed = todayInDays - dismissedDays; | |
} | |
// So should we show the popup? | |
var show_popup = false; | |
if ((alreadySubscribed != null) || (howLongSinceDismissed > frequency)) { | |
show_popup = true; | |
} | |
// Show it if true | |
if (show_popup) { | |
// Show the popup after the delay time | |
if (popup != null) { | |
setTimeout(function () { | |
$('#subscribe-modal').foundation('open'); | |
}, delay); | |
} | |
// When the popup has appeared... | |
$('#subscribe-modal').on('open.zf.reveal', function () { | |
// When the form is submitted | |
$(document).on('nfFormSubmitResponse', function (event, response, id) { | |
// Make sure we're responding to the right form, using the form ID | |
if(response.id == form_id) { | |
// Save subscribed state to local storage | |
localStorage.setItem('subscribed', 'true'); | |
// Close the window after a couple of seconds | |
setTimeout(function () { | |
$('#subscribe-modal').foundation('close'); | |
}, 2000); | |
} | |
}); | |
// When the popup is dismissed | |
var closebutton = document.getElementById('dismiss-subscribe-popup'); | |
if (closebutton != null) { | |
closebutton.addEventListener('click', function () { | |
event.preventDefault(); | |
// Save timestamp in local storage if the user has not subscribed | |
// Note: We shouldn't actually get to this, because the modal should close after a successful subscription, | |
// but I'm putting it here just in case, to ensure we don't get both values stored unnecessarily | |
if (alreadySubscribed == null) { | |
var today = new Date().getTime(); | |
localStorage.setItem('dismissed_date', today.toString()); | |
} | |
// Close modal | |
$('#subscribe-modal').foundation('close'); | |
}); | |
} | |
}); | |
} | |
} // end subscription popup | |
}); |
<?php | |
$popup = get_field('popup', 'option'); | |
$headline = $popup['headline']; | |
$message = $popup['message']; | |
$form = $popup['form_shortcode']; | |
$form_id = str_replace('[ninja_form id=', '', $form); | |
$form_id = str_replace(']', '', $form_id); | |
$loading_delay = $popup['loading_delay']; | |
$frequency = $popup['frequency']; | |
// Note: data-delay, data-frequency, and data-form_id are not part of the Foundation Reveal spec. | |
// See theme.js for their usage. | |
?> | |
<div class="reveal" id="subscribe-modal" | |
data-reveal | |
data-close-on-click="false" | |
data-delay="<?php echo $loading_delay; ?>" | |
data-frequency="<?php echo $frequency; ?>" | |
data-form_id="<?php echo $form_id; ?>"> | |
<button id="dismiss-subscribe-popup" class="close-button" aria-label="Close modal" type="button"> | |
<span aria-hidden="true">×</span> | |
</button> | |
<h2><?php echo $headline; ?></h2> | |
<?php if($message) { | |
echo wpautop($message); | |
} ?> | |
<?php echo do_shortcode($form); ?> | |
</div> |
Hey Maurits, thanks for letting me know that was missing! I've just added another file above with the function you need. :)
Gr8, tnx!
Hi again,
Thanks for previous support, works great, only one more thing I'm hoping you can help me with: after this timeOut function has been excuted, I's like to use Foundation6 's data-animation option, but whatever I try, I cant get it to work afterwards (so after firing the reveal modal to open). Is there away to keep using data-options,or should I look for a css solution ? I'd rather stick to the preset F6 animation workflow but not sure if thats possible, any suggestions? Much appreciated again!
Unfortunately I haven't used the F6 animations with this so I can't answer that, sorry!
Thanks for this, but I seem to be having an issue where it loads in right away.
I have edited the following line;
var delay = popup.dataset.delay * 1000; // seconds to milliseconds
However, no matter what I set here it still loads in right away.
What am I missing?
@BadScooter1980 what is popup.dataset.delay set to in your code?
Hi, thank so much, trying out your script but I get an error on function "convertMilliseconds", is not defined, and I dont see it indeed being declared, could that be the case? How to solve this? Tnx!! Maurits