← All changes
|
assets/src/js/frontend/course-builder/builder-popup.js
+22
-48
4.4.5
→
4.4.10
View file →
| @@ -459,13 +459,13 @@ | ||
| 459 | 459 | currentItem.replaceWith( newListItem ); |
| 460 | 460 | currentItem = newListItem; |
| 461 | 461 | } |
| 462 | 462 | } else if ( data?.list_item_html && ! currentItem.classList.contains( 'section-item' ) ) { |
| 463 | - const template = document.createElement( 'template' ); | |
| 464 | - template.innerHTML = data.list_item_html.trim(); | |
| 465 | - const newListItem = template.content.firstElementChild; | |
| 466 | - if ( newListItem ) { | |
| 467 | - currentItem.replaceWith( newListItem ); | |
| 463 | + const nextListItem = currentItem.nextElementSibling; | |
| 464 | + currentItem.insertAdjacentHTML( 'afterend', data.list_item_html.trim() ); | |
| 465 | + const newListItem = currentItem.nextElementSibling; | |
| 466 | + if ( newListItem && newListItem !== nextListItem ) { | |
| 467 | + currentItem.remove(); | |
| 468 | 468 | currentItem = newListItem; |
| 469 | 469 | } |
| 470 | 470 | } else { |
| 471 | 471 | // Fallback: manually update elements if HTML replacement isn't used |
| @@ -622,9 +622,10 @@ | ||
| 622 | 622 | item.classList.contains( 'section-item' ) || |
| 623 | 623 | item.classList.contains( `lp-${ type }-item` ) || |
| 624 | 624 | item.classList.contains( 'list-item' ) || |
| 625 | 625 | item.classList.contains( 'cb-list-item' ) || |
| 626 | - item.tagName === 'LI' | |
| 626 | + item.tagName === 'LI' || | |
| 627 | + item.tagName === 'TR' | |
| 627 | 628 | ) { |
| 628 | 629 | foundItems.add( item ); |
| 629 | 630 | } else { |
| 630 | 631 | // If it's a wrapper, like a div in Content Bank |
| @@ -656,17 +657,21 @@ | ||
| 656 | 657 | if ( ! listContainer ) { |
| 657 | 658 | return null; |
| 658 | 659 | } |
| 659 | 660 | |
| 660 | - const template = document.createElement( 'template' ); | |
| 661 | - template.innerHTML = listItemHtml.trim(); | |
| 662 | - const newListItem = template.content.firstElementChild; | |
| 661 | + const emptyRow = listContainer.querySelector( '.cb-list-empty-row' ); | |
| 662 | + const firstListItem = listContainer.firstElementChild; | |
| 663 | + listContainer.insertAdjacentHTML( 'afterbegin', listItemHtml.trim() ); | |
| 664 | + const newListItem = listContainer.firstElementChild; | |
| 663 | 665 | |
| 664 | - if ( ! newListItem ) { | |
| 666 | + if ( ! newListItem || newListItem === firstListItem ) { | |
| 665 | 667 | return null; |
| 666 | 668 | } |
| 667 | 669 | |
| 668 | - listContainer.prepend( newListItem ); | |
| 670 | + if ( emptyRow ) { | |
| 671 | + emptyRow.remove(); | |
| 672 | + } | |
| 673 | + | |
| 669 | 674 | const highlightClassByType = { |
| 670 | 675 | lesson: 'highlight-new-lesson', |
| 671 | 676 | quiz: 'highlight-new-quiz', |
| 672 | 677 | question: 'highlight-new-question', |
| @@ -689,31 +694,18 @@ | ||
| 689 | 694 | return finalListItems && finalListItems.length > 0 ? finalListItems[ 0 ] : newListItem; |
| 690 | 695 | } |
| 691 | 696 | |
| 692 | 697 | /** |
| 693 | - * Find list container for type; create one if tab currently shows empty message. | |
| 698 | + * Find the table body for the requested list type. | |
| 694 | 699 | */ |
| 695 | 700 | findListContainer( type ) { |
| 696 | 701 | const listSelectorByType = { |
| 697 | - lesson: '.cb-list-lesson', | |
| 698 | - quiz: '.cb-list-quiz', | |
| 699 | - question: '.cb-list-question', | |
| 702 | + lesson: '.cb-list-lesson tbody', | |
| 703 | + quiz: '.cb-list-quiz tbody', | |
| 704 | + question: '.cb-list-question tbody', | |
| 700 | 705 | }; |
| 701 | 706 | |
| 702 | - const tabSelectorByType = { | |
| 703 | - lesson: '.courses-builder__lesson-tab', | |
| 704 | - quiz: '.courses-builder__quiz-tab', | |
| 705 | - question: '.courses-builder__question-tab', | |
| 706 | - }; | |
| 707 | - | |
| 708 | - const listClassByType = { | |
| 709 | - lesson: 'cb-list-lesson', | |
| 710 | - quiz: 'cb-list-quiz', | |
| 711 | - question: 'cb-list-question', | |
| 712 | - }; | |
| 713 | - | |
| 714 | - const listSelector = | |
| 715 | - listSelectorByType[ type ] || `.cb-list-${ type }, [data-builder-list="${ type }"]`; | |
| 707 | + const listSelector = listSelectorByType[ type ] || `[data-builder-list="${ type }"]`; | |
| 716 | 708 | if ( ! listSelector ) { |
| 717 | 709 | return null; |
| 718 | 710 | } |
| 719 | 711 | |
| @@ -721,27 +713,9 @@ | ||
| 721 | 713 | if ( existingList ) { |
| 722 | 714 | return existingList; |
| 723 | 715 | } |
| 724 | 716 | |
| 725 | - const tabContainer = document.querySelector( | |
| 726 | - tabSelectorByType[ type ] || `.courses-builder__${ type }-tab, [data-builder-tab="${ type }"]` | |
| 727 | - ); | |
| 728 | - const listClass = listClassByType[ type ] || `cb-list-${ type }`; | |
| 729 | - | |
| 730 | - if ( ! tabContainer || ! listClass ) { | |
| 731 | - return null; | |
| 732 | - } | |
| 733 | - | |
| 734 | - const emptyMessage = tabContainer.querySelector( '.learn-press-message' ); | |
| 735 | - if ( emptyMessage ) { | |
| 736 | - emptyMessage.remove(); | |
| 737 | - } | |
| 738 | - | |
| 739 | - const listContainer = document.createElement( 'ul' ); | |
| 740 | - listContainer.className = listClass; | |
| 741 | - tabContainer.appendChild( listContainer ); | |
| 742 | - | |
| 743 | - return listContainer; | |
| 717 | + return null; | |
| 744 | 718 | } |
| 745 | 719 | |
| 746 | 720 | /** |
| 747 | 721 | * Update element text (input value or textContent) |