diff options
-rw-r--r-- | static/utils.js | 107 | ||||
-rw-r--r-- | templates/registration/base_admin.html | 1 | ||||
-rw-r--r-- | templates/registration/base_client.html | 1 | ||||
-rw-r--r-- | templates/registration/base_simple.html | 1 | ||||
-rw-r--r-- | version.txt | 2 |
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 |