MediaWiki:Common.js
De GuildWiki2.es
Nota: después de guardar, quizás necesites refrescar la caché de tu navegador para ver los cambios.
- Firefox / Safari: Mantén presionada Mayús mientras pulsas el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presiona Ctrl+Shift+R (⌘+Mayús+R en Mac)
- Internet Explorer: mantén presionada Ctrl mientras pulsas Actualizar, o presiona Ctrl+F5
- Konqueror: pulsa Recargar o presiona F5
- Opera: vacía la caché en Herramientas → Preferencias
/* Cualquier código JavaScript escrito aquí se cargará para todos los usuarios en cada carga de página. */ /* Test if an element has a certain class ************************************** * * Description: Uses regular expressions and caching for better performance. * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]] */ var hasClass = (function () { var reCache = {}; return function (element, className) { return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); }; })(); /** Tablas Colapsables (Collapsible tables) ********************************************************* * * Descripcion: Permite que la tabla se colapse, mostrando solo el encabezado. Ver * [[http://en.wikipedia.org/Wikipedia:NavFrame|Wikipedia:NavFrame]]. * Maintainers: [[User:R. Koot]] */ var autoCollapse = 2; var collapseCaption = "Ocultar"; var expandCaption = "Mostrar"; function collapseTable( tableIndex ) { var Button = document.getElementById( "collapseButton" + tableIndex ); var Table = document.getElementById( "collapsibleTable" + tableIndex ); if ( !Table || !Button ) { return false; } var Rows = Table.rows; if ( Button.firstChild.data == collapseCaption ) { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = "none"; } Button.firstChild.data = expandCaption; } else { for ( var 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 = new Object(); var Tables = document.getElementsByTagName( "table" ); for ( var i = 0; i < Tables.length; i++ ) { if ( hasClass( Tables[i], "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", "javascript:collapseTable(" + tableIndex + ");" ); ButtonLink.appendChild( ButtonText ); Button.appendChild( document.createTextNode( "[" ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( "]" ) ); Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; } } for ( var i = 0; i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); } else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) { var element = NavigationBoxes[i]; while (element = element.parentNode) { if ( hasClass( element, "outercollapse" ) ) { collapseTable ( i ); break; } } } } } addOnloadHook( createCollapseButtons ); /** Dynamic Navigation Bars (experimental) ************************************* * * Description: See [[Wikipedia:NavFrame]]. * Maintainers: UNMAINTAINED */ // set up the words in your language var NavigationBarHide = '[' + collapseCaption + ']'; var NavigationBarShow = '[' + expandCaption + ']'; // shows and hides content and picture (if available) of navigation bars // Parameters: // indexNavigationBar: the index of navigation bar to be toggled function toggleNavigationBar(indexNavigationBar) { var NavToggle = document.getElementById("NavToggle" + indexNavigationBar); var NavFrame = document.getElementById("NavFrame" + indexNavigationBar); if (!NavFrame || !NavToggle) { return false; } // if shown now if (NavToggle.firstChild.data == NavigationBarHide) { for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) { NavChild.style.display = 'none'; } } NavToggle.firstChild.data = NavigationBarShow; // if hidden now } else if (NavToggle.firstChild.data == NavigationBarShow) { for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) { NavChild.style.display = 'block'; } } NavToggle.firstChild.data = NavigationBarHide; } } // adds show/hide-button to navigation bars function createNavigationBarToggleButton() { var indexNavigationBar = 0; // iterate over all < div >-elements var divs = document.getElementsByTagName("div"); for (var i = 0; NavFrame = divs[i]; i++) { // if found a navigation bar if (hasClass(NavFrame, "NavFrame")) { indexNavigationBar++; var NavToggle = document.createElement("a"); NavToggle.className = 'NavToggle'; NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar); NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');'); var isCollapsed = hasClass( NavFrame, "collapsed" ); /* * Check if any children are already hidden. This loop is here for backwards compatibility: * the old way of making NavFrames start out collapsed was to manually add style="display:none" * to all the NavPic/NavContent elements. Since this was bad for accessibility (no way to make * the content visible without JavaScript support), the new recommended way is to add the class * "collapsed" to the NavFrame itself, just like with collapsible tables. */ for (var NavChild = NavFrame.firstChild; NavChild != null && !isCollapsed; NavChild = NavChild.nextSibling) { if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { if ( NavChild.style.display == 'none' ) { isCollapsed = true; } } } if (isCollapsed) { for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { NavChild.style.display = 'none'; } } } var NavToggleText = document.createTextNode(isCollapsed ? NavigationBarShow : NavigationBarHide); NavToggle.appendChild(NavToggleText); // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked) for(var j=0; j < NavFrame.childNodes.length; j++) { if (hasClass(NavFrame.childNodes[j], "NavHead")) { NavFrame.childNodes[j].appendChild(NavToggle); } } NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); } } } addOnloadHook( createNavigationBarToggleButton ); /*cambio de color segun par o impar */ ts_alternate_row_colors = true; /*fin cambio par impar*/ /* * bandas: Tablas con filas coloreadas de forma alterna. Basado en la sortable */ var tb_colores_filas_alternas = true; function bandas_init() { var idnum = 0; // encuentra todas las tablas con class bandas y trasnformarlas en tablas con bandas var tables = getElementsByClassName( document, 'table', 'bandas' ); for ( var ti = 0; ti < tables.length ; ti++ ) { if ( !tables[ti].id ) { tables[ti].setAttribute( 'id', 'bandas_table_id_' + idnum ); ++idnum; } tb_hacerBandas( tables[ti] ); } } function tb_hacerBandas( table ) { if ( tb_colores_filas_alternas ) { tb_alternar( table ); } } function tb_alternar( table ) { // busca el objeto table y recoge todos sus tbodies. var tableBodies = table.getElementsByTagName( 'tbody' ); // para cada tbody for ( var i = 0; i < tableBodies.length; i++ ) { // Recoge todas las filas del tbody var tableRows = tableBodies[i].getElementsByTagName( 'tr' ); // Para todas las filas // empezamos en 1 pq asumimos una cabecera que no tocamos for ( var j = 0; j < tableRows.length; j++ ) { // Vemos si es par o impar y aplica las clases var oldClasses = tableRows[j].className.split(' '); var newClassName = ''; for ( var k = 0; k < oldClasses.length; k++ ) { if ( oldClasses[k] != '' && oldClasses[k] != 'even' && oldClasses[k] != 'odd' ) { newClassName += oldClasses[k] + ' '; } } tableRows[j].className = newClassName + ( j % 2 == 0 ? 'even' : 'odd' ); } } } addOnloadHook( bandas_init ); /* * Fin de bandas */ /*===Pruebas Tusi===*/ /*--Rotacion de imagenes---*/ window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init); var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; function so_init() { if(!d.getElementById || !d.createElement)return; css = d.createElement('link'); css.setAttribute('href','slideshow2.css'); css.setAttribute('rel','stylesheet'); css.setAttribute('type','text/css'); d.getElementsByTagName('head')[0].appendChild(css); imgs = d.getElementById('rotator').getElementsByTagName('div'); for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; imgs[0].style.display = 'block'; imgs[0].xOpacity = .99; setTimeout(so_xfade,3000); } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1]?current+1:0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[nIndex].style.display = 'block'; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = 'none'; current = nIndex; setTimeout(so_xfade,3000); } else { setTimeout(so_xfade,50); } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')'; obj.style.msfilter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (obj.xOpacity*100) + ')'; } } /*---Fin rotacion imagenes ---*/ /*---Eventos JS---*/ function color1(){ document.getElementById('probevent').style.backgroundColor = '#cc0000'; } function color2(){ document.getElementById('probevent').style.backgroundColor= '#EE12FD'; } window.onload = function ev () { if (document.addEventListener){ document.getElementById('probevent').addEventListener('mouseover',color1,false); document.getElementById('probevent').addEventListener('mouseout',color2,false); } else { document.getElementById('probevent').attachEvent('onmouseover',color1); document.getElementById('probevent').attachEvent('onmouseout',color2); } } /*---Fin eventos JS---*/ /*===Fin pruebas Tusi===*/ /*Nuevo 1.19 secciones colapsables*/ /** * jQuery makeCollapsible * * This will enable collapsible-functionality on all passed elements. * Will prevent binding twice to the same element. * Initial state is expanded by default, this can be overriden by adding class * "mw-collapsed" to the "mw-collapsible" element. * Elements made collapsible have class "mw-made-collapsible". * Except for tables and lists, the inner content is wrapped in "mw-collapsible-content". * * @author Krinkle <[email protected]> * * Dual license: * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0> * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html> */ ( function( $, mw ) { $.fn.makeCollapsible = function() { return this.each(function() { var _fn = 'jquery.makeCollapsible> '; // Define reused variables and functions var $that = $(this).addClass( 'mw-collapsible' ), // case: $( '#myAJAXelement' ).makeCollapsible() that = this, collapsetext = $(this).attr( 'data-collapsetext' ), expandtext = $(this).attr( 'data-expandtext' ), toggleElement = function( $collapsible, action, $defaultToggle, instantHide ) { // Validate parameters if ( !$collapsible.jquery ) { // $collapsible must be an instance of jQuery return; } if ( action != 'expand' && action != 'collapse' ) { // action must be string with 'expand' or 'collapse' return; } if ( typeof $defaultToggle == 'undefined' ) { $defaultToggle = null; } if ( $defaultToggle !== null && !($defaultToggle instanceof $) ) { // is optional (may be undefined), but if defined it must be an instance of jQuery. // If it's not, abort right away. // After this $defaultToggle is either null or a valid jQuery instance. return; } var $containers = null; if ( action == 'collapse' ) { // Collapse the element if ( $collapsible.is( 'table' ) ) { // Hide all table rows of this table // Slide doens't work with tables, but fade does as of jQuery 1.1.3 // http://stackoverflow.com/questions/467336#920480 $containers = $collapsible.find( '>tbody>tr' ); if ( $defaultToggle ) { // Exclude tablerow containing togglelink $containers.not( $defaultToggle.closest( 'tr' ) ).stop(true, true).fadeOut(); } else { if ( instantHide ) { $containers.hide(); } else { $containers.stop( true, true ).fadeOut(); } } } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) { $containers = $collapsible.find( '> li' ); if ( $defaultToggle ) { // Exclude list-item containing togglelink $containers.not( $defaultToggle.parent() ).stop( true, true ).slideUp(); } else { if ( instantHide ) { $containers.hide(); } else { $containers.stop( true, true ).slideUp(); } } } else { // <div>, <p> etc. var $collapsibleContent = $collapsible.find( '> .mw-collapsible-content' ); // If a collapsible-content is defined, collapse it if ( $collapsibleContent.length ) { if ( instantHide ) { $collapsibleContent.hide(); } else { $collapsibleContent.slideUp(); } // Otherwise assume this is a customcollapse with a remote toggle // .. and there is no collapsible-content because the entire element should be toggled } else { if ( $collapsible.is( 'tr' ) || $collapsible.is( 'td' ) || $collapsible.is( 'th' ) ) { $collapsible.fadeOut(); } else { $collapsible.slideUp(); } } } } else { // Expand the element if ( $collapsible.is( 'table' ) ) { $containers = $collapsible.find( '>tbody>tr' ); if ( $defaultToggle ) { // Exclude tablerow containing togglelink $containers.not( $defaultToggle.parent().parent() ).stop(true, true).fadeIn(); } else { $containers.stop(true, true).fadeIn(); } } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) { $containers = $collapsible.find( '> li' ); if ( $defaultToggle ) { // Exclude list-item containing togglelink $containers.not( $defaultToggle.parent() ).stop( true, true ).slideDown(); } else { $containers.stop( true, true ).slideDown(); } } else { // <div>, <p> etc. var $collapsibleContent = $collapsible.find( '> .mw-collapsible-content' ); // If a collapsible-content is defined, collapse it if ( $collapsibleContent.length ) { $collapsibleContent.slideDown(); // Otherwise assume this is a customcollapse with a remote toggle // .. and there is no collapsible-content because the entire element should be toggled } else { if ( $collapsible.is( 'tr' ) || $collapsible.is( 'td' ) || $collapsible.is( 'th' ) ) { $collapsible.fadeIn(); } else { $collapsible.slideDown(); } } } } }, // Toggles collapsible and togglelink class and updates text label toggleLinkDefault = function( that, e ) { var $that = $(that), $collapsible = $that.closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' ); e.preventDefault(); e.stopPropagation(); // It's expanded right now if ( !$that.hasClass( 'mw-collapsible-toggle-collapsed' ) ) { // Change link to "Show" $that.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' ); if ( $that.find( '> a' ).length ) { $that.find( '> a' ).text( expandtext ); } else { $that.text( expandtext ); } // Collapse element toggleElement( $collapsible, 'collapse', $that ); // It's collapsed right now } else { // Change link to "Hide" $that.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' ); if ( $that.find( '> a' ).length ) { $that.find( '> a' ).text( collapsetext ); } else { $that.text( collapsetext ); } // Expand element toggleElement( $collapsible, 'expand', $that ); } return; }, // Toggles collapsible and togglelink class toggleLinkPremade = function( $that, e ) { var $collapsible = $that.eq(0).closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' ); if ( $(e.target).is('a') ) { return true; } e.preventDefault(); e.stopPropagation(); // It's expanded right now if ( !$that.hasClass( 'mw-collapsible-toggle-collapsed' ) ) { // Change toggle to collapsed $that.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' ); // Collapse element toggleElement( $collapsible, 'collapse', $that ); // It's collapsed right now } else { // Change toggle to expanded $that.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' ); // Expand element toggleElement( $collapsible, 'expand', $that ); } return; }, // Toggles customcollapsible toggleLinkCustom = function( $that, e, $collapsible ) { // For the initial state call of customtogglers there is no event passed if (e) { e.preventDefault(); e.stopPropagation(); } // Get current state and toggle to the opposite var action = $collapsible.hasClass( 'mw-collapsed' ) ? 'expand' : 'collapse'; $collapsible.toggleClass( 'mw-collapsed' ); toggleElement( $collapsible, action, $that ); }; // Use custom text or default ? if( !collapsetext ) { collapsetext = mw.msg( 'collapsible-collapse' ); } if ( !expandtext ) { expandtext = mw.msg( 'collapsible-expand' ); } // Create toggle link with a space around the brackets ( [text] ) var $toggleLink = $( '<a href="#"></a>' ) .text( collapsetext ) .wrap( '<span class="mw-collapsible-toggle"></span>' ) .parent() .prepend( ' [' ) .append( '] ' ) .bind( 'click.mw-collapse', function(e) { toggleLinkDefault( this, e ); } ); // Return if it has been enabled already. if ( $that.hasClass( 'mw-made-collapsible' ) ) { return; } else { $that.addClass( 'mw-made-collapsible' ); } // Check if this element has a custom position for the toggle link // (ie. outside the container or deeper inside the tree) // Then: Locate the custom toggle link(s) and bind them if ( ( $that.attr( 'id' ) || '' ).indexOf( 'mw-customcollapsible-' ) === 0 ) { var thatId = $that.attr( 'id' ), $customTogglers = $( '.' + thatId.replace( 'mw-customcollapsible', 'mw-customtoggle' ) ); mw.log( _fn + 'Found custom collapsible: #' + thatId ); // Double check that there is actually a customtoggle link if ( $customTogglers.length ) { $customTogglers.bind( 'click.mw-collapse', function( e ) { toggleLinkCustom( $(this), e, $that ); } ); } else { mw.log( _fn + '#' + thatId + ': Missing toggler!' ); } // Initial state if ( $that.hasClass( 'mw-collapsed' ) ) { $that.removeClass( 'mw-collapsed' ); toggleLinkCustom( $customTogglers, null, $that ); } // If this is not a custom case, do the default: // Wrap the contents add the toggle link } else { // Elements are treated differently if ( $that.is( 'table' ) ) { // The toggle-link will be in one the the cells (td or th) of the first row var $firstRowCells = $( 'tr:first th, tr:first td', that ), $toggle = $firstRowCells.find( '> .mw-collapsible-toggle' ); // If theres no toggle link, add it to the last cell if ( !$toggle.length ) { $firstRowCells.eq(-1).prepend( $toggleLink ); } else { $toggleLink = $toggle.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e ) { toggleLinkPremade( $toggle, e ); } ); } } else if ( $that.is( 'ul' ) || $that.is( 'ol' ) ) { // The toggle-link will be in the first list-item var $firstItem = $( 'li:first', $that), $toggle = $firstItem.find( '> .mw-collapsible-toggle' ); // If theres no toggle link, add it if ( !$toggle.length ) { // Make sure the numeral order doesn't get messed up, force the first (soon to be second) item // to be "1". Except if the value-attribute is already used. // If no value was set WebKit returns "", Mozilla returns '-1', others return null or undefined. var firstval = $firstItem.attr( 'value' ); if ( firstval === undefined || !firstval || firstval == '-1' ) { $firstItem.attr( 'value', '1' ); } $that.prepend( $toggleLink.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent() ); } else { $toggleLink = $toggle.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e ) { toggleLinkPremade( $toggle, e ); } ); } } else { // <div>, <p> etc. // The toggle-link will be the first child of the element var $toggle = $that.find( '> .mw-collapsible-toggle' ); // If a direct child .content-wrapper does not exists, create it if ( !$that.find( '> .mw-collapsible-content' ).length ) { $that.wrapInner( '<div class="mw-collapsible-content"></div>' ); } // If theres no toggle link, add it if ( !$toggle.length ) { $that.prepend( $toggleLink ); } else { $toggleLink = $toggle.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e ) { toggleLinkPremade( $toggle, e ); } ); } } } // Initial state (only for those that are not custom) if ( $that.hasClass( 'mw-collapsed' ) && ( $that.attr( 'id' ) || '').indexOf( 'mw-customcollapsible-' ) !== 0 ) { $that.removeClass( 'mw-collapsed' ); // The collapsible element could have multiple togglers // To toggle the initial state only click one of them (ie. the first one, eq(0) ) // Else it would go like: hide,show,hide,show for each toggle link. toggleElement( $that, 'collapse', $toggleLink.eq(0), /* instantHide = */ true ); $toggleLink.eq(0).click(); } } ); }; } )( jQuery, mediaWiki ); /*Fin nuevo 1.19 secciones colapsables*/