sidebar.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global.SidebarJS = factory());
  5. }(this, (function () { 'use strict';
  6. function unwrapExports (x) {
  7. return x && x.__esModule ? x['default'] : x;
  8. }
  9. function createCommonjsModule(fn, module) {
  10. return module = { exports: {} }, fn(module, module.exports), module.exports;
  11. }
  12. var sidebarjs_1 = createCommonjsModule(function (module, exports) {
  13. "use strict";
  14. Object.defineProperty(exports, "__esModule", { value: true });
  15. var sidebarjs = 'sidebarjs';
  16. var isTouch = ('ontouchstart' in window);
  17. var isVisible = sidebarjs + "--is-visible";
  18. var isMoving = sidebarjs + "--is-moving";
  19. var LEFT_POSITION = 'left';
  20. var RIGHT_POSITION = 'right';
  21. var TRANSITION_DURATION = 400;
  22. var POSITIONS = [LEFT_POSITION, RIGHT_POSITION];
  23. var SidebarJS = (function () {
  24. function SidebarJS(_d, _a) {
  25. document.querySelector("[" + _d + "]").setAttribute(sidebarjs, _d);
  26. document.querySelector("[" + _d + "-toggle]").setAttribute(sidebarjs + "-toggle", _d);
  27. var _b = _a === void 0 ? {} : _a, component = _b.component, container = _b.container, background = _b.background, documentMinSwipeX = _b.documentMinSwipeX, documentSwipeRange = _b.documentSwipeRange, nativeSwipe = _b.nativeSwipe, nativeSwipeOpen = _b.nativeSwipeOpen, position = _b.position;
  28. this.component = component || document.querySelector("[" + _d + "]");
  29. this.container = container || SidebarJS.create(sidebarjs + "-container");
  30. this.background = background || SidebarJS.create(sidebarjs + "-background");
  31. this.documentMinSwipeX = documentMinSwipeX || 10;
  32. this.documentSwipeRange = documentSwipeRange || 40;
  33. this.nativeSwipe = nativeSwipe !== false;
  34. this.nativeSwipeOpen = nativeSwipeOpen !== false;
  35. var hasAllConfigDOMElements = component && container && background;
  36. if (!hasAllConfigDOMElements) {
  37. try {
  38. this.transcludeContent();
  39. }
  40. catch (e) {
  41. throw new Error('You must define an element with [sidebarjs] attribute');
  42. }
  43. }
  44. if (this.nativeSwipe) {
  45. this.addNativeGestures();
  46. if (this.nativeSwipeOpen) {
  47. this.addNativeOpenGestures();
  48. }
  49. }
  50. this.setPosition(position);
  51. this.addAttrsEventsListeners(this.component.getAttribute(sidebarjs));
  52. this.background.addEventListener('click', this.close.bind(this));
  53. }
  54. SidebarJS.prototype.toggle = function () {
  55. this.component.classList.contains(isVisible) ? this.close() : this.open();
  56. };
  57. SidebarJS.prototype.open = function () {
  58. this.component.classList.add(isVisible);
  59. };
  60. SidebarJS.prototype.close = function () {
  61. this.component.classList.remove(isVisible);
  62. };
  63. SidebarJS.prototype.isVisible = function () {
  64. return this.component.classList.contains(isVisible);
  65. };
  66. SidebarJS.prototype.setPosition = function (position) {
  67. var _this = this;
  68. this.component.classList.add(isMoving);
  69. this.position = POSITIONS.indexOf(position) >= 0 ? position : LEFT_POSITION;
  70. POSITIONS.forEach(function (POS) { return _this.component.classList.remove(sidebarjs + "--" + POS); });
  71. this.component.classList.add(sidebarjs + "--" + (this.hasRightPosition() ? RIGHT_POSITION : LEFT_POSITION));
  72. setTimeout(function () { return _this.component.classList.remove(isMoving); }, TRANSITION_DURATION);
  73. };
  74. SidebarJS.prototype.addAttrsEventsListeners = function (sidebarName) {
  75. var actions = ['toggle', 'open', 'close'];
  76. for (var i = 0; i < actions.length; i++) {
  77. var elements = document.querySelectorAll("[" + sidebarjs + "-" + actions[i] + "=\"" + sidebarName + "\"]");
  78. for (var j = 0; j < elements.length; j++) {
  79. if (!SidebarJS.elemHasListener(elements[j])) {
  80. elements[j].addEventListener('click', this[actions[i]].bind(this));
  81. SidebarJS.elemHasListener(elements[j], true);
  82. }
  83. }
  84. }
  85. };
  86. SidebarJS.prototype.hasLeftPosition = function () {
  87. return this.position === LEFT_POSITION;
  88. };
  89. SidebarJS.prototype.hasRightPosition = function () {
  90. return this.position === RIGHT_POSITION;
  91. };
  92. SidebarJS.prototype.transcludeContent = function () {
  93. this.container.innerHTML = this.component.innerHTML;
  94. this.component.innerHTML = '';
  95. this.component.appendChild(this.container);
  96. this.component.appendChild(this.background);
  97. };
  98. SidebarJS.prototype.addNativeGestures = function () {
  99. this.component.addEventListener('touchstart', this.onTouchStart.bind(this));
  100. this.component.addEventListener('touchmove', this.onTouchMove.bind(this));
  101. this.component.addEventListener('touchend', this.onTouchEnd.bind(this));
  102. this.component.addEventListener('mousedown', this.onTouchStart.bind(this));
  103. this.component.addEventListener('mousemove', this.onTouchMove.bind(this));
  104. this.component.addEventListener('mouseup', this.onTouchEnd.bind(this));
  105. };
  106. SidebarJS.prototype.addNativeOpenGestures = function () {
  107. document.addEventListener('touchstart', this.onSwipeOpenStart.bind(this));
  108. document.addEventListener('touchmove', this.onSwipeOpenMove.bind(this));
  109. document.addEventListener('touchend', this.onSwipeOpenEnd.bind(this));
  110. };
  111. SidebarJS.prototype.onTouchStart = function (e) {
  112. // this.initialTouch = (isTouch ? e.touches[0].pageX : e.pageX);
  113. };
  114. SidebarJS.prototype.onTouchMove = function (e) {
  115. // var documentSwiped = this.initialTouch - (isTouch ? e.touches[0].clientX : e.clientX);
  116. // var sidebarMovement = this.getSidebarPosition(documentSwiped);
  117. // this.touchMoveSidebar = -documentSwiped;
  118. // if (sidebarMovement <= this.container.clientWidth) {
  119. // this.moveSidebar(this.touchMoveSidebar);
  120. // }
  121. };
  122. SidebarJS.prototype.onTouchEnd = function () {
  123. this.component.classList.remove(isMoving);
  124. Math.abs(this.touchMoveSidebar) > (this.container.clientWidth / 3.5) ? this.close() : this.open();
  125. this.container.removeAttribute('style');
  126. this.background.removeAttribute('style');
  127. delete this.initialTouch;
  128. delete this.touchMoveSidebar;
  129. };
  130. SidebarJS.prototype.moveSidebar = function (movement) {
  131. this.component.classList.add(isMoving);
  132. SidebarJS.vendorify(this.container, 'transform', "translate(" + movement + "px, 0)");
  133. this.changeBackgroundOpacity(movement);
  134. };
  135. SidebarJS.prototype.changeBackgroundOpacity = function (movement) {
  136. var opacity = 0.3 - (Math.abs(movement) / (this.container.clientWidth * 3.5));
  137. this.background.style.opacity = (opacity).toString();
  138. };
  139. SidebarJS.prototype.onSwipeOpenStart = function (e) {
  140. if (this.targetElementIsBackground(e)) {
  141. return;
  142. }
  143. var clientWidth = document.body.clientWidth;
  144. var touchPositionX = (isTouch ? e.touches[0].clientX : e.clientX);
  145. var documentTouch = this.hasLeftPosition() ? touchPositionX : clientWidth - touchPositionX;
  146. if (documentTouch < this.documentSwipeRange) {
  147. this.onTouchStart(e);
  148. }
  149. };
  150. SidebarJS.prototype.onSwipeOpenMove = function (e) {
  151. if (!this.targetElementIsBackground(e) && this.initialTouch && !this.isVisible()) {
  152. var documentSwiped = (isTouch ? e.touches[0].clientX : e.clientX) - this.initialTouch;
  153. var sidebarMovement = this.getSidebarPosition(documentSwiped);
  154. if (sidebarMovement > 0) {
  155. SidebarJS.vendorify(this.component, 'transform', 'translate(0, 0)');
  156. SidebarJS.vendorify(this.component, 'transition', 'none');
  157. this.openMovement = sidebarMovement * (this.hasLeftPosition() ? -1 : 1);
  158. this.moveSidebar(this.openMovement);
  159. }
  160. }
  161. };
  162. SidebarJS.prototype.onSwipeOpenEnd = function () {
  163. if (this.openMovement) {
  164. delete this.openMovement;
  165. this.component.removeAttribute('style');
  166. this.onTouchEnd();
  167. }
  168. };
  169. SidebarJS.prototype.getSidebarPosition = function (swiped) {
  170. return (this.container.clientWidth - (this.hasLeftPosition() ? swiped : -swiped));
  171. };
  172. SidebarJS.prototype.targetElementIsBackground = function (e) {
  173. var touchedElement = e.target;
  174. return touchedElement.hasAttribute(sidebarjs + "-background");
  175. };
  176. SidebarJS.create = function (element) {
  177. var el = document.createElement('div');
  178. el.setAttribute(element, '');
  179. return el;
  180. };
  181. SidebarJS.vendorify = function (el, prop, val) {
  182. var Prop = prop.charAt(0).toUpperCase() + prop.slice(1);
  183. var prefs = ['Moz', 'Webkit', 'O', 'ms'];
  184. el.style[prop] = val;
  185. for (var i = 0; i < prefs.length; i++) {
  186. el.style[prefs[i] + Prop] = val;
  187. }
  188. return el;
  189. };
  190. SidebarJS.elemHasListener = function (elem, value) {
  191. return elem && (value === true || value === false) ? elem.sidebarjsListener = value : !!elem.sidebarjsListener;
  192. };
  193. Object.defineProperty(SidebarJS, "version", {
  194. get: function () {
  195. return '2.2.0';
  196. },
  197. enumerable: true,
  198. configurable: true
  199. });
  200. return SidebarJS;
  201. }());
  202. exports.default = SidebarJS;
  203. });
  204. var sidebarjs = unwrapExports(sidebarjs_1);
  205. return sidebarjs;
  206. })));