Skip to content
Snippets Groups Projects

Issue #3467793 by nicholass, mistrytheory, ckng, gnuschichten, vit.smutny:...

Open Issue #3467793 by nicholass, mistrytheory, ckng, gnuschichten, vit.smutny:...
11 unresolved threads
11 unresolved threads

Issue #3467793 by nicholass, mistrytheory, ckng, gnuschichten, vit.smutny: TypeError: Cannot read properties of undefined (reading 'querySelector')

Closes #3392717

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Justin Toupin added 2 commits

    added 2 commits

    • da4000d2 - Correctly apply moves and accepts error callbacks. Add classes when element is...
    • 211b0791 - Add API for adding / getting LP Sortable instances from global Drupal scope....

    Compare with previous version

  • Justin Toupin added 1 commit

    added 1 commit

    Compare with previous version

  • Justin Toupin added 1 commit

    added 1 commit

    • 1275566c - Refactor LPSortableInstances to use Map() and Set()

    Compare with previous version

  • added 1 commit

    Compare with previous version

  • Arthur Baghdasaryan changed target branch from 2.0.x to 2.1.x

    changed target branch from 2.0.x to 2.1.x

  • Justin Toupin added 2 commits

    added 2 commits

    Compare with previous version

  • Justin Toupin added 3 commits

    added 3 commits

    Compare with previous version

  • Justin Toupin added 1 commit

    added 1 commit

    Compare with previous version

  • Justin Toupin added 1 commit

    added 1 commit

    • 688da725 - Remove references to dragula

    Compare with previous version

  • John Ferris
  • John Ferris
  • 182 180 * @param {jQuery} $element The builder element.
    183 181 */
    184 182 function updateUi($element) {
  • 462 drake.on('over', (el, container) => {
    463 $(container).addClass('drag-target');
    464 });
    465 drake.on('out', (el, container) => {
    466 $(container).removeClass('drag-target');
    454 const id = element.getAttribute('data-lpb-id');
    455 containers.forEach((container) => {
    456 Drupal.LPSortableInstances.add(
    457 id,
    458 new Sortable(container, {
    459 group: `lpb-${id}`,
    460 draggable: '.js-lpb-component',
    461 handle: '.lpb-drag',
    462 animation: 150,
    463 ghostClass: 'sortable-ghost',
    464 onChoose(evt) {
  • 459 group: `lpb-${id}`,
    460 draggable: '.js-lpb-component',
    461 handle: '.lpb-drag',
    462 animation: 150,
    463 ghostClass: 'sortable-ghost',
    464 onChoose(evt) {
    465 evt.item.classList.add('is-dragging');
    466 element.classList.add('is-dragging');
    467 element.classList.add('is-navigating');
    468 },
    469 onUnchoose(evt) {
    470 evt.item.classList.remove('is-dragging');
    471 element.classList.remove('is-dragging');
    472 element.classList.remove('is-navigating');
    473 element
    474 .querySelectorAll('.sortable-to, .sortable-to--disallowed')
  • 465 evt.item.classList.add('is-dragging');
    466 element.classList.add('is-dragging');
    467 element.classList.add('is-navigating');
    468 },
    469 onUnchoose(evt) {
    470 evt.item.classList.remove('is-dragging');
    471 element.classList.remove('is-dragging');
    472 element.classList.remove('is-navigating');
    473 element
    474 .querySelectorAll('.sortable-to, .sortable-to--disallowed')
    475 .forEach((to) => {
    476 to.classList.remove('sortable-to');
    477 to.classList.remove('sortable-to--disallowed');
    478 });
    479 },
    480 onStart: (evt) => {
  • 460 draggable: '.js-lpb-component',
    461 handle: '.lpb-drag',
    462 animation: 150,
    463 ghostClass: 'sortable-ghost',
    464 onChoose(evt) {
    465 evt.item.classList.add('is-dragging');
    466 element.classList.add('is-dragging');
    467 element.classList.add('is-navigating');
    468 },
    469 onUnchoose(evt) {
    470 evt.item.classList.remove('is-dragging');
    471 element.classList.remove('is-dragging');
    472 element.classList.remove('is-navigating');
    473 element
    474 .querySelectorAll('.sortable-to, .sortable-to--disallowed')
    475 .forEach((to) => {
  • 470 evt.item.classList.remove('is-dragging');
    471 element.classList.remove('is-dragging');
    472 element.classList.remove('is-navigating');
    473 element
    474 .querySelectorAll('.sortable-to, .sortable-to--disallowed')
    475 .forEach((to) => {
    476 to.classList.remove('sortable-to');
    477 to.classList.remove('sortable-to--disallowed');
    478 });
    479 },
    480 onStart: (evt) => {
    481 $(element).trigger('lpb-component:drag', [
    482 evt.item.getAttribute('data-uuid'),
    483 ]);
    484 },
    485 onEnd: (evt) => {
  • 454 const id = element.getAttribute('data-lpb-id');
    455 containers.forEach((container) => {
    456 Drupal.LPSortableInstances.add(
    457 id,
    458 new Sortable(container, {
    459 group: `lpb-${id}`,
    460 draggable: '.js-lpb-component',
    461 handle: '.lpb-drag',
    462 animation: 150,
    463 ghostClass: 'sortable-ghost',
    464 onChoose(evt) {
    465 evt.item.classList.add('is-dragging');
    466 element.classList.add('is-dragging');
    467 element.classList.add('is-navigating');
    468 },
    469 onUnchoose(evt) {
  • 476 to.classList.remove('sortable-to');
    477 to.classList.remove('sortable-to--disallowed');
    478 });
    479 },
    480 onStart: (evt) => {
    481 $(element).trigger('lpb-component:drag', [
    482 evt.item.getAttribute('data-uuid'),
    483 ]);
    484 },
    485 onEnd: (evt) => {
    486 reorderComponents(element); // Trigger reordering logic.
    487 $(element).trigger('lpb-component:drop', [
    488 evt.item.getAttribute('data-uuid'),
    489 ]);
    490 },
    491 onMove: (evt) => {
  • 477 to.classList.remove('sortable-to--disallowed');
    478 });
    479 },
    480 onStart: (evt) => {
    481 $(element).trigger('lpb-component:drag', [
    482 evt.item.getAttribute('data-uuid'),
    483 ]);
    484 },
    485 onEnd: (evt) => {
    486 reorderComponents(element); // Trigger reordering logic.
    487 $(element).trigger('lpb-component:drop', [
    488 evt.item.getAttribute('data-uuid'),
    489 ]);
    490 },
    491 onMove: (evt) => {
    492 element.querySelectorAll('.sortable-to').forEach((to) => {
  • 575 635 attachUiElements($(el), settings);
    576 636 });
    577 637
    638 document.querySelectorAll('[data-lpb-id]').forEach((container) => {
  • 582 648 (e) => {
    583 649 const $element = $(e.currentTarget);
    584 650 updateUi($element);
    651 // Remove focus from all `+` buttons after a new component is inserted.
    652 const $addButton = $element.find('.lpb-btn--add:focus');
  • I did a quick code review of the merge request and added a few recommendations. The only critical issues are the ones related to the introduction Array.from() to make sure this works in Safari. I have not actually installed this locally and tested the functionality.

  • Justin Toupin added 1 commit

    added 1 commit

    Compare with previous version

  • Justin Toupin changed target branch from 2.1.x to 2.2.x

    changed target branch from 2.1.x to 2.2.x

  • Please register or sign in to reply
    Loading