User:SBisson (WMF)/storification.js

(function{	function isArticleView {		return ( mw.config.get( 'wgAction' ) === 'view' ) &&			( mw.config.get( 'wgNamespaceNumber' ) === 0 ) &&			( mw.config.get('wgArticleId') > 0 );	}	function addStoryButton( onClick ) {		var skin = mw.config.get( 'skin' );		if ( skin === 'vector' || skin === 'vector-2022' ) {			var span = $( ' ' ).text( 'Stories' );			var button = $( '' ).append( span ).on( 'click', onClick );			var listItem = $( '' ).addClass( 'mw-list-item' ).addClass( 'vector-tab-noicon' ).attr( 'id', 'ca-story' ).append( button );			$( '#left-navigation .vector-menu-content-list' ).append( listItem );		} else if ( skin === 'minerva' ) {			var tab = $( '' ).addClass( 'minerva__tab' ).text( 'Stories' ).on( 'click', onClick );			$( '.minerva__tab-container' ).append( tab );		}	}	function splitWithDom( root ) {	 var output = [];	  var buffer = '';	  for ( var i = 0; i < root.childNodes.length; ++i ) { var node = root.childNodes[i]; if ( node.nodeType === Node.TEXT_NODE ) { if ( node.textContent.includes( '.' ) ) { var text = node.textContent; // .replace( /(\d)(\.)(\d)/g, '$1&#46;$3'); var parts = text.split( '.' ); buffer += parts[0] + '.'; output.push( buffer.trim ); buffer = parts[ parts.length - 1 ]; if ( parts.length > 2 ) { for (var j = 1; j < parts.length - 1; j++ ) { output.push( parts[ j ] ); }	       }	      } else { buffer += node.textContent; }	   } else if ( node.nodeType === Node.COMMENT_NODE ) { // ignore comments } else { // other node if ( node.tagName === 'SUP' ) { // skip } else { buffer += node.innerText; }	   }	  }	  return output; }	function splitIntoSection( root ) { var sections = [ { title: 'Summary', sentences: [] } ]; var currentH2, currentH3; for ( var i = 0; i < root.childNodes.length; ++i ) { var node = root.childNodes[i]; if ( node.tagName === 'H2' ) { currentH2 = $( node ).find( '.mw-headline' ).text; sections.push( { title: currentH2, sentences: [] } ); } else if ( node.tagName === 'H3' ) { currentH3 = $( node ).find( '.mw-headline' ).text; sections.push( { title: currentH2 + ' / ' + currentH3, sentences: [] } ); } else if ( node.tagName === 'P' ) { sections[ sections.length - 1 ].sentences = sections[ sections.length - 1 ].sentences.concat( splitWithDom( node ) ); } else if ( node.tagName === 'SECTION' ) { for ( var j = 0; j < node.childNodes.length; j++ ) { var innerNode = node.childNodes[ j ]; if ( innerNode.tagName === 'P' ) { sections[ sections.length - 1 ].sentences = sections[ sections.length - 1 ].sentences.concat( splitWithDom( innerNode ) ); }				}			}		}		return sections; }	function filterSections( sections ) { var ignoreTitles = [ 'See also', 'Notes', 'References', 'further reading', 'External links' ]; return sections.filter( function ( s ) {			return ignoreTitles.indexOf( s.title ) === -1 && s.sentences.length > 0;		} ); }	function getCommonsImages( lang, queryString ) { const commonsUrl = 'https://commons.wikimedia.org/w/api.php'; const mwForeign = new mw.ForeignApi( commonsUrl, { anonymous: true } ); const params = { action: 'query', format: 'json', uselang: lang, generator: 'search', gsrsearch: 'filetype:bitmap|drawing filew:>639 fileh:>639 ' + queryString, gsrlimit: 200, gsroffset: 0, gsrinfo: 'totalhits', prop: 'imageinfo', gsrnamespace: 6, iiprop: 'url|mediatype|size', iiurlheight: 180 };

return mwForeign.get( params ).then( function ( data ) {			if ( data.query.searchinfo.totalhits === 0 ) {				return [];			}			return Object.values( data.query.pages )				.filter( function ( file ) { return file.imagerepository === 'local'; } )				.map( function ( file ) { return file.imageinfo[ 0 ].thumburl; }			);		} ).catch( function {			return [];		} ); }	function getRandomImage( images ) { var rand = Math.max( 0, Math.floor( Math.random * images.length - 1 ) ); return images[ rand ]; }	function buildStoriesView { $root = $( ' ' ).addClass( 'storyview-root' ); var p = getCommonsImages( 'en', mw.config.get( 'wgTitle' ) ); var sections = filterSections( splitIntoSection( $( '.mw-parser-output' )[ 0 ] ) ); p.then( function( images ) {			sections.forEach( function ( section ) { $root.append(					$( ' ' ).addClass( 'storyview-story' ).append( $( ' ' ).addClass( 'storyview-story-frame' ).addClass( 'storyview-story-frame-current' ).css( { backgroundImage: 'url(' + getRandomImage( images ) + ')'} ).append(							$( ' ' ).addClass( 'storyview-story-frame-text' ).text( section.title )						) ).css( { backgroundImage: 'url(' + getRandomImage( images ) + ')'} )					.append( section.sentences.map( function ( s ) {							var rand = Math.floor( Math.random * images.length - 1 );							return $( ' ' ).addClass( 'storyview-story-frame' ).css( { backgroundImage: 'url(' + getRandomImage( images ) + ')'} ).append( $( ' ' ).addClass( 'storyview-story-frame-text' ).append(									$( ' ' ).text( s )								) );						} )					).append( $( ' ' ).addClass( 'storyview-story-tools' ).append(							$( ' ' ).addClass( 'storyview-story-tools-prev' ).text( '<' ),							$( ' ' ).addClass( 'storyview-story-tools-next' ).text( '>' )						) ).scroll( function ( e ) { var index = Math.floor( this.scrollTop / this.clientHeight ); var remainder = this.scrollTop - ( index * this.clientHeight ); var currentFrame = this.childNodes[ index ]; this.style.backgroundImage = currentFrame.style.backgroundImage; } )				);			} );		} );		$root.on( 'click', '.storyview-story', function {			var $story = $( this );			var c = 'storyview-story-selected';			if ( $story.hasClass( c ) ) {				$story.removeClass( c );			} else {				$( '.' + c ).removeClass( c );				$story.addClass( c );			}		} ); $root.on( 'click', '.storyview-story-tools > span', function ( e ) {			e.preventDefault;			e.stopPropagation;			var $tool = $( this );			var $story = $tool.closest( '.storyview-story' );			var $frames = $story.find( '.storyview-story-frame' );			var c = 'storyview-story-frame-current';			var $old = $story.find( '.' + c );			var index = $frames.index( $old );			if ( $tool.hasClass( 'storyview-story-tools-prev' ) ) {				index = index === 0 ? $frames.length - 1 : index - 1;			} else if ( $tool.hasClass( 'storyview-story-tools-next' ) ) {				index = ( index + 1 ) % $frames.length;			}			var $new = $frames.eq( index );			$old.removeClass( c );			$new.addClass( c );		} ); return $root; }	function showStoriesView( $element ) { var skin = mw.config.get( 'skin' ); if ( skin === 'vector' || skin === 'vector-2022' || skin === 'minerva' ) { $( '.mw-parser-output' ).hide; $( '.mw-body-content' ).append( $element ); } else { console.log( 'skin not supported', skin ); }	}

if ( isArticleView ) { mw.loader.using( 'mediawiki.ForeignApi', function {			const $storiesView = buildStoriesView;			addStoryButton( function { showStoriesView( $storiesView ); } );		} );	} } );