You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

113 lines
4.6 KiB

8 months ago
  1. /*!
  2. * Bootstrap scrollbar.js v5.3.3 (https://getbootstrap.com/)
  3. * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  4. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../dom/manipulator.js'), require('../dom/selector-engine.js'), require('./index.js')) :
  8. typeof define === 'function' && define.amd ? define(['../dom/manipulator', '../dom/selector-engine', './index'], factory) :
  9. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Scrollbar = factory(global.Manipulator, global.SelectorEngine, global.Index));
  10. })(this, (function (Manipulator, SelectorEngine, index_js) { 'use strict';
  11. /**
  12. * --------------------------------------------------------------------------
  13. * Bootstrap util/scrollBar.js
  14. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  15. * --------------------------------------------------------------------------
  16. */
  17. /**
  18. * Constants
  19. */
  20. const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
  21. const SELECTOR_STICKY_CONTENT = '.sticky-top';
  22. const PROPERTY_PADDING = 'padding-right';
  23. const PROPERTY_MARGIN = 'margin-right';
  24. /**
  25. * Class definition
  26. */
  27. class ScrollBarHelper {
  28. constructor() {
  29. this._element = document.body;
  30. }
  31. // Public
  32. getWidth() {
  33. // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
  34. const documentWidth = document.documentElement.clientWidth;
  35. return Math.abs(window.innerWidth - documentWidth);
  36. }
  37. hide() {
  38. const width = this.getWidth();
  39. this._disableOverFlow();
  40. // give padding to element to balance the hidden scrollbar width
  41. this._setElementAttributes(this._element, PROPERTY_PADDING, calculatedValue => calculatedValue + width);
  42. // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
  43. this._setElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, calculatedValue => calculatedValue + width);
  44. this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, calculatedValue => calculatedValue - width);
  45. }
  46. reset() {
  47. this._resetElementAttributes(this._element, 'overflow');
  48. this._resetElementAttributes(this._element, PROPERTY_PADDING);
  49. this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING);
  50. this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN);
  51. }
  52. isOverflowing() {
  53. return this.getWidth() > 0;
  54. }
  55. // Private
  56. _disableOverFlow() {
  57. this._saveInitialAttribute(this._element, 'overflow');
  58. this._element.style.overflow = 'hidden';
  59. }
  60. _setElementAttributes(selector, styleProperty, callback) {
  61. const scrollbarWidth = this.getWidth();
  62. const manipulationCallBack = element => {
  63. if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
  64. return;
  65. }
  66. this._saveInitialAttribute(element, styleProperty);
  67. const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty);
  68. element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`);
  69. };
  70. this._applyManipulationCallback(selector, manipulationCallBack);
  71. }
  72. _saveInitialAttribute(element, styleProperty) {
  73. const actualValue = element.style.getPropertyValue(styleProperty);
  74. if (actualValue) {
  75. Manipulator.setDataAttribute(element, styleProperty, actualValue);
  76. }
  77. }
  78. _resetElementAttributes(selector, styleProperty) {
  79. const manipulationCallBack = element => {
  80. const value = Manipulator.getDataAttribute(element, styleProperty);
  81. // We only want to remove the property if the value is `null`; the value can also be zero
  82. if (value === null) {
  83. element.style.removeProperty(styleProperty);
  84. return;
  85. }
  86. Manipulator.removeDataAttribute(element, styleProperty);
  87. element.style.setProperty(styleProperty, value);
  88. };
  89. this._applyManipulationCallback(selector, manipulationCallBack);
  90. }
  91. _applyManipulationCallback(selector, callBack) {
  92. if (index_js.isElement(selector)) {
  93. callBack(selector);
  94. return;
  95. }
  96. for (const sel of SelectorEngine.find(selector, this._element)) {
  97. callBack(sel);
  98. }
  99. }
  100. }
  101. return ScrollBarHelper;
  102. }));
  103. //# sourceMappingURL=scrollbar.js.map