-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* done * convert to webp * clean up * giving tuesday done * cleanup * added slash on image path * added start and end date unit time conditional and moved the click to the white box * cleanup and tested timestamps and 24 hour pause * removed unused import
- Loading branch information
Showing
10 changed files
with
453 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,185 @@ | ||
<script setup> | ||
import { ref, onMounted } from 'vue' | ||
import { gsap } from 'gsap' | ||
const { $analytics } = useNuxtApp() | ||
const displayModal = ref(false) | ||
const localStorageKey = 'gothamist-marketing-modal-shirts' | ||
let tl = null | ||
const isMoreThan24HourAgo = (date) => { | ||
const twentyFourHrInMs = 24 * 60 * 60 * 1000 | ||
const twentyFourHoursAgo = Date.now() - twentyFourHrInMs | ||
return Number(date) < twentyFourHoursAgo | ||
} | ||
const closeResponsive = () => { | ||
// set local storage timer | ||
localStorage.setItem(localStorageKey, Date.now()) | ||
displayModal.value = false | ||
} | ||
const donating = () => { | ||
//GA here | ||
$analytics.sendEvent('click_tracking', { | ||
event_category: 'Click Tracking - Radiolab Shirts Adhesion', | ||
component: 'header', | ||
event_label: 'Donate button', | ||
}) | ||
// link here | ||
window.open( | ||
'https://pledge.wnyc.org/support/gothamist/?utm_medium=adhesion&utm_source=gothamist-dot-com&utm_campaign=radiolab_shirts_adhesion', | ||
'_blank' | ||
) | ||
displayModal.value = false | ||
} | ||
const shirtAnimation = () => { | ||
setTimeout(() => { | ||
tl = gsap.timeline({ repeat: -1 }) | ||
tl.to('#shirt1', { delay: 1, opacity: 0 }) | ||
.to('#shirt2', { opacity: 1 }, '-=0.5') | ||
.to('#shirt2', { delay: 1, opacity: 0 }) | ||
.to('#shirt3', { opacity: 1 }, '-=0.5') | ||
.to('#shirt3', { delay: 1, opacity: 0 }) | ||
.to('#shirt4', { opacity: 1 }, '-=0.5') | ||
.to('#shirt4', { delay: 1, opacity: 0 }) | ||
.to('#shirt1', { opacity: 1 }, '-=0.5') | ||
}, 500) | ||
} | ||
// lifecycle hooks | ||
onMounted(() => { | ||
if ( | ||
localStorage.getItem(localStorageKey) == null || | ||
isMoreThan24HourAgo(localStorage.getItem(localStorageKey)) | ||
) { | ||
shirtAnimation() | ||
displayModal.value = true | ||
} | ||
}) | ||
onBeforeUnmount(() => { | ||
tl.pause() | ||
tl.kill() | ||
}) | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<div class="marketing-modal-holder"> | ||
<Dialog | ||
class="marketing-modal" | ||
header=" " | ||
v-model:visible="displayModal" | ||
dismissableMask | ||
:draggable="false" | ||
:modal="true" | ||
:breakpoints="{ '960px': '75vw', '640px': '90vw' }" | ||
:baseZIndex="10000" | ||
@hide="closeResponsive" | ||
> | ||
<LogoGothamist class="gothamist-logo mb-3 md:mb-5" /> | ||
|
||
<div class="shirts"> | ||
<img | ||
id="shirt1" | ||
class="shirt" | ||
src="/marketing-modal/shirt-gray.webp" | ||
alt="gray shirt" | ||
/> | ||
<img | ||
id="shirt2" | ||
class="shirt" | ||
src="/marketing-modal/shirt-red.webp" | ||
alt="red shirt" | ||
/> | ||
<img | ||
id="shirt3" | ||
class="shirt" | ||
src="/marketing-modal/shirt-white.webp" | ||
alt="white shirt" | ||
/> | ||
<img | ||
id="shirt4" | ||
class="shirt" | ||
src="/marketing-modal/shirt-green.webp" | ||
alt="green shirt" | ||
/> | ||
<img | ||
class="placeholder" | ||
src="/marketing-modal/shirt-gray.webp" | ||
alt="gray shirt" | ||
/> | ||
</div> | ||
<p class="text-center font-semibold my-1 md:my-4"> | ||
Limited Edition Autumn Longsleeve | ||
</p> | ||
<h4>Get yours today!</h4> | ||
<Button | ||
class="p-button-rounded mt-4 px-5 py-3" | ||
label="Donate now" | ||
@click="donating" | ||
/> | ||
</Dialog> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style lang="scss"> | ||
.marketing-modal-holder { | ||
} | ||
.marketing-modal.p-dialog { | ||
width: 60vw; | ||
max-width: 800px; | ||
background: #56a09c; | ||
> div { | ||
background: transparent; | ||
} | ||
.p-dialog-header-icon { | ||
&:hover { | ||
background: transparent !important; | ||
} | ||
} | ||
.p-dialog-content { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
overflow: visible; | ||
flex-direction: column; | ||
@include media('<md') { | ||
padding: 0 1rem 1.5rem 1rem; | ||
} | ||
.gothamist-logo { | ||
margin-top: -20px; | ||
width: 100%; | ||
height: auto; | ||
max-width: 400px; | ||
@include media('<md') { | ||
max-width: 200px; | ||
} | ||
} | ||
} | ||
.shirts { | ||
img { | ||
position: absolute; | ||
opacity: 0; | ||
width: 100%; | ||
max-width: 436px; | ||
&:first-child { | ||
opacity: 1; | ||
} | ||
&.placeholder { | ||
position: relative; | ||
opacity: 0; | ||
} | ||
} | ||
} | ||
.p-button { | ||
max-width: auto; | ||
margin: 0; | ||
.p-button-label { | ||
font-size: 22px; | ||
@include media('<md') { | ||
font-size: inherit; | ||
} | ||
} | ||
} | ||
} | ||
</style> |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,204 @@ | ||
<script setup> | ||
import { ref, onMounted } from 'vue' | ||
import { gsap } from 'gsap' | ||
const { $analytics } = useNuxtApp() | ||
const displayModal = ref(false) | ||
const localStorageKey = 'gothamist-marketing-modal-giving-tuesday' | ||
let tl = null | ||
//https://www.epochconverter.com/ | ||
//Start of day: 1669698000 Tuesday, November 29, 2022 12:00:00 AM GMT-05:00 | ||
const startDate = '1669698000' | ||
//End of day: 1669784399 Tuesday, November 29, 2022 11:59:59 PM GMT-05:00 | ||
const endDate = '1669784399' | ||
const isMoreThan24HourAgo = (date) => { | ||
const twentyFourHrInMs = 24 * 60 * 60 * 1000 | ||
const twentyFourHoursAgo = Date.now() - twentyFourHrInMs | ||
return Number(date) < twentyFourHoursAgo | ||
} | ||
const closeResponsive = () => { | ||
// set local storage timer | ||
localStorage.setItem(localStorageKey, Date.now()) | ||
displayModal.value = false | ||
} | ||
const donating = () => { | ||
//GA here | ||
$analytics.sendEvent('click_tracking', { | ||
event_category: 'Click Tracking - Giving Tuesday Adhesion', | ||
component: 'header', | ||
event_label: 'Donate button', | ||
}) | ||
// link here | ||
window.open( | ||
'https://pledge.wnyc.org/support/gothamist/?utm_medium=adhesion&utm_source=gothamist-dot-com&utm_campaign=giving_tuesday_adhesion', | ||
'_blank' | ||
) | ||
displayModal.value = false | ||
} | ||
const initAnimation = () => { | ||
setTimeout(() => { | ||
tl = gsap.timeline({ dekay: 0.3 }) | ||
tl.from('.giving-tuesday-content-anim', { | ||
opacity: 0, | ||
scale: 0.8, | ||
}).to('.giving-tuesday-donate-btn', { | ||
scale: 0.95, | ||
yoyo: true, | ||
repeat: -1, | ||
}) | ||
}, 10) | ||
} | ||
// lifecycle hooks | ||
onMounted(() => { | ||
// current time | ||
const nowUnixTimeStamp = Math.floor(Date.now() / 1000) | ||
// time window check | ||
if (nowUnixTimeStamp > startDate && nowUnixTimeStamp < endDate) { | ||
//local storage check | ||
if ( | ||
localStorage.getItem(localStorageKey) == null || | ||
isMoreThan24HourAgo(localStorage.getItem(localStorageKey)) | ||
) { | ||
displayModal.value = true | ||
initAnimation() | ||
} | ||
} | ||
}) | ||
onBeforeUnmount(() => { | ||
tl.pause() | ||
tl.kill() | ||
}) | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<div class="marketing-modal-holder"> | ||
<Dialog | ||
class="marketing-modal" | ||
header=" " | ||
v-model:visible="displayModal" | ||
dismissableMask | ||
:draggable="false" | ||
:modal="true" | ||
:breakpoints="{ '960px': '75vw', '640px': '90vw' }" | ||
:baseZIndex="10000" | ||
@hide="closeResponsive" | ||
> | ||
<div | ||
class="holder flex flex-column justify-content-between align-items-center" | ||
> | ||
<LogoGothamist class="gothamist-logo mb-3 md:mb-5" /> | ||
|
||
<div | ||
class="giving-tuesday-content-anim flex flex-column align-items-center w-auto md:w-full" | ||
> | ||
<img | ||
class="giving-tuesday-logo" | ||
src="/marketing-modal/giving-tuesday.svg" | ||
alt="Giving Tuesday logo" | ||
/> | ||
<div | ||
class="white-box flex flex-column align-items-center" | ||
@click="donating" | ||
> | ||
<h4 class="support"> | ||
Your support makes local news available to all. | ||
</h4> | ||
<Button | ||
class="giving-tuesday-donate-btn p-button-rounded mt-4 px-5 py-2" | ||
label="Donate" | ||
/> | ||
</div> | ||
</div> | ||
</div> | ||
</Dialog> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style lang="scss"> | ||
.marketing-modal.p-dialog { | ||
width: 60vw; | ||
max-width: 800px; | ||
background-image: url('/marketing-modal/skyline_800.webp'); | ||
background-size: cover; | ||
@include media('<md') { | ||
background-position-x: 37%; | ||
} | ||
> div { | ||
background: transparent; | ||
} | ||
.p-dialog-header-icon { | ||
&:hover { | ||
background: transparent !important; | ||
} | ||
} | ||
.p-dialog-content { | ||
overflow: visible; | ||
padding: 0 2rem 5rem 2rem; | ||
@include media('<md') { | ||
padding: 0 1.5rem 3rem 1.5rem; | ||
} | ||
.holder { | ||
max-height: 570px; | ||
min-height: 330px; | ||
height: 70vh; | ||
@include media('<md') { | ||
max-height: 380px; | ||
min-height: 300px; | ||
} | ||
.gothamist-logo { | ||
align-self: flex-start; | ||
margin-top: -50px; | ||
width: 100%; | ||
height: auto; | ||
max-width: 220px; | ||
@include media('<md') { | ||
max-width: 150px; | ||
margin-top: -60px; | ||
} | ||
} | ||
} | ||
} | ||
.giving-tuesday-logo { | ||
width: 100%; | ||
max-width: 480px; | ||
margin: 0px 0 2.5rem 0; | ||
filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 0.75)); | ||
@include media('<md') { | ||
margin: 0px 0 1.25rem 0; | ||
} | ||
} | ||
.white-box { | ||
background-color: #ffffffbf; | ||
padding: 1.5rem; | ||
border-radius: 40px; | ||
width: 100%; | ||
max-width: 450px; | ||
text-align: center; | ||
@include media('<md') { | ||
padding: 1rem; | ||
} | ||
.support { | ||
width: 260px; | ||
@include media('<md') { | ||
font-size: 1.5rem; | ||
width: 200px; | ||
line-height: normal; | ||
} | ||
} | ||
.p-button { | ||
background-color: #9b152b; | ||
.p-button-label { | ||
font-size: 22px; | ||
@include media('<md') { | ||
font-size: inherit; | ||
} | ||
} | ||
} | ||
} | ||
} | ||
</style> |
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
Oops, something went wrong.