diff options
Diffstat (limited to 'plugins/PrivacyManager/vue/src')
4 files changed, 273 insertions, 0 deletions
diff --git a/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.adapter.ts b/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.adapter.ts new file mode 100644 index 0000000000..750141b6af --- /dev/null +++ b/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.adapter.ts @@ -0,0 +1,22 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +import { createAngularJsAdapter } from 'CoreHome'; +import OptOutCustomizer from './OptOutCustomizer.vue'; + +export default createAngularJsAdapter({ + component: OptOutCustomizer, + scope: { + language: { + angularJsBind: '@', + }, + piwikurl: { + angularJsBind: '@', + }, + }, + directiveName: 'piwikOptOutCustomizer', +}); diff --git a/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.less b/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.less new file mode 100644 index 0000000000..6ef302393b --- /dev/null +++ b/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.less @@ -0,0 +1,30 @@ +.optOutCustomizer { + + #FontSizeInput { + width: 100px; + } + + #FontFamilyInput { + width: 180px; + } + + input, select{ + margin-right: 30px; + } + + select{ + width:60px; + display: inline-block; + } + + p span{ + white-space: nowrap; + } + + iframe{ + width: 100%; + &.withBg{ + background-color: #4d4d4d; + } + } +} diff --git a/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.vue b/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.vue new file mode 100644 index 0000000000..f894c40c30 --- /dev/null +++ b/plugins/PrivacyManager/vue/src/OptOutCustomizer/OptOutCustomizer.vue @@ -0,0 +1,220 @@ +<!-- + Matomo - free/libre analytics platform + @link https://matomo.org + @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later +--> + +<template> + <div class="optOutCustomizer"> + <p> + {{ translate('CoreAdminHome_OptOutExplanation') }} + <span + v-html="$sanitize(readThisToLearnMore)" + /> + </p> + <h3>{{ translate('PrivacyManager_OptOutCustomize') }}</h3> + <div> + <p> + <span> + {{ translate('PrivacyManager_FontColor') }}: + <input + type="color" + :value="fontColor" + @keydown="onFontColorChange($event)" + @change="onFontColorChange($event)" + /> + </span> + <span> + {{ translate('PrivacyManager_BackgroundColor') }}: + <input + type="color" + :value="backgroundColor" + @keydown="onBgColorChange($event)" + @change="onBgColorChange($event)" + /> + </span> + <span> + {{ translate('PrivacyManager_FontSize') }}: + <input + id="FontSizeInput" + type="number" + min="1" + max="100" + @keydown="onFontSizeChange($event)" + @change="onFontSizeChange($event)" + /> + </span> + <span> + <select + class="browser-default" + @keydown="onFontSizeUnitChange($event)" + @change="onFontSizeUnitChange($event)" + > + <option value="px">px</option> + <option value="pt">pt</option> + <option value="em">em</option> + <option value="rem">rem</option> + <option value="%">%</option> + </select> + </span> + <span> + {{ translate('PrivacyManager_FontFamily') }}: + <input + id="FontFamilyInput" + type="text" + @keydown="onFontFamilyChange($event)" + @change="onFontFamilyChange($event)" + /> + </span> + </p> + </div> + <h3>{{ translate('PrivacyManager_OptOutHtmlCode') }}</h3> + <pre v-select-on-focus="{}" ref="pre"><iframe + style="border: 0; height: 200px; width: 600px;" + src="{{ iframeUrl }}" + ></iframe></pre> + <p + v-html="$sanitize(optOutExplanationIntro)"> + </p> + <h3>{{ translate('PrivacyManager_OptOutPreview') }}</h3> + <iframe + id="previewIframe" + style="border: 1px solid #333; height: 200px; width: 600px;" + :src="iframeUrl" + :class="{ withBg }" + /> + </div> +</template> + +<script lang="ts"> +/* eslint-disable no-mixed-operators */ +/* eslint-disable no-bitwise */ + +import { defineComponent } from 'vue'; +import { + translate, + SelectOnFocus, + MatomoUrl, + debounce, +} from 'CoreHome'; + +interface OptOutCustomizerState { + fontSizeUnit: string; + backgroundColor: string; + fontColor: string; + fontSize: string; + fontFamily: string; +} + +function nearlyWhite(hex: string) { + const bigint = parseInt(hex, 16); + const r = bigint >> 16 & 255; + const g = bigint >> 8 & 255; + const b = bigint & 255; + return r >= 225 && g >= 225 && b >= 225; +} + +const { $ } = window; + +export default defineComponent({ + props: { + language: { + type: String, + required: true, + }, + piwikurl: String, + }, + directives: { + SelectOnFocus, + }, + data(): OptOutCustomizerState { + return { + fontSizeUnit: 'px', + backgroundColor: '', + fontColor: '', + fontSize: '', + fontFamily: '', + }; + }, + created() { + this.onFontColorChange = debounce(this.onFontColorChange, 50); + this.onBgColorChange = debounce(this.onBgColorChange, 50); + this.onFontSizeChange = debounce(this.onFontSizeChange, 50); + this.onFontSizeUnitChange = debounce(this.onFontSizeUnitChange, 50); + this.onFontFamilyChange = debounce(this.onFontFamilyChange, 50); + }, + methods: { + onFontColorChange(event: Event) { + this.fontColor = (event.target as HTMLInputElement).value; + }, + onBgColorChange(event: Event) { + this.backgroundColor = (event.target as HTMLInputElement).value; + }, + onFontSizeChange(event: Event) { + this.fontSize = (event.target as HTMLInputElement).value; + }, + onFontSizeUnitChange(event: Event) { + this.fontSizeUnit = (event.target as HTMLInputElement).value; + }, + onFontFamilyChange(event: Event) { + this.fontFamily = (event.target as HTMLInputElement).value; + }, + }, + watch: { + iframeUrl() { + const pre = this.$refs.pre as HTMLElement; + const isAnimationAlreadyRunning = $(pre).queue('fx').length > 0; + if (!isAnimationAlreadyRunning) { + $(pre).effect('highlight', {}, 1500); + } + }, + }, + computed: { + fontSizeWithUnit(): string { + if (this.fontSize) { + return `${this.fontSize}${this.fontSizeUnit}`; + } + + return ''; + }, + withBg(): boolean { + return !!this.piwikurl + && this.backgroundColor === '' + && this.fontColor !== '' + && nearlyWhite(this.fontColor.substr(1)); + }, + iframeUrl(): string { + if (this.piwikurl) { + const query = MatomoUrl.stringify({ + module: 'CoreAdminHome', + action: 'optOut', + language: this.language, + backgroundColor: this.backgroundColor.substr(1), + fontColor: this.fontColor.substr(1), + fontSize: this.fontSizeWithUnit, + fontFamily: this.fontFamily, + }); + + return `${this.piwikurl}index.php?${query}`; + } + + return ''; + }, + readThisToLearnMore() { + const link = 'https://matomo.org/faq/how-to/faq_25918/'; + return translate( + 'General_ReadThisToLearnMore', + `<a rel='noreferrer noopener' target='_blank' href='${link}'>`, + '</a>', + ); + }, + optOutExplanationIntro() { + return translate( + 'CoreAdminHome_OptOutExplanationIntro', + `<a href="${this.iframeUrl}" rel="noreferrer noopener" target="_blank">`, + '</a>', + ); + }, + }, +}); +</script> diff --git a/plugins/PrivacyManager/vue/src/index.ts b/plugins/PrivacyManager/vue/src/index.ts index a62cd90413..5d475fa9ca 100644 --- a/plugins/PrivacyManager/vue/src/index.ts +++ b/plugins/PrivacyManager/vue/src/index.ts @@ -7,6 +7,7 @@ export { default as ManageGdpr } from './ManageGdpr/ManageGdpr.vue'; export { default as AnonymizeIp } from './AnonymizeIp/AnonymizeIp.vue'; +export { default as OptOutCustomizer } from './OptOutCustomizer/OptOutCustomizer.vue'; export { default as AnonymizeLogData } from './AnonymizeLogData/AnonymizeLogData.vue'; export { default as DoNotTrackPreference } from './DoNotTrackPreference/DoNotTrackPreference.vue'; export { |