aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAndrea Lepori <alepori@student.ethz.ch>2022-05-26 19:04:51 +0200
committerAndrea Lepori <alepori@student.ethz.ch>2022-05-26 19:05:02 +0200
commit1f477b7d4a9f1e701c36a7a21d374b29821f4e54 (patch)
treedb50299265e56c30dc7e271620d6073d20175887
parentadd support for heading in custom params (diff)
downloadscout-subs-1f477b7d4a9f1e701c36a7a21d374b29821f4e54.tar.gz
scout-subs-1f477b7d4a9f1e701c36a7a21d374b29821f4e54.zip
fix dropdown on safari (ios)
Diffstat (limited to '')
-rw-r--r--static/utils.js107
-rw-r--r--templates/registration/base_admin.html1
-rw-r--r--templates/registration/base_client.html1
-rw-r--r--templates/registration/base_simple.html1
-rw-r--r--version.txt2
5 files changed, 111 insertions, 1 deletions
diff --git a/static/utils.js b/static/utils.js
new file mode 100644
index 0000000..60ffd64
--- /dev/null
+++ b/static/utils.js
@@ -0,0 +1,107 @@
+document.addEventListener('DOMContentLoaded', () => {
+ initMaterializeHelper(window.materializeHelper || {})
+})
+
+function initMaterializeHelper(customOptions) {
+ const options = {
+ debug: true,
+ selectOptions: true,
+ selectTriggers: true,
+ autocompletedInputLabels: true,
+ ...customOptions
+ }
+
+ if (options.selectOptions)
+ fixSelectOptions(options.debug)
+ fixNavbarDropdown(options.debug)
+ if (options.selectTriggers)
+ fixSelectTriggers(options.debug)
+ if (options.autocompletedInputLabels)
+ fixAutocompletedInputLabels(options.debug)
+}
+
+/**
+ * Issue: Select element is misbehaving on iOS.
+ * When clicking one option, other one is being selected...
+ */
+function fixSelectOptions(debug) {
+ setTimeout(() => { // To be called after M.FormSelect.init()
+ let dragging = false
+ const opts = { passive: false }
+ const options = document.querySelectorAll('.select-wrapper ul.select-dropdown li')
+
+ if (options.length && debug) {
+ console.info('[Materialize Helper] Fixed select options', { options })
+ }
+
+ for (const option of options) {
+ option.addEventListener('touchmove', () => { dragging = true }, opts)
+ option.addEventListener('touchstart', () => { dragging = false }, opts)
+ option.addEventListener('touchend', (e) => {
+ if (dragging) return
+ else e.stopPropagation()
+ }, opts)
+ }
+ }, 0)
+}
+
+function fixNavbarDropdown(debug) {
+ setTimeout(() => { // To be called after M.FormSelect.init()
+ let dragging = false
+ const opts = { passive: false }
+ const options = document.querySelectorAll('ul.dropdown-content li')
+
+ if (options.length && debug) {
+ console.info('[Materialize Helper] Fixed navbar dropdown', { options })
+ }
+
+ for (const option of options) {
+ option.addEventListener('touchmove', () => { dragging = true }, opts)
+ option.addEventListener('touchstart', () => { dragging = false }, opts)
+ option.addEventListener('touchend', (e) => {
+ if (dragging) return
+ else e.stopPropagation()
+ }, opts)
+ }
+ }, 0)
+}
+
+/**
+ * Issue: Select triggers are causing Lighthouse warnings.
+ */
+function fixSelectTriggers(debug) {
+ setTimeout(() => { // To be called after M.FormSelect.init()
+ const triggers = document.querySelectorAll('input.select-dropdown.dropdown-trigger')
+
+ for (const trigger of triggers) {
+ const wrapper = trigger.closest('.select-wrapper')
+ const select = wrapper.querySelector('select')
+ const option = select.options[select.selectedIndex]
+ trigger.placeholder = option.text
+ }
+
+ if (triggers.length && debug) {
+ console.info('[Materialize Helper] Fixed select triggers', { triggers })
+ }
+ }, 0)
+}
+
+/**
+ * Issue: Input label is covering an input when it's autocompleted.
+ */
+function fixAutocompletedInputLabels(debug) {
+ document.addEventListener('onautocomplete', function(e) {
+ const input = e.target
+ const label = input.parentNode.querySelector(`label[for="${input.id}"]`)
+ const autocompleted = input.hasAttribute('autocompleted')
+
+ if (autocompleted && label) {
+ label.classList.add('active')
+ input.classList.add('valid')
+
+ if (debug) {
+ console.info('[Materialize Helper] Fixed autocompleted input label', { input, label })
+ }
+ }
+ })
+}
diff --git a/templates/registration/base_admin.html b/templates/registration/base_admin.html
index 94742fa..58413a8 100644
--- a/templates/registration/base_admin.html
+++ b/templates/registration/base_admin.html
@@ -160,6 +160,7 @@
{% block script %}
{% endblock%}
</script>
+ <script type="text/javascript" src="{% static 'utils.js' %}"></script>
</body>
</html>
{% endwith %}
diff --git a/templates/registration/base_client.html b/templates/registration/base_client.html
index 18b7868..cb282b5 100644
--- a/templates/registration/base_client.html
+++ b/templates/registration/base_client.html
@@ -181,6 +181,7 @@
{% block script %}
{% endblock%}
</script>
+ <script type="text/javascript" src="{% static 'utils.js' %}"></script>
</body>
</html>
{% endwith %}
diff --git a/templates/registration/base_simple.html b/templates/registration/base_simple.html
index dc36f06..30f7e32 100644
--- a/templates/registration/base_simple.html
+++ b/templates/registration/base_simple.html
@@ -90,6 +90,7 @@
{% block script %}
{% endblock %}
</script>
+ <script type="text/javascript" src="{% static 'utils.js' %}"></script>
</body>
</html>
{% endwith %}
diff --git a/version.txt b/version.txt
index a68a900..fa522cc 100644
--- a/version.txt
+++ b/version.txt
@@ -1,2 +1,2 @@
version=0.5
-rev=22
+rev=23