MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Tag: Reverted
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 642: Line 676:
     });
     });
      
      
$('#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 652: Line 686:
         updateViews();
         updateViews();
         updateCardEventBorders();
         updateCardEventBorders();
});
    });


     $(window).on('scroll', function() {
     $(window).on('scroll', function() {
Line 665: Line 699:
     });
     });
      
      
   
     // 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 741: Line 775:
     }
     }
      
      
$('.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 753: Line 787:
      
      
     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 779: Line 813:
         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 839: Line 873:
             // 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 867: Line 901:
                     '</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 935: Line 969:
             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 961: Line 995:
                     '</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 996: Line 1,030:
                 $(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,007: Line 1,041:
         }
         }


    // 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,049: Line 1,083:


     // 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,060: Line 1,094:
          
          
         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,080: Line 1,114:


     // 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,173: Line 1,207:
     // 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