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:30] – evaldas-luksys | admin:online-platform-cms:using-web-ui-custom-events [Unknown date] (current) – external edit (Unknown date) 127.0.0.1 | ||
---|---|---|---|
Line 129: | Line 129: | ||
| | ||
from: { | from: { | ||
- | fullPath: | + | fullPath: |
- | name: ' | + | name: string, |
}, | }, | ||
to: { | to: { | ||
- | fullPath: | + | fullPath: |
- | name: ' | + | 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); | ||
} | } | ||
</ | </ | ||