wickes-css2 2.106.0-develop.5 → 2.106.0-develop.6

package/build/js/page/share-project-list.js

@@ -1,57 +1,175 @@
 import { copyToClipboard } from './utils/copy-to-clipboard';
 
-var Wick = Wick || {};
+var Wick = window.Wick || {};
+
 Wick.ShareProjectList = (function () {
-    function init() {
-        var $input = $('#share-list-modal #shopping-list-link');
-        var linkContainer = $('#copy-link');
-        var $actualLink = linkContainer.find('a');
-        var copyClass = 'copy-link_hovered';
+    const SELECTORS = {
+        input: '#share-list-modal #shopping-list-link',
+        linkContainer: '#copy-link',
+        link: 'a',
+    };
 
-        $actualLink.on('click', function (e) {
-            e.preventDefault();
-        });
+    const CLASSES = {
+        copied: 'copy-link_hovered',
+    };
+
+    function logActiveElement() {
+        const active = document.activeElement;
+
+        if (!active) {
+            return;
+        }
+    }
+
+    function getElements() {
+        const $input = $(SELECTORS.input);
+        const $linkContainer = $(SELECTORS.linkContainer);
+        const $link = $linkContainer.find(SELECTORS.link);
+
+        return {
+            $input: $input,
+            $linkContainer: $linkContainer,
+            $link: $link,
+        };
+    }
+
+    function enableFocusAndSelect($input, source) {
+        if (!$input.length) {
+            return;
+        }
 
-        function focusAndSelectInput() {
-            if (!$input.length) return;
+        const input = $input.get(0);
+        const value = input.value || '';
+        const valueLength = value.length;
 
-            var el = $input.get(0);
+        logActiveElement('[ShareProjectList] before removeAttr disabled');
 
-            $input.removeAttr('disabled');
+        $input.removeAttr('disabled');
 
-            el.focus();
+        try {
+            input.focus();
+        } catch (error) {
+            console.error('[ShareProjectList] input.focus() failed', {
+                source: source,
+                error: error,
+            });
+        }
+
+        logActiveElement('[ShareProjectList] after input.focus()');
 
-            var len = (el.value || '').length;
-            if (typeof el.setSelectionRange === 'function') {
-                el.setSelectionRange(0, len);
-            } else if (typeof el.select === 'function') {
-                el.select();
+        try {
+            if (typeof input.setSelectionRange === 'function') {
+                input.setSelectionRange(0, valueLength);
+            } else if (typeof input.select === 'function') {
+                input.select();
             }
+        } catch (error) {
+            console.error('[ShareProjectList] selection failed', {
+                source: source,
+                error: error,
+            });
         }
 
-        linkContainer.on('click', function (e) {
-            e.preventDefault();
+        logActiveElement('[ShareProjectList] after selection');
+
+        setTimeout(function () {
+            logActiveElement('[ShareProjectList] after 0ms timeout');
+        }, 0);
+
+        setTimeout(function () {
+            logActiveElement('[ShareProjectList] after 50ms timeout');
+        }, 50);
+
+        setTimeout(function () {
+            logActiveElement('[ShareProjectList] after 150ms timeout');
+        }, 150);
+    }
+
+    function getInputValue($input) {
+        const value = String($input.val() || '').trim();
+
+        return value;
+    }
+
+    function bindEvents(elements) {
+        const $input = elements.$input;
+        const $linkContainer = elements.$linkContainer;
+        const $link = elements.$link;
 
-            focusAndSelectInput();
+        $input.on('focus', function () {
+            logActiveElement('[ShareProjectList] on input focus');
+        });
 
-            var value = ($input.val() || '').trim();
-            if (!value) return;
+        $input.on('blur', function () {
+            logActiveElement('[ShareProjectList] on input blur');
+        });
 
-            copyToClipboard(value, linkContainer[0], { noUpperCase: true })
+        $link.on('click', function (event) {
+            event.preventDefault();
+        });
+
+        $linkContainer.on('mousedown', function () {
+            logActiveElement('[ShareProjectList] on mousedown before focus');
+        });
+
+        $linkContainer.on('click', function (event) {
+            let value;
+
+            logActiveElement('[ShareProjectList] before click preventDefault');
+
+            event.preventDefault();
+
+            enableFocusAndSelect($input, 'linkContainer click');
+
+            value = getInputValue($input);
+            if (!value) {
+                return;
+            }
+
+            copyToClipboard(value, $linkContainer.get(0), { noUpperCase: true })
                 .then(function () {
-                    $actualLink.addClass(copyClass);
+                    $link.addClass(CLASSES.copied);
+
+                    logActiveElement('[ShareProjectList] after copy success before refocus');
+
+                    enableFocusAndSelect($input, 'copy success refocus');
+
+                    setTimeout(function () {
+                        enableFocusAndSelect($input, 'copy success refocus timeout 0');
+                    }, 0);
+
+                    setTimeout(function () {
+                        enableFocusAndSelect($input, 'copy success refocus timeout 50');
+                    }, 50);
                 })
-                .catch(function (e) {
-                    console.error(e);
+                .catch(function (error) {
+                    console.error('[ShareProjectList] Failed to copy shopping list link', error);
+
+                    logActiveElement('[ShareProjectList] after copy error before refocus');
+
+                    enableFocusAndSelect($input, 'copy error refocus');
                 });
         });
 
-        $input.on('click', function (e) {
-            e.preventDefault();
-            focusAndSelectInput();
-            $actualLink.removeClass(copyClass);
+        $input.on('click', function () {
+            enableFocusAndSelect($input, 'input click');
+            $link.removeClass(CLASSES.copied);
         });
     }
 
-    init();
+    function init() {
+        var elements = getElements();
+
+        if (!elements.$input.length || !elements.$linkContainer.length || !elements.$link.length) {
+            return;
+        }
+
+        bindEvents(elements);
+    }
+
+    return {
+        init: init,
+    };
 })();
+
+Wick.ShareProjectList.init();