make getElement globally accessible; simplify custom events demo

nicegui/templates/index.html

@@ -24,6 +24,11 @@
       <span>Connection lost.</span>
       <span>Trying to reconnect...</span>
     </div>
+    <script>
+      function getElement(id) {
+        return window.app.$refs["r" + id];
+      }
+    </script>
     <script type="module">
       const True = true;
       const False = false;
@@ -120,10 +125,6 @@
         return Vue.h(Vue.resolveComponent(element.tag), props, slots);
       }
 
-      function getElement(id) {
-        return window.app.$refs['r' + id];
-      }
-
       function runJavascript(code, request_id) {
         (new Promise((resolve) =>resolve(eval(code)))).catch((reason) => {
           if(reason instanceof SyntaxError)

website/more_documentation/generic_events_documentation.py

@@ -54,7 +54,7 @@ def more() -> None:
             <script>
             document.addEventListener('visibilitychange', () => {{
                 if (document.visibilityState === 'visible')
-                    document.getElementById({tabwatch.id}).dispatchEvent(new CustomEvent('tabvisible'));
+                    getElement({tabwatch.id}).$emit('tabvisible');
             }});
             </script>
         ''')
@@ -63,6 +63,6 @@ def more() -> None:
         await ui.run_javascript(f'''
             document.addEventListener('visibilitychange', () => {{
                 if (document.visibilityState === 'visible')
-                    document.getElementById({tabwatch.id}).dispatchEvent(new CustomEvent('tabvisible'));
+                    getElement({tabwatch.id}).$emit('tabvisible');
             }});
         ''', respond=False)