ENV-97 ENV-98 ENV-104 Remove last jQuery dependencies

packages/envision-docs/src/pages/components/range-slider.md

@@ -96,34 +96,31 @@ envision.rangeSlider('#my-slider', {
 
 ## Events
 
-### slide
+Available events: `slide` and `slidestop`.
 
-Triggered for every move during slide.
+<span class="env-badge env-badge--danger">Removed</span> jQuery Events are removed from 2023.09.1.
 
 ```javascript
-$('#my-slider').on('slide', function (e, data) {
- // Do something...
+document.querySelector('#my-slider').addEventListener('slide', function (e) {
+ // Triggered for every move during slide.
+ console.log('slide', e.detail);
 });
 
-$('#my-slider').envRangeSlider({
- slide: function (e, data) {
+document
+ .querySelector('#my-slider')
+ .addEventListener('slidestop', function (e) {
+ // Triggered when slide is completed
+ console.log('slidestop', e.detail);
+ });
+
+envision.rangeSlider({
+ slide: function (e) {
  // Do something...
+ console.log('slide', e.detail);
  },
-});
-```
-
-### slidestop
-
-Triggered when slide is completed
-
-```javascript
-$('#my-slider').on('slidestop', function (e, data) {
- // Do something...
-});
-
-$('#my-slider').envRangeSlider({
- slidestop: function (e, data) {
+ slidestop: function (e) {
  // Do something...
+ console.log('slidestop', e.detail);
  },
 });
 ```

packages/envision/src/js/accordion.js

@@ -5,61 +5,84 @@
  */
 import $ from 'jquery';
 import CssUtil from './util/css-util';
-import { getNodes } from './util/nodes';
+import { getNode, getNodes, show } from './util/nodes';
 import Util from './util/util';
+import { slideDown, slideUp } from './util/slideToggle';
 
 const ARIA_EXPANDED = 'aria-expanded';
+const DATA_EXPANDED = 'data-expanded';
 const DURATION_CUSTOM_PROP = '--env-collapse-toggle-duration';
 const MODIFIER_BASE = 'env-accordion--';
 const NAME = 'envAccordion';
 const SHOW = MODIFIER_BASE + 'show';
-const PARENT = 'data-parent';
+const TOGGLER_ATTR = '[data-env-accordion]';
 
 class Accordion {
  constructor(element) {
  this.el = element;
- this.$el = $(element);
- if (this.$el.hasClass(SHOW)) {
- this.$el.removeClass(SHOW).attr(ARIA_EXPANDED, 'true').show();
+ this.parentEl = getNode(this.el.dataset.parent);
+ this.togglerEl =
+ this.parentEl &&
+ getNode(
+ `${TOGGLER_ATTR}[aria-controls="${this.el.id}"]`,
+ this.parentEl
+ );
+
+ if (this.el.classList.contains(SHOW)) {
+ this.el.classList.remove(SHOW);
+ this.el.setAttribute(DATA_EXPANDED, 'true');
+ show(this.el);
+
+ if (this.togglerEl) {
+ this.togglerEl.setAttribute(ARIA_EXPANDED, 'true');
+ }
  }
- this.speed = CssUtil.getToggleSpeed(this.$el[0], DURATION_CUSTOM_PROP);
+
+ this.speed = CssUtil.getToggleSpeed(this.el, DURATION_CUSTOM_PROP);
  }
 
  toggle() {
- if (this.$el.attr(ARIA_EXPANDED) === 'true') {
+ if (this.el.getAttribute(DATA_EXPANDED) === 'true') {
  this.hide();
  } else {
  this.show();
  }
  }
 
  show() {
- $(this.$el.attr(PARENT))
- .find(`[${ARIA_EXPANDED}="true"]`)
- .each(
- ((i, el) => {
- this._hide($(el), this.speed);
- }).bind(this)
- );
- this.$el.attr(ARIA_EXPANDED, true).stop().slideDown(this.speed);
+ if (this.parentEl) {
+ getNodes(`[${DATA_EXPANDED}="true"]`, this.parentEl).forEach((el) => {
+ if (!el.isEqualNode(this.el)) {
+ this._hide(el, this.speed);
+ }
+ });
+ }
+ if (this.togglerEl) {
+ this.togglerEl.setAttribute(ARIA_EXPANDED, 'true');
+ }
+ this.el.setAttribute(DATA_EXPANDED, 'true');
+ slideDown(this.el, this.speed);
  }
 
  hide() {
- this._hide(this.$el, this.speed);
+ this._hide(this.el, this.speed);
  }
 
- _hide($el, speed) {
- $el.attr(ARIA_EXPANDED, false)
- .stop()
- .slideUp(speed, () => {
- $el.removeClass(SHOW);
- });
+ _hide(el, speed) {
+ if (this.togglerEl) {
+ this.togglerEl.setAttribute(ARIA_EXPANDED, 'false');
+ }
+ el.setAttribute(DATA_EXPANDED, 'false');
+ slideUp(el, speed);
+ setTimeout(() => {
+ el.classList.remove(SHOW);
+ }, speed);
  }
 
  static _init(elements, settings) {
  const nodes = getNodes(elements);
  if (nodes.length > 0) {
- const accordions = nodes.map((node) => {
+ return nodes.map((node) => {
  if (!node[NAME]) {
  node[NAME] = new Accordion(node);
  }
@@ -73,7 +96,6 @@ class Accordion {
  }
  return node[NAME];
  });
- return accordions;
  }
  }
 
@@ -98,7 +120,7 @@ if (typeof document !== 'undefined') {
  };
 
  document.addEventListener('click', (e) => {
- const el = e.target.closest('[data-env-accordion]');
+ const el = e.target.closest(TOGGLER_ATTR);
  if (!el) {
  return;
  }

packages/envision/src/js/collapse.js

@@ -6,66 +6,67 @@
 
 import $ from 'jquery';
 import CssUtil from './util/css-util';
-import { getNodes } from './util/nodes';
+import { getNode, getNodes, show } from './util/nodes';
 import Util from './util/util';
+import { slideDown, slideUp } from './util/slideToggle';
 
 const ARIA_EXPANDED = 'aria-expanded';
-const MODIFIER_BASE = 'env-collapse--';
 const DURATION_CUSTOM_PROP = '--env-collapse-toggle-duration';
 const NAME = 'envCollapse';
-const EXPANDED = MODIFIER_BASE + 'expanded';
-const SHOW = MODIFIER_BASE + 'show';
+const EXPANDED = 'env-collapse--expanded';
+const SHOW = 'env-collapse--show';
 
 class Collapse {
  constructor(element) {
  this.el = element;
- this.$el = $(element);
- this.$trigger = $(
+ this.togglerEl = getNode(
  `[data-env-collapse][href="#${element.id}"], [data-env-collapse][data-target="#${element.id}"]`
  );
- if (this.$el.hasClass(SHOW)) {
- this.$el.show();
- this.$trigger.addClass(EXPANDED).attr(ARIA_EXPANDED, true);
+
+ if (this.el.classList.contains(SHOW)) {
+ show(this.el);
+ this.togglerEl.classList.add(EXPANDED);
+ this.togglerEl.setAttribute(ARIA_EXPANDED, 'true');
  }
- this.speed = CssUtil.getToggleSpeed(
- this.$trigger[0],
- DURATION_CUSTOM_PROP
- );
+ this.speed = CssUtil.getToggleSpeed(this.togglerEl, DURATION_CUSTOM_PROP);
  }
 
  toggle() {
- if (this.$el.is(':animated')) {
+ if (this.el.getAnimations().length > 0) {
+ // Animation in progress
  return;
- } else if (this.$el.hasClass(SHOW)) {
+ }
+ if (this.el.classList.contains(SHOW)) {
  this.hide();
  } else {
  this.show();
  }
  }
 
  show() {
- if (this.$trigger.length) {
- this.$trigger.addClass(EXPANDED).attr(ARIA_EXPANDED, true);
+ if (this.togglerEl) {
+ this.togglerEl.classList.add(EXPANDED);
+ this.togglerEl.setAttribute(ARIA_EXPANDED, 'true');
  }
- this.$el.stop().slideDown(this.speed).addClass(SHOW);
+ this.el.classList.add(SHOW);
+ slideDown(this.el, this.speed);
  }
 
  hide() {
- if (this.$trigger.length) {
- this.$trigger.removeClass(EXPANDED).attr(ARIA_EXPANDED, false);
+ if (this.togglerEl) {
+ this.togglerEl.classList.remove(EXPANDED);
+ this.togglerEl.setAttribute(ARIA_EXPANDED, 'false');
  }
- this.$el.stop().slideUp(
- this.speed,
- function () {
- this.$el.removeClass(SHOW);
- }.bind(this)
- );
+ slideUp(this.el, this.speed);
+ setTimeout(() => {
+ this.el.classList.remove(SHOW);
+ }, this.speed);
  }
 
  static _init(elements, settings) {
  const nodes = getNodes(elements);
  if (nodes.length > 0) {
- const collapses = nodes.map((node) => {
+ return nodes.map((node) => {
  if (!node[NAME]) {
  node[NAME] = new Collapse(node);
  }
@@ -79,7 +80,6 @@ class Collapse {
  }
  return node[NAME];
  });
- return collapses;
  }
  }
 

packages/envision/src/js/dropdown.js

@@ -3,7 +3,7 @@
  * Licensed under MIT https://github.com/sitevision/envision/blob/master/LICENSE
  * --------------------------------------------------------------------------
  */
-import { getNodes, hide, unhide } from './util/nodes';
+import { getNodes, hide, resetDisplay } from './util/nodes';
 import { getPopper } from './util/popper';
 
 const ENV_DROPDOWN_OPEN = 'env-is-open';
@@ -47,7 +47,7 @@ class Dropdown {
  if (this.placementBody) {
  document.body.appendChild(this.menu);
  }
- unhide(this.menu);
+ resetDisplay(this.menu);
  this._bindEvents();
  getPopper().then((createPopper) => {
  this._popper = createPopper(this.container, this.menu, {

packages/envision/src/js/image-slider.js

@@ -322,19 +322,17 @@ class Imageslider {
  this.el.addEventListener(Events.MOUSEENTER, (e) => this.pause(e));
  this.el.addEventListener(Events.MOUSELEAVE, (e) => this.cycle(e));
 
- if (CssUtil.isTouch()) {
- this.el.addEventListener(Events.TOUCHEND, () => {
- this.pause();
- if (this.touchTimeout) {
- clearTimeout(this.touchTimeout);
- }
- this.touchTimeout = setTimeout(
- (e) => this.cycle(e),
- TOUCHEVENT_WAIT,
- this.#config.interval
- );
- });
- }
+ this.el.addEventListener(Events.TOUCHEND, () => {
+ this.pause();
+ if (this.touchTimeout) {
+ clearTimeout(this.touchTimeout);
+ }
+ this.touchTimeout = setTimeout(
+ (e) => this.cycle(e),
+ TOUCHEVENT_WAIT,
+ this.#config.interval
+ );
+ });
  }
  if (this.#config.swipe) {
  this._bindTouchSlider();

packages/envision/src/js/image-viewer/image-viewer-2-lightbox.js

@@ -13,7 +13,7 @@ import {
  isVisible,
  lockScroll,
  setStyle,
- unhide,
+ resetDisplay,
  unlockScroll,
 } from '../util/nodes';
 
@@ -268,12 +268,12 @@ export default class Imageviewer2Lightbox {
  if (n === 1 || (i === 0 && n > 1)) {
  hide(getNode('[data-move="prev"]', this.#lightbox));
  } else {
- unhide(getNode('[data-move="prev"]', this.#lightbox));
+ resetDisplay(getNode('[data-move="prev"]', this.#lightbox));
  }
  if (n === 1 || (i === n - 1 && n > 1)) {
  hide(getNode('[data-move="next"]', this.#lightbox));
  } else {
- unhide(getNode('[data-move="next"]', this.#lightbox));
+ resetDisplay(getNode('[data-move="next"]', this.#lightbox));
  }
  }