@everymatrix/player-account-self-exclusion 1.0.16 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@everymatrix/player-account-self-exclusion",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"main": "dist/player-account-self-exclusion",
|
|
5
5
|
"svelte": "src/index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
|
|
41
41
|
}
|
|
@@ -11,8 +11,11 @@
|
|
|
11
11
|
|
|
12
12
|
export let lang:string = 'en';
|
|
13
13
|
export let operator:string = 'Everymatrix';
|
|
14
|
+
export let clientstyling:string = '';
|
|
15
|
+
export let clientstylingurl:string = '';
|
|
14
16
|
export let translationUrl:string = '';
|
|
15
17
|
|
|
18
|
+
let customStylingContainer:HTMLElement;
|
|
16
19
|
let userAgent:string = window.navigator.userAgent;
|
|
17
20
|
let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
|
|
18
21
|
let calendar:HTMLElement;
|
|
@@ -93,6 +96,25 @@
|
|
|
93
96
|
calendar.addEventListener('change', calendarHandler, false);
|
|
94
97
|
}
|
|
95
98
|
|
|
99
|
+
const setClientStyling = ():void => {
|
|
100
|
+
let sheet:HTMLElement = document.createElement('style');
|
|
101
|
+
sheet.innerHTML = clientstyling;
|
|
102
|
+
customStylingContainer.appendChild(sheet);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const setClientStylingURL = ():void => {
|
|
106
|
+
let url:URL = new URL(clientstylingurl);
|
|
107
|
+
let cssFile:HTMLElement = document.createElement('style');
|
|
108
|
+
|
|
109
|
+
fetch(url.href)
|
|
110
|
+
.then((res:any) => res.text())
|
|
111
|
+
.then((data:any) => {
|
|
112
|
+
cssFile.innerHTML = data
|
|
113
|
+
|
|
114
|
+
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
|
|
96
118
|
onMount(() => {
|
|
97
119
|
return () => {
|
|
98
120
|
calendar.removeEventListener('change', calendarHandler);
|
|
@@ -105,50 +127,54 @@
|
|
|
105
127
|
|
|
106
128
|
$: calendar && setCalendarEventListener();
|
|
107
129
|
$: lang && initialLoad();
|
|
130
|
+
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
131
|
+
$: clientstyling && customStylingContainer && setClientStyling();
|
|
108
132
|
$: translationUrl && setTranslationUrl();
|
|
109
133
|
</script>
|
|
110
134
|
|
|
111
|
-
<
|
|
112
|
-
{
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
<g transform="translate(20 158)">
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<h2 class="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}" part="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}">{$_('selfExclusion.title')}</h2>
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
|
|
126
|
-
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText1', { values: { operatorname: operator}})}</p>
|
|
127
|
-
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText2')}</p>
|
|
128
|
-
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText3')} support@everymatrix.com</p>
|
|
129
|
-
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText4')} <a href="mailto:support@everymatrix.com">support@everymatrix.com</a></p>
|
|
130
|
-
</div>
|
|
131
|
-
<div class="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}" part="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}">
|
|
132
|
-
<label for="SelfExclusionDate">{$_('selfExclusion.duration')}</label>
|
|
133
|
-
<vaadin-date-picker bind:this={calendar} min={minDate} max={maxDate} value={minDate}></vaadin-date-picker>
|
|
134
|
-
</div>
|
|
135
|
-
<div class="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}" part="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}">
|
|
136
|
-
<label class="SelfExclusionRadio" part="SelfExclusionRadio">{$_('selfExclusion.forever')}
|
|
137
|
-
<input type="Checkbox" on:click={() => togglePermanentSelfExclusion()}>
|
|
138
|
-
<span class="Checkmark" part="Checkmark"></span>
|
|
139
|
-
</label>
|
|
140
|
-
</div>
|
|
141
|
-
<div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
|
|
142
|
-
{#if permanentSelfExclusion}
|
|
143
|
-
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.permanentSelfExclusion')}</strong></p>
|
|
144
|
-
{:else}
|
|
145
|
-
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.temporarySelfExclusion', { values: { date: selfExclusionExpiryDate}})}</strong></p>
|
|
135
|
+
<div bind:this={customStylingContainer}>
|
|
136
|
+
<form class="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}" part="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}">
|
|
137
|
+
{#if isMobile}
|
|
138
|
+
<div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
|
|
139
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
|
|
140
|
+
<g transform="translate(20 158)">
|
|
141
|
+
<path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
|
|
142
|
+
</g></g>
|
|
143
|
+
</svg>
|
|
144
|
+
<h2 class="PlayerSelfExclusionTitleMobile" part="PlayerSelfExclusionTitleMobile">{$_('selfExclusion.title')}</h2>
|
|
145
|
+
</div>
|
|
146
146
|
{/if}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
</
|
|
147
|
+
<h2 class="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}" part="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}">{$_('selfExclusion.title')}</h2>
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
<div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
|
|
151
|
+
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText1', { values: { operatorname: operator}})}</p>
|
|
152
|
+
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText2')}</p>
|
|
153
|
+
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText3')} support@everymatrix.com</p>
|
|
154
|
+
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText">{$_('selfExclusion.selfExclusionText4')} <a href="mailto:support@everymatrix.com">support@everymatrix.com</a></p>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}" part="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}">
|
|
157
|
+
<label for="SelfExclusionDate">{$_('selfExclusion.duration')}</label>
|
|
158
|
+
<vaadin-date-picker bind:this={calendar} min={minDate} max={maxDate} value={minDate}></vaadin-date-picker>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}" part="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}">
|
|
161
|
+
<label class="SelfExclusionRadio" part="SelfExclusionRadio">{$_('selfExclusion.forever')}
|
|
162
|
+
<input type="Checkbox" on:click={() => togglePermanentSelfExclusion()}>
|
|
163
|
+
<span class="Checkmark" part="Checkmark"></span>
|
|
164
|
+
</label>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}" part="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
|
|
167
|
+
{#if permanentSelfExclusion}
|
|
168
|
+
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.permanentSelfExclusion')}</strong></p>
|
|
169
|
+
{:else}
|
|
170
|
+
<p class="SelfExclusionDescriptionText" part="SelfExclusionDescriptionText"><strong>{$_('selfExclusion.temporarySelfExclusion', { values: { date: selfExclusionExpiryDate}})}</strong></p>
|
|
171
|
+
{/if}
|
|
172
|
+
</div>
|
|
173
|
+
<div class="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}" part="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}">
|
|
174
|
+
<button class="SelfExclusionSave" part="SelfExclusionSave" on:click={(e) => saveSelfExclusion(e)}>{$_('selfExclusion.save')}</button>
|
|
175
|
+
</div>
|
|
176
|
+
</form>
|
|
177
|
+
</div>
|
|
152
178
|
|
|
153
179
|
<style lang="scss">
|
|
154
180
|
|