first commit

modules/ps_facetedsearch/_dev/front/events.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+import refreshSliders from './slider';
+import {showOverlay, hideOverlay} from './overlay';
+
+$(document).ready(() => {
+  prestashop.on('updateProductList', () => {
+    hideOverlay();
+    refreshSliders();
+  });
+
+  refreshSliders();
+
+  prestashop.on('updateFacets', () => {
+    showOverlay();
+  });
+});

modules/ps_facetedsearch/_dev/front/facet.css

@@ -0,0 +1 @@
+#search_filters .facet .title{display:flex}#search_filters .facet .title .collapse-icons{margin-left:auto}#search_filters .facet .facet-title{width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#search_filters .facet .facet-label{width:100%;text-align:left}#search_filters .facet .facet-label .custom-checkbox,#search_filters .facet .facet-label .custom-radio{top:-7px;margin-right:0}#search_filters .facet .facet-label .color{margin-left:0}#search_filters .facet .facet-label a{width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*# sourceMappingURL=facet.css.map */

modules/ps_facetedsearch/_dev/front/facet.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["facet.scss"],"names":[],"mappings":"AA2BI,8BACE,YAAA,CACA,8CACE,gBAAA,CAIJ,oCAfF,uBAAA,CACA,eAAA,CACA,sBAAA,CACA,kBAAA,CAgBE,oCACE,UAAA,CACA,eAAA,CACA,uGAEE,QAAA,CACA,cAAA,CAEF,2CACE,aAAA,CAGF,sCA/BJ,uBAAA,CACA,eAAA,CACA,sBAAA,CACA,kBAAA","file":"facet.css"}

modules/ps_facetedsearch/_dev/front/facet.scss

@@ -0,0 +1,56 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+@mixin text-ellipsis() {
+  width: calc(100% - 30px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#search_filters {
+  .facet {
+    .title {
+      display: flex;
+      .collapse-icons {
+        margin-left: auto;
+      }
+    }
+
+    .facet-title {
+      @include text-ellipsis();
+    }
+
+    .facet-label {
+      width: 100%;
+      text-align: left;
+      .custom-checkbox,
+      .custom-radio {
+        top: -7px;
+        margin-right: 0;
+      }
+      .color {
+        margin-left: 0;
+      }
+
+      a {
+        @include text-ellipsis();
+      }
+    }
+  }
+}

modules/ps_facetedsearch/_dev/front/index.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+import 'jquery-ui-touch-punch';
+import './events';
+import './slider.scss';
+import './facet.scss';

modules/ps_facetedsearch/_dev/front/overlay.css

@@ -0,0 +1 @@
+.faceted-overlay{left:0;top:0;width:100%;height:100%;position:fixed;background-color:rgba(25,25,25,.5);z-index:100}.faceted-overlay .overlay__inner{left:0;top:0;width:100%;height:100%;position:absolute}.faceted-overlay .overlay__content{left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.faceted-overlay .spinner{width:75px;height:75px;display:inline-block;border-width:2px;border-color:rgba(255,255,255,.05);border-top-color:#fff;animation:spin 1s infinite linear;border-radius:100%;border-style:solid}@keyframes spin{100%{transform:rotate(360deg)}}/*# sourceMappingURL=overlay.css.map */

modules/ps_facetedsearch/_dev/front/overlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overlay.scss"],"names":[],"mappings":"AAkBA,iBACE,MAAA,CACA,KAAA,CACA,UAAA,CACA,WAAA,CACA,cAAA,CACA,kCAAA,CACA,WAAA,CAEA,iCACE,MAAA,CACA,KAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CAGF,mCACE,QAAA,CACA,iBAAA,CACA,OAAA,CACA,+BAAA,CAGF,0BACE,UAAA,CACA,WAAA,CACA,oBAAA,CACA,gBAAA,CACA,kCAAA,CACA,qBAAA,CACA,iCAAA,CACA,kBAAA,CACA,kBAAA,CAIJ,gBACE,KACE,wBAAA,CAAA","file":"overlay.css"}

modules/ps_facetedsearch/_dev/front/overlay.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import './overlay.scss';
+
+const template = `<div class="faceted-overlay">
+<div class="overlay__inner">
+<div class="overlay__content"><span class="spinner"></span></div>
+</div>
+</div>`;
+
+function show() {
+  if ($('.faceted-overlay').length === 1) {
+    return;
+  }
+
+  $('body').append(template);
+}
+
+function hide() {
+  $('.faceted-overlay').remove();
+}
+
+export {
+  show as showOverlay,
+  hide as hideOverlay,
+};

modules/ps_facetedsearch/_dev/front/overlay.scss

@@ -0,0 +1,60 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+.faceted-overlay {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(25, 25, 25, 0.5);
+  z-index: 100;
+
+  .overlay__inner {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .overlay__content {
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .spinner {
+    width: 75px;
+    height: 75px;
+    display: inline-block;
+    border-width: 2px;
+    border-color: rgba(255, 255, 255, 0.05);
+    border-top-color: #fff;
+    animation: spin 1s infinite linear;
+    border-radius: 100%;
+    border-style: solid;
+  }
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

modules/ps_facetedsearch/_dev/front/slider.css

@@ -0,0 +1 @@
+#search_filters .ui-slider-horizontal .ui-slider-handle{margin-left:-1px;cursor:pointer}#search_filters .ui-widget-header{background:#555}#search_filters .ui-slider .ui-slider-handle{top:-0.45em;width:.4em;background:#fff;border:1px solid #555}#search_filters .ui-slider-horizontal{height:.4em}/*# sourceMappingURL=slider.css.map */

modules/ps_facetedsearch/_dev/front/slider.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["slider.scss"],"names":[],"mappings":"AAoBI,wDACE,gBAAA,CACA,cAAA,CAGJ,kCACE,eAAA,CAGA,6CACE,WAAA,CACA,UAAA,CACA,eAAA,CACA,qBAAA,CAGJ,sCACE,WAAA","file":"slider.css"}

modules/ps_facetedsearch/_dev/front/slider.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import getQueryParameters from './urlparser';
+import NumberFormatter from '../cldr/number-formatter';
+
+const formatters = {};
+
+const displayLabelBlock = (formatterId, displayBlock, min, max) => {
+  if (formatters[formatterId] === undefined) {
+    displayBlock.text(
+      displayBlock.text().replace(
+        /([^\d]*)(?:[\d .,]+)([^\d]+)(?:[\d .,]+)(.*)/,
+        `$1${min}$2${max}$3`,
+      ),
+    );
+  } else {
+    displayBlock.text(
+      `${formatters[formatterId].format(min)} - ${formatters[formatterId].format(max)}`,
+    );
+  }
+};
+
+/**
+ * Refresh facets sliders
+ */
+const refreshSliders = () => {
+  $('.faceted-slider').each(function initializeSliders() {
+    const $el = $(this);
+    const values = $el.data('slider-values');
+    const specifications = $el.data('slider-specifications');
+    if (specifications !== null && specifications !== undefined) {
+      formatters[$el.data('slider-id')] = NumberFormatter.build(specifications);
+    }
+
+    displayLabelBlock(
+      $el.data('slider-id'),
+      $(`#facet_label_${$el.data('slider-id')}`),
+      values === null ? $el.data('slider-min') : values[0],
+      values === null ? $el.data('slider-max') : values[1],
+    );
+
+    $(`#slider-range_${$el.data('slider-id')}`).slider({
+      range: true,
+      min: $el.data('slider-min'),
+      max: $el.data('slider-max'),
+      values: [
+        values === null ? $el.data('slider-min') : values[0],
+        values === null ? $el.data('slider-max') : values[1],
+      ],
+      stop(event, ui) {
+        const nextEncodedFacetsURL = $el.data('slider-encoded-url');
+        const urlsSplitted = nextEncodedFacetsURL.split('?');
+        let queryParams = [];
+
+        // Retrieve parameters if exists
+        if (urlsSplitted.length > 1) {
+          queryParams = getQueryParameters(urlsSplitted[1]);
+        }
+
+        let found = false;
+        queryParams.forEach((query) => {
+          if (query.name === 'q') {
+            found = true;
+          }
+        });
+
+        if (!found) {
+          queryParams.push({name: 'q', value: ''});
+        }
+
+        // Update query parameter
+        queryParams.forEach((query) => {
+          if (query.name === 'q') {
+            // eslint-disable-next-line
+            query.value += [
+              query.value.length > 0 ? '/' : '',
+              $el.data('slider-label'),
+              '-',
+              $el.data('slider-unit'),
+              '-',
+              ui.values[0],
+              '-',
+              ui.values[1],
+            ].join('');
+          }
+        });
+
+        const requestUrl = [
+          urlsSplitted[0],
+          '?',
+          $.param(queryParams),
+        ].join('');
+
+        prestashop.emit(
+          'updateFacets',
+          requestUrl,
+        );
+      },
+      slide(event, ui) {
+        displayLabelBlock(
+          $el.data('slider-id'),
+          $(`#facet_label_${$el.data('slider-id')}`),
+          ui.values[0],
+          ui.values[1],
+        );
+      },
+    });
+  });
+};
+
+export default refreshSliders;

modules/ps_facetedsearch/_dev/front/slider.scss

@@ -0,0 +1,40 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+#search_filters {
+  .ui-slider-horizontal {
+    .ui-slider-handle {
+      margin-left: -1px;
+      cursor: pointer;
+    }
+  }
+  .ui-widget-header {
+    background: #555;
+  }
+  .ui-slider {
+    .ui-slider-handle {
+      top: -.45em;
+      width: 0.4em;
+      background: #fff;
+      border: 1px solid #555;
+    }
+  }
+  .ui-slider-horizontal {
+    height: .4em;
+  }
+}

modules/ps_facetedsearch/_dev/front/urlparser.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+const getQueryParameters = params => params.split('&').map((str) => {
+  const [key, val] = str.split('=');
+  return {
+    name: key,
+    value: decodeURIComponent(val).replace(/\+/g, ' '),
+  };
+});
+
+export default getQueryParameters;