Add BottomBanner for survey popup

This commit is contained in:
Hippo 2019-11-10 01:18:12 +05:30
parent 0a2c441b5d
commit 6ed30e14c0
4 changed files with 139 additions and 1 deletions

View file

@ -0,0 +1,68 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import debounce from 'lodash'
const BottomBanner = ({ title, url, buttonText, text, imageUrl }) => {
function closeBanner(e) {
e.preventDefault()
if (typeof window !== "undefined") {
var banners = document.getElementsByClassName('bottom-banner')
for (var i=0;i<banners.length;i++) {
banners[i].classList.add('hidden')
banners[i].classList.add('closed')
}
}
}
function showBanner() {
// TODO: debounce this?
if (typeof window !== "undefined") {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
if (scrolled > 60) {
// Show banner
var banners = document.getElementsByClassName('bottom-banner')
for (var i=0;i<banners.length;i++) {
// Show only if not already closed
if (!banners[i].classList.contains('closed')) {
banners[i].classList.remove('hidden')
}
}
// Remove listener
window.removeEventListener('scroll', showBanner)
}
}
}
if (typeof window !== "undefined") {
window.addEventListener('scroll', showBanner);
// remove this event listener when we open a new page (a new
// event listener will be created when required)
window.addEventListener('hashchange', () => {
window.removeEventListener('scroll', showBanner)
})
}
return(
<a className="bottom-banner hidden" href={url} target="_blank">
{imageUrl && <div className="banner-image"><img src={imageUrl} height="auto" width="auto" /></div>}
<div className="banner-content">
{title && <h2>{title}</h2>}
{text && <p>{ text }</p>}
</div>
<button className="close-button" onClick={closeBanner}>X</button>
</a>
)
}
BottomBanner.propTypes = {
title: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
imageUrl: PropTypes.string,
}
export default BottomBanner

View file

@ -2,3 +2,4 @@ export { default as Layout } from './Layout'
export { default as PostCard } from './PostCard' export { default as PostCard } from './PostCard'
export { default as Pagination } from './Pagination' export { default as Pagination } from './Pagination'
export { default as Navigation } from './Navigation' export { default as Navigation } from './Navigation'
export { default as BottomBanner } from './BottomBanner'

View file

@ -11,6 +11,7 @@ what's here to work the way you'd like it to.
- Reset - Reset
- Defaults - Defaults
- Layout - Layout
- Components
- Tag Archives - Tag Archives
- Author Archives - Author Archives
- Pagination - Pagination
@ -937,6 +938,69 @@ h6 {
} }
} }
/* Components
/* ---------------------------------------------------------- */
.bottom-banner {
margin: 0;
padding: 2rem;
background: #FF7700;
color: white;
text-decoration: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
max-height: 33vh;
max-height: 15rem;
display: flex;
}
.bottom-banner:hover {
cursor: pointer;
text-decoration: none;
}
.bottom-banner.hidden {
display: none;
}
.bottom-banner h2 {
color: inherit;
padding: 0;
}
.bottom-banner a {
color: inherit;
}
.bottom-banner .close-button {
height: 3rem;
width: 3rem;
border-radius: 1.5rem;
border: 1px solid white;
flex: 0 0 3rem;
background: white;
color: #FF7700;
}
.bottom-banner .close-button:hover {
text-decoration: none;
}
.bottom-banner .banner-image {
display: flex;
flex-flow: nowrap;
justify-content: flex-end;
}
.bottom-banner .banner-image img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
.bottom-banner .banner-content {
flex: 1 1 100%;
margin-left: 1rem;
}
/* Tag Archives /* Tag Archives
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View file

@ -4,7 +4,7 @@ import { graphql } from 'gatsby'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import { Layout } from '../components/common' import { Layout, BottomBanner } from '../components/common'
import { MetaData } from '../components/common/meta' import { MetaData } from '../components/common/meta'
import config from '../utils/siteConfig' import config from '../utils/siteConfig'
@ -55,6 +55,11 @@ const Post = ({ data, location }) => {
</article> </article>
</div> </div>
</Layout> </Layout>
<BottomBanner title="Snipette in print?"
text="We're planning to bring out a print edition of Snipette—but need your suggestions. Help us by taking the survey!"
url="https://forms.gle/H4FpwJzMqehHceXx8"
imageUrl="https://media.snipettemag.com/manual-uploads/survey-welcome-banner.png"
/>
</> </>
) )
} }