https://premier.plusultra.com/content/js/sidebarjs.js

1"use strict";
2
3function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
4
5function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
7function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
8
9function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
10
11window.SidebarJS = function (window, document) {
12  'use strict';
13
14  var IS_VISIBLE = 'is-visible';
15  var TRANSITION = 'transition: all';
16  var TRANSLATE = 'transform: translate';
17
18  var SidebarJS =
19  /*#__PURE__*/
20  function () {
21    function SidebarJS(config) {
22      _classCallCheck(this, SidebarJS);
23
24      this.$component = document.querySelector(config ? config.component : '.js-sidebar');
25      this.$container = document.querySelector(config ? config.container : '.js-sidebar--container');
26      this.$background = document.querySelector(config ? config.background : '.js-sidebar--background');
27      this.$open = document.querySelector(config ? config.showElement : '.js-sidebar--open');
28      this.$container.addEventListener('touchstart', _onTouchStart.bind(this));
29      this.$container.addEventListener('touchmove', _onTouchMove.bind(this));
30      this.$container.addEventListener('touchend', _onTouchEnd.bind(this));
31      this.$background.addEventListener('click', this.close.bind(this));
32      this.$open.addEventListener('click', this.open.bind(this));
33    }
34
35    _createClass(SidebarJS, [{
36      key: "open",
37      value: function open() {
38        _element(this.$container, [TRANSITION + '.3s ease', TRANSLATE + '(0, 0)']);
39
40        if (!this.$component.classList.contains(IS_VISIBLE)) {
41          this.$component.classList.add(IS_VISIBLE);
42        }
43      }
44    }, {
45      key: "close",
46      value: function close() {
47        _element(this.$container, [TRANSITION + '.3s ease', TRANSLATE + '(-100%, 0)']);
48
49        this.$component.classList.remove(IS_VISIBLE);
50      }
51    }]);
52
53    return SidebarJS;
54  }();
55
56  function _vendorify(el, prop, val) {
57    var Prop = prop.charAt(0).toUpperCase() + prop.slice(1);
58    var prefs = ['Moz', 'Webkit', 'O', 'ms'];
59    el.style.prop = val;
60
61    for (var i = 0; i < prefs.length; i++) {
62      el.style[prefs[i] + Prop] = val;
63    }
64
65    return el;
66  }
67
68  function _element(el, props) {
69    for (var i = 0; i < props.length; i++) {
70      var prop = props[i].split(':')[0];
71      var val = props[i].split(':')[1];
72
73      _vendorify(el, prop, val);
74    }
75
76    return el;
77  }
78
79  function _onTouchStart(e) {
80    _element(this.$container, [TRANSITION + '0s']).touchStart = e.touches[0].pageX;
81  }
82
83  function _onTouchMove(e) {
84    this.$container.touchMove = this.$container.touchStart - e.touches[0].pageX;
85
86    if (this.$container.touchMove > 0) {
87      _element(this.$container, [TRANSLATE + '(' + -this.$container.touchMove + 'px, 0)']);
88    }
89  }
90
91  function _onTouchEnd() {
92    this.$container.touchMove > this.$container.clientWidth / 4 ? this.close() : this.open();
93  }
94
95  return SidebarJS;
96}(window, document);