MediaWiki:Common.js: Difference between revisions

From Ukikipedia
Jump to navigation Jump to search
No edit summary
(Autoplay MP4s with autoplay class)
 
(2 intermediate revisions by one other user not shown)
Line 104: Line 104:
$( createCollapseButtons );
$( createCollapseButtons );


 
/* Autoplay videos with autoplay class */
// Raw text on sidebar (hopefully this works lol)
var vids = document.getElementsByClassName("autoplay");
$wgHooks['SkinBuildSidebar'][] = 'lfHideSidebar';
for(var i = 0; i < vids.length; i++){
function lfHideSidebar( $skin, &$bar ) {
  vids[i].controls = true;
  global $wgUser;
   vids[i].setAttribute("playsinline", "");
    'text' => wfMessage( 'Sidebar' )->inContentLanguage()->parse(),
   vids[i].muted = true;
}
   vids[i].autoplay = true;
 
   vids[i].loop = true;
document.getElementById("mw-mywiki-example").innerHTML = '<a href="https://open.spotify.com/show/68w44CObfwSHHgu7A5N5bn"><img src="https://ukikipedia.net/mediawiki/images/a/a0/Spotify.svg" alt="Listen to Ukikicast on Spotify" width="136" height="33" /></a> <a href="https://soundcloud.com/ukikicast"> <img src="https://ukikipedia.net/mediawiki/images/c/cf/Soundcloud.png" alt="Listen to Ukikicast on SoundCloud" width="136" height="33" /></a><br><a href="https://podcasts.apple.com/us/podcast/ukikicast/id1498404212"><img src="  https://ukikipedia.net/mediawiki/images/3/35/US_UK_Apple_Podcasts_Listen_Badge_RGB.svg" alt="Listen to Ukikicast on Apple Podcasts" width="136" height="33" /></a> <a href="https://podcasts.apple.com/us/podcast/ukikicast/id1498404212"><img src="https://ukikipedia.net/mediawiki/images/3/37/Youtube.svg" alt="Listen to Ukikicast on YouTube" width="136" height="33" /></a>';
   vids[i].play();
 
$wgHooks["SkinBuildSidebar"][] = "fnSidebarMultiLevel";
function fnSidebarMultiLevel(Skin $skin, &$bar) {
 
   global $wgOut;
 
  $title = Title::makeTitle(NS_MEDIAWIKI, "Sidebar-Custom");
 
   if ( !$title->exists() )
    return true;
 
   $text = WikiPage::factory($title)->getContent()->mText;
 
   $firstValue = reset($bar);
   $firstKey = key($bar);
 
  unset($bar[$firstKey]);
 
  $bar = array(
    $firstKey => $firstValue,
    "Custom" => $wgOut->parse($text)
  ) + $bar;
 
  return true;
 
}
}

Latest revision as of 08:41, 21 September 2021

/* Any JavaScript here will be loaded for all users on every page load. */

 /** Collapsible tables *********************************************************
  *
  *  Description: Allows tables to be collapsed, showing only the header. See
  *               [[Wikipedia:NavFrame]].
  *  Maintainers: [[User:R. Koot]]
  */
 var hasClass = (function () {
    var reCache = {};
    return function (element, className) {
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
    };
 })(); 

var autoCollapse = 2;
var collapseCaption = 'hide';
var expandCaption = 'show';
 
window.collapseTable = function ( tableIndex ) {
    var Button = document.getElementById( 'collapseButton' + tableIndex );
    var Table = document.getElementById( 'collapsibleTable' + tableIndex );
 
    if ( !Table || !Button ) {
        return false;
    }
 
    var Rows = Table.rows;
    var i;
 
    if ( Button.firstChild.data === collapseCaption ) {
        for ( i = 1; i < Rows.length; i++ ) {
            Rows[i].style.display = 'none';
        }
        Button.firstChild.data = expandCaption;
    } else {
        for ( i = 1; i < Rows.length; i++ ) {
            Rows[i].style.display = Rows[0].style.display;
        }
        Button.firstChild.data = collapseCaption;
    }
};
 
function createCollapseButtons() {
    var tableIndex = 0;
    var NavigationBoxes = {};
    var Tables = document.getElementsByTagName( 'table' );
    var i;
 
    function handleButtonLink( index, e ) {
        window.collapseTable( index );
        e.preventDefault();
    }
 
    for ( i = 0; i < Tables.length; i++ ) {
        if ( $( Tables[i] ).hasClass( 'collapsible' ) ) {
 
            /* only add button and increment count if there is a header row to work with */
            var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0];
            if ( !HeaderRow ) continue;
            var Header = HeaderRow.getElementsByTagName( 'th' )[0];
            if ( !Header ) continue;
 
            NavigationBoxes[ tableIndex ] = Tables[i];
            Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex );
 
            var Button     = document.createElement( 'span' );
            var ButtonLink = document.createElement( 'a' );
            var ButtonText = document.createTextNode( collapseCaption );
 
            Button.className = 'collapseButton';  /* Styles are declared in Common.css */
 
            ButtonLink.style.color = Header.style.color;
            ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
            ButtonLink.setAttribute( 'href', '#' );
            $( ButtonLink ).on( 'click', $.proxy( handleButtonLink, ButtonLink, tableIndex ) );
            ButtonLink.appendChild( ButtonText );
 
            Button.appendChild( document.createTextNode( '[' ) );
            Button.appendChild( ButtonLink );
            Button.appendChild( document.createTextNode( ']' ) );
 
            Header.insertBefore( Button, Header.firstChild );
            tableIndex++;
        }
    }
 
    for ( i = 0;  i < tableIndex; i++ ) {
        if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) || ( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) ) ) {
            window.collapseTable( i );
        } 
        else if ( $( NavigationBoxes[i] ).hasClass ( 'innercollapse' ) ) {
            var element = NavigationBoxes[i];
            while ((element = element.parentNode)) {
                if ( $( element ).hasClass( 'outercollapse' ) ) {
                    window.collapseTable ( i );
                    break;
                }
            }
        }
    }
}
 
$( createCollapseButtons );

/* Autoplay videos with autoplay class */
var vids = document.getElementsByClassName("autoplay");
for(var i = 0; i < vids.length; i++){
  vids[i].controls = true;
  vids[i].setAttribute("playsinline", "");
  vids[i].muted = true;
  vids[i].autoplay = true;
  vids[i].loop = true;
  vids[i].play();
}