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

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

@@ -1 +1 @@
-!function t(r,i,c){function l(n,e){if(!i[n]){if(!r[n]){var o="function"==typeof require&&require;if(!e&&o)return o(n,!0);if(a)return a(n,!0);throw(e=new Error("Cannot find module '"+n+"'")).code="MODULE_NOT_FOUND",e}o=i[n]={exports:{}},r[n][0].call(o.exports,function(e){return l(r[n][1][e]||e)},o,o.exports,t,r,i,c)}return i[n].exports}for(var a="function"==typeof require&&require,e=0;e<c.length;e++)l(c[e]);return l}({1:[function(e,n,o){"use strict";var t,r,i,c,l=e("./utils/copy-to-clipboard");function a(){var e,n;t.length&&(e=t.get(0),t.removeAttr("disabled"),e.focus(),n=(e.value||"").length,"function"==typeof e.setSelectionRange?e.setSelectionRange(0,n):"function"==typeof e.select&&e.select())}t=$("#share-list-modal #shopping-list-link"),r=$("#copy-link"),i=r.find("a"),c="copy-link_hovered",i.on("click",function(e){e.preventDefault()}),r.on("click",function(e){e.preventDefault(),a();e=(t.val()||"").trim();e&&(0,l.copyToClipboard)(e,r[0],{noUpperCase:!0}).then(function(){i.addClass(c)}).catch(function(e){console.error(e)})}),t.on("click",function(e){e.preventDefault(),a(),i.removeClass(c)})},{"./utils/copy-to-clipboard":2}],2:[function(e,n,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.copyToClipboard=function(e,n){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},e=function(e,n){e=null==e?"":e+"";return(n.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()})).split(" ").filter(function(e){return""!==e}).join(" ").trim()}(e,o);if(!e)return Promise.reject(new Error("Empty text"));if(null!=(o=window.webkit)&&null!=(o=o.messageHandlers)&&o.copy)try{return window.webkit.messageHandlers.copy.postMessage(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=window.Android)&&o.copyToClipboard&&"function"==typeof window.Android.copyToClipboard)try{return window.Android.copyToClipboard(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=navigator.clipboard)&&o.writeText)return navigator.clipboard.writeText(e).then(function(){return!0});return function(a,u){return new Promise(function(e,n){try{var o,t=$(u).parent(),r=$("<textarea>").val(a).attr("readonly","readonly").css({position:"fixed",top:0,left:"-9999px",opacity:0,width:"1px",height:"1px",padding:0,border:0,margin:0}),i=(t.append(r),r.get(0)),c=(i.focus(),(i.value||"").length),l=("function"==typeof i.setSelectionRange?i.setSelectionRange(0,c):r.select(),document.execCommand("copy"));r.remove(),window.getSelection&&(o=window.getSelection())&&o.removeAllRanges&&o.removeAllRanges(),l?e(!0):n(new Error("execCommand failed"))}catch(e){n(e)}})}(e,n)}},{}]},{},[1]);
+!function t(i,r,c){function l(n,e){if(!r[n]){if(!i[n]){var o="function"==typeof require&&require;if(!e&&o)return o(n,!0);if(u)return u(n,!0);throw(e=new Error("Cannot find module '"+n+"'")).code="MODULE_NOT_FOUND",e}o=r[n]={exports:{}},i[n][0].call(o.exports,function(e){return l(i[n][1][e]||e)},o,o.exports,t,i,r,c)}return r[n].exports}for(var u="function"==typeof require&&require,e=0;e<c.length;e++)l(c[e]);return l}({1:[function(e,n,o){"use strict";var t,i,r=e("./utils/copy-to-clipboard"),e=window.Wick||{};function c(){document.activeElement}function l(e,n){if(e.length){var o=e.get(0),t=(o.value||"").length;c(),e.removeAttr("disabled");try{o.focus()}catch(e){console.error("[ShareProjectList] input.focus() failed",{source:n,error:e})}c();try{"function"==typeof o.setSelectionRange?o.setSelectionRange(0,t):"function"==typeof o.select&&o.select()}catch(e){console.error("[ShareProjectList] selection failed",{source:n,error:e})}c(),setTimeout(function(){c()},0),setTimeout(function(){c()},50),setTimeout(function(){c()},150)}}function u(e){var n=e.$input,o=e.$linkContainer,t=e.$link;n.on("focus",function(){c()}),n.on("blur",function(){c()}),t.on("click",function(e){e.preventDefault()}),o.on("mousedown",function(){c()}),o.on("click",function(e){c(),e.preventDefault(),l(n,"linkContainer click"),(e=String(n.val()||"").trim())&&(0,r.copyToClipboard)(e,o.get(0),{noUpperCase:!0}).then(function(){t.addClass(i.copied),c(),l(n,"copy success refocus"),setTimeout(function(){l(n,"copy success refocus timeout 0")},0),setTimeout(function(){l(n,"copy success refocus timeout 50")},50)}).catch(function(e){console.error("[ShareProjectList] Failed to copy shopping list link",e),c(),l(n,"copy error refocus")})}),n.on("click",function(){l(n,"input click"),t.removeClass(i.copied)})}e.ShareProjectList=(t={input:"#share-list-modal #shopping-list-link",linkContainer:"#copy-link",link:"a"},i={copied:"copy-link_hovered"},{init:function(){o=$(t.input),e=$(t.linkContainer),n=e.find(t.link);var e,n,o={$input:o,$linkContainer:e,$link:n};o.$input.length&&o.$linkContainer.length&&o.$link.length&&u(o)}}),e.ShareProjectList.init()},{"./utils/copy-to-clipboard":2}],2:[function(e,n,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.copyToClipboard=function(e,n){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},e=function(e,n){e=null==e?"":e+"";return(n.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()})).split(" ").filter(function(e){return""!==e}).join(" ").trim()}(e,o);if(!e)return Promise.reject(new Error("Empty text"));if(null!=(o=window.webkit)&&null!=(o=o.messageHandlers)&&o.copy)try{return window.webkit.messageHandlers.copy.postMessage(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=window.Android)&&o.copyToClipboard&&"function"==typeof window.Android.copyToClipboard)try{return window.Android.copyToClipboard(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=navigator.clipboard)&&o.writeText)return navigator.clipboard.writeText(e).then(function(){return!0});return function(u,s){return new Promise(function(e,n){try{var o,t=$(s).parent(),i=$("<textarea>").val(u).attr("readonly","readonly").css({position:"fixed",top:0,left:"-9999px",opacity:0,width:"1px",height:"1px",padding:0,border:0,margin:0}),r=(t.append(i),i.get(0)),c=(r.focus(),(r.value||"").length),l=("function"==typeof r.setSelectionRange?r.setSelectionRange(0,c):i.select(),document.execCommand("copy"));i.remove(),window.getSelection&&(o=window.getSelection())&&o.removeAllRanges&&o.removeAllRanges(),l?e(!0):n(new Error("execCommand failed"))}catch(e){n(e)}})}(e,n)}},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.106.0-develop.4",
+  "version": "2.106.0-develop.6",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/js/page/filters/plp-filters-mobile.js

@@ -65,11 +65,6 @@ Wick.PLPFiltersMobile = {
         $btn.text(total > 0 ? `View results (${total})` : 'View results');
     },
 
-    hideAccordions() {
-        $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
-        $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
-    },
-
     init() {
         // two-way binding for input between desktop and modal
         $(document)
@@ -86,13 +81,14 @@ Wick.PLPFiltersMobile = {
         $(document)
             .off('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
+                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.draftState);
             });
 
         $(document)
             .off('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFiltersMobile.hideAccordions();
+                const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(this));
+                Wick.PLPFilters.draftState = Wick.PLPFilters.collectStateFromDOM(scope);
             });
 
         // mobile "View results" button in modal
@@ -126,6 +122,7 @@ Wick.PLPFiltersMobile = {
 
                 e.preventDefault();
 
+                Wick.PLPFilters.draftState = {};
                 Wick.PLPFilters.appliedState = {};
                 Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
 

package/src/js/page/filters/plp-filters-utils.js

@@ -1,6 +1,14 @@
 var Wick = window.Wick || {};
 
 Wick.PLPUtils = (function () {
+    function cloneState(state) {
+        const out = {};
+        Object.keys(state).forEach((k) => {
+            out[k] = new Set(state[k]);
+        });
+        return out;
+    }
+
     function syncTwinInputsByName(name, checked, source) {
         const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input').filter(
             function () {
@@ -57,6 +65,7 @@ Wick.PLPUtils = (function () {
     }
 
     return {
+        cloneState,
         syncTwinInputsByName,
         getPanelType,
         countItems,

package/src/js/page/filters/plp-filters.js

@@ -6,6 +6,7 @@ Wick.PLPFilters = {
     ROOT: '.plp-filters',
     GROUP: '.plp-filters__group',
     APPLY_BTN: '.plp-filters__apply',
+    draftState: null,
 
     INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
 
@@ -24,6 +25,7 @@ Wick.PLPFilters = {
         }
 
         Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+        Wick.PLPFilters.draftState = Wick.PLPUtils.cloneState(Wick.PLPFilters.appliedState);
         Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
 
         // 3) chips
@@ -43,8 +45,11 @@ Wick.PLPFilters = {
     handlePageShow() {
         window.addEventListener('pageshow', function () {
             const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
-            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
-            Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
+            const stateScope = rootWrapper.add($(Wick.PLPFiltersMobile.MODAL_SEL));
+
+            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(stateScope);
+            Wick.PLPFilters.draftState = Wick.PLPFilters.appliedState;
+            Wick.PLPFilters.setDOMFromState(stateScope, Wick.PLPFilters.appliedState);
         });
     },
 
@@ -187,7 +192,10 @@ Wick.PLPFilters = {
 
     // ===== APPLY
     applyFromScopes(scopeForCollect, push) {
-        Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
+        const nextState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
+
+        Wick.PLPFilters.draftState = nextState;
+        Wick.PLPFilters.appliedState = nextState;
         Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
     },
 

package/src/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();

package/src/js/components/share-project-list.js

@@ -1,56 +0,0 @@
-// this file should be delete after <script defer="defer" src="./js/share-project-list.min.js"></script>
-// implementation on backend (IC-1182 comment https://wickesit.atlassian.net/browse/IC-1182?focusedCommentId=312018)
-
-var Wick = Wick || {};
-
-Wick.ShareProjectList = (function () {
-    function init() {
-        var shoppingListLinkInput = $('#share-list-modal #shopping-list-link'),
-            shoppingListLinkEl = shoppingListLinkInput[0],
-            linkContainer = $('#copy-link'),
-            actualLink = linkContainer.find('a'),
-            copyClass = 'copy-link_hovered';
-
-        actualLink.click(function (e) {
-            e.preventDefault();
-        });
-
-        linkContainer.click(function () {
-            if (navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)) {
-                iosCopyToClipboard(shoppingListLinkInput);
-            } else if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
-                shoppingListLinkEl.select();
-                shoppingListLinkEl.setSelectionRange(0, 999999);
-            } else {
-                shoppingListLinkEl.select();
-            }
-
-            document.execCommand('copy');
-            actualLink.addClass(copyClass);
-        });
-
-        shoppingListLinkInput.click(function () {
-            linkContainer.click();
-            actualLink.removeClass(copyClass);
-        });
-    }
-
-    function iosCopyToClipboard($input) {
-        var el = $input.get(0);
-        var editable = el.contentEditable;
-        var readOnly = el.readOnly;
-
-        el.contentEditable = true;
-        el.readOnly = false;
-        var range = document.createRange();
-        range.selectNodeContents(el);
-        var sel = window.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(range);
-        el.setSelectionRange(0, 999999);
-        el.contentEditable = editable;
-        el.readOnly = readOnly;
-    }
-
-    init();
-})();