From e242a3dc8905ceafe2c1375b8a279c72dbc452a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dersim=20=C3=96zdag?= Date: Wed, 18 Aug 2021 11:32:38 +0200 Subject: [PATCH] now sets klaro-modal-open to body klaro-modal is open --- src/components/app.jsx | 12 +++++--- src/components/consent-modal.jsx | 28 ++++++++---------- src/components/consent-notice.jsx | 49 +++++++++++++++++-------------- 3 files changed, 48 insertions(+), 41 deletions(-) diff --git a/src/components/app.jsx b/src/components/app.jsx index 23d3eba0..330c3902 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -27,9 +27,10 @@ export default class App extends React.Component { if (api !== undefined) { if (modal || show > 0) return; if (!this.props.manager.confirmed) { - const shownBefore = this.props.manager.auxiliaryStore.getWithKey( - 'shown-before' - ); + const shownBefore = + this.props.manager.auxiliaryStore.getWithKey( + 'shown-before' + ); if (!shownBefore) { api.update(this, 'showNotice', { config: config }); this.props.manager.auxiliaryStore.setWithKey( @@ -60,7 +61,10 @@ export default class App extends React.Component { const { additionalClass, embedded, stylePrefix } = config; const hide = () => { - if (!embedded) this.setState({ show: false }); + if (!embedded) { + document.body.classList.remove('klaro-modal-open'); + this.setState({ show: false }); + } }; return (
); - else servicesOrPurposes = ; + else + servicesOrPurposes = ( + + ); const innerModal = (
@@ -121,13 +122,9 @@ export default class ConsentModal extends React.Component { text={[t(['consentModal', 'description'])].concat( (ppLink && [' '].concat( - t( - [ - 'privacyPolicy', - 'text', - ], - { privacyPolicy: ppLink } - ) + t(['privacyPolicy', 'text'], { + privacyPolicy: ppLink, + }) )) || [] )} @@ -141,8 +138,7 @@ export default class ConsentModal extends React.Component { {acceptButton} {acceptAllButton}
- { - !config.disablePoweredBy && + {!config.disablePoweredBy && (

- } + )}
); @@ -163,6 +159,8 @@ export default class ConsentModal extends React.Component { if (embedded) return
{innerModal}
; + document.body.classList.add('klaro-modal-open'); + return (
diff --git a/src/components/consent-notice.jsx b/src/components/consent-notice.jsx index 464a947e..c9c0e25b 100644 --- a/src/components/consent-notice.jsx +++ b/src/components/consent-notice.jsx @@ -2,7 +2,7 @@ import React from 'react'; import ConsentModal from './consent-modal'; import { getPurposes } from '../utils/config'; import Text from './text'; -import { asTitle } from '../utils/strings' +import { asTitle } from '../utils/strings'; export default class ConsentNotice extends React.Component { constructor(props) { @@ -35,16 +35,14 @@ export default class ConsentNotice extends React.Component { !confirmed && (modal || this.props.config.mustConsent) ) { - const close = () => { - this.setState({confirming: false}); + this.setState({ confirming: false }); this.props.hide(); }; - this.setState({confirming: true}) - if (changedServices === 0) - close() - else{ + this.setState({ confirming: true }); + if (changedServices === 0) close(); + else { setTimeout(close, 800); } } else { @@ -71,17 +69,24 @@ export default class ConsentNotice extends React.Component { // we exclude functional services from this list, as they are always required and // the user cannot decline their use... - const purposeOrder = config.purposeOrder || [] - const purposes = getPurposes(config).filter(purpose => purpose !== 'functional').sort((a,b) => purposeOrder.indexOf(a)-purposeOrder.indexOf(b)); - const purposesTranslations = purposes - .map((purpose) => t(['!', 'purposes', purpose, 'title?']) || asTitle(purpose)) - let purposesText = '' + const purposeOrder = config.purposeOrder || []; + const purposes = getPurposes(config) + .filter((purpose) => purpose !== 'functional') + .sort((a, b) => purposeOrder.indexOf(a) - purposeOrder.indexOf(b)); + const purposesTranslations = purposes.map( + (purpose) => + t(['!', 'purposes', purpose, 'title?']) || asTitle(purpose) + ); + let purposesText = ''; if (purposesTranslations.length === 1) - purposesText = purposesTranslations[0] + purposesText = purposesTranslations[0]; else - purposesText = [...purposesTranslations.slice(0, -2), purposesTranslations.slice(-2).join(' & ')].join(', '); + purposesText = [ + ...purposesTranslations.slice(0, -2), + purposesTranslations.slice(-2).join(' & '), + ].join(', '); let ppUrl; - // to do: deprecate and remove this + // to do: deprecate and remove this if (config.privacyPolicy !== undefined) { if (typeof config.privacyPolicy === 'string') ppUrl = config.privacyPolicy; @@ -91,12 +96,10 @@ export default class ConsentNotice extends React.Component { } } else { // this is the modern way - ppUrl = t(['!', 'privacyPolicyUrl'], {lang: lang}) - if (ppUrl !== undefined) - ppUrl = ppUrl.join('') + ppUrl = t(['!', 'privacyPolicyUrl'], { lang: lang }); + if (ppUrl !== undefined) ppUrl = ppUrl.join(''); } - const showModal = (e) => { e.preventDefault(); this.setState({ modal: true }); @@ -104,6 +107,7 @@ export default class ConsentNotice extends React.Component { const hideModal = () => { if (config.mustConsent && !config.acceptAll) return; + document.body.classList.remove('klaro-modal-open'); if (manager.confirmed && !testing) this.props.hide(); else this.setState({ modal: false }); }; @@ -208,7 +212,7 @@ export default class ConsentNotice extends React.Component { const notice = (
{purposesText}, + purposes: ( + {purposesText} + ), privacyPolicy: ppLink, learnMoreLink: learnMoreLink(), })} @@ -239,7 +245,6 @@ export default class ConsentNotice extends React.Component { if (!noticeAsModal) return notice; - return (