MediaWiki:Common.js: Difference between revisions

From Comprehensible Input Wiki
Content added Content deleted
No edit summary
No edit summary
Line 24: Line 24:
'{{#invoke:Random Video|randomVideo}}' )
'{{#invoke:Random Video|randomVideo}}' )
.done( function ( response ) {
.done( function ( response ) {
const regex = /(\{.+\})/g;
regex = /(\{.+\})/g;
vidData = JSON.parse(response.match(regex)[0]);
vidData = JSON.parse(response.match(regex)[0]);
console.log(vidData.id);
console.log(vidData.id);
evHtml = `<figure class="embedvideo" data-service="youtube" data-iframeconfig="{&quot;class&quot;:&quot;embedvideo-player&quot;,&quot;loading&quot;:&quot;lazy&quot;,&quot;frameborder&quot;:0,&quot;allow&quot;:&quot;accelerometer; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; autoplay&quot;,&quot;modestbranding&quot;:1,&quot;width&quot;:320,&quot;height&quot;:180,&quot;src&quot;:&quot;//www.youtube-nocookie.com/embed/${vidData.id}?autoplay=1&quot;}" style="width:320px; margin:auto"><!--
evHtml = '<figure class="embedvideo" data-service="youtube" data-iframeconfig="{&quot;class&quot;:&quot;embedvideo-player&quot;,&quot;loading&quot;:&quot;lazy&quot;,&quot;frameborder&quot;:0,&quot;allow&quot;:&quot;accelerometer; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; autoplay&quot;,&quot;modestbranding&quot;:1,&quot;width&quot;:320,&quot;height&quot;:180,&quot;src&quot;:&quot;//www.youtube-nocookie.com/embed/' + vidData.id + '?autoplay=1&quot;}" style="width:320px; margin:auto"><span class="embedvideo-wrapper" style="height:180px"><div class="embedvideo-consent" data-show-privacy-notice="1"><div class="embedvideo-overlay"><div class="embedvideo-loader" role="button"><div class="embedvideo-loader__fakeButton">Load video</div><div class="embedvideo-loader__footer"><div class="embedvideo-loader__service">YouTube</div></div></div><div class="embedvideo-privacyNotice hidden"><div class="embedvideo-privacyNotice__content">YouTube might collect personal data. <a href="https://www.youtube.com/howyoutubeworks/user-settings/privacy/" rel="nofollow,noopener" target="_blank" class="embedvideo-privacyNotice__link">Privacy Policy</a></div><div class="embedvideo-privacyNotice__buttons"><button class="embedvideo-privacyNotice__continue">Continue</button><button class="embedvideo-privacyNotice__dismiss">Dismiss</button></div></div></div></div></span></figure>';
--><span class="embedvideo-wrapper" style="height:180px"><div class="embedvideo-consent" data-show-privacy-notice="1"><!--
--><div class="embedvideo-overlay"><!--
--><div class="embedvideo-loader" role="button"><!--
--><div class="embedvideo-loader__fakeButton">Load video</div><!--
--><div class="embedvideo-loader__footer"><!--
--><div class="embedvideo-loader__service">YouTube</div><!--
--></div><!--
--></div><!--
--><div class="embedvideo-privacyNotice hidden"><!--
--><div class="embedvideo-privacyNotice__content">YouTube might collect personal data. <a href="https://www.youtube.com/howyoutubeworks/user-settings/privacy/" rel="nofollow,noopener" target="_blank" class="embedvideo-privacyNotice__link">Privacy Policy</a></div><!--
--><div class="embedvideo-privacyNotice__buttons"><!--
<p> --><button class="embedvideo-privacyNotice__continue">Continue</button><!--
--><button class="embedvideo-privacyNotice__dismiss">Dismiss</button><!--
</p>
--></div><!--
--></div><!--
--></div><!--
--></div></span>
</figure>`;
fullHtml = '<div style="box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;margin: auto;width: min-content;padding: 10px;float:right;margin-left:30px"> <div style="text-align:center"><b>Random video from the <a href="/wiki/Library">Library</a></b></div> <div style="text-align:center">' + vidData.language + ' (' + vidData.difficulty + ')</div><div style="width:min-content;margin:auto">' + evHtml + '</div><div style="text-align:center">' + vidData.title + '<br>Channel: ' + vidData.channel + '</div></div>';
fullHtml = `
<div style="box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;margin: auto;width: min-content;padding: 10px;float:right;margin-left:30px">
<div style="text-align:center"><b>Random video from the <a href="/wiki/Library">Library</a></b></div>
<div style="text-align:center">
${vidData.language} (${vidData.difficulty})
</div>
<div style="width:min-content;margin:auto">${evHtml}</div>
<div style="text-align:center">
${vidData.title}<br>
Channel: ${vidData.channel}
</div>
</div>
`
document.querySelector('#summary_link').insertAdjacentHTML('afterend' , fullHtml);
document.querySelector('#summary_link').insertAdjacentHTML('afterend' , fullHtml);

Revision as of 19:56, 4 April 2023

/* Any JavaScript here will be loaded for all users on every page load. */
//Wait for page to be parsed
$(document).ready( function () {
	if(window.location.hostname == 'comprehensibleinput.miraheze.org'){
		
		currentUrl = new RegExp("(^.*)" + window.location.hostname + "(.*$)", 'g').exec(window.location);
		newUrl = currentUrl[1] + "comprehensibleinputwiki.org" + currentUrl[2];
		
		$('#bodyContent').prepend('<div id="newUrlDiv" style="display:none">New URL! Go to <a href="' + newUrl + '"><b>comprehensibleinputwiki.org</b></a>!</div>');
		document.querySelector('#newUrlDiv').style.display="block"	
	}

    mw.loader.load( '/w/index.php?title=Mediawiki:Datatables.js&action=raw&ctype=text/javascript' );
    mw.loader.load( '/w/index.php?title=Mediawiki:Datatables_custom.js&action=raw&ctype=text/javascript' );
    
    // Insert random video on main page
    $( function () {
    	
    	if(document.querySelector('.mw-page-title-main').innerHTML == "Main Page"){

		    api = new mw.Api();
		    
		    api.parse(
		        '{{#invoke:Random Video|randomVideo}}' )
		    .done( function ( response ) {
		        regex = /(\{.+\})/g;
		    	vidData = JSON.parse(response.match(regex)[0]);
		        console.log(vidData.id);
		
		    
evHtml = '<figure class="embedvideo" data-service="youtube" data-iframeconfig="{&quot;class&quot;:&quot;embedvideo-player&quot;,&quot;loading&quot;:&quot;lazy&quot;,&quot;frameborder&quot;:0,&quot;allow&quot;:&quot;accelerometer; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; autoplay&quot;,&quot;modestbranding&quot;:1,&quot;width&quot;:320,&quot;height&quot;:180,&quot;src&quot;:&quot;//www.youtube-nocookie.com/embed/' + vidData.id + '?autoplay=1&quot;}" style="width:320px; margin:auto"><span class="embedvideo-wrapper" style="height:180px"><div class="embedvideo-consent" data-show-privacy-notice="1"><div class="embedvideo-overlay"><div class="embedvideo-loader" role="button"><div class="embedvideo-loader__fakeButton">Load video</div><div class="embedvideo-loader__footer"><div class="embedvideo-loader__service">YouTube</div></div></div><div class="embedvideo-privacyNotice hidden"><div class="embedvideo-privacyNotice__content">YouTube might collect personal data. <a href="https://www.youtube.com/howyoutubeworks/user-settings/privacy/" rel="nofollow,noopener" target="_blank" class="embedvideo-privacyNotice__link">Privacy Policy</a></div><div class="embedvideo-privacyNotice__buttons"><button class="embedvideo-privacyNotice__continue">Continue</button><button class="embedvideo-privacyNotice__dismiss">Dismiss</button></div></div></div></div></span></figure>';
		
		        fullHtml = '<div style="box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;margin: auto;width: min-content;padding: 10px;float:right;margin-left:30px">		                <div style="text-align:center"><b>Random video from the <a href="/wiki/Library">Library</a></b></div>		                <div style="text-align:center">' + vidData.language + ' (' + vidData.difficulty + ')</div><div style="width:min-content;margin:auto">' + evHtml + '</div><div style="text-align:center">' + vidData.title + '<br>Channel: ' + vidData.channel + '</div></div>';
		    
		        document.querySelector('#summary_link').insertAdjacentHTML('afterend' , fullHtml);
		    
		        mw.loader.load( ['ext.embedVideo.styles'] );
		        mw.loader.load( ['ext.embedVideo.overlay'] );
		        mw.loader.load( ['ext.embedVideo.consent'] );
		
		    } );
    	}
	
	} );

});