Difference between revisions of "MediaWiki:Common.js"

From WikiPatents
Jump to navigation Jump to search
Line 1: Line 1:
mw.loader.using(['mediawiki.util', 'oojs-ui-core', 'oojs-ui-windows'], function () {
+
$(function() {
    $(function () {
+
    var $popup = $('<div>')
        // Check if the popup has been shown recently
+
        .css({
        var lastShown = localStorage.getItem('patentPopupLastShown');
+
            position: 'fixed',
         var now = new Date().getTime();
+
            top: '50%',
        if (lastShown && now - lastShown < 86400000) { // 24 hours in milliseconds
+
            left: '50%',
            return; // Don't show the popup if it was shown in the last 24 hours
+
            transform: 'translate(-50%, -50%)',
         }
+
            backgroundColor: '#FFEB3B', // Yellow background
 +
            padding: '30px',
 +
            borderRadius: '15px',
 +
            boxShadow: '0 10px 40px rgba(0,0,0,0.2)',
 +
            width: '400px', // Increased width
 +
            maxWidth: '90%',
 +
            zIndex: 1000,
 +
            fontFamily: 'Arial, sans-serif',
 +
            textAlign: 'center'
 +
        })
 +
         .html('<h2 style="color: #333; font-size: 24px; margin-bottom: 20px;">Patent Application Monitoring</h2>' +
 +
              '<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 25px;">Want to monitor Patent Applications? Submit your custom request and get a free weekly report!</p>' +
 +
              '<button id="patentAlertButton">Get Alerts</button>')
 +
         .appendTo('body');
  
        var $popupContent = $('<div>')
+
    $('#patentAlertButton').css({
            .append(
+
        display: 'inline-block',
                $('<h2>').text('Patent Application Monitoring'),
+
        padding: '12px 24px',
                $('<p>').text('Want to monitor Patent Applications? Submit your custom request and get a free weekly report!'),
+
        backgroundColor: '#4CAF50', // Green button
                $('<div>').append(
+
        color: 'white',
                    new OO.ui.ButtonWidget({
+
        border: 'none',
                        label: 'Get Alerts',
+
        borderRadius: '25px',
                        flags: ['progressive', 'primary']
+
        fontSize: '18px',
                    }).$element
+
        fontWeight: 'bold',
                )
+
        cursor: 'pointer',
            );
+
        transition: 'background-color 0.3s, transform 0.1s',
 
+
        outline: 'none'
         var popup = new OO.ui.PopupWidget({
+
    }).on('click', function() {
            $content: $popupContent,
+
        window.open('https://docs.google.com/forms/d/e/1FAIpQLSfvGeHyDW-ND9TqqVhbPOrYsKWsvUgFp9Rl-gfsyZCaLp7fXA/viewform?usp=sf_link', '_blank');
            padded: true,
+
         $popup.fadeOut(300);
            width: 300,
+
    }).on('mouseover', function() {
            height: 'auto',
+
        $(this).css('backgroundColor', '#45a049');
            head: true,
+
    }).on('mouseout', function() {
            label: 'Patent Monitoring'
+
        $(this).css('backgroundColor', '#4CAF50');
        });
+
    }).on('mousedown', function() {
 
+
        $(this).css('transform', 'scale(0.95)');
         $('body').append(popup.$element);
+
    }).on('mouseup', function() {
 +
         $(this).css('transform', 'scale(1)');
 +
    });
  
        // Show popup after a short delay
+
    // Add close button
         setTimeout(function () {
+
    $('<button>')
             popup.toggle(true);
+
        .text('×')
         }, 1000);
+
        .css({
 +
            position: 'absolute',
 +
            top: '10px',
 +
            right: '10px',
 +
            background: 'none',
 +
            border: 'none',
 +
            fontSize: '24px',
 +
            color: '#666',
 +
            cursor: 'pointer'
 +
        })
 +
         .on('click', function() {
 +
             $popup.fadeOut(300);
 +
         })
 +
        .appendTo($popup);
  
        // Add click event to the CTA button
+
    // Show popup with fade-in effect
        $popupContent.find('.oo-ui-buttonElement-button').on('click', function () {
+
    setTimeout(function() {
            window.open('https://docs.google.com/forms/d/e/1FAIpQLSfvGeHyDW-ND9TqqVhbPOrYsKWsvUgFp9Rl-gfsyZCaLp7fXA/viewform?usp=sf_link', '_blank');
+
        $popup.hide().fadeIn(500);
            popup.toggle(false);
+
     }, 1000);
            // Remember that we've shown the popup
 
            localStorage.setItem('patentPopupLastShown', new Date().getTime());
 
        });
 
     });
 
 
});
 
});

Revision as of 17:13, 5 July 2024

$(function() {
    var $popup = $('<div>')
        .css({
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: '#FFEB3B', // Yellow background
            padding: '30px',
            borderRadius: '15px',
            boxShadow: '0 10px 40px rgba(0,0,0,0.2)',
            width: '400px', // Increased width
            maxWidth: '90%',
            zIndex: 1000,
            fontFamily: 'Arial, sans-serif',
            textAlign: 'center'
        })
        .html('<h2 style="color: #333; font-size: 24px; margin-bottom: 20px;">Patent Application Monitoring</h2>' +
              '<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 25px;">Want to monitor Patent Applications? Submit your custom request and get a free weekly report!</p>' +
              '<button id="patentAlertButton">Get Alerts</button>')
        .appendTo('body');

    $('#patentAlertButton').css({
        display: 'inline-block',
        padding: '12px 24px',
        backgroundColor: '#4CAF50', // Green button
        color: 'white',
        border: 'none',
        borderRadius: '25px',
        fontSize: '18px',
        fontWeight: 'bold',
        cursor: 'pointer',
        transition: 'background-color 0.3s, transform 0.1s',
        outline: 'none'
    }).on('click', function() {
        window.open('https://docs.google.com/forms/d/e/1FAIpQLSfvGeHyDW-ND9TqqVhbPOrYsKWsvUgFp9Rl-gfsyZCaLp7fXA/viewform?usp=sf_link', '_blank');
        $popup.fadeOut(300);
    }).on('mouseover', function() {
        $(this).css('backgroundColor', '#45a049');
    }).on('mouseout', function() {
        $(this).css('backgroundColor', '#4CAF50');
    }).on('mousedown', function() {
        $(this).css('transform', 'scale(0.95)');
    }).on('mouseup', function() {
        $(this).css('transform', 'scale(1)');
    });

    // Add close button
    $('<button>')
        .text('×')
        .css({
            position: 'absolute',
            top: '10px',
            right: '10px',
            background: 'none',
            border: 'none',
            fontSize: '24px',
            color: '#666',
            cursor: 'pointer'
        })
        .on('click', function() {
            $popup.fadeOut(300);
        })
        .appendTo($popup);

    // Show popup with fade-in effect
    setTimeout(function() {
        $popup.hide().fadeIn(500);
    }, 1000);
});