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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.98.0-develop.10",
+  "version": "2.98.0-develop.11",
   "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/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;
   }
@@ -354,10 +327,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}}