From da25e1d224f890e67657f19f125d537bd74c601e Mon Sep 17 00:00:00 2001 From: Alexander Neumann <140883099+Molochem@users.noreply.github.com> Date: Wed, 27 Dec 2023 15:29:12 +0100 Subject: [PATCH] Add more options (#24) * 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 --- README.md | 36 ++- news/23.feature | 1 + news/24.feature | 1 + src/components/Banner/Banner.jsx | 91 +++++-- src/components/Block/View.jsx | 88 +++++-- .../components/manage/Blocks/Video/View.jsx | 247 ++++++++++-------- src/index.js | 6 + src/theme/main.less | 4 +- 8 files changed, 323 insertions(+), 151 deletions(-) create mode 100644 news/23.feature create mode 100644 news/24.feature diff --git a/README.md b/README.md index 1d18429..b1960cc 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 diff --git a/news/23.feature b/news/23.feature new file mode 100644 index 0000000..6defbe4 --- /dev/null +++ b/news/23.feature @@ -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 \ No newline at end of file diff --git a/news/24.feature b/news/24.feature new file mode 100644 index 0000000..aa9262f --- /dev/null +++ b/news/24.feature @@ -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 \ No newline at end of file diff --git a/src/components/Banner/Banner.jsx b/src/components/Banner/Banner.jsx index f2e8d4b..77f8875 100644 --- a/src/components/Banner/Banner.jsx +++ b/src/components/Banner/Banner.jsx @@ -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)) { @@ -37,6 +46,7 @@ const Banner = (props) => { const [confirmTracking, setConfirmTracking] = useState( !!Number(cookies.confirm_tracking), ); + const [confirmYoutube, setConfirmYoutube] = useState( !!Number(cookies.confirm_youtube), ); @@ -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); @@ -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; @@ -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(); @@ -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(); }; @@ -169,7 +198,10 @@ const Banner = (props) => {

- {modules.length > 0 && ( - diff --git a/src/components/Block/View.jsx b/src/components/Block/View.jsx index 1557967..6877941 100644 --- a/src/components/Block/View.jsx +++ b/src/components/Block/View.jsx @@ -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'; @@ -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(); @@ -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); @@ -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; @@ -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 ( <>
- - - + {showTechnicallyRequired && ( + + + + )} {includes(modules, 'tracking') && ( { /> )} - + setConfirmVimeo(!confirmVimeo)} + checked={confirmVimeo} + /> + + )} + {includes(modules, 'twitter') && ( + + setConfirmTwitter(!confirmTwitter)} + checked={confirmTwitter} + /> + + )} + ); diff --git a/src/customizations/components/manage/Blocks/Video/View.jsx b/src/customizations/components/manage/Blocks/Video/View.jsx index a2b1181..e0bf1d4 100644 --- a/src/customizations/components/manage/Blocks/Video/View.jsx +++ b/src/customizations/components/manage/Blocks/Video/View.jsx @@ -17,58 +17,109 @@ import { IfConfirm } from '../../../../../components'; * @extends Component */ const View = ({ data }) => ( - -
- {data.url && ( + <> + {data.url.match('youtu') ? ( + <> + +
+ {data.url && ( +
+ {data.url.match('youtu') && ( + <> + {data.url.match('list') ? ( + data.preview_image ? ( + + ) : ( + + ) + ) : data.preview_image ? ( + + ) : ( + + )} + + )} +
+ )} +
+ + + ) : ( +
- {data.url.match('youtu') ? ( - <> - {data.url.match('list') ? ( - data.preview_image ? ( - - ) : ( - - ) - ) : data.preview_image ? ( + className={cx( + 'block video align', + { + center: !Boolean(data.align), + }, + data.align, + )} + /> + {data.url && ( + <> + {data.url.match('vimeo') ? ( + data.preview_image ? ( ( /> ) : ( - )} - - ) : ( - <> - {data.url.match('vimeo') ? ( - data.preview_image ? ( - + {data.url.match('.mp4') ? ( + // eslint-disable-next-line jsx-a11y/media-has-caption +
- +
+ )} + + )} + + )} + + )} + ); /** diff --git a/src/index.js b/src/index.js index eaf0751..0f083a8 100644 --- a/src/index.js +++ b/src/index.js @@ -27,6 +27,12 @@ export default (config) => { gtagOptions: {}, }, modules: ['tracking', 'youtube', 'facebook', 'google'], + showBanner: true, + showTechnicallyRequired: true, + cssClasses : { + bannerAgreeButton: "branded olive", + bannerAdjustButton: "branded blue", + }, privacy_url: '/privacy', ...(config.settings.DSGVOBanner || {}), }; diff --git a/src/theme/main.less b/src/theme/main.less index c938075..efb5cb2 100644 --- a/src/theme/main.less +++ b/src/theme/main.less @@ -4,8 +4,8 @@ @media only screen and (max-width: 900px) { flex-direction: column; - .ui.button.branded.olive, - .ui.button.branded.blue.inverted { + .ui.button, + .ui.button.inverted { padding: 20px 15px; } }