Skip to content

Commit

Permalink
Merge pull request #135 from digi-trust/master
Browse files Browse the repository at this point in the history
v1.4.0
  • Loading branch information
SupahNickie authored Jun 26, 2018
2 parents ce53a99 + 86cc621 commit e5aba70
Show file tree
Hide file tree
Showing 15 changed files with 544 additions and 13 deletions.
18 changes: 15 additions & 3 deletions src/components/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { h, Component } from 'preact';
import style from './app.less';
import { currentLocale } from '../lib/localize';

import PopupFooter from './popup/popupFooter';
import Popup from './popup/popup';
import PopupFooter from './popup/popupFooter';
import PopupThin from './popup/popupThin';
import Footer from './footer/footer';

export default class App extends Component {
Expand Down Expand Up @@ -104,11 +105,15 @@ export default class App extends Component {
const target = event.target;
const showConsentToolButtonClicked = RegExp('showConsentTool').test(target.getAttribute('onclick'));
const appDiv = self.base;
const { layout } = config;

if (!showConsentToolButtonClicked && !appDiv.contains(target)) {
store.toggleConsentToolShowing(false);

// Render footer style CMP if no consent decision has been submitted yet
if (!cmp.submitted) store.toggleFooterConsentToolShowing(true);
if (!cmp.submitted) {
layout !== 'thin' ? store.toggleFooterConsentToolShowing(true) : store.toggleThinConsentToolShowing(true);
}
};
}, false);
}
Expand All @@ -134,7 +139,7 @@ export default class App extends Component {
render(props, state) {
const { store } = state;
const { config } = props;
const userLocalization = config.localization[currentLocale];
const userLocalization = config.localization[currentLocale.split('-')[0]];

return (
<div class={style.gdpr}>
Expand All @@ -152,6 +157,13 @@ export default class App extends Component {
config={config}
updateCSSPrefs={this.updateCSSPrefs}
/>
<PopupThin
store={store}
localization={userLocalization}
onSave={this.onSave}
config={config}
updateCSSPrefs={this.updateCSSPrefs}
/>
<Footer
store={store}
localization={userLocalization}
Expand Down
10 changes: 9 additions & 1 deletion src/components/popup/intro/footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ export default class IntroFooter extends Component {
store
} = props;

let allPurposes = [];
if (store.vendorList && store.vendorList.purposes) {
allPurposes = allPurposes.concat(store.vendorList.purposes);
}
if (store.customPurposeList && store.customPurposeList.purposes) {
allPurposes = allPurposes.concat(store.customPurposeList.purposes);
}

return (
<div>
{!showFull &&
Expand Down Expand Up @@ -64,7 +72,7 @@ export default class IntroFooter extends Component {
</LocalLabel>
<LocalLabel providedValue={localization && localization.footer ? localization.footer.purposesHeader : ''} localizeKey='footer.purposesHeader' class={style.message2 + " primaryText"}>Purposes for storing information:</LocalLabel>
<ul>
{store && store.vendorList && store.vendorList.purposes && store.vendorList.purposes.map((purpose) => {
{allPurposes.map((purpose) => {
return <li class="primaryText">{purpose.name}</li>
})}
</ul>
Expand Down
39 changes: 33 additions & 6 deletions src/components/popup/intro/footerV2.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default class IntroFooterV2 extends Component {
}, this.props.updateCSSPrefs);
}

componentDidUpdate() {
this.props.updateCSSPrefs();
}

componentDidMount() {
this.props.updateCSSPrefs();
}
Expand All @@ -33,16 +37,39 @@ export default class IntroFooterV2 extends Component {
localization,
onShowPurposes,
onAcceptAll,
store
store,
config
} = props;

let allPurposes = [];
if (store.vendorList && store.vendorList.purposes) {
allPurposes = allPurposes.concat(store.vendorList.purposes);
}
if (store.customPurposeList && store.customPurposeList.purposes) {
allPurposes = allPurposes.concat(store.customPurposeList.purposes);
}

const { isThinConsentToolShowing } = store;

return (
<div class={style.footerV2}>
{!showFull &&
<div class={style.base + " " + style.collapsed}>
<span name="ctrl" class={style.icon} onClick={this.handleShow}></span>
<LocalLabel providedValue={localization && localization.footer ? localization.footer.message : ''} localizeKey='footer.message' class={style.message + " primaryText"}>Read more about access and use of information on your device for various purposes.</LocalLabel>
</div>}
<div class={style.base + " " + style.collapsed + " " + style.wrapper}>
<div style="display: flex; justify-content: space-between;">
<span name="ctrl" class={style.icon} onClick={this.handleShow}></span>
<LocalLabel providedValue={localization && localization.footer ? localization.footer.message : ''} localizeKey='footer.message' class="primaryText">Read more about access and use of information on your device for various purposes.</LocalLabel>
</div>
{isThinConsentToolShowing &&
<Button
class={style.rejectAll + " " + style.button}
invert={true}
onClick={onShowPurposes}
>
<LocalLabel providedValue={localization && localization.intro ? localization.intro.showPurposes : ''} localizeKey='intro.showPurposes'>Learn more</LocalLabel>
</Button>
}
</div>
}
{showFull && <div class={style.container}>
<div class={style.base + " " + style.extended}>
<span name="ctrl" class={style.iconDown} onClick={this.handleShow}></span>
Expand All @@ -66,7 +93,7 @@ export default class IntroFooterV2 extends Component {

<LocalLabel providedValue={localization && localization.footer ? localization.footer.purposesHeader : ''} localizeKey='footer.purposesHeader' class={style.message2 + " primaryText"}>Purposes for storing information:</LocalLabel>
<ul>
{store && store.vendorList && store.vendorList.purposes && store.vendorList.purposes.map((purpose) => {
{allPurposes.map((purpose) => {
return <li class="primaryText">{purpose.name}</li>
})}
</ul>
Expand Down
1 change: 1 addition & 0 deletions src/components/popup/intro/footerV2.less
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@

.wrapper {
display: flex;
justify-content: space-between;
}

.content {
Expand Down
60 changes: 60 additions & 0 deletions src/components/popup/intro/introThin.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { h, Component } from 'preact';
import style from './introThin.less';
import Button from '../../button/button';
import Label from '../../label/label';
import IntroFooterV2 from './footerV2';

class LocalLabel extends Label {
static defaultProps = {
prefix: 'intro'
};
}

export default class IntroThin extends Component {

static defaultProps = {};

componentDidMount() {
this.props.updateCSSPrefs();
}

render(props, state) {
const {
onAcceptAll,
onShowPurposes,
onClose,
localization,
store,
updateCSSPrefs,
config
} = props;

return (
<div class={style.intro}>
<div class={style.topWrapper}>
<div class={style.textWrapper}>
<div class={style.description + " primaryText"}>
<LocalLabel providedValue={localization && localization.intro ? localization.intro.description : ''} localizeKey='description' class={style.contentMessage}>Ads help us run this site. When you use our site selected companies may access and use information on your device for various purposes including to serve relevant ads or personalised content.</LocalLabel>
</div>
</div>
<div class={style.options}>
<Button
class={style.acceptAll}
onClick={onAcceptAll}
>
<LocalLabel providedValue={localization && localization.intro ? localization.intro.acceptAll : ''} localizeKey='acceptAll'>Accept all</LocalLabel>
</Button>
</div>
</div>
<IntroFooterV2
onShowPurposes={onShowPurposes}
onAcceptAll={onAcceptAll}
localization={localization}
store={store}
updateCSSPrefs={updateCSSPrefs}
config={config}
/>
</div>
);
}
}
82 changes: 82 additions & 0 deletions src/components/popup/intro/introThin.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
@import '../../../style/variables';

.imagePadding {
padding-left: 10px;
}

div.intro {
padding: 0 32px;
max-height: 100%;

.topWrapper {
display: flex;
justify-content: space-between;

.textWrapper {
display: flex;
flex-direction: column;

.titleContainer {
padding: 10px 0;
font-size: 30px;
font-weight: bold;

.title {
float: left;
line-height: 1.5;
}
}
.description {
padding: 10px 10px 10px 0px;
}
}
.options {
display: flex;
flex-direction: column;
padding-top: 10px;

button {
margin: 5px;
}
}
}
.contentMessage {
padding-right: 32px;
}
.rejectAll {
width: 270px;
margin-right: 10px !important;
}

.acceptAll {
width: 270px;
margin-right: -25px !important;
}
}

@media (max-width: 800px) {
.topWrapper {
display: block !important;

.description {
padding: 10px !important;
display: block !important;
}
.options {
margin: 0 auto !important;
}
}
}

@media (max-width: 620px) {
.description {
display: block !important;
}
.topWrapper {
display: block !important;

.options {
margin: 0 auto !important;
}
}
}
1 change: 1 addition & 0 deletions src/components/popup/intro/introV2.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export default class IntroV2 extends Component {
localization={localization}
store={store}
updateCSSPrefs={updateCSSPrefs}
config={config}
/>
</div>
);
Expand Down
86 changes: 86 additions & 0 deletions src/components/popup/popupThin.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { h, Component } from 'preact';
import style from './popupThin.less';
import IntroThin from './intro/introThin';
import Details from './details/details';
import Panel from '../panel/panel';


const SECTION_INTRO = 0;
const SECTION_DETAILS = 1;

export default class PopupThin extends Component {
state = {
selectedPanelIndex: SECTION_INTRO,
isActive: false
};

onAcceptAll = () => {
const { store, onSave } = this.props;
store.selectAllVendors(true);
store.selectAllPurposes(true);
store.selectAllCustomPurposes(true);
onSave();
};

onCancel = () => {
this.setState({
selectedPanelIndex: SECTION_INTRO,
isActive: false
});
};

handleShowDetails = () => {
this.setState({
selectedPanelIndex: SECTION_DETAILS,
isActive: true
});
};

handleClose = () => {};

componentDidMount() {
this.props.updateCSSPrefs();
}

render(props, state) {
const { store, localization, config, updateCSSPrefs } = props;
const { selectedPanelIndex, isActive } = state;
const { isThinConsentToolShowing } = store;

return (
<div
class={config.blockBrowsing ? style.popup : ''}
style={{ display: isThinConsentToolShowing ? 'flex' : 'none' }}
>
{config.blockBrowsing &&
<div
class={style.overlay}
onClick={this.handleClose}
/>
}
<div name='content' class={this.state.isActive ? style.contentClicked : style.content}>
<Panel selectedIndex={selectedPanelIndex}>
<IntroThin
onAcceptAll={this.onAcceptAll}
onShowPurposes={this.handleShowDetails}
onClose={this.handleClose}
localization={localization}
store={store}
config={config}
updateCSSPrefs={updateCSSPrefs}
/>
<Details
onSave={this.props.onSave}
onCancel={this.onCancel}
store={this.props.store}
onClose={this.handleClose}
localization={localization}
config={config}
updateCSSPrefs={updateCSSPrefs}
/>
</Panel>
</div>
</div>
);
}
}
Loading

0 comments on commit e5aba70

Please sign in to comment.