More actions
No edit summary |
No edit summary |
||
Line 71: | Line 71: | ||
'background-attachment': 'fixed' | 'background-attachment': 'fixed' | ||
}); | }); | ||
// Apply light background to .mw-header and .mw-footer | |||
$('.mw-header').css({ | |||
'background-color': 'rgb(238, 238, 238) !important' | |||
}); | |||
$('.mw-footer').css({ | |||
'background-color': 'rgb(238, 238, 238) !important' | |||
}); | |||
} else { | } else { | ||
// Apply category backgrounds if not in light mode | // Apply category backgrounds if not in light mode | ||
Line 99: | Line 109: | ||
}); | }); | ||
} | } | ||
// Reset the background color for .mw-header and .mw-footer in dark mode | |||
$('.mw-header').css({ | $('.mw-header').css({ | ||
'background-color': ' | 'background-color': '' // Reset the background color in dark mode | ||
}); | }); | ||
$('.mw-footer').css({ | $('.mw-footer').css({ | ||
'background-color': ' | 'background-color': '' // Reset the background color in dark mode | ||
}); | }); | ||
} | } | ||
Line 119: | Line 131: | ||
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); | observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); | ||
}); | }); | ||
Revision as of 21:29, 6 February 2025
/* Any JavaScript here will be loaded for all users on every page load. */
$(function(){
$('.card').on('mousenter', function(event){
event.preventDefault();
$(this).toggleClass('hovered');
});
$('.card').on('mouseleave', function(event){
event.preventDefault();
$(this).toggleClass('hovered');
});
});
$(document).ready(function() {
var categories = mw.config.get('wgCategories');
var categoryBackgrounds = {
'Dead Island': ['https://cemodding.wiki/images/5/5b/Dead_islan_background.png'],
'Dying Light': ['https://cemodding.wiki/images/f/fe/Dying_light.png'],
'Call of Juarez: Gunslinger': ['https://cemodding.wiki/images/4/4b/Call_of_juaez_gunslinger.png'],
'Dead Island Riptide': ['https://cemodding.wiki/images/b/b6/Random_project_di_riptide_1.png'],
'Dead Island Riptide DE': ['https://cemodding.wiki/images/0/09/Dead_island_riptide_DE.png'],
'Call of Juarez: BiB': ['https://cemodding.wiki/images/2/24/Project_juaez_no_title_1.png'],
'Call of Juarez: The Cartel': ['https://cemodding.wiki/images/6/64/Callofjuarezcartel.png'],
'Call of Juarez': [
'https://cemodding.wiki/images/c/cf/Call_of_juarez_background_1.png',
'https://cemodding.wiki/images/3/38/Call_of_juarez_background_2.png'
],
'Dead Island DE': ['https://cemodding.wiki/images/4/45/Dead_island_DE.png'],
'Dying Light: The Beast': [
'https://cemodding.wiki/images/1/12/Dying_light_the_beast.png',
'https://cemodding.wiki/images/c/c3/Dying_light_the_beast_2.png'
],
'Dying Light 2': [
'https://cemodding.wiki/images/0/04/Dying_light_2.png',
'https://cemodding.wiki/images/0/02/Dying_light_2_.png',
'https://cemodding.wiki/images/3/3f/Dying_light_2_some_layered_effects.png'
]
};
var defaultBackgrounds = ['https://cemodding.wiki/images/1/1f/Wiki_page.png'];
function preloadImage(url) {
var img = new Image();
img.src = url;
}
// Preload all background images
for (var category in categoryBackgrounds) {
categoryBackgrounds[category].forEach(preloadImage);
}
defaultBackgrounds.forEach(preloadImage);
function getRandomBackground(images) {
return images[Math.floor(Math.random() * images.length)];
}
// Handle background for categories and light mode
function applyBackground() {
var backgroundImageSet = false;
const htmlElement = document.documentElement;
const isLightMode = htmlElement.classList.contains("skin-citizen-light");
// Apply light mode background if theme is light
if (isLightMode) {
$('body').css({
'background': 'url("https://cemodding.wiki/images/c/c8/Lightgreybackground.png")',
'background-repeat': 'no-repeat',
'background-position': 'top center',
'background-size': 'cover',
'background-attachment': 'fixed'
});
// Apply light background to .mw-header and .mw-footer
$('.mw-header').css({
'background-color': 'rgb(238, 238, 238) !important'
});
$('.mw-footer').css({
'background-color': 'rgb(238, 238, 238) !important'
});
} else {
// Apply category backgrounds if not in light mode
categories.forEach(function(category) {
if (categoryBackgrounds[category]) {
var randomImage = getRandomBackground(categoryBackgrounds[category]);
$('body').css({
'background': `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("${randomImage}")`,
'background-repeat': 'no-repeat',
'background-position': 'top center',
'background-size': 'cover',
'opacity': 1,
'transition': 'opacity 0.5s ease',
'background-attachment': 'fixed'
});
backgroundImageSet = true;
}
});
if (!backgroundImageSet) {
var randomDefault = getRandomBackground(defaultBackgrounds);
$('body').css({
'background': `linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("${randomDefault}")`,
'background-repeat': 'no-repeat',
'background-position': 'top center',
'background-size': 'cover',
'background-attachment': 'fixed'
});
}
// Reset the background color for .mw-header and .mw-footer in dark mode
$('.mw-header').css({
'background-color': '' // Reset the background color in dark mode
});
$('.mw-footer').css({
'background-color': '' // Reset the background color in dark mode
});
}
}
// Run background application on page load
applyBackground();
// Observe class changes on <html> for theme switching without reloading
const observer = new MutationObserver(() => {
applyBackground();
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
});
$(function () {
var categoryList = [];
// Fetch categories from the API
$.ajax({
url: mw.util.wikiScript('api'),
data: {
action: 'query',
list: 'allcategories',
aclimit: '500',
format: 'json'
},
dataType: 'json',
success: function (data) {
categoryList = data.query.allcategories.map(function (cat) {
return cat['*'];
});
}
});
function createSuggestionBox(input, suggestions, cursorPosition) {
$('.category-suggestions').remove(); // Clear old suggestions
var suggestionBox = $('<ul class="category-suggestions"></ul>').css({
position: 'absolute',
zIndex: 1000,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
color: 'white',
border: '1px solid #ccc',
padding: '0',
listStyleType: 'none',
margin: '0',
maxHeight: '200px',
overflowY: 'auto',
cursor: 'pointer'
});
suggestions.forEach(function (suggestion) {
var item = $('<li></li>').text(suggestion).css({ padding: '5px' });
item.on('mousedown', function () {
var text = input.val();
var beforeCursor = text.substring(0, cursorPosition).replace(/\[\[Category:[^\]]*$/, '[[Category:' + suggestion);
var afterCursor = text.substring(cursorPosition);
input.val(beforeCursor + afterCursor);
suggestionBox.remove();
});
suggestionBox.append(item);
});
$('body').append(suggestionBox);
positionSuggestionBox(input, cursorPosition, suggestionBox);
}
function positionSuggestionBox(input, cursorPos, suggestionBox) {
var text = input.val().substring(0, cursorPos);
var textarea = input[0];
var div = $('<div></div>').css({
position: 'absolute',
whiteSpace: 'pre-wrap',
wordWrap: 'break-word',
visibility: 'hidden',
font: input.css('font'),
padding: input.css('padding'),
width: input.width(),
lineHeight: input.css('line-height')
}).appendTo('body');
// Simulate the text up to the cursor
var beforeCursorText = text.replace(/ /g, '\u00a0'); // Non-breaking spaces for correct width
div.text(beforeCursorText);
var span = $('<span>|</span>').appendTo(div); // Add a cursor marker
var cursorOffset = span.offset();
// Adjust position to match textarea
var inputOffset = input.offset();
suggestionBox.css({
top: inputOffset.top + (cursorOffset.top - div.offset().top) + parseInt(input.css('padding-top'), 10),
left: inputOffset.left + (cursorOffset.left - div.offset().left) + parseInt(input.css('padding-left'), 10)
});
div.remove();
}
$('#wpTextbox1').on('input', function () {
var input = $(this);
var cursorPos = this.selectionStart;
var text = input.val().substring(0, cursorPos);
var match = text.match(/\[\[Category:([^\]]*)$/);
if (match) {
var partial = match[1].toLowerCase();
var matches = categoryList.filter(function (category) {
return category.toLowerCase().startsWith(partial);
}).slice(0, 10); // Limit suggestions
if (matches.length) {
createSuggestionBox(input, matches, cursorPos);
}
} else {
$('.category-suggestions').remove();
}
});
$(document).on('mousedown', function (e) {
if (!$(e.target).closest('.category-suggestions').length) {
$('.category-suggestions').remove();
}
});
});
$(document).ready(function() {
// Click event for the header or the arrow
$('.mw-collapsible-header').click(function() {
var parentDiv = $(this).closest('.mw-collapsible'); // Get the closest collapsible container
var content = parentDiv.find('.mw-collapsible-content'); // Get the collapsible content
var arrow = $(this).find('.mw-collapsible-arrow'); // Get the arrow inside the header
// Toggle the collapse/expand state by adding/removing the "mw-collapsed" class
parentDiv.toggleClass('mw-collapsed');
// Toggle visibility of the content with a sliding animation
content.stop(true, true).slideToggle(); // Stop any ongoing animation before toggling visibility
// Toggle the arrow direction
if (parentDiv.hasClass('mw-collapsed')) {
arrow.html('↓');
arrow.css('transform', 'rotate(0deg)'); // No rotation when collapsed
} else {
arrow.html('↓');
arrow.css('transform', 'rotate(180deg)'); // Rotate 180 degrees when expanded
}
});
// Ensure that the arrow starts pointing up for expanded sections by default
$('.mw-collapsible').each(function() {
var parentDiv = $(this);
var content = parentDiv.find('.mw-collapsible-content');
var arrow = parentDiv.find('.mw-collapsible-header .mw-collapsible-arrow');
if (!parentDiv.hasClass('mw-collapsed')) {
content.show(); // Ensure content is visible
arrow.html('↑');
arrow.css('transform', 'rotate(90deg)');
} else {
arrow.html('↓');
arrow.css('transform', 'rotate(0deg)');
}
});
});