{this.state.modalTitle}
\n 0 ? 'col-sm-12 col-lg-8 order-lg-1 order-md-1 order-1' : 'col-sm-12 col-lg-12 order-lg-1 order-md-1 order-1') : 'col-sm-12 col-lg-12 order-lg-1 order-md-1 order-1'}>\n
\n \n \n
\n 0 ? {} : { display: \"none\" }) : { display: \"none\" }}>\n {related ? '' :\n
\n \n
\n }\n \n
\n - \n
Indicatie {item.indication != undefined ? - {item.indication.name} : ''}\n
Werkzame stof {item.substance != undefined ? - {item.substance.name} : ''}\n
\n
\n\n {(item.cooperation != undefined && item.cooperation.trim()) != '' ?\n \n {item.description != undefined ?
\n {item.description}
:\n leaflet != null ?{leaflet.video_description}
: ''}\n\n
\n : ''}\n\n \n
\n {item.cooperation}
\n \n {item.link_buttons != undefined || item.display_side_effect_button ?\n
\n\n {item.use_new_report_button ?\n \n : <>}\n\n \n \n
\n : ''}\n - \n\n {/* */}\n {item.link_buttons != undefined ? item.link_buttons.map((link_button: Models.LinkButton) => (\n
- \n { window.bs_dataLayer.push({ 'event': 'visualleaflet_modal_link_clicked', 'visualleaflet_modal_link_name': link_button.text }); }} href={link_button.url} target={link_button.target} className=\"link\" data-test=\"btn-video-link\">\n
{link_button.text}\n \n \n )) : ''}\n {item.elearner ?\n - \n
E-learning \n \n \n \n : ''}\n {/* This button is meant to set an intake moment in the google calendar */}\n {this.state.intakeMoments.length > 0 ?\n - \n
\n : ''\n }\n {\n (item.display_side_effect_button || item.use_new_report_button) && (\n - \n {\n item.use_new_report_button ? (\n
Meld bijwerking \n \n ) : (\nMeld bijwerking \n \n )\n }\n \n )\n }\n
\n
\n \n {item.image_link_buttons != undefined ?\n
\n\n {this.state.relatedVideos != \"loading\" ?\n this.state.relatedVideos != \"error\" ?\n this.state.relatedVideos.length > 0 ?\n \n
\n : ''}\n Extra
\n \n {/* */}\n\n {item.image_link_buttons != undefined ? item.image_link_buttons.map((image_link_button: Models.ImageLinkButton) => (\n \n )) : ''}\n
\n \n
\n : '' : '' : ''}\n \n
\n \n
\n Gerelateerde videos
\n \n \n
\n \n \n {this.state.relatedVideos != \"loading\" ?\n this.state.relatedVideos != \"error\" ?\n this.state.relatedVideos.map((video: Models.RelatedVideo) =>\n
\n { await this.changeVideo(video.video.id); this.setState({ modalTitle: video.video.title }); })}>\n
)\n : ''\n : ''}\n \n \n
\n \n ![](\"https://www.beeldsluiter.nl/static/widget/image/Videoplayer_icon_02.png\")
\n 
\n
\n \n \n
\n {video.text}
\n {video.description != null ?{video.description}
: ''}\n\n
\n : ''}\n { this.setState({grouped: null})} }>\n
\n
\n
\n \n {leaflets.length > 0 ? leaflets :
}\n
\n \n );\n }\n\n}\n\ninterface LeafletProps {\n visualleaflet: Models.Visualleaflet,\n language: Models.Language\n callback?: Function,\n grouped: Models.Visualleaflet,\n}\n\ninterface LeafletState {\n condition: any,\n leafletRefs: any[],\n readMore: boolean,\n // active_video: Models.Video\n visualleaflet: Models.Visualleaflet,\n videos: Models.Video[],\n language: Models.Language,\n grouped: Models.Visualleaflet,\n\n}\n\nclass Leaflet extends ComponentGeen resultaten gevonden.
}\n \n
\n \n {\n this.ShowModalOrCallback(this.props.grouped, index);\n })}>{this.props.grouped ? video.title : leaflet.name}\n \n
\n\n {\n this.ShowModalOrCallback(this.props.grouped, index);\n })}>\n {video.indication != null ?
: ''}\n {video.substance != null ?
\n
}\n customRightArrow={}\n >\n {video.thumbnails.map((e) =>\n \n {\n this.ShowModalOrCallback(this.props.grouped, index);\n })}>\n
\n \n {!this.props.grouped ? (leaflet.video_description != null ? leaflet.video_description : video.description) : video.description != '' ? video.description : leaflet.video_description}\n
\n {\n this.ShowModalOrCallback(this.props.grouped, index);\n })}>\n\n {\n this.state.leafletRef.current.showModal();\n window.bs_dataLayer.push({ 'event': 'related_video_modal_open', 'related_video_modal_name': item.title })\n })}\n >\n \n 
{ e.preventDefault(); this.setState({ dragging: true }); }}\n onMouseUp={(e) => { e.preventDefault(); setTimeout(() => { this.setState({ dragging: false }) }, 200) }}\n onClick={(() => {\n console.log(this.state.dragging)\n if (this.state.dragging == false)\n this.state.leafletRef.current.showModal();\n window.bs_dataLayer.push({ 'event': 'related_video_modal_open', 'related_video_modal_name': item.title })\n })} />\n
\n \n
\n \n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport i18next from \"i18next\";\nimport { Trans } from \"react-i18next\";\nimport { faQuestionCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport Modal from \"react-bootstrap/Modal\";\n// import ModalBody from \"react-bootstrap/ModalBody\";\n// import ModalHeader from \"react-bootstrap/ModalHeader\";\n// import ModalFooter from \"react-bootstrap/ModalFooter\";\n// import ModalTitle from \"react-bootstrap/ModalTitle\";\n\nimport RVG_code from \"../images/WaarVindIkDeCode_Ontwerp2PNG.png\";\n// import BeeldsluiterPoster from \"../images/intro_thumbnail.jpg\";\nimport BeeldsluiterPoster from \"../images/beeldsluiter-poster.jpg\";\nimport IntroVideo from \"../video/product-video-beeldsluiter.mp4\";\n\nexport type IntroState = {\n showHide: boolean;\n videoTenpercent: Boolean;\n videoTwentypercent: Boolean;\n videoThirtypercent: Boolean;\n videoFortypercent: Boolean;\n videoFiftypercent: Boolean;\n videoSixtypercent: Boolean;\n videoSeventypercent: Boolean;\n videoEightypercent: Boolean;\n videoNinetypercent: Boolean;\n videoHunderdpercent: Boolean;\n};\nexport class Introduction extends Component<{}, IntroState> {\n\n constructor(params: any, state: any) {\n super(params, state);\n this.state = {\n showHide: false,\n videoTenpercent: false,\n videoTwentypercent: false,\n videoThirtypercent: false,\n videoFortypercent: false,\n videoFiftypercent: false,\n videoSixtypercent: false,\n videoSeventypercent: false,\n videoEightypercent: false,\n videoNinetypercent: false,\n videoHunderdpercent: false,\n };\n\n this.handleModalShowHide = this.handleModalShowHide.bind(this);\n }\n\n handleModalShowHide() {\n this.setState({ showHide: !this.state.showHide });\n }\n\n\n\n introVideoTimeUpdated = (e) => {\n let currentTime = Math.floor((e.target.currentTime / e.target.duration) * 100)\n if (currentTime == 10 && !this.state.videoTenpercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoTenpercent: true,\n videoHunderdpercent: false\n })\n } else if (currentTime == 20 && !this.state.videoTwentypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoTwentypercent: true,\n videoTenpercent: false\n })\n } else if (currentTime == 30 && !this.state.videoThirtypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoThirtypercent: true,\n videoTwentypercent:false\n })\n } else if (currentTime == 40 && !this.state.videoFortypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoFortypercent: true,\n videoThirtypercent: false\n })\n } else if (currentTime == 50 && !this.state.videoFiftypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoFiftypercent: true,\n videoFortypercent: false\n })\n } else if (currentTime == 60 && !this.state.videoSixtypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoSixtypercent: true,\n videoFiftypercent: false\n })\n } else if (currentTime == 70 && !this.state.videoSeventypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoSeventypercent: true,\n videoSixtypercent: false\n\n })\n } else if (currentTime == 80 && !this.state.videoEightypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoEightypercent: true,\n videoSeventypercent: false\n })\n } else if (currentTime == 90 && !this.state.videoNinetypercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoNinetypercent: true,\n videoEightypercent: false,\n })\n } else if (currentTime == 100 && !this.state.videoHunderdpercent) {\n this.dataLayerPush(currentTime)\n this.setState({\n videoHunderdpercent: true,\n videoNinetypercent: false\n })\n }\n }\n\n dataLayerPush = (currentTime) => {\n window.bs_dataLayer.push({ 'event': 'into_video', 'into_video_current_time': currentTime+' %' })\n }\n\n\n\n render() {\n return (\n <>\n \n
\n \n
\n call to action 1 \n \n
\n De bijsluiter in beeld
\n - \n
- \n
landing text 1 \n \n - \n
landing text 2 \n \n - \n
landing text 3 \n \n
\n
\n \n );\n }\n}\n\nexport default Introduction;\n","import React, { Component } from \"react\";\nimport Modal from \"react-bootstrap/Modal\";\nimport { Trans } from \"react-i18next\";\n\nexport type CookieState = {\n cookie_information: boolean,\n cookie_class_name: string;\n};\n\nexport class Cookies extends Component<{},CookieState> {\n constructor(props) {\n super(props);\n this.state = {\n cookie_information: false,\n cookie_class_name: \"\",\n };\n this.cookieAccept = this.cookieAccept.bind(this);\n this.CookieInformationModalToggle = this.CookieInformationModalToggle.bind(this);\n this.cookieAcceptFromModal = this.cookieAcceptFromModal.bind(this)\n }\n\n componentDidMount() {\n let cookieAcceptedStatus = localStorage.getItem(\"cookieAccepted\")\n\n if (cookieAcceptedStatus) {\n this.setState({\n cookie_class_name: \"cookie-disclaimer cookie-disclaimer-accepted\"\n })\n } else {\n this.setState({\n cookie_class_name: \"cookie-disclaimer\"\n })\n }\n }\n\n cookieAccept() {\n localStorage.setItem(\"cookieAccepted\", 'true')\n\n this.setState({\n cookie_class_name: \"cookie-disclaimer cookie-disclaimer-accept\",\n })\n }\n\n cookieAcceptFromModal() {\n localStorage.setItem(\"cookieAccepted\", 'true')\n\n this.setState({\n cookie_class_name: \"cookie-disclaimer cookie-disclaimer-accept\",\n cookie_information: !this.state.cookie_information\n })\n\n console.log(this.state.cookie_information)\n }\n\n CookieInformationModalToggle() {\n this.setState({ cookie_information: !this.state.cookie_information });\n }\n\n render() {\n return (\n \n {/* Introduction video */}\n\n
\n \n \n
\n\n \n \n
\n \n \n Waar vind ik het EU-nummer? \n \n \n \n
\n\n \n \n Wat is de Beeldsluiter?\n \n
\n \n
\n
\n
\n 
\n
\n \n
\n \n \n \n Cookies \n \n \n \n \n
\n );\n }\n}\n\nexport default Cookies;\n","import React, {Component} from 'react';\nimport 'react-multi-carousel/lib/styles.css';\nimport {Trans} from 'react-i18next';\nimport {faChevronCircleUp} from '@fortawesome/free-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Api} from './js/Api';\nimport {VisualleafletModal} from './components/LeafletModal';\nimport {Header} from './components/Header';\nimport {Footer} from './components/Footer';\nimport {Lead} from './components/Lead';\nimport {Introduction} from './components/Introduction';\nimport {RelatedVideo} from './components/RelatedVideo';\n\nimport {Cookies} from './components/Cookies';\n// import scrooll_to_btn from './images/chevron-circle-up-white-bg.svg'\n\nclass Main extends Component {\n constructor() {\n super();\n this.state = {\n condition: false,\n qr_ref: null,\n ref_id: 0,\n ref_video: null,\n };\n this.handleClick = this.handleClick.bind(this);\n }\n\n componentDidMount() {\n // check if url contains ?ref=&video_id=\n if (window.location.href.split('?').length > 1) {\n for (const i in window.location.href.split('?')[1].split('&')) {\n const k = window.location.href\n .split('?')[1]\n .split('&')\n [i].split('=')[0];\n const v = window.location.href\n .split('?')[1]\n .split('&')\n [i].split('=')[1];\n if (k === 'ref' && v === 'qr') {\n this.setState({qr_ref: true});\n }\n else if (k === 'vid_id') {\n this.setState({ref_id: Number.parseInt(v, 10)});\n\n this.getVideo(Number.parseInt(v, 10)).then((item) => {\n if (item.id !== null) {\n this.setState({ref_video: item});\n }\n });\n }\n }\n }\n else {\n // if not, check if there is a visualleaflet with the slug as its name defined as protocol://host/\n
\n
\n Algemene informatie
\n \n
\n
\n
\n Uitgebreide informatie
\n \n
\n \n Naam \n Gebruikt voor \n Geplaatst door \n Periode \n
\n \n
\n \n _GA\n
\n \n _GA \n
\n \n Google\n
\n \n 2 Jaar \n
\n \n
\n \n _GAT_*\n
\n \n _GAT_ \n
\n \n Google\n
\n \n 1 Minuut \n
\n \n
\n \n _GID\n
\n \n _GID \n
\n \n Google\n
\n \n 24 Uur \n
\n \n
\n \n WDGT_video_*\n
\n \n WDGT_video_ \n
\n \n Kindermedicijn\n
\n \n Sessie \n
\n \n
\n \n csrftoken\n
\n \n csrftoken \n
\n \n Kindermedicijn\n
\n \n 1 Jaar \n
\n \n
\n \n sessionid\n
\n \n sessionid \n
\n \n Kindermedicijn\n
\n \n 2 Weken \n
\n \n
\n \n django_language\n
\n \n django_language \n
\n \n Kindermedicijn\n
\n \n Sessie \n
\n \n
\n \n \n
\n \n
\n\n {/* Visualleaflet video section */}\n \n \n
\n \n\n {/* Related vids */}\n \n \n \n
\n \n {/* NOTE: If the carousel is in a flexbox\n put the carousel in a div with a width of 100%.\n It won't work in a flexbox\n The width on 100% is a workaround for this so that you can\n use it in a flexbox */}\n
\n \n\n {/* Footer Section */}\n \n {/* Cookies */}\n \n Gerelateerde video's \n
\n \n {/* NOTE: If the carousel is in a flexbox\n put the carousel in a div with a width of 100%.\n It won't work in a flexbox\n The width on 100% is a workaround for this so that you can\n use it in a flexbox */}\n \n
\n