MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
imported>Kittymmeow No edit summary |
imported>Kittymmeow No edit summary |
||
Line 1: | Line 1: | ||
/** | /** | ||
* | * Scripts placed here are loaded on both desktop and mobile views. | ||
* | * | ||
* Desktop-only scripts should go in [[MediaWiki:Common.js]] | |||
* Mobile-only scripts should go in [[MediaWiki:Mobile.js]]. | |||
*/ | */ | ||
(function() { | |||
'use strict'; | |||
/* Fired whenever wiki content is added. (#mw-content-text, live preview, load page, etc.) */ | |||
/* | mw.hook('wikipage.content').add(function($wikipageContent) { | ||
/** | |||
* Set minimum height for animations to prevent moving the page if the frames | |||
* differ in height | |||
*/ | |||
(function() { | |||
// Set frames to be visible for measuring height | |||
var $animated = $wikipageContent.find('.animated').addClass('animated-visible'); | |||
/ | // Group frames per animation | ||
$( function() { | var animateds = []; | ||
$animated.each(function() { | |||
animateds.push({ | |||
$: $(this).find('> .animated-subframe').addBack() | |||
.find('> *:not(.animated-subframe)'), | |||
}); | |||
}); | |||
// Get highest frame for each animation (if heights differ) | |||
$.each(animateds, function() { | |||
var minHeight = 0, | |||
differentHeights; | |||
this.$.each(function() { | |||
var height = this.offsetHeight; | |||
differentHeights = differentHeights || minHeight && height !== minHeight; | |||
minHeight = Math.max(height, minHeight); | |||
}); | |||
/** | if (differentHeights) { | ||
this.height = minHeight; | |||
} | |||
}); | |||
// Set animation to be at least as tall as the tallest frame, | |||
// and set the non-active frames to be hidden again | |||
$animated.each(function(i) { | |||
$(this).css('min-height', animateds[i].height); | |||
}).removeClass('animated-visible'); | |||
}()); | |||
( function() { | }); | ||
/* End wiki content hook */ | |||
/* Fires when DOM is ready */ | |||
$(function() { | |||
/** | |||
* Element animator | |||
* | |||
* Cycles through a set of elements (or "frames") on a 2 second timer per frame | |||
* Add the "animated" class to the frame containing the elements to animate. | |||
* Optionally, add the "animated-active" class to the frame to display first. | |||
* Optionally, add the "animated-subframe" class to a frame, and the | |||
* "animated-active" class to a subframe within, in order to designate a set of | |||
* subframes which will only be cycled every time the parent frame is displayed. | |||
* Animations with the "animated-paused" class will be skipped each interval. | |||
* | |||
* Requires some styling from [[MediaWiki:Gadget-site-styles.css]]. | |||
*/ | |||
(function() { | |||
var $content = $('#mw-content-text'); | |||
var advanceFrame = function(parentElem, parentSelector) { | |||
var curFrame = parentElem.querySelector(parentSelector + ' > .animated-active'); | |||
$(curFrame).removeClass('animated-active'); | |||
var $nextFrame = $(curFrame && curFrame.nextElementSibling || parentElem.firstElementChild); | |||
return $nextFrame.addClass('animated-active'); | |||
}; | |||
// Set the name of the hidden property | |||
var hidden; | |||
if (typeof document.hidden !== 'undefined') { | |||
hidden = 'hidden'; | |||
}() ); | } else if (typeof document.msHidden !== 'undefined') { | ||
hidden = 'msHidden'; | |||
} else if (typeof document.webkitHidden !== 'undefined') { | |||
hidden = 'webkitHidden'; | |||
} | |||
setInterval(function() { | |||
if (hidden && document[hidden]) { | |||
return; | |||
} | |||
$content.find('.animated').each(function() { | |||
if ($(this).hasClass('animated-paused')) { | |||
return; | |||
} | |||
var $nextFrame = advanceFrame(this, '.animated'); | |||
if ($nextFrame.hasClass('animated-subframe')) { | |||
advanceFrame($nextFrame[0], '.animated-subframe'); | |||
} | |||
}); | |||
}, 2000); | |||
}()); | |||
} ); | }); | ||
/* End DOM ready */ | /* End DOM ready */ | ||
}() ); | }()); | ||
/** | /** |
Revision as of 14:08, 23 May 2019
/**
* Scripts placed here are loaded on both desktop and mobile views.
*
* Desktop-only scripts should go in [[MediaWiki:Common.js]]
* Mobile-only scripts should go in [[MediaWiki:Mobile.js]].
*/
(function() {
'use strict';
/* Fired whenever wiki content is added. (#mw-content-text, live preview, load page, etc.) */
mw.hook('wikipage.content').add(function($wikipageContent) {
/**
* Set minimum height for animations to prevent moving the page if the frames
* differ in height
*/
(function() {
// Set frames to be visible for measuring height
var $animated = $wikipageContent.find('.animated').addClass('animated-visible');
// Group frames per animation
var animateds = [];
$animated.each(function() {
animateds.push({
$: $(this).find('> .animated-subframe').addBack()
.find('> *:not(.animated-subframe)'),
});
});
// Get highest frame for each animation (if heights differ)
$.each(animateds, function() {
var minHeight = 0,
differentHeights;
this.$.each(function() {
var height = this.offsetHeight;
differentHeights = differentHeights || minHeight && height !== minHeight;
minHeight = Math.max(height, minHeight);
});
if (differentHeights) {
this.height = minHeight;
}
});
// Set animation to be at least as tall as the tallest frame,
// and set the non-active frames to be hidden again
$animated.each(function(i) {
$(this).css('min-height', animateds[i].height);
}).removeClass('animated-visible');
}());
});
/* End wiki content hook */
/* Fires when DOM is ready */
$(function() {
/**
* Element animator
*
* Cycles through a set of elements (or "frames") on a 2 second timer per frame
* Add the "animated" class to the frame containing the elements to animate.
* Optionally, add the "animated-active" class to the frame to display first.
* Optionally, add the "animated-subframe" class to a frame, and the
* "animated-active" class to a subframe within, in order to designate a set of
* subframes which will only be cycled every time the parent frame is displayed.
* Animations with the "animated-paused" class will be skipped each interval.
*
* Requires some styling from [[MediaWiki:Gadget-site-styles.css]].
*/
(function() {
var $content = $('#mw-content-text');
var advanceFrame = function(parentElem, parentSelector) {
var curFrame = parentElem.querySelector(parentSelector + ' > .animated-active');
$(curFrame).removeClass('animated-active');
var $nextFrame = $(curFrame && curFrame.nextElementSibling || parentElem.firstElementChild);
return $nextFrame.addClass('animated-active');
};
// Set the name of the hidden property
var hidden;
if (typeof document.hidden !== 'undefined') {
hidden = 'hidden';
} else if (typeof document.msHidden !== 'undefined') {
hidden = 'msHidden';
} else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden';
}
setInterval(function() {
if (hidden && document[hidden]) {
return;
}
$content.find('.animated').each(function() {
if ($(this).hasClass('animated-paused')) {
return;
}
var $nextFrame = advanceFrame(this, '.animated');
if ($nextFrame.hasClass('animated-subframe')) {
advanceFrame($nextFrame[0], '.animated-subframe');
}
});
}, 2000);
}());
});
/* End DOM ready */
}());
/**
* Pause MCUI templates (e.g. [[Template:Crafting Table]]) on mouseover
*
* This is so people have a chance to look at each image on the cell
* and click on pages they want to view.
*/
$( '#mw-content-text' ).on( 'mouseenter mouseleave', '.mcui', function( e ) {
$( this ).find( '.animated' ).toggleClass( 'animated-paused', e.type === 'mouseenter' );
} );