Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
admin:online-platform-cms:using-web-ui-custom-events [2021/09/27 08:23] – evaldas-luksys | admin:online-platform-cms:using-web-ui-custom-events [Unknown date] (current) – external edit (Unknown date) 127.0.0.1 | ||
---|---|---|---|
Line 42: | Line 42: | ||
===== Custom event data models: ===== | ===== Custom event data models: ===== | ||
- | Example of user object model in **userLogIn**, **userRegisterInitial**, **userRegisterComplete** events: | + | === Example of user object model in userLogIn, userRegisterInitial, |
< | < | ||
{ | { | ||
Line 107: | Line 107: | ||
</ | </ | ||
- | Example of user object in **userRegisterVerify** event: | + | === Example of user object in userRegisterVerify event: |
< | < | ||
{ | { | ||
Line 123: | Line 123: | ||
The user object depends on the verification method. | The user object depends on the verification method. | ||
+ | |||
+ | === Example of user object in routeChange event: === | ||
+ | < | ||
+ | { | ||
+ | | ||
+ | from: { | ||
+ | fullPath: string, | ||
+ | name: string, | ||
+ | }, | ||
+ | to: { | ||
+ | fullPath: string, | ||
+ | name: string, | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Additional info ===== | ||
+ | === ' | ||
+ | |||
+ | * routeChange fires this event before every route change, so we can react to changed routes with our custom script(s) added via Admin CMS section. | ||
+ | * Use ' | ||
+ | * This event allows custom script to stop the route change in the app by adding ' | ||
+ | * Each game has it's own module names, so Roulette page will fire ' | ||
+ | * Games with nested URLs will have the same moduleName, but different names under the ' | ||
+ | |||
+ | Script example and what it does: | ||
+ | * When user visits a page betgames-iframe, | ||
+ | * Script catches this event and prevents the route from changing for this particular ' | ||
+ | * User is shown a modal, with two buttons, 1 - Continue, 2 - Go back | ||
+ | * Continue button redirects user to another page (script builds custom URL) | ||
+ | * Go back button will hide the popup and the user stays on the same route | ||
+ | |||
+ | < | ||
+ | | ||
+ | var isDataFreeWebsite = window.location.origin.includes(' | ||
+ | |||
+ | if (!isDataFreeWebsite) { | ||
+ | | ||
+ | } | ||
+ | |||
+ | if (routeChangeEvent.detail.moduleName === ' | ||
+ | // preventDefault prevents the route from updating, so the user cannot access this page normally as he would. In this case | ||
+ | // we provide our custom solution to guide user when he tries to visit this module (page) | ||
+ | | ||
+ | | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | function displayBetGamesModal(to, | ||
+ | var modalElement = document.createElement(' | ||
+ | modalElement.setAttribute(' | ||
+ | modalElement.style.position = ' | ||
+ | modalElement.style.top = ' | ||
+ | modalElement.style.bottom = ' | ||
+ | modalElement.style.left = ' | ||
+ | modalElement.style.right = ' | ||
+ | modalElement.style.margin = '0 auto'; | ||
+ | modalElement.style.background = ' | ||
+ | modalElement.style.zIndex = ' | ||
+ | |||
+ | var modalTitle = document.createElement(' | ||
+ | modalTitle.innerHTML = 'Data free modal'; | ||
+ | modalTitle.style.color = '# | ||
+ | |||
+ | var modalContinueButton = document.createElement(' | ||
+ | modalContinueButton.innerHTML = ' | ||
+ | modalContinueButton.addEventListener(' | ||
+ | const paidDataUrl = window.location.origin.replace(' | ||
+ | window.location.href = paidDataUrl; | ||
+ | }); | ||
+ | |||
+ | var modalGoBackButton = document.createElement(' | ||
+ | modalGoBackButton.innerHTML = 'Go Back'; | ||
+ | modalGoBackButton.addEventListener(' | ||
+ | modalElement.remove(); | ||
+ | |||
+ | // If name is not set, it means that client came straight to this page through the browsers address section, so this is an exception and | ||
+ | // should be handled differently, | ||
+ | if (!from.name) { | ||
+ | window.location.href = ' | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | modalElement.appendChild(modalTitle); | ||
+ | modalElement.appendChild(modalContinueButton); | ||
+ | modalElement.appendChild(modalGoBackButton); | ||
+ | document.body.appendChild(modalElement); | ||
+ | } | ||
+ | </ | ||