Skip to content

Commit 3bb76b7

Browse files
author
Luciano Nooijen
committed
Merge branch 'release/2.5.14'
2 parents 36325e3 + c9fa97e commit 3bb76b7

File tree

7 files changed

+150
-41
lines changed

7 files changed

+150
-41
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,6 @@ module.exports = {
2929
},
3030
env: {
3131
jest: true,
32+
browser: true,
3233
}
3334
};

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## 2.5.14 (2020-12-17)
9+
10+
### Added:
11+
12+
* Eneco case
13+
* Popup for articles
14+
815
## 2.5.13 (2020-11-12)
916

1017
### Fixed:

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "bytecode-website",
33
"private": false,
44
"description": "The Bytecode Digital Agency website, released as free software",
5-
"version": "v2.5.13",
5+
"version": "v2.5.14",
66
"author": "Luciano Nooijen <luciano@bytecode.nl>",
77
"keywords": [
88
"bytecode"

‎src/containers/NewsletterSubscribe/NewsletterSubscribe.components.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,22 @@ export const NewsletterSubscribeContainer = styled.div`
1111
}
1212
`;
1313

14+
export const NewsLetterSubscribePopupContainer = styled.div`
15+
margin-top: 2vh;
16+
background: #1c1e1f;
17+
padding: 10vw;
18+
max-width: 800px;
19+
@media (min-width: ${theme.breakpoint.md}) {
20+
padding: 3vw;
21+
}
22+
position: fixed;
23+
right: 3%;
24+
bottom: 5%;
25+
border-radius: 10px;
26+
box-shadow: 5px 10px rgba(0, 0, 0, 0.3);
27+
z-index: 101010;
28+
`;
29+
1430
export const NewsletterSubscribeForm = styled.form`
1531
@media (min-width: ${theme.breakpoint.md}) {
1632
display: flex;
@@ -30,4 +46,24 @@ export const SubscribeButton = styled.button`
3046
border: none;
3147
text-align: center;
3248
font-size: 1.35rem;
49+
:disabled {
50+
background: #888;
51+
}
52+
`;
53+
54+
export const CloseButton = styled.button`
55+
background: ${theme.colors.primary};
56+
color: ${theme.colors.white};
57+
height: 30px;
58+
width: 30px;
59+
position: absolute;
60+
top: -10px;
61+
right: -10px;
62+
border-radius: 50%;
63+
border: none;
64+
&:hover {
65+
cursor: pointer;
66+
}
67+
font-weight: bold;
68+
font-size: large;
3369
`;

‎src/containers/NewsletterSubscribe/NewsletterSubscribe.jsx‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
23
import InputField from '../../components/InputField';
34
import {
5+
CloseButton,
46
NewsletterSubscribeContainer,
57
NewsletterSubscribeForm,
8+
NewsLetterSubscribePopupContainer,
69
SubscribeButton,
710
} from './NewsletterSubscribe.components';
811

9-
const NewsletterSubscribe = () => {
12+
const Container = ({ children, popup }) => {
13+
if (popup)
14+
return (
15+
<NewsLetterSubscribePopupContainer>
16+
{children}
17+
</NewsLetterSubscribePopupContainer>
18+
);
19+
return (
20+
<NewsletterSubscribeContainer>{children}</NewsletterSubscribeContainer>
21+
);
22+
};
23+
24+
const NewsletterSubscribe = ({ popup, closePopup }) => {
1025
const [name, setName] = useState('');
1126
const [email, setEmail] = useState('');
1227

1328
const stateChanger = setter => e => setter(e.target.value);
1429
const canSubmit = name !== '' && email !== '';
1530

1631
return (
17-
<NewsletterSubscribeContainer>
32+
<Container popup={popup}>
33+
{popup && <CloseButton onClick={closePopup}>X</CloseButton>}
1834
<h4>Schrijf je in voor onze nieuwsbrief!</h4>
1935
<p>
2036
Maandelijks brengen wij een interessante en leerzame nieuwsbrief
@@ -58,8 +74,22 @@ const NewsletterSubscribe = () => {
5874
Schrijf in
5975
</SubscribeButton>
6076
</NewsletterSubscribeForm>
61-
</NewsletterSubscribeContainer>
77+
</Container>
6278
);
6379
};
6480

81+
NewsletterSubscribe.propTypes = {
82+
popup: PropTypes.bool,
83+
closePopup: PropTypes.func,
84+
};
85+
NewsletterSubscribe.defaultProps = {
86+
popup: false,
87+
closePopup: () => null,
88+
};
89+
90+
Container.propTypes = {
91+
popup: PropTypes.bool.isRequired,
92+
children: PropTypes.node.isRequired,
93+
};
94+
6595
export default NewsletterSubscribe;

‎src/layouts/BlogpostLayout.jsx‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,44 @@ import {
2323
CallToActionText,
2424
} from './BlogpostLayout.components';
2525

26-
const BlogSingle = ({ content }) => (
27-
<Layout padded pageSettings={content.pageSettings}>
28-
<Article>
29-
<ArticleHeader>
30-
<SubtitleContainer>
31-
<Subtitle>{content.category_name}</Subtitle>
32-
<ReadingTime>
33-
&nbsp;&nbsp;&#47;&#47; {content.reading_time} min. read
34-
</ReadingTime>
35-
</SubtitleContainer>
36-
<Title>{content.title}</Title>
37-
<ArticleImageWrapper>
38-
<ArticleImage
39-
src={require(`../images/img/articles/${content.article_image_url}`)}
40-
/>
41-
</ArticleImageWrapper>
42-
<MetaData>
43-
<Author
44-
name={content.author_name}
45-
title={content.author_role}
46-
img={content.author_image_url}
47-
/>
48-
<PublishedOnContainer>
49-
<Small>Gepubliceerd op {content.posted_on}</Small>
50-
</PublishedOnContainer>
51-
</MetaData>
52-
</ArticleHeader>
53-
<BlogContent>
54-
<ArticleIntro>{content.article_intro}</ArticleIntro>
55-
<MDXRenderer>{content.post_content}</MDXRenderer>
56-
<CallToAction />
57-
</BlogContent>
58-
</Article>
59-
</Layout>
60-
);
26+
const BlogSingle = ({ content }) => {
27+
return (
28+
<Layout newsLetter={0.5} padded pageSettings={content.pageSettings}>
29+
<Article>
30+
<ArticleHeader>
31+
<SubtitleContainer>
32+
<Subtitle>{content.category_name}</Subtitle>
33+
<ReadingTime>
34+
&nbsp;&nbsp;&#47;&#47; {content.reading_time} min.
35+
read
36+
</ReadingTime>
37+
</SubtitleContainer>
38+
<Title>{content.title}</Title>
39+
<ArticleImageWrapper>
40+
<ArticleImage
41+
src={require(`../images/img/articles/${content.article_image_url}`)}
42+
/>
43+
</ArticleImageWrapper>
44+
<MetaData>
45+
<Author
46+
name={content.author_name}
47+
title={content.author_role}
48+
img={content.author_image_url}
49+
/>
50+
<PublishedOnContainer>
51+
<Small>Gepubliceerd op {content.posted_on}</Small>
52+
</PublishedOnContainer>
53+
</MetaData>
54+
</ArticleHeader>
55+
<BlogContent>
56+
<ArticleIntro>{content.article_intro}</ArticleIntro>
57+
<MDXRenderer>{content.post_content}</MDXRenderer>
58+
<CallToAction />
59+
</BlogContent>
60+
</Article>
61+
</Layout>
62+
);
63+
};
6164

6265
export default BlogSingle;
6366

‎src/layouts/MainLayout.jsx‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable @typescript-eslint/camelcase */
22

3-
import React from 'react';
3+
import React, { useEffect, useState } from 'react';
44
import styled from 'styled-components';
55
import PropTypes from 'prop-types';
66
import Helmet from 'react-helmet';
@@ -9,6 +9,7 @@ import Navbar from '../containers/Navbar/Navbar';
99
import Footer from './Footer';
1010
import { GlobalStyles, TypographyClassStyling } from '../styles/global-css';
1111
import HeadScripts from '../lib/GetHeadScripts';
12+
import NewsletterSubscribe from '../containers/NewsletterSubscribe/NewsletterSubscribe';
1213

1314
const Main = styled.main`
1415
max-width: 100vw !important;
@@ -27,8 +28,36 @@ const HeadElements = () => (
2728
</Helmet>
2829
);
2930

30-
const Layout = ({ children, pageSettings, padded }) => {
31+
const Layout = ({ children, pageSettings, padded, newsLetter }) => {
3132
const { title, description, keywords } = pageSettings;
33+
const [popup, setPopup] = useState(false);
34+
const [popupClosed, setPopupClosed] = useState(false);
35+
36+
const handleScroll = () => {
37+
const position = window.pageYOffset;
38+
const pageHeight = window.document.body.scrollHeight;
39+
const windowHeight = window.innerHeight;
40+
if ((position + windowHeight) / pageHeight > newsLetter) {
41+
setPopup(true);
42+
}
43+
};
44+
const closePopup = () => {
45+
setPopupClosed(true);
46+
};
47+
const MaybeRenderPopup = () => {
48+
if (popup && !popupClosed && newsLetter)
49+
return <NewsletterSubscribe popup closePopup={closePopup} />;
50+
return null;
51+
};
52+
53+
useEffect(() => {
54+
window.addEventListener('scroll', handleScroll, { passive: true });
55+
window.addEventListener('resize', handleScroll);
56+
return () => {
57+
window.removeEventListener('scroll', handleScroll);
58+
window.removeEventListener('resize', handleScroll);
59+
};
60+
}, []);
3261
return (
3362
<>
3463
<HeadElements />
@@ -39,6 +68,7 @@ const Layout = ({ children, pageSettings, padded }) => {
3968
<Main padded={padded} className="main">
4069
<TypographyClassStyling />
4170
{children}
71+
<MaybeRenderPopup />
4272
</Main>
4373
<Footer />
4474
</>
@@ -55,8 +85,10 @@ Layout.propTypes = {
5585
description: PropTypes.string.isRequired,
5686
keywords: PropTypes.string.isRequired,
5787
}).isRequired,
88+
newsLetter: PropTypes.number,
5889
};
5990

6091
Layout.defaultProps = {
6192
padded: false,
93+
newsLetter: 0,
6294
};

0 commit comments

Comments
 (0)