Differences

This shows you the differences between two versions of the page.

--- admin:online-platform-cms:using-web-ui-custom-events [2021/09/27 08:34] – 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: @@
  moduleName: 'prematch',
  from: {
-  fullPath: '/app/en/prematch/9500/football',
+  fullPath: string,
-  name: 'prematch.sportName',
+  name: string,
  },
  to: {
-  fullPath: '/app/en/roulettes/roulette/3',
+  fullPath: string,
-  name: 'roulettes.roulette',
+  name: string,
  }
 }
@@ Line 140: / Line 140: @@
 ===== Additional info =====
-=== routeChange script example ===
+=== 'routeChange' event 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 'name' field from 'from' or 'to' objects preferably, as fullPath is url, which is more likely to change in the future, compared to names.
+  * This event allows custom script to stop the route change in the app by adding 'Event.preventDefault()' in the event's listener.
+  * Each game has it's own module names, so Roulette page will fire 'roulette' and Dogs page 'dogs' modaleNames.
+  * Games with nested URLs will have the same moduleName, but different names under the 'from' and 'to' objects.
+Script example and what it does:
+  * When user visits a page betgames-iframe, the app fires 'routeChange' event, with the moduleName 'betgames-iframe'
+  * Script catches this event and prevents the route from changing for this particular 'betgames-iframe' module, so user stays on the same route
+  * 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
 <code>
@@ Line 150: / Line 163: @@
    }
-   if (routeChangeEvent.detail.moduleName ===  'betgames-iframe') {
+   if (routeChangeEvent.detail.moduleName === 'betgames-iframe') {
+       // 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)
        routeChangeEvent.preventDefault();
        displayBetGamesModal(routeChangeEvent.detail.to, routeChangeEvent.detail.from);
@@ Line 184: / Line 199: @@
     modalElement.remove();
-    // If name is not set, it means that client came straight to this page through the URL section, so this is an exception and
+    // 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, since after removing the modal, user will see blank page.
     if (!from.name) {