User:Canadabonk/common.js: Difference between revisions
Content added Content deleted
Canadabonk (talk | contribs) No edit summary |
Canadabonk (talk | contribs) No edit summary Tag: Reverted |
||
Line 14: | Line 14: | ||
sidetools.append(tocbuttonhtml); |
sidetools.append(tocbuttonhtml); |
||
// add |
// add OOUI listbullet icon to button |
||
const |
|||
tocbutton = $('.ct-toc .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>'; |
|||
tocbuttonOOUI = new OO.ui.IconWidget( { |
|||
icon: 'listBullet', |
icon: 'listBullet', |
||
label: 'Contents', |
label: 'Contents', |
||
Line 75: | Line 75: | ||
sidetools.append('<div class="ct-edit"><a class="ct-sidetools-button"></a></div>'); |
sidetools.append('<div class="ct-edit"><a class="ct-sidetools-button"></a></div>'); |
||
const |
const |
||
faEditButton = '<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="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>', |
//faEditButton = '<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="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>', |
||
faViewSource = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>', |
//faViewSource = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>', |
||
faEditButton = new OO.ui.IconWidget( { |
|||
icon: 'edit', |
|||
label: 'Edit', |
|||
title: 'Edit' |
|||
} ), |
|||
faViewSource = new OO.ui.IconWidget( { |
|||
icon: 'lock', |
|||
label: 'View source', |
|||
title: 'View source' |
|||
} ), |
|||
cosmosEditButton = $('.cosmos-actions-edit').first(), |
cosmosEditButton = $('.cosmos-actions-edit').first(), |
||
editButtonHref = cosmosEditButton.parent().attr('href'), |
editButtonHref = cosmosEditButton.parent().attr('href'), |
Revision as of 15:23, 6 June 2024
$(document).ready(function () {
// desktop/tablet only
if ($(window).width() > 850 && $('body.skin-cosmos').length) {
//add sidetools wrapper
$('#mw-content').prepend('<div class="ct-sidetools-wrapper"><div class="ct-sidetools"></div></div>');
const sidetools = $('.ct-sidetools');
// if toc exists, add toc to sidetools
if ($('#toc').length) {
//add button html
const tocbuttonhtml = '<div class="ct-toc"><span class="ct-sidetools-button"></span></div>';
sidetools.append(tocbuttonhtml);
// add OOUI listbullet icon to button
const
tocbutton = $('.ct-toc .ct-sidetools-button'),
tocbuttonOOUI = new OO.ui.IconWidget( {
icon: 'listBullet',
label: 'Contents',
title: 'Contents'
} );
tocbutton.append(tocbuttonOOUI.$element);
tocbutton.attr('title', 'Contents');
// get contents of toc
const sidetoc = $('.ct-toc');
$('#toc').find('ul').first().clone().appendTo('.ct-toc, #CosmosRail');
sidetoc.find('ul').first().wrap('<div class="ct-stickytoc"></div>');
const stickytoc = $('.ct-stickytoc');
stickytoc.prepend('<div><h3>Contents</h3><span class="ct-toc-move">Move to rail</span></div>');
stickytoc.hide();
tocbutton.click(function () {
stickytoc.fadeToggle(200);
});
stickytoc.find('a').click(function () {
stickytoc.fadeOut(200);
});
hideOnClickOutside('.ct-toc', '.ct-stickytoc');
// siderail toc
$('#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>');
if (localStorage.tocInRail) {
sidetoc.hide();
railtoc.show();
} else {
railtoc.hide();
}
$('.ct-toc-move').click(function () {
if (sidetoc.is(':visible')) {
sidetoc.hide();
railtoc.show();
localStorage.tocInRail = true;
} else {
railtoc.hide();
sidetoc.show();
stickytoc.hide();
localStorage.removeItem('tocInRail');
}
});
} //end toc
//edit button begin
if (!$('body.action-edit').length) {
sidetools.append('<div class="ct-edit"><a class="ct-sidetools-button"></a></div>');
const
//faEditButton = '<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="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>',
//faViewSource = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>',
faEditButton = new OO.ui.IconWidget( {
icon: 'edit',
label: 'Edit',
title: 'Edit'
} ),
faViewSource = new OO.ui.IconWidget( {
icon: 'lock',
label: 'View source',
title: 'View source'
} ),
cosmosEditButton = $('.cosmos-actions-edit').first(),
editButtonHref = cosmosEditButton.parent().attr('href'),
editButtonText = cosmosEditButton.find('.cosmos-button-text').text(),
sidetoolsEditButton = $('.ct-edit .ct-sidetools-button');
sidetoolsEditButton.attr({
'href': editButtonHref,
'title': editButtonText
});
if (cosmosEditButton.attr('id') == 'ca-viewsource') {
sidetoolsEditButton.append(faViewSource);
} else {
sidetoolsEditButton.append(faEditButton);
}
}
} //end desktop
function hideOnClickOutside(container, hiddenitem) {
window.onclick = function (event) {
const $target = $(event.target);
if (!$target.closest(container).length && $(hiddenitem).is(':visible')) {
$(hiddenitem).fadeOut(200);
}
};
}
}); //end document ready