Skip to content

Commit

Permalink
Add more options (#24)
Browse files Browse the repository at this point in the history
* Added Vimeo and Twitter Support

* Added Towncrier News Fragment

* added options

* Main Commit

* news fragment

* Changes to index.js

* Added Requested Changes

* Fix Readme

* Final Changes

* Changes to Readme.md and Index.js
  • Loading branch information
Molochem authored Dec 27, 2023
1 parent 19cdc06 commit da25e1d
Show file tree
Hide file tree
Showing 8 changed files with 323 additions and 151 deletions.
36 changes: 35 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Start Volto with:
yarn start
```

Go to http://localhost:3000, and the cooking confirmation screen will popup.
Go to http://localhost:3000, and the cookie confirmation screen will popup.

## Compatibility

Expand Down Expand Up @@ -99,6 +99,40 @@ config.settings.DSGVOBanner = {
privacy_url: '/privacy',
};
```
You can customize the style of the modal buttons
```
config.settings.DSGVOBanner.cssClasses = {
bannerAgreeButton: "branded olive",
bannerAdjustButton: "branded blue",
}
```
Or something like
```
config.settings.DSGVOBanner.cssClasses = {
bannerAgreeButton: "red",
bannerAdjustButton: "pink",
}
```
Keep in mind though, that the 'Adjust privacy Setting' Button will always stay inverted

By default, the banner to configure cookies will be shown in an overlay the first time a user visits the site. You can disable this by setting the `useBanner` setting to `false`. In this case, you must add the "DSGVO Banner" block to a page (such as a privacy settings page) to allow users to configure their cookies.
```
config.settings.DSGVOBanner.showBanner = false ;
```
You can also hide the greyed-out 'Technically required' option.
```
config.settings.DSGVOBanner.showTechnicallyRequired = false ;
```

# Supported Modules
Per default only the 'tracking' , 'youtube' , 'facebook' and 'google' Modules are enabled. However, the following List contains all supported Modules :

- 'tracking'
- 'youtube'
- 'facebook'
- 'google'
- 'twitter'
- 'vimeo'

# License

Expand Down
1 change: 1 addition & 0 deletions news/23.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added Differentiation between Youtube and Vimeo Videos in the Video-View, and added Twitter Module and Cookie Option if someone uses volto-social-blocks with this Addon @Molochem
1 change: 1 addition & 0 deletions news/24.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added : Interchangeable Button Colors, The Option to Hide the Banner on First Connect and the Option to hide the "Technically Required" Checkbox @Molochem
91 changes: 73 additions & 18 deletions src/components/Banner/Banner.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,16 @@ const Banner = (props) => {
const modules = config.settings.DSGVOBanner.modules;
const [cookies, setCookie, removeCookie] = useCookies();
const [configureCookies, setConfigureCookies] = useState(false);
const showConfirmModal = !Number(cookies.confirm_cookies) || props.show;
const showTechnicallyRequired =
config.settings.DSGVOBanner.showTechnicallyRequired;
const bannerAgreeButton =
config.settings.DSGVOBanner.cssClasses.bannerAgreeButton;
const bannerAdjustButton =
config.settings.DSGVOBanner.cssClasses.bannerAdjustButton;
const showConfirmModal = config.settings.DSGVOBanner.showBanner
? !Number(cookies.confirm_cookies) || props.show
: props.show;

const intl = useIntl();

if (isObject(privacy_url)) {
Expand All @@ -37,6 +46,7 @@ const Banner = (props) => {
const [confirmTracking, setConfirmTracking] = useState(
!!Number(cookies.confirm_tracking),
);

const [confirmYoutube, setConfirmYoutube] = useState(
!!Number(cookies.confirm_youtube),
);
Expand All @@ -46,6 +56,12 @@ const Banner = (props) => {
const [confirmGoogle, setConfirmGoogle] = useState(
!!Number(cookies.confirm_google),
);
const [confirmVimeo, setConfirmVimeo] = useState(
!!Number(cookies.confirm_vimeo),
);
const [confirmTwitter, setConfirmTwitter] = useState(
!!Number(cookies.confirm_twitter),
);

const expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);
Expand All @@ -54,6 +70,7 @@ const Banner = (props) => {
const confirmSelection = () => {
let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

if (confirmTracking) {
setCookie('confirm_tracking', 1, options);
window[`ga-disable-${config.settings.DSGVOBanner.trackingId}`] = false;
Expand Down Expand Up @@ -82,6 +99,17 @@ const Banner = (props) => {
} else {
removeCookie('confirm_google', options);
}
if (confirmVimeo) {
setCookie('confirm_vimeo', 1, options);
} else {
removeCookie('confirm_vimeo', 1, options);
}

if (confirmTwitter) {
setCookie('confirm_twitter', 1, options);
} else {
removeCookie('confirm_twitter', 1, options);
}

setCookie('confirm_cookies', 1, options);
props.hideDSGVOBanner();
Expand All @@ -90,12 +118,13 @@ const Banner = (props) => {
const confirmAll = () => {
setCookie('confirm_tracking', 1, options);
window[`ga-disable-${config.settings.DSGVOBanner.trackingId}`] = false;

setCookie('confirm_facebook', 1, options);
setCookie('confirm_youtube', 1, options);
setCookie('confirm_google', 1, options);
setCookie('confirm_cookies', 1, options);
setCookie('confirm_twitter', 1, options);
setCookie('confirm_vimeo', 1, options);

setCookie('confirm_cookies', 1, options);
props.hideDSGVOBanner();
};

Expand Down Expand Up @@ -169,16 +198,18 @@ const Banner = (props) => {
</p>
</Modal.Content>
<Modal.Actions>
<Button className="branded olive" onClick={() => confirmAll()}>
<Button
className={bannerAgreeButton}
onClick={() => confirmAll()}
>
<FormattedMessage
id="Agree to all cookies"
defaultMessage="Agree to all cookies"
/>
</Button>
{modules.length > 0 && (
<Button
className="branded blue inverted"
branded
className={bannerAdjustButton + ' inverted'}
onClick={() => setConfigureCookies(true)}
>
<FormattedMessage
Expand All @@ -199,14 +230,16 @@ const Banner = (props) => {
/>
</h2>
<Form>
<Form.Field>
<Checkbox
toggle
label={intl.formatMessage(messages.technically_required)}
checked
disabled
/>
</Form.Field>
{showTechnicallyRequired && (
<Form.Field>
<Checkbox
toggle
label={intl.formatMessage(messages.technically_required)}
checked
disabled
/>
</Form.Field>
)}
{includes(modules, 'tracking') && (
<Form.Field>
<Checkbox
Expand Down Expand Up @@ -247,6 +280,26 @@ const Banner = (props) => {
/>
</Form.Field>
)}
{includes(modules, 'vimeo') && (
<Form.Field>
<Checkbox
toggle
label="Vimeo"
onChange={() => setConfirmVimeo(!confirmVimeo)}
checked={confirmVimeo}
/>
</Form.Field>
)}
{includes(modules, 'twitter') && (
<Form.Field>
<Checkbox
toggle
label="Twitter"
onChange={() => setConfirmTwitter(!confirmTwitter)}
checked={confirmTwitter}
/>
</Form.Field>
)}
</Form>
</Modal.Content>
<Modal.Actions>
Expand All @@ -257,16 +310,18 @@ const Banner = (props) => {
{'< '}
<FormattedMessage id="Back" defaultMessage="Back" />
</Button>
<Button className="branded olive" onClick={() => confirmAll()}>
<Button
className={bannerAgreeButton}
onClick={() => confirmAll()}
>
<FormattedMessage
id="Agree to all cookies"
defaultMessage="Agree to all cookies"
/>
</Button>
<Button
className="branded blue"
branded
onClick={confirmSelection}
className={bannerAdjustButton}
onClick={() => confirmSelection()}
>
<FormattedMessage id="Save" defaultMessage="Save" />
</Button>
Expand Down
88 changes: 72 additions & 16 deletions src/components/Block/View.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { includes } from 'lodash';
import { Checkbox, Form } from 'semantic-ui-react';
import { Checkbox, Form, Button } from 'semantic-ui-react';
import { useCookies } from 'react-cookie';
import config from '@plone/volto/registry';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
Expand All @@ -18,6 +18,10 @@ const messages = defineMessages({

const View = (props) => {
const modules = config.settings.DSGVOBanner.modules;
const showTechnicallyRequired =
config.settings.DSGVOBanner.showTechnicallyRequired;
const bannerAgreeButton =
config.settings.DSGVOBanner.cssClasses.bannerAgreeButton;
const [cookies, setCookie, removeCookie] = useCookies();
const intl = useIntl();

Expand All @@ -33,6 +37,12 @@ const View = (props) => {
const [confirmGoogle, setConfirmGoogle] = useState(
!!Number(cookies.confirm_google),
);
const [confirmVimeo, setConfirmVimeo] = useState(
!!Number(cookies.confirm_vimeo),
);
const [confirmTwitter, setConfirmTwitter] = useState(
!!Number(cookies.confirm_twitter),
);

const expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);
Expand All @@ -41,6 +51,7 @@ const View = (props) => {
const confirmSelection = () => {
let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

if (confirmTracking) {
setCookie('confirm_tracking', 1, options);
window[`ga-disable-${config.settings.DSGVOBanner.trackingId}`] = false;
Expand Down Expand Up @@ -70,21 +81,47 @@ const View = (props) => {
removeCookie('confirm_google', options);
}

if (confirmVimeo) {
setCookie('confirm_vimeo', 1, options);
} else {
removeCookie('confirm_vimeo', 1, options);
}

if (confirmTwitter) {
setCookie('confirm_twitter', 1, options);
} else {
removeCookie('confirm_twitter', 1, options);
}

setCookie('confirm_cookies', 1, options);
props.hideDSGVOBanner();
};

//Save the selection on every switch in the settings
useEffect(() => {
confirmSelection();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
confirmYoutube,
confirmVimeo,
confirmTwitter,
confirmFacebook,
confirmGoogle,
confirmTracking,
]);

return (
<>
<Form>
<Form.Field>
<Checkbox
toggle
label={intl.formatMessage(messages.technically_required)}
checked
disabled
/>
</Form.Field>
{showTechnicallyRequired && (
<Form.Field>
<Checkbox
toggle
label={intl.formatMessage(messages.technically_required)}
checked
disabled
/>
</Form.Field>
)}
{includes(modules, 'tracking') && (
<Form.Field>
<Checkbox
Expand Down Expand Up @@ -125,13 +162,32 @@ const View = (props) => {
/>
</Form.Field>
)}
<Form.Button
className="branded blue"
branded
onClick={confirmSelection}
{includes(modules, 'vimeo') && (
<Form.Field>
<Checkbox
toggle
label="Vimeo"
onChange={() => setConfirmVimeo(!confirmVimeo)}
checked={confirmVimeo}
/>
</Form.Field>
)}
{includes(modules, 'twitter') && (
<Form.Field>
<Checkbox
toggle
label="Twitter"
onChange={() => setConfirmTwitter(!confirmTwitter)}
checked={confirmTwitter}
/>
</Form.Field>
)}
<Button
className={bannerAgreeButton}
onClick={() => confirmSelection()}
>
<FormattedMessage id="Save" defaultMessage="Save" />
</Form.Button>
</Button>
</Form>
</>
);
Expand Down
Loading

0 comments on commit da25e1d

Please sign in to comment.