\n \n $\"Logo$ \n \n\n

Home

\n\n

\n )\n }\n}\n\nexport default Header","import React from 'react'\nimport './style.css'\nimport Background from './background.svg';\nimport { Link } from \"react-router-dom\";\nclass Footer extends React.Component {\n render() {\n return (\n \n )\n }\n}\n\nexport default Footer","export function SET_TYPE(type) {\n return (dispatch) => {\n return new Promise((resolve, reject) => {\n dispatch({\n type: 'SET_TYPE',\n payload: type\n })\n resolve(type)\n })\n }\n}\n\nexport function SET_ANIMATING(animating, duration = 0) {\n return (dispatch) => {\n return new Promise((resolve, reject) => {\n dispatch({\n type: 'SET_ANIMATING',\n payload: animating\n })\n setTimeout(() => {\n resolve(animating)\n }, duration)\n \n })\n }\n}\n\nexport function SET_VALUE(value, type) {\n return {\n type: 'SET_VALUE',\n payload: {\n value, type\n }\n }\n}\n\nexport function SET_BACKGROUND_VALUE(value) {\n return {\n type: 'SET_BACKGROUND_VALUE',\n payload: {\n value\n }\n }\n}\n\n\nexport function SET_BACKGROUND(background) {\n return (dispatch) => {\n return new Promise((resolve, reject) => {\n dispatch({\n type: 'SET_BACKGROUND',\n payload: background\n })\n resolve(background)\n })\n }\n}\n\nexport function SET_DEFAULT_BACKGROUND() {\n return {\n type: 'SET_DEFAULT_BACKGROUND',\n payload: {\n \n }\n }\n}\n\nexport function SET_IMAGE_LOADING(value) {\n return {\n type: 'SET_IMAGE_LOADING',\n payload: {\n value\n }\n }\n}\n\n\nexport function SET_WHO(value) {\n return {\n type: 'SET_WHO',\n payload: {\n value\n }\n }\n}\n\nexport function SET_ADDRESS(value) {\n return {\n type: 'SET_ADDRESS',\n payload: {\n value\n }\n }\n}\n\nexport function SET_JOB(value) {\n return {\n type: 'SET_JOB',\n payload: {\n value\n }\n }\n}\n\nexport function SET_QUESTION(value) {\n if(value.length > 90) {\n document.body.classList.add('smallen-extra');\n } else {\n document.body.classList.remove('smallen-extra');\n }\n return {\n type: 'SET_QUESTION',\n payload: {\n value\n }\n }\n}\n\nexport function SET_FACE(value) {\n return {\n type: 'SET_FACE',\n payload: {\n value\n }\n }\n}","import React from 'react';\nimport { connect} from 'react-redux'\nimport { bindActionCreators } from 'redux'\nimport { SET_VALUE } from '../../actions/poster'\n\nimport './style.css'\n\nclass TextInput extends React.Component {\n\n constructor(props) {\n super();\n this.limit = props.limit || 0\n }\n\n handleKeyUp = (e) => {\n\n if(this.limit > 0 && this.limit < e.currentTarget.value.length) {\n e.currentTarget.value = e.currentTarget.value.substring(0, this.limit)\n return;\n }\n\n const { SET_VALUE } = this.props.actions;\n SET_VALUE(e.currentTarget.value, this.props.field);\n }\n\n render() {\n return (\n

\n {\n this.props.title && (\n {this.props.title}\n )\n }\n\n {\n this.limit > 0 && (\n

\n {this.props.poster[this.props.field].length}\n {this.props.limit}\n

\n )\n }\n \n 0 ? 'text-input--limitted' : ''}`} type=\"text\" onKeyUp={this.handleKeyUp} defaultValue={this.props.poster[this.props.field]} />\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({SET_VALUE}, dispatch)\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TextInput)","import React from 'react';\nimport { connect} from 'react-redux'\nimport { bindActionCreators } from 'redux'\nimport { SET_VALUE } from '../../actions/poster'\nimport './style.css'\n\nclass Input extends React.Component {\n\n handleChange = (e) => {\n \n //Custom change event?\n if(this.props.hasOwnProperty('onChange') && typeof this.props.onChange === 'function') {\n this.props.onChange(e.currentTarget.value)\n return;\n } \n\n //Default change event\n const { SET_VALUE } = this.props.actions;\n SET_VALUE(e.currentTarget.value, this.props.field)\n }\n\n render() {\n const { title, value, field, selected } = this.props;\n \n return (\n

\n \n {title}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {}\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n actions: bindActionCreators({SET_VALUE}, dispatch)\n }\n}\n\n\nexport const RadioInput = connect(mapStateToProps, mapDispatchToProps)(Input);\n\n\nclass RadioGroup extends React.Component {\n render() {\n return this.props.options.map(row => {\n return \n })\n }\n}\n\nexport default RadioGroup","import React from 'react';\nimport { connect} from 'react-redux'\nimport { bindActionCreators } from 'redux'\nimport { SET_BACKGROUND_VALUE, SET_IMAGE_LOADING } from '../../actions/poster'\nimport './style.css'\n\nclass FileInput extends React.Component {\n\n handleChange = (e) => {\n\n var reader = new FileReader();\n reader.onload = (e)=> {\n \n this.props.actions.SET_IMAGE_LOADING(true);\n this.props.actions.SET_BACKGROUND_VALUE(`${e.target.result}`, this.props.field);\n this.props.actions.SET_IMAGE_LOADING(false);\n document.body.classList.remove('is-gradient');\n \n }\n\n reader.readAsDataURL(this.refs.fileInput.files[0]);\n\n }\n\n render() {\n return (\n

\n {\n this.props.title && (\n {this.props.title}\n )\n }\n\n {\n this.limit > 0 && (\n

\n {this.props.poster[this.props.field].length}\n {this.props.limit}\n

\n )\n }\n 0 ? 'file-input--limitted' : ''}`} type=\"file\" onChange={this.handleChange} defaultValue={this.props.poster[this.props.field]} />\n

\n ?\n X\n

\n\n {\n this.state.active && (\n

{this.props.title}

\n )\n }\n\n \n ) \n }\n}\n\nexport default Tooltip;","import React from \"react\"\nimport './style.css'\n\nexport default () => {\n return (\n

\n \n Een moment geduld graag.\n Uw materiaal wordt gegenereerd.\n

\n )\n}","import fitty from 'fitty'\n\nexport function forceDownload(data, name = 'file') {\n const anchor = document.createElement('a')\n document.body.appendChild(anchor);\n anchor.style = \"display: none\";\n\n anchor.href = window.URL.createObjectURL(data)\n anchor.download = name\n anchor.click()\n}\n\nexport function downloadFile(base64, filename = '') {\n var block = base64.split(\";\");\n var contentType = block[0].split(\":\")[1];\n var realData = block[1].split(\",\")[1];\n var blob = b64toBlob(realData, contentType);\n forceDownload(blob, filename)\n}\n\nfunction b64toBlob(b64Data, contentType, sliceSize) {\n contentType = contentType || '';\n sliceSize = sliceSize || 512;\n\n var byteCharacters = atob(b64Data);\n var byteArrays = [];\n\n for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {\n var slice = byteCharacters.slice(offset, offset + sliceSize);\n\n var byteNumbers = new Array(slice.length);\n for (var i = 0; i < slice.length; i++) {\n byteNumbers[i] = slice.charCodeAt(i);\n }\n\n var byteArray = new Uint8Array(byteNumbers);\n\n byteArrays.push(byteArray);\n }\n\n var blob = new Blob(byteArrays, {\n type: contentType\n });\n return blob;\n}\n\n\nexport function slugify(text)\n{\n return text.toString().toLowerCase()\n .replace(/\\s+/g, '-') // Replace spaces with -\n // eslint-disable-next-line\n .replace(/[^\\w\\-]+/g, '') // Remove all non-word chars\n // eslint-disable-next-line\n .replace(/\\-\\-+/g, '-') // Replace multiple - with single -\n .replace(/^-+/, '') // Trim - from start of text\n .replace(/-+$/, ''); // Trim - from end of text\n}\n\nexport function handleFit() {\n handlePreviewFit()\n handleRenderFit()\n console.log('fit')\n}\n\nfunction handleRenderFit() {\n const renderSubtitle = document.querySelector('#render .poster-subtitle');\n const renderFit = document.querySelectorAll('#render [data-resize-text]');\n const renderLineHeight = window.getComputedStyle(renderSubtitle).lineHeight\n renderFit.forEach(r => {\n r.removeAttribute('style')\n fitty(r, {\n minSize: 8,\n maxSize: 99999,\n })\n\n setTimeout(() => {\n const newFontSize = window.getComputedStyle(r).fontSize\n r.style.lineHeight = `${Math.max(parseFloat(renderLineHeight), parseFloat(newFontSize))}px`\n }, 100)\n\n })\n}\n\nfunction handlePreviewFit() {\n const previewSubtitle = document.querySelector('#preview .poster-subtitle');\n const previewFit = document.querySelectorAll('#preview [data-resize-text]');\n const previewLineHeight = window.getComputedStyle(previewSubtitle).lineHeight\n previewFit.forEach(r => {\n r.removeAttribute('style')\n fitty(r, {\n minSize: 8,\n maxSize: 99999,\n })\n\n setTimeout(() => {\n const newFontSize = window.getComputedStyle(r).fontSize\n r.style.lineHeight = `${Math.max(parseFloat(previewLineHeight), parseFloat(newFontSize))}px`\n }, 100)\n\n \n\n \n })\n}","import html2canvas from 'html2canvas'\nimport jsPDF from 'jspdf'\nimport { forceDownload, slugify, downloadFile } from './utils'\nimport * as htmlToImage from 'html-to-image';\nimport { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';\nimport $ from 'jquery';\n\n// export function banner(who) {\n// return new Promise((resolve, reject) => {\n// let input = document.getElementById('render');\n// html2canvas(input, {\n// }).then((canvas) => {\n// const imgData = canvas.toDataURL('image/png');\n// downloadFile(imgData, 'banner-'+slugify(who)+'.png')\n// resolve()\n// })\n// })\n// }\n// export function facebook(who) {\n// return new Promise((resolve, reject) => {\n// let input = document.getElementById('render');\n// html2canvas(input, {\n\n// }).then((canvas) => {\n// const imgData = canvas.toDataURL('image/png');\n// downloadFile(imgData, 'social-poster-alternatief-'+slugify(who)+'.png')\n// resolve()\n// })\n// })\n// }\n\n// export async function linkedin(who) {\n// return new Promise( async (resolve, reject) => {\n// let input = document.getElementById('render');\n// await html2canvas(input, {\n\n// }).then((canvas) => {\n// const imgData = canvas.toDataURL('image/png');\n// downloadFile(imgData,'social-poster-'+slugify(who)+'.png')\n// resolve()\n// })\n// })\n// }\n\nexport async function size_square() {\n return new Promise( async (resolve, reject) => {\n let input = document.getElementById('render');\n await html2canvas(input, {\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData,'poster.png')\n resolve()\n })\n })\n}\n\nexport async function size_portrait() {\n return new Promise( async (resolve, reject) => {\n let input = document.getElementById('render');\n await html2canvas(input, {\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData,'poster.png')\n resolve()\n })\n })\n}\n\n\nexport function a0(where) {\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF('p','mm','a0');\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,841,1189);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'AAN in het donker poster - A0 - '+slugify(where)+'.pdf')\n resolve();\n })\n })\n}\n\nexport function facebook() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData, 'facebook-header.png')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n });\n\n })\n}\n\nexport function twitter() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData, 'twitter.png')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n });\n\n })\n}\n\nexport function instagram() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData, 'instagram.png')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n\n\n });\n\n })\n}\n\nexport function linkedin() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData, 'linkedin.png')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n\n\n });\n\n })\n}\n\nexport function screen() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/png');\n downloadFile(imgData, 'Display.png')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n });\n\n })\n}\n\nexport function a3() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF('p','mm','a3');\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,297,420);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'Poster - A3.pdf')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n });\n\n\n })\n}\n\nexport function a4() {\n function filter (node) {\n return (node.tagName !== 'i');\n }\n\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n\n htmlToImage.toSvg($('#render').find('.js-poster-title')[0], { filter: filter })\n .then( (dataUrl)=> {\n var img = new Image();\n img.src = dataUrl;\n\n $('#render').find('.js-poster-title')[0].appendChild(img);\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '0';\n\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n setTimeout(()=> {\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF('p','mm','a4');\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,210,297);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'Poster - A4.pdf')\n $('#render').find('.js-hide-from-poster')[0].style.opacity = '1';\n $('#render').find('.js-poster-title img').remove();\n resolve();\n })\n }, 100)\n resolve();\n })\n }, 500)\n });\n\n\n })\n}\n\nexport function a5(where) {\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF('p','mm','a5');\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,148,210);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'AAN in het donker poster - A5 - '+slugify(where)+'.pdf')\n resolve();\n })\n })\n}\n\nexport function a6(where) {\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF('p','mm','a6');\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,105,148);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'AAN in het donker poster - A6 - '+slugify(where)+'.pdf')\n resolve();\n })\n })\n}\n\nexport function a7(where) {\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF('p','mm','a7');\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,74,105);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'AAN in het donker poster - A7 - '+slugify(where)+'.pdf')\n resolve();\n })\n })\n}\n\nexport function size_50_76(where) {\n return new Promise((resolve, reject) => {\n let input = document.getElementById('render');\n html2canvas(input, {\n scale: 1,\n }).then((canvas) => {\n const imgData = canvas.toDataURL('image/jpeg');\n const pdf = new jsPDF({\n format: [508 * 2.8346666667, 762 * 2.8346666667]\n });\n pdf.setDrawColor('100','100',100,100); //Force CMYK PDF\n pdf.addImage(imgData, 'JPEG',0,0,508,762);\n let blobPDF = new Blob([ pdf.output('blob') ], { type : 'application/pdf' });\n forceDownload(blobPDF, 'AAN in het donker poster - 51x76 - '+slugify(where)+'.pdf')\n resolve();\n })\n })\n}\n","let originalRatio = null;\nlet curElArr = [null];\n\nexport function resizeHeading(elArr) {\n if ( originalRatio === null || curElArr[0] !== elArr[0] ) { \n originalRatio = getComputedStyle(elArr[0]).getPropertyValue('--headingRatio'); \n }\n if( curElArr[0] !== elArr[0] ){ curElArr[0] = elArr[0] }\n\n let maxWidth = elArr[0].offsetWidth / 1.6;\n let spans = [].slice.call(elArr[0].querySelectorAll('.calc'));\n\n let headingWidth = Math.max.apply(Math, spans.map(function(o) { return o.offsetWidth; }));\n\n let ratio = (maxWidth / headingWidth).toFixed(3)\n let curFontSize = getComputedStyle(elArr[0]).getPropertyValue('--headingRatio');\n let newRatio = ratio * curFontSize;\n\n if ( headingWidth >= maxWidth) {\n for( let i = 0; i < elArr.length; i++ ){\n elArr[i].style.setProperty('--headingRatio', newRatio);\n }\n }\n if ( headingWidth < maxWidth ) { \n if ( newRatio >= originalRatio ){\n for( let i = 0; i < elArr.length; i++ ){\n elArr[i].style.removeProperty('--headingRatio')\n }\n }else{\n for( let i = 0; i < elArr.length; i++ ){\n elArr[i].style.setProperty('--headingRatio', newRatio)\n }\n }\n }\n}\n","const NAMES = [];\n\nNAMES['square'] = {title: '1080x1080', fontSize: 58 };\nNAMES['portrait'] = {title: '1080x1920', fontSize: 58 };\nNAMES['a3'] = {title: 'A3', fontSize: 58 };\nNAMES['a4'] = {title: 'A4', fontSize: 58 };\n\n\nexport default NAMES;","import React from 'react'\nimport { connect} from 'react-redux'\nimport { bindActionCreators } from 'redux'\nimport { SET_TYPE, SET_ANIMATING, SET_BACKGROUND, SET_DEFAULT_BACKGROUND } from '../../actions/poster'\nimport TextInput from '../../components/TextInput/'\nimport RadioGroup from '../../components/RadioInput/'\nimport FileInput from '../../components/FileInput'\nimport Tooltip from '../../components/Tooltip/'\nimport Loader from '../../components/Loader/'\nimport * as generate from '../../generate'\nimport {resizeHeading} from '../../resize'\nimport NAMES from '../../templates/config'\nimport './style.css'\n\n\n\nclass App extends React.Component {\n\n\tstate = {\n\t\tloading: false\n\t}\n\n\n\tcomponentDidUpdate () {\n\t\tif( document.getElementById('heading') ){\n\t\t\tresizeHeading(document.querySelectorAll('.heading'))\n\t\t}\n\t}\n\n\thandleSubmit = () => {\n\t\twindow.trackGenerate(NAMES[this.props.selection.type].title)\n\n\t\tthis.setState({\n\t\t\tloading: true\n\t\t})\n\t\tif(this.props.selection.type === 'square') {\n\t\t\tgenerate.size_square().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'portrait') {\n\t\t\tgenerate.size_portrait().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'a3') {\n\t\t\tgenerate.a3().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'a4') {\n\t\t\tgenerate.a4().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t}\n\n\thandleTypeChange = (data) => {\n\t\tthis.props.actions.SET_ANIMATING(true, 350).then((test) => {\n\t\t\tthis.props.actions.SET_TYPE(data)\n\t\t\tthis.props.actions.SET_ANIMATING(false, 0);\n\t\t})\n\t}\n\n\thandleBackgroundChange = (data) => {\n\t\tthis.props.actions.SET_BACKGROUND(data);\n\t\tthis.props.actions.SET_DEFAULT_BACKGROUND(data);\n\t}\n\n\thandleImageUpload = (data) => {\n\t\tif(data !== 'image') {\n\t\t\tthis.props.actions.SET_BACKGROUND(data);\n\t\t}\n\t}\n\n\n\n\trender() {\n\t\treturn (\n\t\t\t\n\n\t\t\t\t{\n\t\t\t\t\tthis.state.loading && (\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\t{\n\t\t\t\t\tthis.props.poster.imageLoading && (\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\t

\n\t\t\t\t\t

Wat is je naam?

\n\t\t\t\t\t

\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t

Wat is je functie?

\n\t\t\t\t\t

\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t

\n\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t

\n\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t

\t\t\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\n\t\t)\n\t}\n}\n\nconst mapStateToProps = (state) => {\n\treturn {\n\t\tposter: state.poster,\n\t\tselection: state.selection\n\t}\n}\n\nconst mapDispatchToProps = (dispatch) => {\n\treturn {\n\t\tactions: bindActionCreators({SET_TYPE, SET_ANIMATING, SET_BACKGROUND, SET_DEFAULT_BACKGROUND}, dispatch)\n\t}\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(App);","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nclass Square extends Component {\n\n render() {\n return (\n

\n \n

\n $\"logo\"$ \n

\n\n

\n Ik stroop mijn mouw op\n {this.props.poster.name}, {this.props.poster.function} \n

\n $\"footer\"$ \n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Square)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nclass Portrait extends Component {\n\n render() {\n return (\n

\n \n

\n $\"logo\"$ \n

\n\n

\n Ik stroop mijn mouw op\n {this.props.poster.name}, {this.props.poster.function} \n

\n $\"footer\"$ \n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Portrait)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass A3 extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n this.adaptiveTexts = [\n {\n title: \"Bereid jij een gesprek voor op www.defysiotherapeut.com?\",\n replaceWith: \"Bereid jij een gesprek voor op\",\n link: \"www.defysiotherapeut.com?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.thuisarts.nl?\",\n replaceWith: \"Zoek jij naar meer informatie op\",\n link: \"www.thuisarts.nl?\",\n },\n {\n title: \"Bereid jij
een gesprek
voor op www.mijnkwaliteitvanleven.nl?\",\n replaceWith: \"Bereid jij
een gesprek
voor op\",\n link: \"www.mijnkwaliteitvanleven.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.deverloskundige.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie op\",\n link: \"www.deverloskundige.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie over medicijnen op www.apotheek.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie over medicijnen op\",\n link: \"www.apotheek.nl?\",\n },\n ]\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n\n const hasUrl = this.props.poster.question.includes('www.')\n let currentSelection = null\n let questionText = this.props.poster.question.replace('patiënt/cliënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('patiënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('cliënt', this.props.poster.address == 'patiënt' ? 'patiënt' : 'cliënt')\n \n if(hasUrl) {\n currentSelection = this.adaptiveTexts.filter(t => t.title === this.props.poster.question);\n if(currentSelection.length > 0) {\n questionText = currentSelection[0].replaceWith\n }\n } \n\n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n {/* {\n this.props.poster.address == 'cliënt' ? (\n \n ) : (\n \n )\n } */}\n \n {\n hasUrl && (\n

\n {currentSelection[0].link}\n

\n )\n }\n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job} welke zorg het beste bij jou past.
Ga voor meer tips naar
www.begineengoedgesprek.nl

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.
Ga voor meer tips naar
www.begineengoedgesprek.nl

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(A3)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass A4 extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n\n this.adaptiveTexts = [\n {\n title: \"Bereid jij een gesprek voor op www.defysiotherapeut.com?\",\n replaceWith: \"Bereid jij een gesprek voor op\",\n link: \"www.defysiotherapeut.com?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.thuisarts.nl?\",\n replaceWith: \"Zoek jij naar meer informatie op\",\n link: \"www.thuisarts.nl?\",\n },\n {\n title: \"Bereid jij
een gesprek
voor op www.mijnkwaliteitvanleven.nl?\",\n replaceWith: \"Bereid jij
een gesprek
voor op\",\n link: \"www.mijnkwaliteitvanleven.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.deverloskundige.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie op\",\n link: \"www.deverloskundige.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie over medicijnen op www.apotheek.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie over medicijnen op\",\n link: \"www.apotheek.nl?\",\n },\n \n ]\n\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n\n const hasUrl = this.props.poster.question.includes('www.')\n let currentSelection = null\n let questionText = this.props.poster.question.replace('patiënt/cliënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('patiënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('cliënt', this.props.poster.address == 'patiënt' ? 'patiënt' : 'cliënt')\n \n if(hasUrl) {\n currentSelection = this.adaptiveTexts.filter(t => t.title === this.props.poster.question);\n if(currentSelection.length > 0) {\n questionText = currentSelection[0].replaceWith\n }\n } \n\n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n {\n hasUrl && (\n

\n {currentSelection[0].link}\n

\n )\n }\n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job} welke zorg het beste bij jou past.
Ga voor meer tips naar
www.begineengoedgesprek.nl

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.
Ga voor meer tips naar
www.begineengoedgesprek.nl

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(A4)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass Facebook extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n\n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n {\n this.props.poster.address == 'cliënt' ? (\n \n ) : (\n \n )\n }\n \n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job} welke zorg het beste bij jou past.

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Facebook)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass Twitter extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n this.adaptiveTexts = [\n {\n title: \"Bereid jij een gesprek voor op www.defysiotherapeut.com?\",\n replaceWith: \"Bereid jij een gesprek voor op\",\n link: \"www.defysiotherapeut.com?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.thuisarts.nl?\",\n replaceWith: \"Zoek jij naar meer informatie op\",\n link: \"www.thuisarts.nl?\",\n },\n {\n title: \"Bereid jij
een gesprek
voor op www.mijnkwaliteitvanleven.nl?\",\n replaceWith: \"Bereid jij
een gesprek
voor op\",\n link: \"www.mijnkwaliteitvanleven.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.deverloskundige.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie op\",\n link: \"www.deverloskundige.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie over medicijnen op www.apotheek.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie over
medicijnen op\",\n link: \"www.apotheek.nl?\",\n },\n ]\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n\n const hasUrl = this.props.poster.question.includes('www.')\n let currentSelection = null\n let questionText = this.props.poster.question.replace('patiënt/cliënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('patiënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('cliënt', this.props.poster.address == 'patiënt' ? 'patiënt' : 'cliënt')\n \n if(hasUrl) {\n currentSelection = this.adaptiveTexts.filter(t => t.title === this.props.poster.question);\n if(currentSelection.length > 0) {\n questionText = currentSelection[0].replaceWith\n }\n } \n\n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n \n {\n hasUrl && (\n

\n {currentSelection[0].link}\n

\n )\n }\n \n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job} welke zorg het beste bij jou past.

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Twitter)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass Instagram extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n this.adaptiveTexts = [\n {\n title: \"Bereid jij een gesprek voor op www.defysiotherapeut.com?\",\n replaceWith: \"Bereid jij een gesprek voor op\",\n link: \"www.defysiotherapeut.com?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.thuisarts.nl?\",\n replaceWith: \"Zoek jij naar meer informatie op\",\n link: \"www.thuisarts.nl?\",\n },\n {\n title: \"Bereid jij
een gesprek
voor op www.mijnkwaliteitvanleven.nl?\",\n replaceWith: \"Bereid jij
een gesprek
voor op\",\n link: \"www.mijnkwaliteitvanleven.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.deverloskundige.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie op\",\n link: \"www.deverloskundige.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie over medicijnen op www.apotheek.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie over medicijnen op\",\n link: \"www.apotheek.nl?\",\n },\n ]\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n\n const hasUrl = this.props.poster.question.includes('www.')\n let currentSelection = null\n let questionText = this.props.poster.question.replace('patiënt/cliënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('patiënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('cliënt', this.props.poster.address == 'patiënt' ? 'patiënt' : 'cliënt')\n \n if(hasUrl) {\n currentSelection = this.adaptiveTexts.filter(t => t.title === this.props.poster.question);\n if(currentSelection.length > 0) {\n questionText = currentSelection[0].replaceWith\n }\n } \n\n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n \n {\n hasUrl && (\n

\n {currentSelection[0].link}\n

\n )\n }\n \n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job} welke zorg het beste bij jou past.

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Instagram)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass Screen extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n this.adaptiveTexts = [\n {\n title: \"Bereid jij een gesprek voor op www.defysiotherapeut.com?\",\n replaceWith: \"Bereid jij een gesprek voor op\",\n link: \"www.defysiotherapeut.com?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.thuisarts.nl?\",\n replaceWith: \"Zoek jij naar meer informatie op\",\n link: \"www.thuisarts.nl?\",\n },\n {\n title: \"Bereid jij
een gesprek
voor op www.mijnkwaliteitvanleven.nl?\",\n replaceWith: \"Bereid jij
een gesprek
voor op\",\n link: \"www.mijnkwaliteitvanleven.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.deverloskundige.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie op\",\n link: \"www.deverloskundige.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie over medicijnen op www.apotheek.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie over medicijnen op\",\n link: \"www.apotheek.nl?\",\n },\n ]\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n const hasUrl = this.props.poster.question.includes('www.')\n let currentSelection = null\n let questionText = this.props.poster.question.replace('patiënt/cliënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('patiënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('cliënt', this.props.poster.address == 'patiënt' ? 'patiënt' : 'cliënt')\n \n if(hasUrl) {\n currentSelection = this.adaptiveTexts.filter(t => t.title === this.props.poster.question);\n if(currentSelection.length > 0) {\n questionText = currentSelection[0].replaceWith\n }\n } \n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n \n {\n hasUrl && (\n

\n {currentSelection[0].link}\n

\n )\n }\n \n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job}
welke zorg het beste bij jou past.
Ga voor meer tips naar
www.begineengoedgesprek.nl

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.
Ga voor meer tips naar
www.begineengoedgesprek.nl

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Screen)","import React, { Component } from 'react'\nimport { connect} from 'react-redux'\nimport './style.css'\n\nlet width;\nclass Linkedin extends Component {\n constructor() {\n super();\n this.state = {\n width: 1\n }\n this.adaptiveTexts = [\n {\n title: \"Bereid jij een gesprek voor op www.defysiotherapeut.com?\",\n replaceWith: \"Bereid jij een gesprek voor op\",\n link: \"www.defysiotherapeut.com?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.thuisarts.nl?\",\n replaceWith: \"Zoek jij naar meer informatie op\",\n link: \"www.thuisarts.nl?\",\n },\n {\n title: \"Bereid jij
een gesprek
voor op www.mijnkwaliteitvanleven.nl?\",\n replaceWith: \"Bereid jij
een gesprek
voor op\",\n link: \"www.mijnkwaliteitvanleven.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie op www.deverloskundige.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie op\",\n link: \"www.deverloskundige.nl?\",\n },\n {\n title: \"Zoek jij naar meer informatie over medicijnen op www.apotheek.nl?\",\n replaceWith: \"Zoek jij
naar meer
informatie over medicijnen op\",\n link: \"www.apotheek.nl?\",\n },\n ]\n }\n\n componentDidMount() {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n window.addEventListener('resize', ()=> {\n this.setState({\n width: Math.round(document.getElementsByClassName('preview')[0].clientWidth)\n })\n });\n \n }\n\n render() {\n\n const hasUrl = this.props.poster.question.includes('www.')\n let currentSelection = null\n let questionText = this.props.poster.question.replace('patiënt/cliënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('patiënt', this.props.poster.address == 'cliënt' ? 'cliënt' : 'patiënt').replace('cliënt', this.props.poster.address == 'patiënt' ? 'patiënt' : 'cliënt')\n \n if(hasUrl) {\n currentSelection = this.adaptiveTexts.filter(t => t.title === this.props.poster.question);\n if(currentSelection.length > 0) {\n questionText = currentSelection[0].replaceWith\n }\n } \n\n return (\n

\n \n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.address && (\n Hallo
\n )\n )\n : (\n this.props.poster.job && (\n Hallo
\n )\n )\n }\n\n \n \n {\n hasUrl && (\n

\n {currentSelection[0].link}\n

\n )\n }\n \n \n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n this.props.poster.job && (\n

Beslis samen met je {this.props.poster.job} welke zorg het beste bij jou past.

\n )\n )\n : (\n this.props.poster.address && (\n

Beslis samen met je {this.props.poster.address}
welke zorg het beste past.

\n )\n )\n }\n\n

\n \n \n

\n\n {\n this.props.poster.who && (\n

\n )\n }\n {/*

*/}\n {/*

*/}\n

\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n poster: state.poster\n }\n}\n\nexport default connect(mapStateToProps)(Linkedin)","import React from 'react';\nimport { connect} from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport { TweenLite } from 'gsap'\nimport { SET_VALUE } from '../../actions/poster'\nimport Square from '../../templates/Square/'\nimport Portrait from '../../templates/Portrait/'\nimport A3 from '../../templates/A3/'\nimport A4 from '../../templates/A4/'\nimport Facebook from '../../templates/Facebook/'\nimport Twitter from '../../templates/Twitter/'\nimport Instagram from '../../templates/Instagram/'\nimport Screen from '../../templates/Screen/'\nimport Linkedin from '../../templates/LinkedIn/'\nimport './style.scss';\nimport NAMES from '../../templates/config'\n\nclass Preview extends React.Component {\n\n \n componentDidUpdate() {\n this.animatePreview(this.props.selection.animating)\n }\n\n animatePreview(status) {\n if(status) {\n //Out\n TweenLite.to(this.refs.preview, .35, {opacity: 0})\n } else {\n //in\n TweenLite.to(this.refs.preview, .35, {opacity: 1})\n }\n }\n\n render() {\n let previewComponent;\n\n switch(this.props.selection.type) {\n case 'square':\n previewComponent = \n break;\n case 'portrait':\n previewComponent = \n break;\n case 'a3':\n previewComponent = \n break;\n case 'a4':\n previewComponent = \n break;\n case 'facebook':\n previewComponent = \n break;\n case 'twitter':\n previewComponent = \n break;\n case 'instagram':\n previewComponent = \n break;\n case 'screen':\n previewComponent = \n break;\n case 'linkedin':\n previewComponent = \n break;\n \n default:\n break; \n }\n\n return (\n \n

\n {previewComponent}\n

\n \n \n\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n\n\treturn {\n selection: state.selection\n\t}\n}\n\nconst mapDispatchToProps = (dispatch) => {\n\treturn {\n\t\tactions: bindActionCreators({SET_VALUE}, dispatch)\n\t}\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Preview);","import React from \"react\"\nimport Header from '../../components/Header/'\nimport Footer from '../../components/Footer/'\nimport Form from '../Form/'\nimport Preview from '../Preview/'\nimport * as generate from '../../generate'\nimport $ from 'jquery';\n\nimport { connect} from 'react-redux'\nimport { bindActionCreators } from 'redux'\nimport { SET_WHO, SET_ADDRESS, SET_JOB, SET_QUESTION, SET_FACE, SET_TYPE } from '../../actions/poster'\n\nimport Select, { components } from 'react-select';\n\nimport { Swiper, SwiperSlide } from 'swiper';\nimport SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper/core';\n\nimport Square from '../../templates/Square/'\nimport Portrait from '../../templates/Portrait/'\nimport A3 from '../../templates/A3/'\nimport A4 from '../../templates/A4/'\nimport Facebook from '../../templates/Facebook/'\nimport Twitter from '../../templates/Twitter/'\nimport Instagram from '../../templates/Instagram/'\nimport Screen from '../../templates/Screen/'\nimport Linkedin from '../../templates/LinkedIn/'\n\nimport { handleFit } from \"../../utils\"\n\n// Import Swiper styles\nimport 'swiper/swiper.scss';\n\nimport './fonts/style.css'\nimport './select.scss'\nimport './style.scss'\n\nconst navigationPrevRef = React.createRef(null)\nconst navigationNextRef = React.createRef(null)\n\nconst colourStyles = {\n option: (styles, { data, isDisabled, isFocused, isSelected }) => {\n return {\n ...styles,\n fontWeight: 600,\n color: '#EF7273',\n cursor: isDisabled ? 'not-allowed' : 'default',\n }\n },\n Input: (styles, { data }) => {\n return {\n ...styles,\n fontWeight: 600,\n color: '#EF7273',\n }\n },\n Control: (styles, { data }) => {\n return {\n ...styles,\n fontWeight: 600,\n color: '#EF7273',\n }\n },\n};\n\nconst controlStyles = {\n borderRadius: '1px solid black',\n color: '#EF7273!important',\n};\n \n const SingleValueComponent = props => (\n

\n \n

\n )\n ;\n const MenuComponent = props => (\n

\n Kies een beroep\n\n \n

\n );\n const PlaceholderComponent = props => (\n

\n Beroep zoeken\n

\n );\n\n const MenuComponentAlt = props => (\n

\n Kies een type\n \n

\n );\n const MenuComponentSubject = props => (\n

\n Kies een onderwerp\n \n

\n );\n const PlaceholderComponentAlt = props => (\n

\n {/* Beroep zoeken */}\n

\n );\n \n const InputComponent = props => (\n

\n \n \n

\n );\n\nlet data = require('./data.json');\n\n\nclass PosterGenerator extends React.Component {\n constructor(props) {\n super(props);\n }\n\n state = {\n loading: false,\n type: window.innerWidth > 992 ? 'Poster' : 'Social media',\n format: window.innerWidth > 992 ? 'A4 (297 mm x 210 mm)' : 'Instagram & Facebook (1080x1080)',\n swipeIndex: 0,\n selectedOption: 'test',\n subject: 'Kies een onderwerp',\n subjectChosen: false,\n\t}\n\n componentDidMount() {\n this.mySwiper = new Swiper('.swiper-container', {\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },\n \n touchRatio: 0,\n autoHeight: true,\n slidesPerView: 1,\n });\n\n $(`.generator-header-button`).eq(this.mySwiper.realIndex).addClass('is-active');\n this.mySwiper.on('slideChange', ()=> {\n $(`.generator-header-button`).removeClass('is-active');\n $(`.generator-header-button`).eq(this.mySwiper.realIndex).addClass('is-active');\n this.setState({\n swipeIndex: this.mySwiper.realIndex\n })\n window.dispatchEvent(new Event('resize'));\n });\n\n if($(window).innerWidth() > 992) {\n $('.swiper-slide--mobile').remove();\n } else {\n $('.swiper-slide--desktop').remove();\n }\n \n this.mySwiper.update();\n this.checkNext();\n\n document.body.classList.add('generator-inversed')\n }\n\n handleNext() {\n this.mySwiper.slideNext();\n $(\"html, body\").animate({ scrollTop: $('.generator-container').offset().top - 50 }, 500);\n }\n\n handlePrev() {\n this.mySwiper.slidePrev();\n $(\"html, body\").animate({ scrollTop: $('.generator-container').offset().top - 50 }, 500);\n }\n\n handleWhoChange(event) {\n this.props.actions.SET_WHO(event.target.value)\n if(event.target.value == 'zorggebruikers') {\n document.body.classList.add('generator-inversed');\n } else {\n document.body.classList.remove('generator-inversed');\n }\n }\n\n handleAddressChange(event) {\n this.props.actions.SET_ADDRESS(event.target.value)\n }\n\n handleQuestionChange(event) {\n this.props.actions.SET_QUESTION(event.target.value)\n\n setTimeout(handleFit, 100)\n \n }\n\n \n\n prevFace() {\n // if(this.props.poster.face)\n if(this.props.poster.face === 0) {\n this.props.actions.SET_FACE(this.props.poster.maxFaces - 1)\n } else {\n this.props.actions.SET_FACE(this.props.poster.face - 1)\n }\n }\n \n nextFace() {\n if(this.props.poster.face === this.props.poster.maxFaces - 1) {\n this.props.actions.SET_FACE(0)\n } else {\n this.props.actions.SET_FACE(this.props.poster.face + 1)\n }\n }\n\n handleSetFormat(event) {\n this.setState({\n type: event.target.value\n })\n\n switch (event.target.value) {\n case 'Social media':\n this.props.actions.SET_TYPE('instagram');\n $('.select-fake--format').text('Instagram & Facebook (1080x1080)')\n break;\n case 'Screen':\n this.props.actions.SET_TYPE('screen');\n $('.select-fake--format').text('Beeldscherm (1920x1080)')\n break;\n default:\n this.props.actions.SET_TYPE('a4');\n $('.select-fake--format').text('A4 (297 mm x 210 mm)')\n break;\n }\n\n setTimeout(()=> {\n window.dispatchEvent(new Event('resize'));\n }, 100)\n\n setTimeout(handleFit, 200);\n\n }\n\n handleSubmit = () => {\n\n\t\tthis.setState({\n\t\t\tloading: true\n\t\t})\n\t\n\t\tif(this.props.selection.type === 'a4') {\n\t\t\tgenerate.a4().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'a3') {\n\t\t\tgenerate.a3().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'facebook') {\n\t\t\tgenerate.facebook().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'twitter') {\n\t\t\tgenerate.twitter().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'instagram') {\n\t\t\tgenerate.instagram().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'screen') {\n\t\t\tgenerate.screen().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n\t\tif(this.props.selection.type === 'linkedin') {\n\t\t\tgenerate.linkedin().then(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.setState({loading: false})\n\t\t\t\t}, 1000)\n\t\t\t})\n\t\t} \n }\n \n checkNext() {\n let index = this.state.swipeIndex;\n let disabled = true;\n if(index == 0) {\n $('.swiper-button-prev').css(\"opacity\", '0.3');\n } else {\n $('.swiper-button-prev').css(\"opacity\", '');\n }\n if($(window).innerWidth() > 992) {\n if(index == 0 && this.props.poster.who.length) { \n disabled = false \n }\n if(index == 0) { \n $('.generator-button--redo').css(\"display\", 'none');\n } else {\n $('.generator-button--redo').css(\"display\", 'inline-block');\n }\n\n if(index == 1 && (this.props.poster.job.length && this.props.poster.address.length)) { disabled = false }\n if(index == 2 && this.state.subjectChosen) { disabled = false }\n if(index == 3) {\n $('.swiper-button-next').css(\"opacity\", '0');\n } else {\n $('.swiper-button-next').css(\"opacity\", '');\n }\n } else {\n if(index == 0 && this.props.poster.who.length) { disabled = false }\n if(index == 1 && this.props.poster.address.length) { disabled = false }\n if(index == 2 && this.props.poster.job.length) { disabled = false }\n if(index == 3 && this.state.subjectChosen) { disabled = false }\n if(index == 4) {\n $('.swiper-button-next').css(\"opacity\", '0');\n } else {\n $('.swiper-button-next').css(\"opacity\", '');\n }\n\n if(index == 4) { \n $('.generator-button--redo').css(\"display\", 'inline-block');\n $('.swiper-button-next').css(\"display\", 'none');\n } else {\n $('.generator-button--redo').css(\"display\", 'none');\n $('.swiper-button-next').css(\"display\", 'inline-block');\n }\n }\n $('.swiper-button-next').attr(\"disabled\", disabled);\n }\n\n handleRedo() {\n window.location.reload();\n }\n\n setStep(val) {\n this.mySwiper.slideTo(val);\n }\n\n openQuestionPopup() {\n console.log($('.js-generator-info-trigger'));\n $('.js-generator-info-trigger')[0].click();\n }\n\n render() {\n\n let previewComponent;\n\n this.checkNext();\n\n switch(this.props.selection.type) {\n case 'square':\n previewComponent = \n break;\n case 'portrait':\n previewComponent = \n break;\n case 'a3':\n previewComponent = \n break;\n case 'a4':\n previewComponent = \n break;\n case 'facebook':\n previewComponent = \n break;\n case 'twitter':\n previewComponent = \n break;\n case 'instagram':\n previewComponent = \n break;\n case 'screen':\n previewComponent = \n break;\n case 'linkedin':\n previewComponent = \n break;\n \n default:\n break; \n }\n \n let currentSet = [];\n\n if(this.props.poster.who && this.props.poster.address && this.props.poster.job) {\n currentSet = data[this.props.poster.who];\n }\n\n\n\n const options = [\n { value: \"allergoloog\", label: \"allergoloog\" },\n { value: \"anesthesioloog\", label: \"anesthesioloog\" },\n { value: \"apotheker\", label: \"apotheker\" },\n { value: \"arts microbioloog\", label: \"arts microbioloog\" },\n { value: \"bedrijfsarts\", label: \"bedrijfsarts\" },\n { value: \"cardioloog\", label: \"cardioloog\" },\n { value: \"casemanager\", label: \"casemanager\" },\n { value: \"chirurg\", label: \"chirurg\" },\n { value: \"dermatoloog\", label: \"dermatoloog\" },\n { value: \"diëtist\", label: \"diëtist\" },\n { value: \"dokter\", label: \"dokter\" },\n { value: \"doktersassistent\", label: \"doktersassistent\" },\n { value: \"ergotherapeut\", label: \"ergotherapeut\" },\n { value: \"fysiotherapeut\", label: \"fysiotherapeut\" },\n { value: \"ggz-verpleegkundige\", label: \"ggz-verpleegkundige\" },\n { value: \"gynaecoloog\", label: \"gynaecoloog\" },\n { value: \"huidtherapeut\", label: \"huidtherapeut\" },\n { value: \"huisarts\", label: \"huisarts\" },\n { value: \"intaker\", label: \"intaker\" },\n { value: \"intensivist\", label: \"intensivist\" },\n { value: \"internist\", label: \"internist\" },\n { value: \"kinderarts\", label: \"kinderarts\" },\n { value: \"klinisch chemicus\", label: \"klinisch chemicus\" },\n { value: \"klinisch fysicus\", label: \"klinisch fysicus\" },\n { value: \"klinisch geneticus\", label: \"klinisch geneticus\" },\n { value: \"klinisch geriater\", label: \"klinisch geriater\" },\n { value: \"kno-arts\", label: \"kno-arts\" },\n { value: \"kraamverzorgende\", label: \"kraamverzorgende\" },\n { value: \"kraamzorgconsulent\", label: \"kraamzorgconsulent\" },\n { value: \"laboratoriumarts\", label: \"laboratoriumarts\" },\n { value: \"logopedist\", label: \"logopedist\" },\n { value: \"longarts\", label: \"longarts\" },\n { value: \"maag-, darm- en leverarts\", label: \"maag-, darm- en leverarts\" },\n { value: \"medisch specialist\", label: \"medisch specialist\" },\n { value: \"mondhygiënist\", label: \"mondhygiënist\" },\n { value: \"nefroloog\", label: \"nefroloog\" },\n { value: \"neurochirurg\", label: \"neurochirurg\" },\n { value: \"neuroloog\", label: \"neuroloog\" },\n { value: \"nucleair geneeskundige\", label: \"nucleair geneeskundige\" },\n { value: \"oefentherapeut\", label: \"oefentherapeut\" },\n { value: \"oncoloog\", label: \"oncoloog\" },\n { value: \"oogarts\", label: \"oogarts\" },\n { value: \"optometrist\", label: \"optometrist\" },\n { value: \"orthopedisch chirurg\", label: \"orthopedisch chirurg\" },\n { value: \"paramedicus\", label: \"paramedicus\" },\n { value: \"patholoog\", label: \"patholoog\" },\n { value: \"pedagogisch hulpverlener\", label: \"pedagogisch hulpverlener\" },\n { value: \"physician assistant\", label: \"physician assistant\" },\n { value: \"plastisch chirurg\", label: \"plastisch chirurg\" },\n { value: \"podotherapeut\", label: \"podotherapeut\" },\n { value: \"praktijkondersteuner\", label: \"praktijkondersteuner\" },\n { value: \"praktijkondersteuner ggz\", label: \"praktijkondersteuner ggz\" },\n { value: \"psychiater\", label: \"psychiater\" },\n { value: \"psycholoog\", label: \"psycholoog\" },\n { value: \"radioloog\", label: \"radioloog\" },\n { value: \"radiotherapeut\", label: \"radiotherapeut\" },\n { value: \"reumatoloog\", label: \"reumatoloog\" },\n { value: \"revalidatiearts\", label: \"revalidatiearts\" },\n { value: \"sportarts\", label: \"sportarts\" },\n { value: \"tandarts\", label: \"tandarts\" },\n { value: \"thoraxchirurg\", label: \"thoraxchirurg\" },\n { value: \"uroloog\", label: \"uroloog\" },\n { value: \"vaktherapeut\", label: \"vaktherapeut\" },\n { value: \"verloskundige\", label: \"verloskundige\" },\n { value: \"verpleegkundig specialist\", label: \"verpleegkundig specialist\" },\n { value: \"verpleegkundige (in de thuiszorg)\", label: \"verpleegkundige (in de thuiszorg)\" },\n { value: \"verpleegkundige\", label: \"verpleegkundige\" },\n { value: \"verzorgende\", label: \"verzorgende\" },\n { value: \"wijkverpleegkundige\", label: \"wijkverpleegkundige\" },\n { value: \"ziekenhuisapotheker\", label: \"ziekenhuisapotheker\" },\n { value: \"zorgverlener\", label: \"zorgverlener\" },\n ]\n\n const types = [\n { value: 'Poster', label: 'Poster' },\n { value: 'Social media', label: 'Social media' },\n { value: 'Screen', label: 'Screen' },\n ]\n\n let formats = [];\n\n switch (this.state.type) {\n case 'Poster':\n formats = [\n { value: 'a3', label: 'A3 (420 mm x 297 mm)' },\n { value: 'a4', label: 'A4 (297 mm x 210 mm)' },\n ]\n break;\n case 'Social media':\n formats = [\n { value: 'instagram', label: 'Instagram & Facebook (1080x1080)' },\n { value: 'twitter', label: 'Twitter (1200x675)' },\n { value: 'linkedin', label: 'LinkedIn (1080x1080)' },\n ]\n break;\n case 'Screen':\n formats = [\n { value: 'screen', label: 'Beeldscherm (1920x1080)' },\n ]\n break;\n default:\n }\n\n let subjects = [];\n\n if(this.props.poster.who === 'zorggebruikers') {\n subjects = [\n { value: 'Voorbereiding', label: 'Voorbereiding' },\n { value: 'Alles zeggen tijdens een gesprek', label: 'Alles zeggen tijdens een gesprek' },\n { value: 'Alles vragen tijdens een gesprek', label: 'Alles vragen tijdens een gesprek' },\n { value: 'Tips voor na het gesprek', label: 'Tips voor na het gesprek' },\n { value: 'Andere tips', label: 'Andere tips' },\n ]\n } else {\n subjects = [\n { value: 'Patiënt of cliënt uitnodigen om te vertellen', label: 'Patiënt of cliënt uitnodigen om te vertellen' },\n { value: 'Alle informatie geven', label: 'Alle informatie geven' },\n { value: 'Andere tips', label: 'Andere tips' },\n ]\n }\n\n \n return (\n

\n\n

\n \n
\n \n
\n \n
\n \n

this.carouselRef = div}>\n

\n\n\n \n\n

\n 1 / 5\n

Aan wie is je uiting gericht?

In de laatste stap kun je kiezen welk gezicht je wil gebruiken.

\n \n \n Zorggebruikers\n \n

\n\n

\n \n \n Zorgverleners\n \n

\n \n

\n 2 / 5\n\n {(this.props.poster.who == 'zorggebruikers')\n ? (\n

Hoe spreek je de zorggebruiker aan?

\n )\n : (\n

Hoe spreek je de zorgverlener aan?

\n )\n }\n\n

\n \n \n Met ‘patiënt’\n \n

\n\n

\n \n \n Met ‘cliënt'\n \n

\n\n

\n 3 / 5\n

Hoe spreek je de zorggebruiker aan?

\n {this.props.poster.job ? this.props.poster.job : 'Kies een beroep'}\n {\n document.getElementById('js-subject-select-mobile').classList.remove('select-open');\n }}\n onChange={(e)=> {\n document.getElementById('js-subject-select-mobile').classList.remove('select-open');\n if (\"activeElement\" in document) {\n document.activeElement.blur();\n }\n this.setState({\n subject: e.label,\n subjectChosen: true\n })\n setTimeout(()=> {\n window.dispatchEvent(new Event('resize'));\n }, 100)\n }}\n onFocus={()=> {\n document.getElementById('js-subject-select-mobile').classList.add('select-open');\n }}\n styles={colourStyles}\n />\n

\n\n\n

\n {\n currentSet.questions && currentSet.questions[this.state.subject] && (\n <>\n

Kies een vraag die je wil stellen.

Bekijk hier het overzicht van alle vragen voor patiënten/cliënten en zorgverleners.

\n \n )\n }\n {\n currentSet.questions && currentSet.questions[this.state.subject] && currentSet.questions[this.state.subject].map((item, index)=> {\n return (\n

\n \n \n {\n this.props.poster.address == 'cliënt' ? (\n \n ) : (\n \n )\n }\n \n

\n )\n })\n }\n

\n\n

\n\n\n

Aan wie is je uiting gericht?

In de laatste stap kun je kiezen welk gezicht je wil gebruiken.

\n \n \n Zorggebruikers\n \n

\n\n

\n \n \n Zorgverleners\n \n

\n \n

\n\n

\n\n\n\n

\n\n {(this.props.poster.who == 'zorggebruikers') ? (\n <>\n

Hoe spreek je de zorggebruiker aan?

\n \n \n Met ‘patiënt’\n \n

\n\n

\n \n \n Met ‘cliënt'\n \n

Met wie stimuleer je de zorggebruiker om samen te beslissen?

\n {this.props.poster.job ? this.props.poster.job : 'Kies een beroep'}\n {\n document.body.classList.remove('select-open');\n }}\n onChange={(e)=> {\n document.body.classList.remove('select-open');\n if (\"activeElement\" in document) {\n document.activeElement.blur();\n }\n this.props.actions.SET_JOB(e.label)\n if(e.label.length > 7 && this.props.poster.who == 'zorgverleners') {\n document.body.classList.add('smallen');\n } else {\n document.body.classList.remove('smallen');\n }\n }}\n onFocus={()=> {\n document.body.classList.add('select-open');\n }}\n styles={colourStyles}\n />\n

Hoe spreekt de zorgverlener de zorggebruiker aan?

\n \n \n Met ‘patiënt’\n \n

\n\n

\n \n \n Met ‘cliënt'\n \n

\n \n )\n }\n\n\n

\n\n\n

\n \n

\n\n

Kies een onderwerp voor de vraag

\n \n

\n {this.state.subject}\n \n {\n this.props.poster.address == 'cliënt' ? (\n \n ) : (\n \n )\n }\n \n

\n )\n })\n }\n

\n \n

\n\n\n\n

\n 5 / 5\n

Klaar! Je kan nu je materialen downloaden

\n {this.state.type}\n {\n document.getElementById('js-format-select').classList.remove('select-open');\n }}\n onChange={(e)=> {\n document.getElementById('js-format-select').classList.remove('select-open');\n if (\"activeElement\" in document) {\n document.activeElement.blur();\n }\n this.setState({\n format: e.label\n })\n this.props.actions.SET_TYPE(e.value);\n setTimeout(()=> {\n window.dispatchEvent(new Event('resize'));\n }, 100)\n\n setTimeout(handleFit, 200);\n }}\n onFocus={()=> {\n document.getElementById('js-format-select').classList.add('select-open');\n }}\n styles={colourStyles}\n />\n

\n \n

\n Kies het gezicht\n

\n \n {this.props.poster.face + 1}/{this.props.poster.maxFaces }\n \n

\n\n \n

\n\n

Klaar! Je kan nu je materialen downloaden

\n \n \n Poster\n \n

\n \n \n Social media\n \n

\n \n \n Screensaver\n \n

\n\n

\n \n

\n Kies het formaat\n

\n {this.state.format}\n