wickes-css2 2.98.0-develop.10 → 2.98.0-develop.12

package/build/js/tradePro-rewards.min.js

@@ -1 +1 @@
-!function o(n,a,i){function d(t,e){if(!a[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(c)return c(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=a[t]={exports:{}},n[t][0].call(r.exports,function(e){return d(n[t][1][e]||e)},r,r.exports,o,n,a,i)}return a[t].exports}for(var c="function"==typeof require&&require,e=0;e<i.length;e++)d(i[e]);return d}({1:[function(e,t,r){"use strict";var o=e("./utils/copy-to-clipboard"),n=window.Wick||{};n.TradeProRewards={el:{$tradeProRewards:$(".page_tradePro-rewards"),buttonSelector:".copy-tradePro-barcode"},message:"Code copied to clipboard",copyToClipboardInit:function(){n.SnackBar.init(),$(n.TradeProRewards.el.buttonSelector).on("click",function(e){e.preventDefault(),e.stopPropagation();var t=$(this).parent().find("input"),r=t.val().trim();return t.removeAttr("disabled").attr("readonly","readonly"),(0,o.copyToClipboard)(r,e.currentTarget),t.attr("disabled","disabled").removeAttr("readonly"),window.getSelection().removeAllRanges(),n.SnackBar.show({text:n.TradeProRewards.message,type:n.SnackBar.types.SUCCESS,withCloseButton:!1,autoClose:!0,delayBeforeClose:3e3}),!1})},init:function(){n.TradeProRewards.copyToClipboardInit()}},$(document).ready(function(){n.TradeProRewards.el.$tradeProRewards.length&&n.TradeProRewards.init()})},{"./utils/copy-to-clipboard":2}],2:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.copyToClipboard=function(e,t){var r=$("<textarea>").css({position:"absolute",top:0,left:0,opacity:0});$(t).parent().append(r);t=e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()}).split(" ").filter(function(e){return""!==e}).join(" ");r.val(t),navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)?function(e){var e=e.get(0),t=e.contentEditable,r=e.readOnly,o=document.createRange(),n=window.getSelection();e.contentEditable=!0,e.readOnly=!1,o.selectNodeContents(e),n.removeAllRanges(),n.addRange(o),e.setSelectionRange(0,999999),e.contentEditable=t,e.readOnly=r}(r):navigator.userAgent.match(/ipad|ipod|iphone/i)?(r.select(),r[0].setSelectionRange(0,999999)):r.select();document.execCommand("copy"),r.remove()}},{}]},{},[1]);
+!function o(n,a,i){function d(t,e){if(!a[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(c)return c(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=a[t]={exports:{}},n[t][0].call(r.exports,function(e){return d(n[t][1][e]||e)},r,r.exports,o,n,a,i)}return a[t].exports}for(var c="function"==typeof require&&require,e=0;e<i.length;e++)d(i[e]);return d}({1:[function(e,t,r){"use strict";var o=e("./utils/copy-to-clipboard"),n=window.Wick||{};n.TradeProRewards={el:{$tradeProRewards:$(".page_tradePro-rewards"),buttonSelector:".copy-tradePro-barcode"},message:"Code copied to clipboard",copyToClipboardInit:function(){n.SnackBar.init(),$(n.TradeProRewards.el.buttonSelector).on("click",function(e){e.preventDefault(),e.stopPropagation();var t=$(this).parent().find("input"),r=t.val().trim();return t.removeAttr("disabled").attr("readonly","readonly"),(0,o.copyToClipboard)(r,e.currentTarget,{noUpperCase:!0}),t.attr("disabled","disabled").removeAttr("readonly"),window.getSelection().removeAllRanges(),n.SnackBar.show({text:n.TradeProRewards.message,type:n.SnackBar.types.SUCCESS,withCloseButton:!1,autoClose:!0,delayBeforeClose:3e3}),!1})},init:function(){n.TradeProRewards.copyToClipboardInit()}},$(document).ready(function(){n.TradeProRewards.el.$tradeProRewards.length&&n.TradeProRewards.init()})},{"./utils/copy-to-clipboard":2}],2:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.copyToClipboard=function(e,t){var r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},o=$("<textarea>").css({position:"absolute",top:0,left:0,opacity:0});$(t).parent().append(o),t=r.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()});r=t.split(" ").filter(function(e){return""!==e}).join(" ");o.val(r),navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)?function(e){var e=e.get(0),t=e.contentEditable,r=e.readOnly,o=document.createRange(),n=window.getSelection();e.contentEditable=!0,e.readOnly=!1,o.selectNodeContents(e),n.removeAllRanges(),n.addRange(o),e.setSelectionRange(0,999999),e.contentEditable=t,e.readOnly=r}(o):navigator.userAgent.match(/ipad|ipod|iphone/i)?(o.select(),o[0].setSelectionRange(0,999999)):o.select();document.execCommand("copy"),o.remove()}},{}]},{},[1]);

package/package.json

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

package/src/js/components/general/main-nav.js

@@ -1,292 +1,16 @@
 var Wick = Wick || {};
+
 Wick.MainNav = (function () {
   return {
-    createMainNav: function (defaultOptions) {
-      const $mainNav = $('#main-nav');
-
-      function createMainNavWrapper(data) {
-        return `
-          <div class="main-nav__section main-nav__section_main">
-            <div class="main-nav__back-btn__wrap">
-                <a href="#" class="main-nav__back-btn">
-                  <span class="icon"><i class="fas fa-arrow-left fa-lg"></i></span>
-                </a>
-            </div>
-            <div class="main-nav__top-level-wrap">
-              <ul class="main-nav__top-level">
-                  ${data.map(createMainNavTopLevel).join('')}
-              </ul>
-            </div>
-          </div>
-        `;
-      }
-
-      function createMainNavTopLevel(menuSection) {
-        if (menuSection.name && menuSection.url) {
-          if (menuSection.children && menuSection.children.length) {
-            return `
-               <li class="main-nav__top-level__item">
-                  <a href="${checkUrl(menuSection)}" class="main-nav__top-level__label ${setClass(menuSection, 1)}" tabindex="0" ${setColor(menuSection)}>
-                    ${menuSection.name}
-                  </a>
-                  <div class="main-nav__menu-wrapper">
-                      ${createMainNavBannerItem(menuSection.banner)}
-                      <ul class="main-nav__menu">
-                          ${menuSection.children.map(createMainNavItems).join('')}
-                      </ul>
-                  </div>
-                </li>
-              `
-          } else {
-            return ` 
-                <li class="main-nav__top-level__item main-nav__top-level__item-last">
-                  <a href="${checkUrl(menuSection)}" class="main-nav__top-level__label" tabindex="0" ${setColor(menuSection)}>
-                    ${menuSection.name}
-                  </a>
-                </li>
-              `
-          }
-        } else {
-          return ''
-        }
-      }
-
-      function createMainNavBannerItem(banner) {
-        if (banner && Wick.Responsive.getCurrentBreakpoint() !== 'up-lg') {
-          return `
-            <div class="main-nav__menu-banner">
-              ${banner}
-            </div>
-          `;
-        } else {
-          return ''
-        }
-      }
-
-      function createMainNavItems(menuSection) {
-        if (menuSection) {
-          if (menuSection.children && menuSection.children.length) {
-            if(menuSection.originalChildrenCount) {
-              console.log(menuSection)
-            }
-            return `
-              <li class="main-nav__menu__item nav-col">
-                <a href="${checkUrl(menuSection)}" class="main-nav__menu__label ${setClass(menuSection, 2)}" tabindex="0" ${setColor(menuSection)}>
-                  ${menuSection.name}
-                </a>
-                <div class="main-nav__sub-menu__wrapper" tabindex="0">
-                  <div class="main-nav__sub-menu">
-                    <ul>
-                        ${menuSection.children.map(createSubNavItems).join('')}
-                        ${
-                          menuSection.originalChildrenCount &&
-                          menuSection.originalChildrenCount != menuSection.children.length
-                            ? createSubNavItems({name: 'View More', class: 'main-nav__sub-menu__view-more', url: menuSection.url}) 
-                            : ''
-                        }
-                    </ul>
-                    <div class="main-nav__view-all">
-                      <a href="${checkUrl(menuSection)}" class="main-nav__view-all__link" tabindex="0">
-                        View all ${menuSection.name}
-                      </a>
-                    </div>
-                      ${createOffersWrapper(menuSection)}
-                  </div>
-                </div>
-              </li>
-            `
-          } else {
-            return `
-              <li class="main-nav__menu__item nav-col">
-                <a href="${checkUrl(menuSection)}" class="main-nav__menu__label ${setClass(menuSection, 2)}" tabindex="0" ${setColor(menuSection)}>
-                  ${menuSection.name}
-                </a>
-                <div class="main-nav__sub-menu__wrapper" tabindex="0">
-                  <div class="main-nav__sub-menu">
-                    <div class="main-nav__view-all">
-                      <a href="${checkUrl(menuSection)}" class="main-nav__view-all__link" tabindex="0">
-                        View all ${menuSection.name}
-                      </a>
-                       
-                    </div>
-                    ${createOffersWrapper(menuSection)}
-                  </div>
-                </div>
-              </li>
-            `
-          }
-        }
-      }
-
-      function createSubNavItems(subItem) {
-        if (subItem.name && subItem.url) {
-          return `
-           <li class="main-nav__sub-menu__item nav-col ${subItem.class || ''}">
-              <a href="${checkUrl(subItem)}" class="main-nav__sub-menu__link main-nav__sub-sub-menu__link-last ${setClass(subItem, 3)}" tabindex="0" ${setColor(subItem)}>
-                  ${subItem.name}
-              </a>
-            </li>
-          `
-        }
-      }
-
-      function createTopOffersWrapper(offer) {
-        return `
-        <div class="main-nav__top-offers">
-          <a href="${offer.url}">
-            <img class="main-nav__top-offers__img" src="${offer.image}" alt="${offer.name}">
-          </a>
-        </div>`
-      }
-
-      function createOffersWrapper(menuOffers) {
-        if (menuOffers.offers) {
-          let offersObj = menuOffers.offers;
-          return `
-            <div class="main-nav__offers__wrapper">
-              <a href="#" class="main-nav__offers__label" tabindex="0">
-                  ${offersObj.name}
-              </a>
-              <div class="main-nav__offers">
-                <div class="main-nav__offers__title">
-                  ${offersObj.name}
-                </div>
-                ${offersObj.offers.map(createOfferItem).join('')}
-              </div>
-            </div>
-          `
-        } else {
-          return ''
-        }
-      }
-
-      function createOfferItem(offer) {
-        if (offer.image) {
-          return `
-            <div class="main-nav__offers__img">
-              <a href="${offer.url}">
-                <img src="${offer.image}" alt="${offer.name}">
-              </a>
-            </div>
-          `
-        } else if (offer.name) {
-          return `
-            <div class="main-nav__offers__item">
-              <a href="${offer.url}" class="main-nav__offers__item-link" tabindex="0">
-                ${offer.name}
-              </a>
-            </div>
-          `
-        }
-      }
-
-      function setClass(section, category) {
-        let colorClass = '';
-
-        if (section.color) {
-          switch(section.color.toUpperCase()) {
-            case 'GREEN':
-              colorClass = 'green'
-              break;
-            case 'RED':
-              colorClass = 'red'
-              break;
-          }
-
-          switch(category) {
-            case 1:
-              colorClass += ' main-nav__top-level__label--invert'
-              break;
-            case 2:
-              colorClass += ' main-nav__menu__label--invert'
-              break;
-            case 3:
-              colorClass += ' main-nav__sub-menu__link--invert'
-              break;
-          }
-        }
-
-        return colorClass
-      }
-
-      function setColor(section) {
-        let style = 'style="';
-
-        if(section.color) {
-          switch(section.color.toUpperCase()) {
-            case 'GREEN':
-              style += `background-color: #9acd32; color: #fff;`
-              break;
-            case 'RED':
-              style += `background-color: #cf000f; color: #fff;`
-              break;
-          }
-        }
-
-        if (section.bold) {
-          style += 'font-weight: 700;';
-        }
-
-        return style+'"'
-      }
-
-      function checkUrl(menuItem) {
-       return menuItem.url || ''
-      }
-
-      function appendMainNav(data) {
-        $mainNav.prepend(createMainNavWrapper(data));
-      }
-
-      const createMenu = (data) => {
-        appendMainNav(data[0].children);
-        Wick.Nav();
-        Wick.Responsive.callBr();
-      };
-
-      const checkIfRealEnvironment = () => {
-        if (defaultOptions.local) {
-          createMenu(defaultOptions.mockData)
-        } else {
-          APICall(defaultOptions, createMenu)
-        }
-      };
-
-      function APICall(options, onSuccess) {
-        $.ajax({
-          type: options.type,
-          dataType: "json",
-          url: `${options.link}/menu/main`,
-          cache: options.cache,
-          success: onSuccess,
-        });
-      }
-
-      function isSSR() {
-        return $mainNav.attr('data-ssr') === 'true'
-      }
-
-      if (isSSR()) {
-        Wick.Nav();
-        Wick.Responsive.callBr();
-      } else {
-        checkIfRealEnvironment();
-      }
+    createMainNav: function () {
+      Wick.Nav();
+      Wick.Responsive.callBr();
     }
   }
 })();
 
 $(document).ready(function () {
-  const defaultOptions = {
-    type: 'GET',
-    cache: true,
-    link: window.location.origin,
-    local: false
-  };
-
-  if (!$('#main-nav').length) {
-    return;
-  }
+  if (!$('#main-nav').length) return;
 
-  Wick.MainNav.createMainNav(defaultOptions);
+  Wick.MainNav.createMainNav();
 });

package/src/js/page/tradePro-rewards.js

@@ -17,7 +17,7 @@ Wick.TradeProRewards = {
       var discountCodeValue = discountCode.val().trim();
       discountCode.removeAttr('disabled').attr('readonly', 'readonly');
 
-      copyToClipboard(discountCodeValue, e.currentTarget);
+      copyToClipboard(discountCodeValue, e.currentTarget, { noUpperCase: true });
 
       discountCode.attr('disabled', 'disabled').removeAttr('readonly');
       window.getSelection().removeAllRanges();

package/src/js/page/utils/copy-to-clipboard.js

@@ -1,4 +1,4 @@
-export function copyToClipboard(copyValue, currentSelector) {
+export function copyToClipboard(copyValue, currentSelector, options = {}) {
   const $temp = $('<textarea>').css({
     position: 'absolute',
     top: 0,
@@ -8,9 +8,15 @@ export function copyToClipboard(copyValue, currentSelector) {
 
   $(currentSelector).parent().append($temp);
 
-  const str = copyValue.replace(/(^\w|\s\w)/g, function (m) {
-    return m.toUpperCase()
-  });
+  let str;
+  if (options.noUpperCase) {
+    str = copyValue;
+  } else {
+    str = copyValue.replace(/(^\w|\s\w)/g, function (m) {
+      return m.toUpperCase()
+    });
+  }
+
   const textFiltered = str.split(' ').filter(function (value) {
     return value !== ''
   });

package/src/partials/main-nav.hbs

@@ -1,6 +1,5 @@
 <a id="skip-to-navigation"></a>
 <nav class="main-nav" id="main-nav">
-  {{>skeleton-nav}}
 
   {{#if isLoggedIn}}
     <div class="nav-button-wrap" data-logged-in="true">

package/src/scss/partials/_main-nav.scss

@@ -5,33 +5,6 @@
   font-weight: 500;
   background: $white;
 
-  .ssc {
-    &-nav {
-      @include make-container;
-      @include make-container-max-widths;
-      display: flex;
-      gap: 5px;
-      padding: 3px 15px;
-    }
-
-    &-line {
-      height: 63px;
-      border-radius: 10px;
-
-      &:first-child {
-        flex: 0 0 34px;
-      }
-
-      &:last-child {
-        flex: 0 0 50px;
-      }
-    }
-  }
-
-  &__section + .ssc-nav {
-    display: none;
-  }
-
   &__top-offers {
     display: none;
   }
@@ -326,9 +299,13 @@
 }
 
 // fix of mobile menu
-.mobile-nav-opened > img {
+body.mobile-nav-opened {
   display: block;
-  height: 0;
+
+  & > img {
+    display: block;
+    height: 0;
+  }
 }
 
 @include media-breakpoint-down(md) {
@@ -354,10 +331,6 @@
       }
     }
 
-    .ssc-nav {
-      display: none;
-    }
-
     &.js-visible {
       display: block;
     }

package/src/sitemap.html

@@ -946,17 +946,6 @@
                             </a>
                         </li>
                     </ul>
-                    <h3>
-                        Old Navigation
-                    </h3>
-                    <ul>
-                        <li>
-                            <span class="page-id">1</span>
-                            <a href="page_old-navigation.html" target="_blank">
-                                Page with old navigation
-                            </a>
-                        </li>
-                    </ul>
 
 
                 </div>

package/src/js/emulation/main-nav-local.js

@@ -1,21 +0,0 @@
-var Wick = Wick || {};
-
-Wick.MainNavLocal = function(){
-    function init() {
-        var localOptions = {
-            local: true,
-            mockData: Wick.MainNavData.returnData()
-        };
-
-        if (!$('#main-nav').length || !$('.ssc-nav').length) {
-            return;
-        }
-        
-
-        setTimeout(()=> {
-            Wick.MainNav.createMainNav(localOptions);
-        }, 2000)
-    }
-
-    init()
-}();

package/src/page_old-navigation.html

@@ -1,10 +0,0 @@
-{{#extend "base" pageClass="" title="Old navigation" oldNav=true hideBreadcrumbs=true pageBasket=true}}
-{{#content "body"}}
-  <main>
-    <div class="container">
-      <h1 class="page-header__title">That example old navigation</h1>
-      <p class="page-header__intro">Must be skeleton and after loading navigation</p>
-    </div>
-  </main>
-{{/content}}
-{{/extend}}