Skip to content

Show the save button by default on the CMP banner #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 30, 2021
Merged

Show the save button by default on the CMP banner #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5a6bae7
Show save button by default on the CMP
jlikamwa Sep 29, 2021
c0ceaeb
Update CMP version to 2.2.2 and update changelog.
jlikamwa Sep 29, 2021
0358dad
revert previous comit to default isSaveShowing to false
jlikamwa Sep 30, 2021
e4339ee
Add shouldAlwaysShowSaveButton option, to always show the save button…
jlikamwa Sep 30, 2021
681b38b
update README
jlikamwa Sep 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
## [2.2.1](https://github.com/openmail/system1-cmp/compare/2.2.0...2.2.1) (2021-11-28)
## [2.2.2](https://github.com/openmail/system1-cmp/compare/2.2.1...2.2.2) (2021-09-29)

### Refactor

- [x] Show the `save` button by default on the banner

## [2.2.1](https://github.com/openmail/system1-cmp/compare/2.2.0...2.2.1) (2021-09-28)

### Refactor

- [x] Added `config.shouldAutoShowModal` to allow disabling auto show modal after `init`

## [2.2.0](https://github.com/openmail/system1-cmp/compare/2.1.7...2.2.0) (2021-05-17)

### Feat

- [x] Upgrade vendor list and script to download vendor list
- [x] Upgrade vendor list and script to download vendor list
- [x] Add relative position modal solution
- [x] Add `updateConfig` API to switch between relative and static position
- [x] Pass theme colors through to anchors
Expand All @@ -29,7 +37,7 @@

- [x] Upgrades cmpapi and cmpcore
- [x] Updates global vendor list
- [x] Adds Device Storage to Vendor Stack to display cookieMaxAgeSeconds
- [x] Adds Device Storage to Vendor Stack to display cookieMaxAgeSeconds
- [x] Splits legal-disclosure for legibility in Purpose Stack
- [x] Refactor error logger

Expand All @@ -41,11 +49,12 @@
- [x] Adds full width mode with feature flag
- [x] Adds drop shadow toggle feature flag
- [x] Adds close with × buttom feature flag
- [x] Adds default background color override
- [x] Adds default background color override

## [2.1.3](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-03)

### Chore

- [x] Update to vendor list versino 62

## [2.1.2](https://github.com/openmail/system1-cmp/compare/2.1.1...2.1.2) (2020-10-20)
Expand Down
52 changes: 26 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ Feel free to fork this CMP and submit to IAB for private use.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [SDK / Package Details](#sdk--package-details)
- [Installation / Use](#installation--use)
- [API](#api)
Expand Down Expand Up @@ -197,7 +196,7 @@ Calling `__tcfapi('changeConfig', 2, () => {}, {isSlimMode: true, theme: {isInli
* @param callback // required function, called when changeLanguage completes, called with `store` and result
* @param config // required object, merges with existing config object providing during `init()`
*/
__tcfapi('changeConfig', 2, (store) => {}, {theme: {isInlineMode: false}}); // changes config to use inline-mode
__tcfapi('changeConfig', 2, (store) => {}, { theme: { isInlineMode: false } }); // changes config to use inline-mode
```

## Configuration / Config
Expand All @@ -218,29 +217,30 @@ __tcfapi('init', 2, () => {}, {
});
```

| Config Property | Type | Default | Detail |
| ---------------------- | ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `canLog` | optional boolean | `false` | true enables DPL logging for health monitoring. Add `#s1&debug=true` to URL for easy DPL debugging |
| `canDebug` | optional boolean | `false` | true enables internal console logging for debugging |
| `baseUrl` | optional string | `./config/2.0` | relative or absolute url to load the global vendor list. Combines with `versionedFilename` to load vendorlist. |
| `versionedFilename` | optional string | `vendor-list.json` | file name of the global vendor list. |
| `narrowedVendors` | optional array | `[]` | Only show select vendors. Example [1,4,5,19] |
| `language` | optional string | null | 2-character language code to initialize CMP with. If no language matches, CMP boots with `en` Ex 'en', 'ja', 'it' |
| `languageFilename` | optional string | `purposes/purposes-[LANG].json` | file name template for gvl localized purpose json files |
| `translationFilename` | optional string | `translations/translations-[LANG].json` | file name template for custom localized json files for UI layer |
| `cookieDomain` | optional string | null | manage consent across subdomains. Example `.mysite.com` |
| `gdprApplies` | optional boolean | `false` | Please pass `true` if being used on EU traffic where active consent is required |
| `ccpaApplies` | optional boolean | `false` | Please pass `true` if being used on USA:CA traffic where "Do Not Sell" initiates CMP passively |
| `experimentId` | optional string | `control` | use to indicate changes / upgrades in your CMP implementation for reporting / monitoring purposes. |
| `business` | optional string | `dev` | used to correlate CMP events for monitoring across a businessline. |
| `theme` | optional object | [details below](#theme) | Override styling choices using the following properties. |
| `publisherCountryCode` | optional string | `US` | String representing country code of parent website business |
| `isServiceSpecific` | optional boolean | `true` | true uses publisher consent, false uses global consent |
| `shouldAutoShowModal` | optional boolean | `true` | true will automatically display UI modal after init, false will not |
| `shouldUseStacks` | optional boolean | `true` | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant |
| `isSlimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner <sup>v2.1.4+</sup> |
| `shouldShowCloseX` | optional boolean | `false` | If `true`, a &times; icon will appear in the upper right on layers to accept-all and close <sup>v2.1.4+</sup> |
| `insertionNode` | optional string | `<body>` | UI will be appended to this element using `querySelector`. Default behavior appends to body <sup>v2.2.0+</sup> |
| Config Property | Type | Default | Detail |
| ---------------------------- | ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `canLog` | optional boolean | `false` | true enables DPL logging for health monitoring. Add `#s1&debug=true` to URL for easy DPL debugging |
| `canDebug` | optional boolean | `false` | true enables internal console logging for debugging |
| `baseUrl` | optional string | `./config/2.0` | relative or absolute url to load the global vendor list. Combines with `versionedFilename` to load vendorlist. |
| `versionedFilename` | optional string | `vendor-list.json` | file name of the global vendor list. |
| `narrowedVendors` | optional array | `[]` | Only show select vendors. Example [1,4,5,19] |
| `language` | optional string | null | 2-character language code to initialize CMP with. If no language matches, CMP boots with `en` Ex 'en', 'ja', 'it' |
| `languageFilename` | optional string | `purposes/purposes-[LANG].json` | file name template for gvl localized purpose json files |
| `translationFilename` | optional string | `translations/translations-[LANG].json` | file name template for custom localized json files for UI layer |
| `cookieDomain` | optional string | null | manage consent across subdomains. Example `.mysite.com` |
| `gdprApplies` | optional boolean | `false` | Please pass `true` if being used on EU traffic where active consent is required |
| `ccpaApplies` | optional boolean | `false` | Please pass `true` if being used on USA:CA traffic where "Do Not Sell" initiates CMP passively |
| `experimentId` | optional string | `control` | use to indicate changes / upgrades in your CMP implementation for reporting / monitoring purposes. |
| `business` | optional string | `dev` | used to correlate CMP events for monitoring across a businessline. |
| `theme` | optional object | [details below](#theme) | Override styling choices using the following properties. |
| `publisherCountryCode` | optional string | `US` | String representing country code of parent website business |
| `isServiceSpecific` | optional boolean | `true` | true uses publisher consent, false uses global consent |
| `shouldAutoShowModal` | optional boolean | `true` | true will automatically display UI modal after init, false will not |
| `shouldAlwaysShowSaveButton` | optional boolean | `false` | true will always show the save button on the UI. False will only display the save button when a change is made |
| `shouldUseStacks` | optional boolean | `true` | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant |
| `isSlimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner <sup>v2.1.4+</sup> |
| `shouldShowCloseX` | optional boolean | `false` | If `true`, a &times; icon will appear in the upper right on layers to accept-all and close <sup>v2.1.4+</sup> |
| `insertionNode` | optional string | `<body>` | UI will be appended to this element using `querySelector`. Default behavior appends to body <sup>v2.2.0+</sup> |

### theme

Expand All @@ -256,7 +256,7 @@ Themeing is a bit limited right now. Pass in a `config.theme` object during init
| `textLinkColor` | optional string | null | Example: `#0099ff` |
| `secondaryColor` | optional string | null | Example: `#869cc0` |
| `featuresColor` | optional string | null | Example: `#d0d3d7` |
| `backgroundColor` | optional string | null | Example: `#d0d3d7` Sets the background color of the banners. <sup>v2.1.4+</sup> |
| `backgroundColor` | optional string | null | Example: `#d0d3d7` Sets the background color of the banners. <sup>v2.1.4+</sup> |
| `isFullWidth` | optional boolean | false | Removes rounded corners and makes banners full width - matching style layout slimMode <sup>v2.1.4+</sup> |
| `isBannerInline` | optional boolean | false | Renders CMP inline instead of overlaying layout. Subsequent CMP views open in modal <sup>v2.2.0+</sup> |
| `shouldShowDropShadow` | optional boolean | true | When set to `true`, displays the drop shadoq on banners <sup>v2.1.4+</sup> |
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "system1-cmp",
"version": "2.2.1",
"version": "2.2.2",
"cmpVersion": 6,
"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
"scripts": {
Expand Down
1 change: 1 addition & 0 deletions src/s1/lib/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const config = {
theme,
scriptSrc: './tcf-2.0-cmp.js',
shouldAutoShowModal: true,
shouldAlwaysShowSaveButton: false,
languageFilename: 'purposes/purposes-[LANG].json',
translationFilename: 'translations/translations-[LANG].json',
versionedFilename: 'vendor-list.json',
Expand Down
28 changes: 15 additions & 13 deletions src/s1/lib/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default class Store {
publisherCountryCode,
isServiceSpecific,
isSlimMode,
shouldAutoShowModal
shouldAutoShowModal,
} = this.config;
const { vendors } = this.gvl;

Expand Down Expand Up @@ -178,7 +178,7 @@ export default class Store {
cmpVersion,
isServiceSpecific,
publisherCountryCode,
consentScreen: ( isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ),
consentScreen: isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1,
});

// Handle a new user
Expand Down Expand Up @@ -255,7 +255,9 @@ export default class Store {
updateCmp = ({ tcModel, shouldShowModal, shouldSaveCookie, shouldShowSave, isConsentByUrl = false }) => {
const tcModelNew = this.autoToggleVendorConsents(tcModel);
const isModalShowing = shouldShowModal !== undefined ? shouldShowModal : this.isModalShowing;
const isSaveShowing = shouldShowSave !== undefined ? shouldShowSave : this.isSaveShowing;
const alwaysShowSave = this.config.shouldAlwaysShowSaveButton;
const isSaveShowing =
alwaysShowSave || shouldShowSave !== undefined ? alwaysShowSave || shouldShowSave : this.isSaveShowing;
const encodedTCString = TCString.encode(tcModelNew);
const shouldAutoResizeModal = isSaveShowing ? false : this.shouldAutoResizeModal;
const maxHeightModal = shouldShowSave ? this.theme.maxHeightModal : this.maxHeightModal;
Expand Down Expand Up @@ -332,7 +334,7 @@ export default class Store {
const { theme } = this;
const maxHeightModal =
shouldAutoResizeModal && dynamicMaxHeightModal ? dynamicMaxHeightModal : theme.maxHeightModal;
const minHeightModal = shouldAutoResizeModal && dynamicMaxHeightModal ? 0 : (theme.minHeightModal || 0);
const minHeightModal = shouldAutoResizeModal && dynamicMaxHeightModal ? 0 : theme.minHeightModal || 0;
// only set if there's a change
if (shouldAutoResizeModal !== this.shouldAutoResizeModal || maxHeightModal !== this.maxHeightModal) {
this.setState({
Expand Down Expand Up @@ -528,19 +530,20 @@ export default class Store {
if (!this.tcModel) {
return;
}
if (this.hasShownModal) { // reset on subsequent display
if (this.hasShownModal) {
// reset on subsequent display
this.updateConfig({
isSlimMode: false,
theme: {
isBannerInline: false
}
isBannerInline: false,
},
});
}
const { isSlimMode } = this.config;
this.hasShownModal = true;
let tcModel = this.tcModel.clone();
tcModel.consentScreen = ( isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 );

tcModel.consentScreen = isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1;

this.updateCmp({
shouldShowModal,
Expand Down Expand Up @@ -592,7 +595,6 @@ export default class Store {
});
});


const gvlPromise = this.gvl.changeLanguage(language).then(() => {
if (this.tcModel) {
const { language } = this.gvl;
Expand All @@ -609,13 +611,13 @@ export default class Store {
}

updateConfig(newConfig) {
const {theme = config.theme } = newConfig;
const { theme = config.theme } = newConfig;
Object.assign(this.config, {
...newConfig,
theme: {
...this.config.theme,
...theme
}
...theme,
},
});
}
}
18 changes: 18 additions & 0 deletions src/s1/reference/tcf-2.0.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,10 @@ <h3>TCFString</h3>
Should Auto Show Modal:
<input id="domAutoShowModal" type="checkbox" checked>
</li>
<li>
Should Always Show the Save Button:
<input id="domAlwaysShowSaveButton" type="checkbox">
</li>
</ul>
</li>
</ul>
Expand All @@ -200,6 +204,7 @@ <h3>TCFString</h3>
const domCloseWithX = document.querySelector('#domCloseWithX');
const domInsertionNode = document.querySelector('#domInsertionNode');
const domAutoShowModal = document.querySelector('#domAutoShowModal');
const domAlwaysShowSaveButton = document.querySelector('#domAlwaysShowSaveButton');

const setupQaTools = function (store) {
const LANGUAGES = store.LANGUAGES;
Expand Down Expand Up @@ -258,6 +263,11 @@ <h3>TCFString</h3>
return params.get('autoshowmodal') !== 'false';
};

const shouldAlwaysShowSaveButton = function () {
let params = new URLSearchParams(window.location.search);
return params.get('alwaysshowsavebutton') === 'true';
};

const getInsertionNode = function () {
let params = new URLSearchParams(window.location.search);
return params.get('insertionnode');
Expand Down Expand Up @@ -292,6 +302,7 @@ <h3>TCFString</h3>
isSlimMode: shouldUseSlim(),
shouldShowCloseX: shouldShowCloseX(),
shouldAutoShowModal: shouldAutoShowModal(),
shouldAlwaysShowSaveButton: shouldAlwaysShowSaveButton(),
insertionNode: getInsertionNode(),
// narrowedVendors: [1, 2, 3, 4, 5, 6],
};
Expand Down Expand Up @@ -410,6 +421,13 @@ <h3>TCFString</h3>
params.set('autoshowmodal', domAutoShowModal.checked);
window.location.search = params.toString();
});

domAlwaysShowSaveButton.checked = shouldAlwaysShowSaveButton();
domAlwaysShowSaveButton.addEventListener('change', function () {
let params = new URLSearchParams(window.location.search);
params.set('alwaysshowsavebutton', domAlwaysShowSaveButton.checked);
window.location.search = params.toString();
});
</script>
</body>
</html>