MediaWiki:Common.js
De Omnis Bibliotheca
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
$(function () {
//----------------------------------------------------------------------
// 1 - Gestion des clicks souris
//----------------------------------------------------------------------
$('[data-trigger]').click(initClickTrigger);
function initClickTrigger() {
var key = $(this).data('trigger');
var group = $(this).data('group');
// change selection
$('[data-trigger="' + key + '"]').addClass('active');
$('[data-target="' + key + '"]').addClass('active');
if (group) {
// unactivate all others in group
$('.active[data-group="' + group + '"]:not([data-trigger="' + key + '"])').each(function () {
$(this).removeClass('active');
var eachKey = $(this).data('trigger');
$('[data-target="' + eachKey + '"]').removeClass('active');
});
}
}
//----------------------------------------------------------------------
// 2 - Gestion de la souris pour scroller une carte stellaire
//----------------------------------------------------------------------
var clicked = false, clickX, clickY;
$(".map-viewer").on({
'mousemove': function (e) {
if (clicked) {
$(this).scrollTop($(this).scrollTop() + (clickY - e.pageY));
$(this).scrollLeft($(this).scrollLeft() + (clickX - e.pageX));
clickX = e.pageX;
clickY = e.pageY;
}
},
'mousedown': function (e) {
clicked = true;
clickX = e.pageX;
clickY = e.pageY;
$(this).addClass('grabbing');
},
'mouseup': function () {
clicked = false;
$(this).removeClass('grabbing');
},
'mouseleave': function () {
clicked = false;
$(this).removeClass('grabbing');
}
});
if (!window.fetch) {
console.error("function 'fetch' not available...");
return;
}
//----------------------------------------------------------------------
// 3 - Fonction pour interpréter à la volée du code wiki
//----------------------------------------------------------------------
function parseWikiCode(wikiCode, callback, errorHandler) {
// build query URl
const url = "https://medenor2.odns.fr/OBnew/api.php?" +
new URLSearchParams({
origin: "*",
action: "parse",
text: wikiCode,
contentmodel: "wikitext",
format: "json",
prop: "text|parsewarnings|headitems"
});
// perform request with 'fetch'
console.log("[parseWikiCode] Parse WikiCode Request: " + url);
fetch(url)
.then(function (response) {
if (response.ok) {
console.log("[parseWikiCode] Response OK ");
return response.json();
} else {
console.log("[parseWikiCode] Response status " + response.status);
return null;
}
}, function (error) {
// Network error
console.log("[parseWikiCode] Network error ");
if (typeof errorHandler == 'function') {
errorHandler();
}
})
.then(function (response) {
if (response) {
// Response success
const htmlPageContent = response.parse.text["*"];
if (typeof callback == 'function') {
callback($(htmlPageContent).html());
}
} else {
// Response not OK
if (typeof errorHandler == 'function') {
errorHandler();
}
}
}, function (error) {
// Parsing response error
console.log("[parseWikiCode] parsing error ");
if (typeof errorHandler == 'function') {
errorHandler();
}
});
}
//----------------------------------------------------------------------
// 4 - Bouton pour relancer les Previews Random
//----------------------------------------------------------------------
// init : add refresh button
$('#previews-wrapper').each(initPreviewWrapper);
function initPreviewWrapper() {
console.log("[initPreviewWrapper] new Preview Wrapper");
$('<div><div>↻</div><img alt="Logo-OB-2021.jpg" src="/images/thumb/1/14/Logo-OB-2021.jpg/100px-Logo-OB-2021.jpg"></div>')
.addClass('preview-refresh-btn no-print')
.click(refreshAllPreviews)
.appendTo($(this));
}
function refreshAllPreviews() {
$('#previews-wrapper').attr('status', 'loading');
$('#previews-wrapper .preview').each(refreshPreview);
}
function refreshPreview() {
const preview = $(this);
preview.attr('status', 'loading');
// get image position
const previewImage = preview.find('.preview-page-img');
var imagePosition = 'none';
if (previewImage.hasClass('right')) {
imagePosition = 'right';
} else if (previewImage.hasClass('left')) {
imagePosition = 'left';
}
// get model name to generate preview
var model = preview.find('.preview-model-src').html();
model = model ? model : 'Preview Random';
var callback = function (htmlCode) {
// preview load success -> inject new HTML code
console.log("[nextPreview] GET New Preview Random OK");
const preview = $(this);
preview.html($(htmlCode).html());
preview.attr('status', 'loaded');
checkRefreshLoad();
};
callback = callback.bind(preview);
var errorHandler = function () {
// preview load failed
console.error("[nextPreview] GET New Preview Random FAILED");
const preview = $(this);
preview.attr('status', 'loaded');
checkRefreshLoad();
};
errorHandler = errorHandler.bind(preview);
// retrieve new previews
parseWikiCode('{{Modèle:' + model + '|image_position=' + imagePosition + '|seed=' + new Date().getTime() + '}}',
callback,
errorHandler);
}
function checkRefreshLoad() {
const loadingCount = $('#previews-wrapper .preview[status="loading"]').length;
console.log("[checkLoading] loading count " + loadingCount);
if (loadingCount === 0) {
setTimeout(function () { $('#previews-wrapper').attr('status', 'loaded'); }, 500);
} else {
setTimeout(checkRefreshLoad, 500);
}
}
//----------------------------------------------------------------------
// 5 - Lazy loading : chargement dynamique de contenu lorsque visible
//----------------------------------------------------------------------
var loaderCount = 0;
$('.lazy-loader[data-state="loadable"]').each(function () {
initLazyLoader($(this));
});
function initLazyLoader(lazyLoader) {
console.log('[DEBUG-' + loaderCount + '-'+lazyLoader.attr('id')+'] lazy-loader - INIT');
lazyLoader.data('handler-ref', loaderCount);
loaderCount++;
checkVisibilityChange(lazyLoader);
}
function checkVisibilityChange(lazyLoader) {
console.log('[DEBUG-' + lazyLoader.data('handler-ref') + '] lazy-loader - INIT: already visible');
if (isElementInViewport(lazyLoader)) {
onVisibilityChange(lazyLoader, true);
} else {
setTimeout(checkVisibilityChange, 500, lazyLoader);
}
}
function isElementInViewport(el) {
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
);
}
function onVisibilityChange(lazyLoader, visible) {
console.log('[DEBUG-' + lazyLoader.data('handler-ref') + '] lazy-loader - On visible change : ' + lazyLoader);
if (visible && lazyLoader.attr('data-state') == 'loadable') {
console.log('[DEBUG-' + lazyLoader.data('handler-ref') + '] lazy-loader - Visible first time');
// lazy loader appearing at the first time into the viewport => loading
lazyLoader.attr('data-state', 'loading');
// load page
lazyLoader.find('.lazy-loading-content').each(function () {
const wikiCode = $(this).html();
parseWikiCode(wikiCode,
function (htmlCode) {
console.log("[lazy-loading] Parsing wikicode OK: " + wikiCode);
lazyLoader.attr('data-state', 'load-success');
var loadedContent = $(htmlCode);
loadedContent.insertBefore(lazyLoader);
doAfterLoad(loadedContent);
lazyLoader.remove();
initChainedLazyLoaders(lazyLoader);
}, function () {
// loading failed
console.error("[lazy-loading] Parsing wikicode FAILED: " + wikiCode);
lazyLoader.attr('data-state', 'load-fail');
initChainedLazyLoaders(lazyLoader);
});
});
}
}
function doAfterLoad(loadedContent) {
// init previews swap button
loadedContent.each(function() {
if ($( this ).is('#previews-wrapper')) {
initPreviewWrapper.bind($( this )).call();
} else if ($(this).is('[data-trigger]')) {
initClickTrigger.bind($( this )).call();
}
});
loadedContent.find('#previews-wrapper').each(initPreviewWrapper);
loadedContent.find('[data-trigger]').click(initClickTrigger);
}
function initChainedLazyLoaders(lazyLoader) {
var id = lazyLoader.attr('id');
// active those referecing by 'previous'
if (id) {
$('.lazy-loader[data-state="sleep"][data-previous-load="' + id + '"]').each(function () {
$(this).attr('data-state', 'loadable');
initLazyLoader($(this));
});
}
// active those refereced by 'previous'
var next = lazyLoader.attr('data-next-loader');
if (next) {
next.split(' ').forEach(function (loaderId) {
$('.lazy-loader[id="' + loaderId + '"]').attr('data-state', 'loadable');
initLazyLoader($(this));
});
}
}
//----------------------------------------------------------------------
// 6 - Gestion de l'épinglage du menu d'une page
//----------------------------------------------------------------------
$('#toc').each(function() {
const pageMenuContent = $(this).html();
$('#pinned-page-menu').each(function() {
$(this).html(pageMenuContent + '<div class="pin-page-menu"></div>');
});
});
$('.pin-page-menu').click(function() {
$('#pinned-page-menu').toggleClass('on');
});
//----------------------------------------------------------------------
// 7 - Gestion du mode plein écran
//----------------------------------------------------------------------
$('.fullscreen-mode-toggler').click(function() {
if (!document.fullscreenElement) {
$('#content')[0].requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
});
$('#content')[0].addEventListener("fullscreenchange", function(event) {
if (document.fullscreenElement) {
$(document.body).addClass('mode-fullscreen');
} else {
$(document.body).removeClass('mode-fullscreen');
}
});
//----------------------------------------------------------------------
// 8 - Gestion du mode pleine largeur
//----------------------------------------------------------------------
$('.display-mode-large-toggler').click(function() {
$(document.body).toggleClass('mode-display-large');
});
//----------------------------------------------------------------------
// 9 - Gestion du mode simplifié
//----------------------------------------------------------------------
$('.display-mode-zen-toggler').click(function() {
$(document.body).toggleClass('mode-display-zen');
});
//----------------------------------------------------------------------
// 10 - Reset des modes d'affichage custom
//----------------------------------------------------------------------
$('.display-mode-cleaner').click(function() {
$(document.body).removeClass('mode-display-large');
$(document.body).removeClass('mode-display-zen');
});
//----------------------------------------------------------------------
// 11 - Correction des wikitables pour affichages multi-plateforme
//----------------------------------------------------------------------
$('table.wikitable').each(function() {
// remplacement de l'attribut CSS par la classe CSS
var float = $(this).css('float');
if (float == 'right' || float == 'left') {
$(this).css('float', 'unset');
$(this).addClass('float-' + float);
// correction de la largeur
var style = $(this).attr('style');
var isWidth40percent = (style.indexOf('width: 40%;') > 0) || (style.indexOf('width:40%;') > 0);
if (isWidth40percent) {
$(this).css('width', 'unset');
$(this).addClass('w-500');
}
var isWidth30percent = (style.indexOf('width: 30%;') > 0) || (style.indexOf('width:30%;') > 0);
if (isWidth30percent) {
$(this).css('width', 'unset');
$(this).addClass('w-400');
}
}
});
//----------------------------------------------------------------------
// 12 - Chargement dynamique du menu 'Explorateur'
//----------------------------------------------------------------------
var callbackOnExplorerLoad = function(htmlCode) {
// explorer template load success -> inject explorer HTML code in current page
console.log("[Explore-OB] GET Template 'Explorer OB' OK");
var content = $(htmlCode);
$(document.body).append(content);
content .find('[data-trigger]').click(initClickTrigger);
console.log("[Explore-OB] 'Explorer OB' menu added.");
};
parseWikiCode('{{Modèle:Explorer OB}}', callbackOnExplorerLoad);
//----------------------------------------------------------------------
// 12 - Chargement dynamique des résumé des pages récentes.
//----------------------------------------------------------------------
var callbackOnSummaryLoad = function(htmlCode) {
// explorer template load success -> inject explorer HTML code in current page
console.log("[Explore-OB] GET Template 'Explorer OB' OK");
console.log("[Page-Summary] summary loaded : " + $(this).html());
$(this).html(htmlCode);
$(this).removeClass('summary-loading');
};
$('.page-summary').each(function() {
$(this).addClass('summary-loading');
var wikicode = $(this).html();
$(this).html('');
console.log("[Page-Summary] parseWikiCode... " + wikicode);
parseWikiCode(wikicode, callbackOnSummaryLoad.bind(this));
});
$(document.body).addClass('page-loaded');
}());
