/*
Fully JS EndofYear Sitenotice, init events etc
See detailed documentation in Dev/mediawiki
*/

function initEndOfYearSitenotice( endOfYearDiv, contentForSlides, donatePageUrl = '/wiki/Donate', isLocalFileSystem = false ) {

       const localStorageName = 'dismiss-end-of-year-sitenotice';

       let valid = true;

       // Basic error checks
       if( ! contentForSlides ) {
               console.error('Dev: contentForSlides is missing but needed. Please check for errors');
               valid = false;
       }

       // If the user has the dismissed less than a week ago, it will not be executed
       if( isLocalFileSystem && localStorage.getItem(localStorageName) > Date.now() ) valid = false;

       // If it failed at least on test
       if( ! valid ) {
               $('#donate-end-of-year').hide();
               return;
       }

       // Remove item (because it's not valid) if it exists
       if( isLocalFileSystem ) localStorage.removeItem(localStorageName);

       // --------------------
       // Settings and Globals

       const settings = {
               durationSlide: 10000, // Milliseconds
               durationProgressbar: 9500, // Milliseconds
               mobileBreak: 660, // Pixels
               paymentBottomBorderSpace: 15, // Pixels
       };

       const refs = {
               playNextTimeout: null,
       };

       const states = {
               slideIndex: null,
               slideCount: 0,
               isPlay: null,
               crypto: { payBitcoin: '', payMonero: '', payEthereum: '', },
       };

       // ---
       // DOM

       let content = $(`
           <div class="h1"> <span>Please support us!</span> </div>
           <div class="slideshow">
               <div class="content"></div>
               <div class="control">
                   <div class="progress"></div>
                   <div class="slide-buttons"></div>
                   <div class="flow"> <i class="fa-solid fa-pause is-play"></i> <i class="fa-solid fa-play is-pause"></i> </div>
               </div>
           </div>
           <div class="payment">
               <div class="h2">PayPal</div>
               <div class="pay-via-paypal-module"></div>
               <div class="h2 crypto">Or Crypto<br>Addresses</div>
               <div class="crypto-container">
                   <div class="code-select btc" data-button-image-src="/w/images/thumb/2/29/BC_Logo_.png/40px-BC_Logo_.png"></div>
                   <div class="code-select xmr" data-button-image-src="/w/images/thumb/0/05/Monero-symbol-1280.png/40px-Monero-symbol-1280.png"></div>
                   <div class="code-select eth" data-button-image-src="/w/images/thumb/2/2c/Ethereumlogo.png/40px-Ethereumlogo.png"></div>
               </div> <a href="${donatePageUrl}" target="_blank">Or Other Payment Options</a>
           </div>
       `);

       endOfYearDiv = $(endOfYearDiv);
       endOfYearDiv.append( content );

       let mobileDonateButtonTemplate = $('<span class="mobile-donate-button">Donate</span>');

       // ---
       // FNs

       function switchSlide( slideButton ) {
               endOfYearDiv.find('.slideshow .content > div').removeClass('active');
               endOfYearDiv.find('.slideshow .control > .slide-buttons span').removeClass('active');

               endOfYearDiv.find('.slideshow .slide-buttons span.active').removeClass('active');
               slideButton.addClass('active');
               states.slideIndex = slideButton.index();
               let slide = endOfYearDiv.find('.slideshow .content > div').eq( states.slideIndex );
               slide.addClass('active');
               slide.css( 'opacity', 0 );
               slide.animate( { opacity: 1 }, 300 );
       }

       function playNext( isPlay ) {
               if( isPlay != 'auto' ) {
                       clearTimeout( refs.playNextTimeout );
                       endOfYearDiv.find('.slideshow .progress').stop( true );

                       if( isPlay != states.isPlay ) {
                               if( typeof isPlay == 'boolean' ) states.isPlay = isPlay;
                               else if( isPlay == 'toggle' ) states.isPlay = ! states.isPlay;
                               endOfYearDiv.find('.slideshow .control .flow i').removeClass('active');
                               endOfYearDiv.find('.slideshow .control .flow i.is-' + ( states.isPlay ? 'play' : 'pause'  ) ).addClass('active');
                       }

                       if( ! states.isPlay ) return;
               }

               if( states.slideIndex == null || states.slideIndex >= states.slideCount - 1 ) states.slideIndex = 0;
               else states.slideIndex++;
               switchSlide( endOfYearDiv.find( '.slideshow .slide-buttons span' ).eq( states.slideIndex ) );
               endOfYearDiv.find('.slideshow .progress').css( 'width', '1%' ).stop( true ).animate( { width: '100%' }, settings.durationProgressbar );
               refs.playNextTimeout = setTimeout( () => playNext( 'auto' ), settings.durationSlide );
       }

       // -----
       // Setup

       // Imported Initializations

       endOfYearDiv.find('.pay-via-paypal-module').payViaPaypal('init');
       endOfYearDiv.find('.payment .crypto-container .code-select').codeSelect('init');

       // Content

       endOfYearDiv.find('.content').html( contentForSlides );

       if( endOfYearDiv.find('.content h1').length > 0 ) {
               endOfYearDiv.find( '.h1 span' ).html( endOfYearDiv.find('.content h1').html() );
               endOfYearDiv.find('.content h1').remove();
       }

       if( endOfYearDiv.find('.content [data-crypto-addresses]').length > 0 ) {
               let crypto = JSON.parse( endOfYearDiv.find('.content [data-crypto-addresses]').attr('data-crypto-addresses') );
               endOfYearDiv.find('.content [data-crypto-addresses]').remove();
               states.crypto = { ...crypto };
       }

       if( ! states.crypto.payBitcoin ) console.warn('Dev: payBitcoin is missing. Please check for errors');
       if( ! states.crypto.payMonero ) console.warn('Dev: payMonero is missing. Please check for errors');
       if( ! states.crypto.payEthereum ) console.warn('Dev: payEthereum is missing. Please check for errors');

       endOfYearDiv.find('.payment .btc .code').text( states.crypto.payBitcoin );
       endOfYearDiv.find('.payment .xmr .code').text( states.crypto.payMonero );
       endOfYearDiv.find('.payment .eth .code').text( states.crypto.payEthereum );

       // Add Mobile donate link button

       if( $(window).width() <= settings.mobileBreak ) {
               endOfYearDiv.find('.content > div').append( mobileDonateButtonTemplate.clone() );
       }

       // Iterate over slides

       let maxHeight = 0;

       endOfYearDiv.find('.slideshow .content > div').each( function() {
               $(this).css('display','block');
               if( $(this).outerHeight() > maxHeight ) maxHeight = $(this).outerHeight();
               $(this).css('display','');
               endOfYearDiv.find('.slideshow .slide-buttons').append( '<span' + ( $(this).hasClass('active') ? ' class="active"' : '' ) + '></span>' );
               states.slideCount++;
       });

       // If not mobile include the height of payment
       if( $(window).width() > settings.mobileBreak ) {
               let paymentAdjustedHeight = endOfYearDiv.find('.payment').outerHeight() - endOfYearDiv.find('.slideshow .control').outerHeight() - settings.paymentBottomBorderSpace;
               if( paymentAdjustedHeight > maxHeight ) maxHeight = paymentAdjustedHeight;
       }

       endOfYearDiv.find('.slideshow .content').height( maxHeight );

       endOfYearDiv.find('.payment').animate( { opacity: 1}, 300 );

       // ------
       // Events

       endOfYearDiv.find('.slideshow .slide-buttons span').on( 'click', function() {
         console.info([ states, $(this) ]);
               if( states.isPlay ) {
                       states.slideIndex = $(this).index() - 1;
                       playNext();
               } else {
                       switchSlide( $(this) );
               }
       });

       if( isLocalFileSystem ) {
               $('#siteNotice .sitenotice-close').on('click', function() {
                       localStorage.setItem(localStorageName, Date.now() + cookieValidity );
               });
       }

       endOfYearDiv.find('.slideshow .control .flow i').on( 'click', () => playNext( 'toggle' ) );

       endOfYearDiv.find('.content .mobile-donate-button').on( 'click', function() {
               playNext( false );
               endOfYearDiv.find('.slideshow').hide();
               endOfYearDiv.find('.payment').show();
               endOfYearDiv.css('height','auto');
       });

       // ----
       // Init

       // FadeIn endOf year the start playing the slideshow
       endOfYearDiv.animate( { opacity: 1}, 300 );
       playNext( true );

}

/*
[[Category:MultiWiki]]
*/

You are viewing proxied material from ftp.icm.edu.pl. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.