משתמש:Guycn2/AutoScrolling.js

/*

Automatically scroll to the bottom of the page multiple times in a row.

This is used to view old discussions on Flow pages easily & quickly,
and other content on pages that keep expanding after manually scrolling to the bottom of them.

Written by: [[User:Guycn2]]

*/

$.when( mw.loader.using( [ 'mediawiki.util', 'jquery.ui' ] ), $.ready ).then( function () {

	var numberOfScrolls = 0, maxScrolls = null, changeLinkTargets = null, secondsLeft = null, percentComplete = null, highlightErrorCSS = '';
	
	function i18n( key ) {
		
		switch ( mw.config.get( 'wgUserLanguage' ) ) {
			case 'he':
				switch ( key ) {
					case 'title':          return 'גלילה אוטומטית';
					case 'desc1':          return 'ניתן להשתמש בכלי זה כדי לגלול לחלק התחתון ביותר של הדף באופן אוטומטי.';
					case 'desc2':          return 'זה שימושי בדפים מאוד ארוכים שממשיכים להתרחב גם לאחר גלילה לתחתית הדף, למשל דפי "זרימה".';
					case 'numLabel':       return 'נא להזין את מספר הגלילות שהכלי יבצע עבורך:';
					case 'numMustBe':      return '(זה חייב להיות מספר שלם בין 1 ל־100)';
					case 'cbxLabel':       return 'פתיחת הקישורים בדף זה בכרטיסייה חדשה';
					case 'scroll':         return 'גלילה';
					case 'alreadyRunning': return 'הגלילה רצה כעת. ניתן להקיש Esc כדי להפסיקה.';
					case 'aborted':        return 'הגלילה הופסקה.';
					case 'done':           return 'הגלילה הושלמה!';
					case 'newTab':         return changeLinkTargets ? 'קישורים בגוף הדף הזה ייפתחו בלשונית חדשה.' : '';
					case 'remaining':      return 'נותרו כ־' + secondsLeft + ' שניות, ' + percentComplete + '% הושלמו.';
					case 'remainingTitle': return numberOfScrolls === 1 ? 'בוצעה גלילה אחת' : 'בוצעו ' + numberOfScrolls + ' גלילות';
					case 'linkText':       return 'גלילה אוטומטית';
					case 'linkTooltip':    return 'גלילה אוטומטית לתחתית הדף מספר פעמים ברצף';
				}
				break;
			default:
				switch ( key ) {
					case 'title':          return 'Auto scrolling';
					case 'desc1':          return 'You can use this tool to automatically scroll to the very bottom of this page.';
					case 'desc2':          return 'It is useful for very long pages that keep expanding even after scrolling to the bottom of the page, such as Flow pages.';
					case 'numLabel':       return 'Please type the number of scrolls you want this tool to make for you:';
					case 'numMustBe':      return '(It must be an integer between 1 and 100)';
					case 'cbxLabel':       return 'Open links in this page in a new tab';
					case 'scroll':         return 'Scroll';
					case 'alreadyRunning': return 'Scroll is currently running. Press Esc to abort it.';
					case 'aborted':        return 'Scroll aborted.';
					case 'done':           return 'Scroll is complete!';
					case 'newTab':         return changeLinkTargets ? 'Links in the body of this page will open in a new tab.' : '';
					case 'remaining':      return 'About ' + secondsLeft + ' seconds left, ' + percentComplete + '% complete.';
					case 'remainingTitle': return numberOfScrolls === 1 ? 'Scrolled 1 time' : 'Scrolled ' + numberOfScrolls + ' times';
					case 'linkText':       return 'Auto scrolling';
					case 'linkTooltip':    return 'Automatically scroll to the bottom of this page multiple times in a row';
				}
		}
		
		return key;
		
	}
	
	function openScrollToBottomDialog() {
		
		if ( !maxScrolls ) {
			if ( !$( '#scrollToBottom-dialog' ).length ) {
				createScrollToBottomDialog();
			}
			else {
				console.log( 'Dialog is already open.' );
				document.getElementById( 'maxScrolls' ).select();
			}
		}
		else if ( !document.getElementById( 'scrollAlreadyRunning' ) ) {
			mw.notify( $( '<span id="scrollAlreadyRunning">' + i18n( 'alreadyRunning' ) + '</span>' ) );
		}
		
	}
	
	function createScrollToBottomDialog() {
		
		var newLine   = '\n<br>\n',
		    desc      = '<p>' + i18n( 'desc1' ) + '</p>\n<p>' + i18n( 'desc2' ) + '</p>\n<hr>\n',
		    numLabel  = '<label for="maxScrolls">' + i18n( 'numLabel' ) + '</label>' + newLine,
		    numInput  = '<input type="number" id="maxScrolls" min="1" max="100" style="width: 20%; padding: 5px; margin-top: 5px;">\n',
		    numMustBe = '<span id="numMustBe">' + i18n( 'numMustBe' ) + '</span>' + newLine + newLine,
		    cbxInput  = '<input type="checkbox" id="changeLinkTargets" style="transform: scale( 1.1 );">\n',
		    cbxLabel  = '<label for="changeLinkTargets">' + i18n( 'cbxLabel' ) + '</label>',
		    htmlForm  = desc + numLabel + numInput + numMustBe + cbxInput + cbxLabel;
		
		mw.util.addCSS(
			'.rtl #numMustBe { margin-right: 10px; } .ltr #numMustBe { margin-left: 10px; } ' +
			'#numMustBe { color: grey; font-size: smaller; font-weight: normal; }'
		);
		
		$( '<div id="scrollToBottom-dialog">' ).html( htmlForm ).dialog( {
			title: i18n( 'title' ),
			resizable: false,
			width: '400px',
			close: function () {
				$( this ).remove();
				highlightErrorCSS.disabled = true;
			},
			buttons: [
				{
					text: i18n( 'scroll' ),
					click: preScroll
				}
			]
		} ).keypress(
			function ( event ) {
				if ( event.which === 13 ) {
					preScroll();
				}
			}
		);
		
	}
	
	function preScroll() {
		
		maxScrolls        = Number( document.getElementById( 'maxScrolls' ).value ),
		changeLinkTargets = document.getElementById( 'changeLinkTargets' ).checked;
		
		scrollToBottom();
		
	}
	
	function scrollToBottom() {
		
		if ( !isNaN( maxScrolls ) && maxScrolls >= 1 && maxScrolls <= 100 && Number.isInteger( maxScrolls ) ) {
			
			$( '#scrollToBottom-dialog' ).dialog( 'close' );
			
			if ( numberOfScrolls < maxScrolls ) {
				document.getElementById( 'footer' ).scrollIntoView();
				numberOfScrolls++;
			}
			
			document.onkeyup = function ( event ) {
				if ( event.keyCode === 27 && numberOfScrolls ) {
					numberOfScrolls = maxScrolls + 1;
					if ( !document.getElementById( 'scrollAborted' ) ) {
						mw.notify( $( '<span id="scrollAborted">' + i18n( 'aborted' ) + '<br>' + i18n( 'newTab' ) + '</span>' ) );
					}
				}
			};
			
			if ( numberOfScrolls >= maxScrolls ) {
				if ( numberOfScrolls === maxScrolls ) {
					mw.notify( $( '<span>' + i18n( 'done' ) + '<br>' + i18n( 'newTab' ) + '</span>' ) );
				}
				numberOfScrolls = 0, maxScrolls = null;
				if ( changeLinkTargets ) {
					$( '#mw-content-text a' ).not( '[target]' ).addClass( 'target-blank' );
					$( '#mw-content-text a.target-blank' ).attr( 'target', '_blank' );
				}
				else {
					$( '#mw-content-text a.target-blank' ).attr( 'target', null );
					$( '#mw-content-text a' ).removeClass( 'target-blank' );
				}
				changeLinkTargets = null;
			}
			else {
				setTimeout( scrollToBottom, 3000 );
				secondsLeft     = ( maxScrolls - numberOfScrolls ) * 3,
				percentComplete = Number( ( numberOfScrolls / maxScrolls * 100 ).toFixed( 2 ) );
				mw.notify( i18n( 'remaining' ), { title: i18n( 'remainingTitle' ) } );
			}
			
		}
		else {
			highlightErrorCSS = mw.util.addCSS( '#numMustBe { color: #e60000; font-weight: bold; }' );
			document.getElementById( 'maxScrolls' ).select();
		}
		
	}
	
	if ( mw.config.get( 'wgAction' ) === 'view' ) {
			
		$( '#mw-content-text' ).before(
			$( '<a>' )
				.attr( { 'id': 'autoscroll-link', 'title': i18n( 'linkTooltip' ) } )
				.text( i18n( 'linkText' ) )
				.css( 'font-size', 'small' )
				.click( openScrollToBottomDialog )
		);
		
	}
	
} );