MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
Line 10: Line 10:
     });
     });


    // Loop through each card to format related articles
    cards.each(function() {
        // Check if the card has related articles
        var relatedArticles = $(this).find('.related-articles');
        if (relatedArticles.length > 0) {
            // Get all the related article elements
            var relatedArticleElements = relatedArticles.find('.related-article');
            // Create an array to store unique related articles
            var uniqueArticles = [];
            // Loop through each related article element
            relatedArticleElements.each(function() {
                // Remove <p> tags from the article
                $(this).find('p').remove();
                // Convert the article HTML to a string
                var articleHTML = $(this)[0].outerHTML;
                // Check if the article HTML already exists in the uniqueArticles array
                if ($.inArray(articleHTML, uniqueArticles) === -1) {
                    // If it doesn't exist, add it to the uniqueArticles array
                    uniqueArticles.push(articleHTML);
                }
            });
            // Clear the content of the related articles container
            relatedArticles.empty();
            // Append the unique related articles back to the container
            relatedArticles.append(uniqueArticles.join(''));
        }
    });
   
     // Utility Functions
     // Utility Functions
     function sortChronologically() {
     function sortChronologically() {
Line 676: Line 642:
     });
     });
      
      
    $('#filters .values button').click(function() {
$('#filters .values button').click(function() {
         console.log("Filter is clicked!!!");
         console.log("Filter is clicked!!!");
        $(this).toggleClass('active');
$(this).toggleClass('active');
        filterCards(); // Re-apply the filters based on the updated active buttons
filterCards(); // Re-apply the filters based on the updated active buttons


         updateLastVisibleCard();
         updateLastVisibleCard();
Line 686: Line 652:
         updateViews();
         updateViews();
         updateCardEventBorders();
         updateCardEventBorders();
    });
});


     $(window).on('scroll', function() {
     $(window).on('scroll', function() {
Line 699: Line 665:
     });
     });
      
      
   
     // MODAL ARTICLE  ---------------------  SECTION //
     // MODAL ARTICLE  ---------------------  SECTION //
     // Format paragraphs
     // Format paragraphs
     function formatParagraphs(text) {
     function formatParagraphs(text) {
        var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
    var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
        return paragraphs.map(function (p) { return '<p>' + p.trim() + '</p>'; }).join('');
    return paragraphs.map(function (p) { return '<p>' + p.trim() + '</p>'; }).join('');
    }
}


     var images = []; // Initialize an empty array to store the images
     var images = []; // Initialize an empty array to store the images
Line 775: Line 741:
     }
     }
      
      
    $('.caption-image1').each(function() {
$('.caption-image1').each(function() {
         // Split the caption at each <br> tag and wrap each line in a span
         // Split the caption at each <br> tag and wrap each line in a span
         var htmlContent = $(this).html();
         var htmlContent = $(this).html();
Line 787: Line 753:
      
      
     function setShowArticleRotationEffect() {
     function setShowArticleRotationEffect() {
        const offset = 20;
const offset = 20;
        const showArticle = document.querySelector('#show-article');
const showArticle = document.querySelector('#show-article');
        const h = showArticle.clientHeight;
    const h = showArticle.clientHeight;
        const theta = -Math.atan(offset/h);
    const theta = -Math.atan(offset/h);
        const a = Math.cos(theta);
const a = Math.cos(theta);
        const b = Math.sin(theta);
const b = Math.sin(theta);
        const c = -Math.sin(theta);
const c = -Math.sin(theta);
        const d = Math.cos(theta);
const d = Math.cos(theta);
        const showArticleBefore = document.querySelector('#show-article-before');
const showArticleBefore = document.querySelector('#show-article-before');
        const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
        showArticleBefore.style.transform = transformValue;
showArticleBefore.style.transform = transformValue;
    }
}


     function openEvent(element, event) {
     function openEvent(element, event) {
Line 813: Line 779:
         event.stopPropagation(); // Prevent the event from bubbling up
         event.stopPropagation(); // Prevent the event from bubbling up
         console.log("openModal function called.");
         console.log("openModal function called.");
        var isRelatedArticle = $(cardElement).hasClass('related-article');
    var isRelatedArticle = $(cardElement).hasClass('related-article');
        showArticleWrapper.css('display', 'block');
    showArticleWrapper.css('display', 'block');


        // Clear existing content in modal
    // Clear existing content in modal
        $('#article-title').empty();
    $('#article-title').empty();
        $('#article-content').empty();
    $('#article-content').empty();
       
   
        if (isRelatedArticle) {
    if (isRelatedArticle) {
             // Handle card elements (existing logic)
             // Handle card elements (existing logic)
            var cardImages = [];
        var cardImages = [];
            for (var i = 1; i <= 5; i++) {
        for (var i = 1; i <= 5; i++) {
                var imageClass = '.related-article-image' + i;
            var imageClass = '.related-article-image' + i;
                var captionClass = '.related-article-caption-image' + i;
            var captionClass = '.related-article-caption-image' + i;
                var imageElem = $(cardElement).find(imageClass + ' img');
            var imageElem = $(cardElement).find(imageClass + ' img');
   
                if (imageElem.length) {
            if (imageElem.length) {
                    var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
                var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
                    cardImages.push({
                cardImages.push({
                        link: $(cardElement).find(imageClass + ' a').attr('href'),
                    link: $(cardElement).find(imageClass + ' a').attr('href'),
                        src: imageElem.attr('src'),
                    src: imageElem.attr('src'),
                        alt: imageElem.attr('alt'),
                    alt: imageElem.attr('alt'),
                        caption: captionText,
                    caption: captionText,
                        captionClass: 'related-article-caption-image' + i
                    captionClass: 'related-article-caption-image' + i
                    });
                });
                }
            }
            }
        }
           
       
            if (cardImages.length > 1) {
        if (cardImages.length > 1) {
                setupImageToggle(cardImages);
            setupImageToggle(cardImages);
            }
        }
            // Handle related-article elements
        // Handle related-article elements
            var entryNumber = $(cardElement).find('.related-article-entry-number').text();
        var entryNumber = $(cardElement).find('.related-article-entry-number').text();
            var peopleHtml = $(cardElement).find('.related-article-people').html();
        var peopleHtml = $(cardElement).find('.related-article-people').html();
            var title = $(cardElement).find('.related-article-title').text();
        var title = $(cardElement).find('.related-article-title').text();
            var typeHtml = $(cardElement).find('.related-article-type').html();
        var typeHtml = $(cardElement).find('.related-article-type').html();
             var externalPdfURL = $(cardElement).find('.related-article-pdf a').attr('href');       
             var externalPdfURL = $(cardElement).find('.related-article-pdf a').attr('href');       
            var externalLinkURL = $(cardElement).find('.related-article-link a').attr('href');
        var externalLinkURL = $(cardElement).find('.related-article-link a').attr('href');
            var entity = $(cardElement).find('.related-article-entity').text();
        var entity = $(cardElement).find('.related-article-entity').text();
            var discipline = $(cardElement).find('.related-article-discipline').text();
        var discipline = $(cardElement).find('.related-article-discipline').text();
            var subject = $(cardElement).find('.related-article-subject').text();
        var subject = $(cardElement).find('.related-article-subject').text();
            var description = $(cardElement).find('.related-article-description').html();
        var description = $(cardElement).find('.related-article-description').html();
            var reflection = $(cardElement).find('.related-article-reflection').html();
        var reflection = $(cardElement).find('.related-article-reflection').html();
            var quote = $(cardElement).find('.related-article-quote').text();
        var quote = $(cardElement).find('.related-article-quote').text();
            var modificationDate = $(cardElement).find('.related-article-modification-date').text();
        var modificationDate = $(cardElement).find('.related-article-modification-date').text();


            // Update modal content for related-article
        // Update modal content for related-article
             $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
             $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
            var articleContentHtml = '<div class="article-title-link">';
        var articleContentHtml = '<div class="article-title-link">';
            articleContentHtml += '<p class="article-title">' + title + '</p>';
        articleContentHtml += '<p class="article-title">' + title + '</p>';
             // Create a div that will wrap the links
             // Create a div that will wrap the links
             articleContentHtml += '<div class="link-pdf">';
             articleContentHtml += '<div class="link-pdf">';
Line 873: Line 839:
             // Close the .link-pdf div
             // Close the .link-pdf div
             articleContentHtml += '</div>';
             articleContentHtml += '</div>';
            articleContentHtml += '</div>'; // Close the container div
        articleContentHtml += '</div>'; // Close the container div
   
            // Append type, entity, discipline, and subject details
        // Append type, entity, discipline, and subject details
            articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
        articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
            '<div class="article-metadata">' +
        '<div class="article-metadata">' +
                '<div class="article-metadata-column">' +
            '<div class="article-metadata-column">' +
                    '<p class="article-metadata-label">Entity</p>' +
                '<p class="article-metadata-label">Entity</p>' +
                    '<p class="article-metadata-value">' + entity + '</p>' +
                '<p class="article-metadata-value">' + entity + '</p>' +
                '</div>' +
            '</div>' +
                '<div class="article-metadata-column">' +
            '<div class="article-metadata-column">' +
                    '<p class="article-metadata-label">Discipline</p>' +
                '<p class="article-metadata-label">Discipline</p>' +
                    '<p class="article-metadata-value">' + discipline + '</p>' +
                '<p class="article-metadata-value">' + discipline + '</p>' +
                '</div>' +
            '</div>' +
                '<div class="article-metadata-column">' +
            '<div class="article-metadata-column">' +
                    '<p class="article-metadata-label">Subject(s)</p>' +
                '<p class="article-metadata-label">Subject(s)</p>' +
                    '<p class="article-metadata-value">' + subject + '</p>' +
                '<p class="article-metadata-value">' + subject + '</p>' +
                '</div>' +
            '</div>' +
            '</div>';
        '</div>';


             // Add images if any
             // Add images if any
Line 901: Line 867:
                     '</div>';
                     '</div>';
             }
             }
            // Add non-image content (description, reflection, etc.)     
// Add non-image content (description, reflection, etc.)     
            articleContentHtml +=  
articleContentHtml +=  
            (description ? '<p class="article-label-description">Description</p>' +
    (description ? '<p class="article-label-description">Description</p>' +
            '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
    '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
            (reflection ? '<p class="article-label-reflection">Reflection</p>' +
    (reflection ? '<p class="article-label-reflection">Reflection</p>' +
            '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
    '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
            (quote ? '<p class="article-label-quote">Quote</p>' +
    (quote ? '<p class="article-label-quote">Quote</p>' +
            '<p class="article-quote">' + quote + '</p>' : '') +
    '<p class="article-quote">' + quote + '</p>' : '') +
            '<p class="article-label-modification-date">Added on</p>' +
    '<p class="article-label-modification-date">Added on</p>' +
            '<div class="article-modification-date">' + modificationDate + '</div>';
    '<div class="article-modification-date">' + modificationDate + '</div>';
      
      
            $('#article-content').html(articleContentHtml);
        $('#article-content').html(articleContentHtml);


        } else {
    } else {
            // Handle card elements (existing logic)
        // Handle card elements (existing logic)
            var cardImages = [];
        var cardImages = [];
            for (var i = 1; i <= 5; i++) {
        for (var i = 1; i <= 5; i++) {
                var imageClass = '.image' + i;
            var imageClass = '.image' + i;
                var captionClass = '.caption-image' + i;
            var captionClass = '.caption-image' + i;
                var imageElem = $(cardElement).find(imageClass + ' img');
            var imageElem = $(cardElement).find(imageClass + ' img');
   
                if (imageElem.length) {
            if (imageElem.length) {
                    var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
                var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
                    cardImages.push({
                cardImages.push({
                        link: $(cardElement).find(imageClass + ' a').attr('href'),
                    link: $(cardElement).find(imageClass + ' a').attr('href'),
                        src: imageElem.attr('src'),
                    src: imageElem.attr('src'),
                        alt: imageElem.attr('alt'),
                    alt: imageElem.attr('alt'),
                        caption: captionText,
                    caption: captionText,
                        captionClass: 'caption-image' + i
                    captionClass: 'caption-image' + i
                    });
                });
                }
            }
            }
        }
           
       
            if (cardImages.length > 1) {
        if (cardImages.length > 1) {
                setupImageToggle(cardImages);
            setupImageToggle(cardImages);
            }
        }
            var entryNumber = $(cardElement).find('.entry-number').text();
        var entryNumber = $(cardElement).find('.entry-number').text();
            var title = $(cardElement).find('.title').text();
        var title = $(cardElement).find('.title').text();
            var peopleHtml = $(cardElement).find('.people').html();
        var peopleHtml = $(cardElement).find('.people').html();
            var typeHtml = $(cardElement).find('.type').html();  
        var typeHtml = $(cardElement).find('.type').html();  
             var externalPdfURL = $(cardElement).find('.pdf a').attr('href');       
             var externalPdfURL = $(cardElement).find('.pdf a').attr('href');       
            var externalLinkURL = $(cardElement).find('.link a').attr('href');
        var externalLinkURL = $(cardElement).find('.link a').attr('href');
            var entity = $(cardElement).find('.entity').text();
        var entity = $(cardElement).find('.entity').text();
            var discipline = $(cardElement).find('.discipline').text();
        var discipline = $(cardElement).find('.discipline').text();
            var subject = $(cardElement).find('.subject').text();
        var subject = $(cardElement).find('.subject').text();
            var description = $(cardElement).find('.description').html();
        var description = $(cardElement).find('.description').html();
            var reflection = $(cardElement).find('.reflection').html();
        var reflection = $(cardElement).find('.reflection').html();
            var quote = $(cardElement).find('.quote').text();
        var quote = $(cardElement).find('.quote').text();
             var externalReferenceHtml = $(cardElement).find('.external-reference').html();
             var externalReferenceHtml = $(cardElement).find('.external-reference').html();
            var modificationDate = $(cardElement).find('.modification-date').text();
        var modificationDate = $(cardElement).find('.modification-date').text();
            var relatedArticlesHtml = $(cardElement).find('.related-articles').html();
        var relatedArticlesHtml = $(cardElement).find('.related-articles').html();
   
            $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
        $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');


             var articleContentHtml = '<div class="article-title-link">';
             var articleContentHtml = '<div class="article-title-link">';
Line 969: Line 935:
             articleContentHtml += '</div>';
             articleContentHtml += '</div>';
             articleContentHtml += '</div>'; // Close the new div
             articleContentHtml += '</div>'; // Close the new div
   
            // Append type, entity, discipline, and subject details
        // Append type, entity, discipline, and subject details
            articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
        articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
            '<div class="article-metadata">' +
        '<div class="article-metadata">' +
                '<div class="article-metadata-column">' +
            '<div class="article-metadata-column">' +
                    '<p class="article-metadata-label">Entity</p>' +
                '<p class="article-metadata-label">Entity</p>' +
                    '<p class="article-metadata-value">' + entity + '</p>' +
                '<p class="article-metadata-value">' + entity + '</p>' +
                '</div>' +
            '</div>' +
                '<div class="article-metadata-column">' +
            '<div class="article-metadata-column">' +
                    '<p class="article-metadata-label">Discipline</p>' +
                '<p class="article-metadata-label">Discipline</p>' +
                    '<p class="article-metadata-value">' + discipline + '</p>' +
                '<p class="article-metadata-value">' + discipline + '</p>' +
                '</div>' +
            '</div>' +
                '<div class="article-metadata-column">' +
            '<div class="article-metadata-column">' +
                    '<p class="article-metadata-label">Subject(s)</p>' +
                '<p class="article-metadata-label">Subject(s)</p>' +
                    '<p class="article-metadata-value">' + subject + '</p>' +
                '<p class="article-metadata-value">' + subject + '</p>' +
                '</div>' +
            '</div>' +
            '</div>';
        '</div>';
            // Add images if any
        // Add images if any
             if (cardImages.length > 0) {
             if (cardImages.length > 0) {
                 var initialImage = cardImages[0]; // Use the first image initially
                 var initialImage = cardImages[0]; // Use the first image initially
Line 995: Line 961:
                     '</div>';
                     '</div>';
             }
             }
            // Add non-image content (description, reflection, etc.)     
        // Add non-image content (description, reflection, etc.)     
            articleContentHtml +=  
articleContentHtml +=  
            (description ? '<p class="article-label-description">Description</p>' +
    (description ? '<p class="article-label-description">Description</p>' +
            '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
    '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
            (reflection ? '<p class="article-label-reflection">Reflection</p>' +
    (reflection ? '<p class="article-label-reflection">Reflection</p>' +
            '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
    '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
             (externalReferenceHtml ? '<p class="article-label-external-reference">References</p>' +
             (externalReferenceHtml ? '<p class="article-label-external-reference">References</p>' +
            '<p class="article-external-reference">' + externalReferenceHtml + '</p>' : '') +
    '<p class="article-external-reference">' + externalReferenceHtml + '</p>' : '') +
            (quote ? '<p class="article-label-quote">Quote</p>' +
    (quote ? '<p class="article-label-quote">Quote</p>' +
            '<p class="article-quote">' + quote + '</p>' : '') +
    '<p class="article-quote">' + quote + '</p>' : '') +
            '<p class="article-label-modification-date">Added on</p>' +
    '<p class="article-label-modification-date">Added on</p>' +
            '<div class="article-modification-date">' + modificationDate + '</div>';
    '<div class="article-modification-date">' + modificationDate + '</div>';
   
            $('#article-content').html(articleContentHtml);
        $('#article-content').html(articleContentHtml);
            $('#related-articles').html(relatedArticlesHtml);
        $('#related-articles').html(relatedArticlesHtml);
   
            if (relatedArticlesHtml && relatedArticlesHtml.trim().length > 0) {
        if (relatedArticlesHtml && relatedArticlesHtml.trim().length > 0) {
                $('#related-articles').html('<div class="related-articles-label">Related Articles</div><div class="related-articles-container">' + relatedArticlesHtml + '</div>').show();
            $('#related-articles').html('<div class="related-articles-label">Related Articles</div><div class="related-articles-container">' + relatedArticlesHtml + '</div>').show();
            }  
        }  
        }
    }


         // Check which view is active and set the width accordingly
         // Check which view is active and set the width accordingly
        if ($('.home-chronicle-list').is(':visible')) {
    if ($('.home-chronicle-list').is(':visible')) {
             $('.home-list-view').each(function() {
             $('.home-list-view').each(function() {
                 var currentWidth = $(this).width();  // Get the current width
                 var currentWidth = $(this).width();  // Get the current width
Line 1,030: Line 996:
                 $(this).css('left', '85%');
                 $(this).css('left', '85%');
             });
             });
        } else if ($('.home-chronicle-block').is(':visible')) {
    } else if ($('.home-chronicle-block').is(':visible')) {
             $('.home-chronicle-block div.list-container').each(function() {
             $('.home-chronicle-block div.list-container').each(function() {
                 var currentWidth = $(this).width();  // Get the current width
                 var currentWidth = $(this).width();  // Get the current width
Line 1,041: Line 1,007:
         }
         }


        // Apply the fade-out effect to both #list and #list-list elements
    // Apply the fade-out effect to both #list and #list-list elements
        $('.list-container').addClass('fade-out');
    $('.list-container').addClass('fade-out');


     }
     }


     // closeModal function
     // closeModal function
    function closeModal() {
function closeModal() {
         if ($('.home-chronicle-list').is(':visible')) {
         if ($('.home-chronicle-list').is(':visible')) {
             $('.home-list-view').css('width', '100%');
             $('.home-list-view').css('width', '100%');
             $('.home-chronicle-list div.list-container div.card div.type').css('left', '90%');
             $('.home-chronicle-list div.list-container div.card div.type').css('left', '90%');
        } else if ($('.home-chronicle-block').is(':visible')) {
    } else if ($('.home-chronicle-block').is(':visible')) {
             updateWidthBlockView();
             updateWidthBlockView();
         }
         }
        showArticleWrapper.hide();
    showArticleWrapper.hide();
    }
}


     $('.card').on('click', function(event) {
     $('.card').on('click', function(event) {
Line 1,083: Line 1,049:


     // Close modal with Close button
     // Close modal with Close button
    $('#close-button').on('click', function () {
$('#close-button').on('click', function () {
        $('.list-container').removeClass('fade-out');
    $('.list-container').removeClass('fade-out');
        closeModal();
    closeModal();
    });
});


     // Close modal and remove fade out also when clicking outside of card
     // Close modal and remove fade out also when clicking outside of card
Line 1,094: Line 1,060:
          
          
         if (!areFiltersActive) {
         if (!areFiltersActive) {
            if (isOutsideWrapper && !isOnCard) {
        if (isOutsideWrapper && !isOnCard) {
                $('.list-container').removeClass('fade-out');
            $('.list-container').removeClass('fade-out');
                showArticleWrapper.css('display', 'none');
        showArticleWrapper.css('display', 'none');
                closeModal();  // Use closeModal() for cleanup
            closeModal();  // Use closeModal() for cleanup
            }
        }
         }
         }
     });
     });
Line 1,114: Line 1,080:


     // Format community card, when in the Community Entries page
     // Format community card, when in the Community Entries page
    if ($('.community-card').length) {
if ($('.community-card').length) {
        formatCommunityCardDescriptions();
    formatCommunityCardDescriptions();
    }
}


     function formatCommunityCardDescriptions() {
     function formatCommunityCardDescriptions() {
        $('.community-card').each(function() {
    $('.community-card').each(function() {
            // Format paragraphs in community-description
        // Format paragraphs in community-description
            var descriptionContainer = $(this).find('.community-description');
        var descriptionContainer = $(this).find('.community-description');
            var rawDescription = descriptionContainer.text();
        var rawDescription = descriptionContainer.text();
            var formattedDescription = formatParagraphs(rawDescription);
        var formattedDescription = formatParagraphs(rawDescription);
            descriptionContainer.html(formattedDescription);
        descriptionContainer.html(formattedDescription);
   
            // Remove empty elements in the entire card
        // Remove empty elements in the entire card
            $(this).find('*').each(function() {
        $(this).find('*').each(function() {
                if ($(this).is(':empty') || $(this).html().trim() === '<br>') {
            if ($(this).is(':empty') || $(this).html().trim() === '<br>') {
                    $(this).remove();
                $(this).remove();
                }
            }
            });
        });
        });
    });
    }
}
      
      
     // NRS ENTRIES  ---------------------  SECTION //
     // NRS ENTRIES  ---------------------  SECTION //
Line 1,207: Line 1,173:
     // Edits regarding Search Results
     // Edits regarding Search Results
     // Define the new form HTML as a string
     // Define the new form HTML as a string
    var newFormHtml = '<form action="/index.php" id="searchform">' +
var newFormHtml = '<form action="/index.php" id="searchform">' +
        '<div id="simpleSearchSpecial" class="right-inner-addon">' +
    '<div id="simpleSearchSpecial" class="right-inner-addon">' +
        '<span>[ Search ]</span>' +
    '<span>[ Search ]</span>' +
        '<input class="form-control" name="search" placeholder="" title="Search [alt-shift-f]" accesskey="f" id="searchInput" tabindex="1" autocomplete="off" type="search">' +
    '<input class="form-control" name="search" placeholder="" title="Search [alt-shift-f]" accesskey="f" id="searchInput" tabindex="1" autocomplete="off" type="search">' +
        '<span class="closing-bracket">]</span>' +
    '<span class="closing-bracket">]</span>' +
        '<input value="Special:Search" name="title" type="hidden">' +
    '<input value="Special:Search" name="title" type="hidden">' +
        '</div>' +
    '</div>' +
        '</form>';
    '</form>';
   
    // Replace the div with id="searchText" with the new form
// Replace the div with id="searchText" with the new form
    $('#searchText').replaceWith(newFormHtml);
$('#searchText').replaceWith(newFormHtml);
      
      
     // Target the button based on its complex class structure
     // Target the button based on its complex class structure
     $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();
     $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();
});
});

Navigation menu