TestWiki

User:Canadabonk/common.js: Difference between revisions

← Older edit
Content deleted Content added
Canadabonk (talk | contribs)
278 edits
No edit summary
Canadabonk (talk | contribs)
278 edits
No edit summary
 
(77 intermediate revisions by the same user not shown)
Line 1:
defaultCategoryView = 'Dynamic'; // Choose from 'Classic' , 'Dynamic' or 'Gallery' --- First letter capital, with single quotes
$(document).ready(function(){
 
galleryCatStyle = 'Compacter'; // 'Normal' , 'Compact' or 'Compacter'
// desktop/tablet only
 
if ($(window).width() > 850 && $('body.skin-cosmos').length) {
catlistAlphabets = true; // true or false. Whether you want the menu of navigation alphabets above the category list
 
//add sidetools wrapper
//--------------------------------------------------------------------------
$('#mw-content').prepend('<div class="ct-sidetools-wrapper"><div class="ct-sidetools"></div></div>');
 
const sidetools = $('.ct-sidetools');
$(function () {
if ($('body').is('.ns-14')) {
// if toc exists, add toc to sidetools
mw.util.addCSS(`
if ($('#toc').length) {
#mw-pages .mw-category, .dynamic-catlist, .gallery-catlist {
//add button html
display:none;
const tocbuttonhtml = '<div class="ct-toc"><span class="ct-sidetools-button"></span></div>';
}
sidetools.append(tocbuttonhtml);
#mw-pages.catview-Classic .mw-category, .catview-Dynamic .dynamic-catlist, .catview-Gallery .gallery-catlist {
display:block;
// add fontawesome list ul icon to toc button
}
const tocbutton = $('.ct-toc').find('.ct-sidetools-button');
 
const faListUl = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></svg>';
/*----------- dynamic ---------*/
tocbutton.append(faListUl);
 
.dynamic-catlist {
// get contents of toc
column-count:3;
const sidetoc = $('.ct-toc');
column-width:24em;
$('#toc').find('ul').first().clone().appendTo('.ct-toc, #CosmosRail');
column-gap:2em;
sidetoc.find('ul').first().wrap('<div class="ct-stickytoc"></div>');
}
 
const stickytoc = $('.ct-stickytoc');
.dynamic-catlist ul{
stickytoc.prepend('<div><h3>Contents</h3><span class="ct-toc-move">Move to rail</span></div>');
list-style:none;
stickytoc.hide();
margin-left:0;
}
tocbutton.click(function() {
 
stickytoc.fadeToggle(200);
.dynamic-catlist h3 {
});
border-bottom: 1px solid #ccc;
}
stickytoc.find('a').click(function(){
 
stickytoc.fadeOut(200);
.dynamic-catlist li {
});
display:flex;
align-items:center;
hideOnClickOutside('.ct-toc', '.ct-stickytoc');
gap:1em;
margin:5px 0;
// siderail toc
break-inside:avoid;
$('#CosmosRail').find('ul').first().wrap('<section class="module ct-railtoc"></section>');
}
const railtoc = $('.ct-railtoc');
 
railtoc.prepend('<div><h3>Contents</h3><span class="ct-toc-move">Move to sidetools</span></div>');
.dynamic-catlist .catlink-thumb {
width:4em;
if (localStorage.tocInRail) {
aspect-ratio: 1;
sidetoc.hide();
}
railtoc.show();
img.catlink-thumb {
} else {
object-fit:cover;
railtoc.hide();
object-position:center top;
}
border:1px solid #ccc;
}
$('.ct-toc-move').click(function(){
div.catlink-thumb {
if (sidetoc.is(':visible')) {
display:flex;
sidetoc.hide();
align-items:center;
railtoc.show();
justify-content: center;
localStorage.tocInRail = true;
}
} else {
railtoc.hide();
.catlink-thumb svg {
sidetoc.show;
width:40%;
localStorage.removeItem('tocInRail');
}height:auto;
})fill:currentcolor;
}
 
/*----------- gallery ---------*/
}
 
}
.gallery-catlist ul {
list-style:none;
function hideOnClickOutside(container, hiddenitem) {
margin-left:0;
window.onclick = function (event) {
margin-top:1em;
const $target = $(event.target);
display:grid;
if (!$target.closest(container).length && $(hiddenitem).is(':visible')) {
gap:1.5em;
$(hiddenitem).fadeOut(200);
}row-gap:2.5em;
grid-template-columns: repeat(auto-fill, 10em);
};
grid-template-rows: auto;
}
justify-content:center;
}
 
.gallery-catlist li {
display:contents;
}
 
.gallery-catlist li a {
position:relative;
transition:opacity 0.2s;
}
.gallery-catlist li a:hover {
opacity:0.8;
}
 
.gallery-catlist .catgallery-thumb {
width:100%;
aspect-ratio:1;
border:1px solid #ccc;
object-fit:cover;
object-position:center top;
box-sizing:border-box;
}
 
.catgallery-noimg .catgallery-thumb {
background-color:rgba(150,150,150,0.4);
display:flex;
justify-content:center;
align-items:center;
}
 
.catgallery-noimg svg {
width:30%;
height:fit-content;
fill:#888;
}
 
/*----------- compact gallery ---------*/
 
div.gallery-compact ul {
gap:1em;
}
div.gallery-compacter ul {
gap:2px;
grid-template-columns: repeat(auto-fill, minmax(8em,1fr));
}
 
.gallery-compact .catgallery-text, .gallery-compacter .catgallery-text {
line-height:1.2em;
position:absolute;
color:#fff;
width:100%;
height:100%;
box-sizing:border-box;
padding:5px 10px;
bottom:0;
left:0;
display:flex;
align-items:flex-end;
background-image: linear-gradient(7deg, rgba(0,0,0,0.7), transparent 50%);
text-shadow: 0 0 10px black;
word-break:break-word;
}
 
.gallery-compact .catgallery-noimg .catgallery-text, .gallery-compacter .catgallery-noimg .catgallery-text {
background-image:unset;
background-color:rgba(0,0,0,0.4);
}
 
.gallery-compacter .catgallery-thumb, .gallery-compacter .catgallery-blank {
border:unset;
}
 
/*----------- menu buttons ---------*/
 
.catlist-menu {
display:flex;
gap:10px;
justify-content:right;
flex-flow:row wrap;
margin:10px 0;
}
 
.catlist-selector, .catlist-nav, .catlist-alphabet {
display:flex;
gap:10px;
}
 
.catlist-nav {
flex: 1 0 500px;
justify-content:space-between;
max-width:100%;
}
.catlist-alphabet {
overflow:scroll;
gap:5px;
}
 
#mw-pages > .catlist-nav {
margin-top:10px;
}
 
.catbtn {
border: 1px solid #ccc;
padding:8px;
user-select:none;
cursor:pointer;
border-radius:6px;
transition:background-color 0.2s;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
 
.catlist-selector .catbtn {
line-height:0;
}
 
.catbtn.active, .catbtn:hover {
background-color: rgba(200,200,200,0.6);
}
 
.catlist-selector .catbtn::before {
content: attr(title);
position:absolute;
top:-35px;
left:50%;
transform:translateX(-50%);
border: inherit;
display:none;
line-height:1.2em;
padding:5px 8px;
background-color:white;
z-index:1;
}
.catlist-selector .catbtn:hover::before {
display:block;
}
 
.catbtn svg {
width:1.5em;
height:1.5em;
fill:currentcolor;
}
 
.catlist-nav span.catbtn {
background-color:rgba(200,200,200,0.6);
opacity: 0.5;
cursor:unset;
}
 
.redirect-in-category {
display:contents;
}
 
@media screen and (max-width:500px) {
.gallery-catlist ul {
grid-template-columns: repeat(3, 1fr);
gap:0.5em;
}
}
`);
 
$('#mw-pages > :not(a)').appendTo($('#mw-pages').clone().empty().insertBefore('#mw-pages'));
$('[id=mw-pages]').eq(1).attr('id', 'mw-pages-extra');
 
const mwPages = $('#mw-pages');
 
if (!localStorage.categoryView) {
localStorage.categoryView = defaultCategoryView;
}
 
// Apply class to #mw-pages based on localStorage
 
mwPages.attr('class', 'catview-' + localStorage.categoryView);
 
// Check for magic word in page content, apply class if present
 
catMagicWords('__CLASSICCAT__', 'catview-Classic');
catMagicWords('__DYNAMICCAT__', 'catview-Dynamic');
catMagicWords('__GALLERYCAT__', 'catview-Gallery');
 
const
iconClassic = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>',
iconDynamic = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"/></svg>',
iconGallery = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 96l0 128-128 0 0-128 128 0zm0 192l0 128-128 0 0-128 128 0zM192 224L64 224 64 96l128 0 0 128zM64 288l128 0 0 128L64 416l0-128zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"/></svg>',
iconEmpty = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>';
 
// Make menu buttons
 
$('#mw-pages > p:first-of-type').after(`<div class="catlist-menu"><div class="catlist-selector"><span class="catbtn" title="Classic">${iconClassic}</span><span class="catbtn" title="Dynamic">${iconDynamic}</span><span class="catbtn" title="Gallery">${iconGallery}</span></div></div>`);
 
$('.catlist-menu').prepend('<div class="catlist-nav"></div>');
 
if (catlistAlphabets) {
 
$('.catlist-nav').prepend('<div class="catlist-alphabet"></div>');
 
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
alphabetlist = $('.catlist-alphabet');
 
for (x in alphabet) {
alphabetlist.append(`<a class="catbtn" href="?pagefrom=${alphabet[x]}">${alphabet[x]}</a>`);
}
 
alphabetlist.prepend(`<a class="catbtn" href="?">#</a>`);
 
}
 
if ($('#mw-pages-extra > a').length > 0) {
$('.catlist-nav').prepend('<span class="catbtn catlist-prev">Previous</span>').append('<span class="catbtn catlist-next">Next</span>');
$('#mw-pages').append('<div class="catlist-nav"><span class="catbtn catlist-prev">Previous</span><span class="catbtn catlist-next">Next</span></div>');
 
if ($('#mw-pages-extra > a').eq(0).text() == 'previous page') {
$('.catlist-prev').replaceWith(`<a class="catbtn catlist-prev" href="${$('#mw-pages-extra > a').eq(0).attr('href')}">Previous</a>`);
} else {
$('.catlist-next').replaceWith(`<a class="catbtn catlist-next" href="${$('#mw-pages-extra > a').eq(0).attr('href')}">Next</a>`);
}
 
if ($('#mw-pages-extra > a').eq(1).text() != $('#mw-pages-extra > a').eq(0).text()) {
$('.catlist-next').replaceWith(`<a class="catbtn catlist-next" href="${$('#mw-pages-extra > a').eq(1).attr('href')}">Next</a>`);
}
}
 
const iconPrev = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>',
iconNext = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>';
 
$('.catlist-prev').prepend(iconPrev);
$('.catlist-next').append(iconNext);
$('#mw-pages-extra').remove();
 
// Make button active based on category view
 
$('.catlist-selector .catbtn[title=' + mwPages.attr('class').slice(8) + ']').addClass('active');
 
$('.catlist-selector .catbtn').click($.proxy(catSelect, null));
 
// Make Dynamic and Gallery view wrappers
 
$('#mw-pages .mw-category').after('<div class="gallery-catlist"><ul></ul></div>');
$('#mw-pages .mw-category li').clone().appendTo('.gallery-catlist ul');
$('#mw-pages .mw-category').clone().removeClass().addClass('dynamic-catlist').insertAfter('#mw-pages .mw-category');
 
switch (galleryCatStyle) {
case 'Compact':
$('.gallery-catlist').addClass('gallery-compact');
break;
case 'Compacter':
$('.gallery-catlist').addClass('gallery-compacter');
}
 
api = new mw.Api(),
pages = [],
pageslice = [];
 
// pages is array of all category pages on current page, in order
 
$('#mw-pages .mw-category li a').each(function () {
pages.push($(this).attr('title'));
});
 
// slice array into chunks of 50 (page limit by default is 200, and pageimages api max query is 50)
 
for (i = 0; pages.length > i * 50; i++) {
pageslice[i] = pages.slice(i * 50, (i + 1) * 50);
}
 
// get pageimages
 
Promise.all(pageslice.map(function (value) {
const pageimagesparams = {
action: 'query',
format: 'json',
prop: 'pageimages',
pithumbsize: '200',
titles: value
};
 
return new Promise((resolve, reject) => {
api.get(pageimagesparams).done(function (data) {
resolve(Object.values(data.query.pages));
});
});
 
}))
.then(function (values) {
// combine all api results into one array and sort based on the 'pages' array
imageslist = values.flatMap(a => a);
imageslist.sort((a, b) => pages.indexOf(a.title) - pages.indexOf(b.title));
 
// Add images to Gallery and Dynamic
 
$('.gallery-catlist li a').each(function (index) {
$(this).wrapInner('<div class="catgallery-text"><span></span></div>');
$(this).find('span').html($(this).find('span').text().replaceAll(/(:|\/)/g, "$1<wbr>"));
try { $(this).prepend(`<img class="catgallery-thumb catgallery-img" src="${imageslist[index].thumbnail.source}">`) }
catch (err) { $(this).addClass('catgallery-noimg').prepend(`<div class="catgallery-thumb">${iconEmpty}</div>`) }
});
 
$('.dynamic-catlist li a').each(function (index) {
try { $(this).before(`<a title="${$(this).attr('title')}" href="${$(this).attr('href')}"><img class="catlink-thumb" src="${imageslist[index].thumbnail.source}"></a>`) }
catch (err) { $(this).before(`<div class="catlink-thumb">${iconEmpty}</div>`) }
});
 
});
}
});
 
function catSelect() {
$(this).addClass('active').siblings().removeClass('active');
localStorage.categoryView = $(this).attr('title');
$('#mw-pages').attr('class', 'catview-' + $(this).attr('title'));
}
 
function catMagicWords(magicword, addclass) {
if ($('.mw-parser-output').html().search(magicword) > -1) {
$('.mw-parser-output').html($('.mw-parser-output').html().replace(magicword, ''));
$('#mw-pages').attr('class', addclass);
}
}
Retrieved from "https://publictestwiki.com/wiki/User:Canadabonk/common.js"