MediaWiki:Common.js

Материал из Игра-Говно точка com

(Различия между версиями)
Перейти к: навигация, поиск
м
м
 
(5 промежуточных версий не показаны.)
Строка 1: Строка 1:
-
// Documentation/Examples: [[RL/DM#jQuery.makeCollapsible]]
+
//Collapsiblе: [[ВП:СБ]]
-
// See also [[MediaWiki:JQuery-makeCollapsible.css]]
+
   
-
/* http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.makeCollapsible.js?revision=83309&view=markup */
+
var NavigationBarShowDefault = 2
-
 
+
var NavigationBarHide = '[скрыть]'
-
/**
+
var NavigationBarShow = '[показать]'
-
  * jQuery makeCollapsible
+
-
*
+
var hasClass = (function (){
-
* This will enable collapsible-functionality on all passed elements.
+
var reCache = {}
-
* Will prevent binding twice to the same element.
+
return function (element, className){
-
* Initial state is expanded by default, this can be overriden by adding class
+
  return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className)
-
* "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".
+
-
*
+
function collapsibleTables(){
-
* @author Krinkle <krinklemail@gmail.com>
+
var Table, HRow, HCell, btn, a, tblIdx = 0, colTables = []
-
*
+
var allTables = document.getElementsByTagName('table')
-
* Dual license:
+
for (var i=0; Table = allTables[i]; i++){
-
* @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
+
  if (!hasClass(Table, 'collapsible')) continue
-
* @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
+
  if (!(HRow=Table.rows[0])) continue
-
*/
+
  if (!(HCell=HRow.getElementsByTagName('th')[0])) continue
-
( function( $, mw ) {
+
  Table.id = 'collapsibleTable' + tblIdx
-
 
+
  btn = document.createElement('span')
-
$.fn.makeCollapsible = function() {
+
  btn.style.cssText = 'float:right; font-weight:normal; font-size:smaller'
-
 
+
  a = document.createElement('a')
-
return this.each(function() {
+
  a.id = 'collapseButton' + tblIdx
-
mw.config.set( 'mw.log.prefix', 'jquery.makeCollapsible' );
+
  a.href = 'javascript:collapseTable(' + tblIdx + ');'
-
 
+
  a.style.color = HCell.style.color
-
// Define reused variables and functions
+
  a.appendChild(document.createTextNode(NavigationBarHide))
-
var $that = $(this).addClass( 'mw-collapsible' ), // case: $( '#myAJAXelement' ).makeCollapsible()
+
  btn.appendChild(a)
-
that = this,
+
  HCell.insertBefore(btn, HCell.childNodes[0])
-
collapsetext = $(this).attr( 'data-collapsetext' ),
+
  colTables[tblIdx++] = Table
-
expandtext = $(this).attr( 'data-expandtext' ),
+
}
-
toggleElement = function( $collapsible, action, $defaultToggle, instantHide ) {
+
for (var i=0; i < tblIdx; i++)
-
// Validate parameters
+
  if ((tblIdx > NavigationBarShowDefault && hasClass(colTables[i], 'autocollapse')) || hasClass(colTables[i], 'collapsed'))
-
if ( !$collapsible.jquery ) { // $collapsible must be an instance of jQuery
+
    collapseTable(i)
-
return;
+
}
-
}
+
-
if ( action != 'expand' && action != 'collapse' ) {
+
function collapseTable (idx){
-
// action must be string with 'expand' or 'collapse'
+
var Table = document.getElementById('collapsibleTable' + idx)
-
return;
+
var btn = document.getElementById('collapseButton' + idx)
-
}
+
if (!Table || !btn) return false
-
if ( typeof $defaultToggle !== 'undefined' && !($defaultToggle instanceof jQuery) ) {
+
var Rows = Table.rows
-
// is optional (may be undefined), but if passed it must be an instance of jQuery and nothing else
+
var isShown = (btn.firstChild.data == NavigationBarHide)
-
return;
+
btn.firstChild.data = isShown ?  NavigationBarShow : NavigationBarHide
-
}
+
var disp = isShown ? 'none' : Rows[0].style.display
-
var $containers = null;
+
for (var i=1; i < Rows.length; i++)
-
 
+
    Rows[i].style.display = disp
-
if ( action == 'collapse' ) {
+
}
-
 
+
-
// Collapse the element
+
function collapsibleDivs(){
-
if ( $collapsible.is( 'table' ) ) {
+
var navIdx = 0, colNavs = [], i, NavFrame
-
// Hide all table rows of this table
+
var divs = document.getElementById('content').getElementsByTagName('div')
-
// Slide doens't work with tables, but fade does as of jQuery 1.1.3
+
for (i=0; NavFrame = divs[i]; i++) {
-
// http://stackoverflow.com/questions/467336#920480
+
  if (!hasClass(NavFrame, 'NavFrame')) continue
-
$containers = $collapsible.find( '>tbody>tr' );
+
  NavFrame.id = 'NavFrame' + navIdx
-
if ( typeof $defaultToggle !== 'undefined' && ($defaultToggle instanceof jQuery) ) {
+
  var a = document.createElement('a')
-
// Exclude tablerow containing togglelink
+
  a.className = 'NavToggle'
-
$containers.not( $defaultToggle.closest( 'tr' ) ).stop(true, true).fadeOut();
+
  a.id = 'NavToggle' + navIdx
-
} else {
+
  a.href = 'javascript:collapseDiv(' + navIdx + ');'
-
if ( instantHide ) {
+
  a.appendChild(document.createTextNode(NavigationBarHide))
-
$containers.hide();
+
  for (var j=0; j < NavFrame.childNodes.length; j++)
-
} else {
+
    if (hasClass(NavFrame.childNodes[j], 'NavHead'))
-
$containers.stop( true, true ).fadeOut();
+
      NavFrame.childNodes[j].appendChild(a)
-
}
+
  colNavs[navIdx++] = NavFrame
-
}
+
}
-
+
for (i=0; i < navIdx; i++)
-
} else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) {
+
  if ((navIdx > NavigationBarShowDefault && !hasClass(colNavs[i], 'expanded')) || hasClass(colNavs[i], 'collapsed'))
-
$containers = $collapsible.find( '> li' );
+
    collapseDiv(i)
-
if ( $defaultToggle && $defaultToggle.jquery ) {
+
}
-
// Exclude list-item containing togglelink
+
-
$containers.not( $defaultToggle.parent() ).stop( true, true ).slideUp();
+
function collapseDiv(idx) {
-
} else {
+
var div = document.getElementById('NavFrame' + idx)
-
if ( instantHide ) {
+
var btn = document.getElementById('NavToggle' + idx)
-
$containers.hide();
+
if (!div || !btn) return false
-
} else {
+
var isShown = (btn.firstChild.data == NavigationBarHide)
-
$containers.stop( true, true ).slideUp();
+
btn.firstChild.data = isShown ? NavigationBarShow : NavigationBarHide
-
}
+
var disp = isShown ? 'none' : 'block'
-
}
+
for (var child = div.firstChild;  child != null; child = child.nextSibling)
-
+
  if (hasClass(child, 'NavPic') || hasClass(child, 'NavContent'))
-
} else { // <div>, <p> etc.
+
      child.style.display = disp
-
var $collapsibleContent = $collapsible.find( '> .mw-collapsible-content' );
+
}
-
+
-
// If a collapsible-content is defined, collapse it
+
-
if ( $collapsibleContent.size() ) {
+
-
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 && $defaultToggle.jquery ) {
+
-
// 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 && $defaultToggle.jquery ) {
+
-
// 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.size() ) {
+
-
$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();
+
-
+
-
// 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' ).size() ) {
+
-
$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' ).size() ) {
+
-
$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' );
+
-
e.preventDefault();
+
-
+
-
// 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();
+
-
}
+
-
// 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 === '' ){
+
-
collapsetext = mw.msg( 'collapsible-collapse', 'Collapse' );
+
-
}
+
-
if ( !expandtext || expandtext === '' ){
+
-
expandtext = mw.msg( 'collapsible-expand', 'Expand' );
+
-
}
+
-
 
+
-
// Create toggle link with a space around the brackets (&nbsp;[text]&nbsp;)
+
-
var $toggleLink = $( '<a href="#"></a>' ).text( collapsetext ).wrap( '<span class="mw-collapsible-toggle"></span>' ).parent().prepend( '&nbsp;[' ).append( ']&nbsp;' ).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( 'Found custom collapsible: #' + thatId );
+
-
+
-
// Double check that there is actually a customtoggle link
+
-
if ( $customTogglers.size() ) {
+
-
$customTogglers.bind( 'click.mw-collapse', function( e ) {
+
-
toggleLinkCustom( $(this), e, $that );
+
-
} );
+
-
} else {
+
-
mw.log( '#' + 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.size() ) {
+
-
$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.size() ) {
+
-
// Make sure the numeral order doesn't get messed up, reset to 1 unless value-attribute is already used
+
-
// WebKit return '' if no value, Mozilla returns '-1' is no value
+
-
if ( $firstItem.attr( 'value' ) == '' || $firstItem.attr( 'value' ) == '-1' ) { // Will fail with ===
+
-
$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.
+
-
// If a direct child .content-wrapper does not exists, create it
+
-
if ( !$that.find( '> .mw-collapsible-content' ).size() ) {
+
-
$that.wrapInner( '<div class="mw-collapsible-content"></div>' );
+
-
}
+
-
+
-
// The toggle-link will be the first child of the element
+
-
var $toggle = $that.find( '> .mw-collapsible-toggle' );
+
-
+
-
// If theres no toggle link, add it
+
-
if ( !$toggle.size() ) {
+
-
$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 );
+
-
 
+
-
 
+
-
 
+
-
// Remove this file when it is deployed for real (and the import from Common.js)
+
-
// The following four lines are not in the original module and are required since it is not deployed
+
-
importStylesheet('MediaWiki:JQuery-makeCollapsible.css');mw.messages.set({"collapsible-collapse":"Collapse","collapsible-expand":"Expand"});
+
-
$(document).ready(function(){
+
-
$('.mw-collapsible').makeCollapsible();
+
-
});
+

Текущая версия на 03:16, 2 апреля 2011

//Collapsiblе: [[ВП:СБ]]
 
var NavigationBarShowDefault = 2
var NavigationBarHide = '[скрыть]'
var NavigationBarShow = '[показать]'
 
var hasClass = (function (){
 var reCache = {}
 return function (element, className){
   return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className)
  }
})()
 
function collapsibleTables(){
 var Table, HRow,  HCell, btn, a, tblIdx = 0, colTables = []
 var allTables = document.getElementsByTagName('table')
 for (var i=0; Table = allTables[i]; i++){
   if (!hasClass(Table, 'collapsible')) continue
   if (!(HRow=Table.rows[0])) continue
   if (!(HCell=HRow.getElementsByTagName('th')[0])) continue
   Table.id = 'collapsibleTable' + tblIdx
   btn = document.createElement('span')
   btn.style.cssText = 'float:right; font-weight:normal; font-size:smaller'
   a = document.createElement('a')
   a.id = 'collapseButton' + tblIdx
   a.href = 'javascript:collapseTable(' + tblIdx + ');'
   a.style.color = HCell.style.color
   a.appendChild(document.createTextNode(NavigationBarHide))
   btn.appendChild(a)
   HCell.insertBefore(btn, HCell.childNodes[0])
   colTables[tblIdx++] = Table
 }
 for (var i=0; i < tblIdx; i++)
   if ((tblIdx > NavigationBarShowDefault && hasClass(colTables[i], 'autocollapse')) || hasClass(colTables[i], 'collapsed'))
     collapseTable(i)
}
 
function collapseTable (idx){
 var Table = document.getElementById('collapsibleTable' + idx)
 var btn = document.getElementById('collapseButton' + idx)
 if (!Table || !btn) return false
 var Rows = Table.rows
 var isShown = (btn.firstChild.data == NavigationBarHide)
 btn.firstChild.data = isShown ?  NavigationBarShow : NavigationBarHide
 var disp = isShown ? 'none' : Rows[0].style.display
 for (var i=1; i < Rows.length; i++)
    Rows[i].style.display = disp
}
 
function collapsibleDivs(){
 var navIdx = 0, colNavs = [], i, NavFrame
 var divs = document.getElementById('content').getElementsByTagName('div')
 for (i=0; NavFrame = divs[i]; i++) {
   if (!hasClass(NavFrame, 'NavFrame')) continue
   NavFrame.id = 'NavFrame' + navIdx
   var a = document.createElement('a')
   a.className = 'NavToggle'
   a.id = 'NavToggle' + navIdx
   a.href = 'javascript:collapseDiv(' + navIdx + ');'
   a.appendChild(document.createTextNode(NavigationBarHide))
   for (var j=0; j < NavFrame.childNodes.length; j++)
     if (hasClass(NavFrame.childNodes[j], 'NavHead'))
       NavFrame.childNodes[j].appendChild(a)
   colNavs[navIdx++] = NavFrame
 }
 for (i=0; i < navIdx; i++)
  if ((navIdx > NavigationBarShowDefault && !hasClass(colNavs[i], 'expanded')) || hasClass(colNavs[i], 'collapsed'))
     collapseDiv(i)
}
 
function collapseDiv(idx) {
 var div = document.getElementById('NavFrame' + idx)
 var btn = document.getElementById('NavToggle' + idx)
 if (!div || !btn) return false
 var isShown = (btn.firstChild.data == NavigationBarHide)
 btn.firstChild.data = isShown ? NavigationBarShow : NavigationBarHide
 var disp = isShown ? 'none' : 'block'
 for (var child = div.firstChild;  child != null;  child = child.nextSibling)
   if (hasClass(child, 'NavPic') || hasClass(child, 'NavContent'))
      child.style.display = disp
}
Личные инструменты