Fix Site.ModalForm.js to work on Safari browsers (#124)

* Check the argument for the 'click' event for possible null
* Make sure the form is instanceof HTMLFormElement
* Add Polyfill for Element.closest (for browsers not supporting it)

Axuno.Tools/FileSystem/IEmbeddedResourceQuery.cs

@@ -16,7 +16,7 @@ public interface IEmbeddedResourceQuery
     Stream? Read<T>(string resource);
 
     /// <summary>
-    /// Reads an embedded resource from the assembly of <paramref name="assemblyName"/>.
+    /// Reads an embedded resource from the assembly of <paramref name="assembly"/>.
     /// </summary>
     /// <param name="assembly"></param>
     /// <param name="resource"></param>
@@ -32,7 +32,7 @@ public interface IEmbeddedResourceQuery
     Stream? Read(string assemblyName, string resource);
 
     /// <summary>
-    /// Gets all resource names from the assembly of <typeparamref name="T"/>.
+    /// Gets all resource names from the assembly of <paramref name="assembly"/>.
     /// </summary>
     /// <param name="assembly"></param>
     /// <returns></returns>

League/Gruntfile.js

@@ -79,7 +79,7 @@ module.exports = function (grunt) {
             },
             build: {
                 files: {
-                    'wwwroot/js/site.min.js': ['Scripts/Site.ModalForm.js', 'Scripts/Site.ShowPassword.js', 'node_modules/js-cookie/src/js.cookie.js'],
+                    'wwwroot/js/site.min.js': ['Scripts/Polyfill.js', 'Scripts/Site.ModalForm.js', 'Scripts/Site.ShowPassword.js', 'node_modules/js-cookie/src/js.cookie.js'],
                 }
             }
         },

League/Scripts/Polyfill.js

@@ -0,0 +1,14 @@
+/**
+ * Polyfill for Element.closest
+ */
+if (typeof (Element.prototype.closest == 'undefined')) {
+    Element.prototype.closest = function (property, value) {
+        var x = this;
+        while (x = x.parentElement) {
+            if (x[property] == value) {
+                return this;
+            }
+        }
+        return null;
+    }
+}

League/Scripts/Site.ModalForm.js

@@ -232,27 +232,35 @@ Site.ModalForm = function () {
         }
     });
 
-    document.addEventListener('click', function(event) {
+    document.addEventListener('click', function (event) {
+        if (event == null) return;
+        submittingElement = event.target;
+
         if (event.target.matches('[site-data="submit"]')) {
             event.preventDefault();
-            handleSiteDataSubmit(event);
+                handleSiteDataSubmit();
         }
     });
 
     // A TagHelper creates a button <button type="submit" site-data="submit">Save</button>
     //modalContainer.querySelector('[site-data="submit"]').addEventListener('click', function(event) {
-    async function handleSiteDataSubmit(event) {
-        submittingElement = event.target;
+    async function handleSiteDataSubmit() {
+                
         // first search the form where the submitting element is in.
         let form = submittingElement.closest('form');
         // If not found, take the first form inside the modal
-        if (form === null) {
-            form = event.target.closest('.modal').querySelector('form');
+        if (!(form instanceof HTMLFormElement)) {
+            form = submittingElement.closest('.modal').querySelector('form');
+        }
+        if (!(form instanceof HTMLFormElement)) {
+            // Try to access the first form in the document
+            form = document.forms[0];
         }
-        if (form === null) {
+        if (!(form instanceof HTMLFormElement)) {
             JL(loggerName).error({
                 'msg': 'No form found'
             });
+            return;
         }
 
         const elements = document.querySelectorAll('.modal-footer button, .modal-footer input[type="button"], .modal-footer input[type="submit"]');

League/Views/Team/MyTeam.cshtml

@@ -246,7 +246,7 @@
 {
     <link rel="stylesheet" href="~/lib/tempus-dominus/tempus-dominus.min.css" asp-append-version="true"/>
     <style type="text/css">
-        @* Team members *@
+        /* Team members */
 
         .fas.fa-chevron-left {
             transition: .3s transform ease-in-out;
@@ -264,7 +264,7 @@
             font-weight: bold;
         }
 
-        @* TeamVenueSelect *@
+        /* TeamVenueSelect */
 
         #venue-list tbody tr {
             border-bottom: solid 2px lightgray