MediaWiki:Common.js: различия между версиями
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 339: | Строка 339: | ||
// Функция для подсветки ячеек в таблице при наведении | // Функция для подсветки ячеек в таблице при наведении | ||
function applyHighlighting() { | function applyHighlighting() { | ||
// | // Проверяем, является ли устройство мобильным; если да — функция не выполняется | ||
if (/Mobi|Android/i.test(navigator.userAgent)) { | if (/Mobi|Android/i.test(navigator.userAgent)) { | ||
return; | return; | ||
| Строка 355: | Строка 355: | ||
// Проверяем, что тело таблицы существует | // Проверяем, что тело таблицы существует | ||
if (tbody) { | if (tbody) { | ||
// Получаем все строки <tr> внутри tbody, исключая строки | // Получаем все строки <tr> внутри tbody, исключая строки с вложенными таблицами | ||
var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr')).filter(function(row) { | var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr')).filter(function(row) { | ||
return !row.querySelector('table'); | return !row.querySelector('table'); | ||
| Строка 362: | Строка 362: | ||
// Пропускаем первую строку, если нет thead и нет класса 'no-header' | // Пропускаем первую строку, если нет thead и нет класса 'no-header' | ||
var topLevelRows = (!thead && !noHeader) ? rows.slice(1) : rows; | var topLevelRows = (!thead && !noHeader) ? rows.slice(1) : rows; | ||
var hasInvalidRowspan = false; | var hasInvalidRowspan = false; | ||
var hasTooManyRowspan = false; | var hasTooManyRowspan = false; | ||
// Проходим по строкам первого уровня | // Проходим по строкам первого уровня | ||
topLevelRows.forEach(function(row) { | topLevelRows.forEach(function(row) { | ||
| Строка 372: | Строка 371: | ||
}); | }); | ||
var cellCount = cells.length; | var cellCount = cells.length; | ||
// Проверяем, есть ли больше двух ячеек с атрибутом rowspan | // Проверяем, есть ли больше двух ячеек с атрибутом rowspan | ||
var rowspanCount = cells.filter(function(cell) { | var rowspanCount = cells.filter(function(cell) { | ||
return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1'; | return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1'; | ||
}).length; | }).length; | ||
// Если в строке больше двух ячеек с rowspan, функция не применяется | // Если в строке больше двух ячеек с rowspan, функция не применяется | ||
if (rowspanCount > 2) { | if (rowspanCount > 2) { | ||
| Строка 383: | Строка 380: | ||
return; | return; | ||
} | } | ||
// Если строка имеет 3 или меньше ячеек и больше одного rowspan, не применяем функцию | // Если строка имеет 3 или меньше ячеек и больше одного rowspan, не применяем функцию | ||
if (cellCount <= 3 && rowspanCount > 1) { | if (cellCount <= 3 && rowspanCount > 1) { | ||
| Строка 389: | Строка 385: | ||
return; | return; | ||
} | } | ||
// Проверяем, есть ли корректные ячейки с rowspan на краю строки (первый или последний элемент) | // Проверяем, есть ли корректные ячейки с rowspan на краю строки (первый или последний элемент) | ||
var hasValidRowspanEdge = cells.some(function(cell, index) { | var hasValidRowspanEdge = cells.some(function(cell, index) { | ||
return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1' && (index === 0 || index === cells.length - 1); | return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1' && (index === 0 || index === cells.length - 1); | ||
}); | }); | ||
// Если ячейки с rowspan находятся не на краю, устанавливаем флаг ошибки | // Если ячейки с rowspan находятся не на краю, устанавливаем флаг ошибки | ||
if (!hasValidRowspanEdge && cells.some(function(cell, index) { | if (!hasValidRowspanEdge && cells.some(function(cell, index) { | ||
| Строка 402: | Строка 396: | ||
} | } | ||
}); | }); | ||
// Если есть некорректные строки с rowspan или слишком много rowspan, выходим | // Если есть некорректные строки с rowspan или слишком много rowspan, выходим | ||
if (hasTooManyRowspan || hasInvalidRowspan) return; | if (hasTooManyRowspan || hasInvalidRowspan) return; | ||
| Строка 408: | Строка 401: | ||
var originalStyles = {}; | var originalStyles = {}; | ||
// | // Сохраняем исходные стили каждой ячейки | ||
topLevelRows.forEach(function(row, rowIndex) { | topLevelRows.forEach(function(row, rowIndex) { | ||
var cells = Array.prototype.slice.call(row.querySelectorAll('td, th')); | var cells = Array.prototype.slice.call(row.querySelectorAll('td, th')); | ||
cells.forEach(function(cell, index) { | cells.forEach(function(cell, index) { | ||
if (!originalStyles[rowIndex]) originalStyles[rowIndex] = []; | if (!originalStyles[rowIndex]) originalStyles[rowIndex] = []; | ||
| Строка 420: | Строка 412: | ||
}; | }; | ||
}); | }); | ||
}); | |||
// Обрабатываем подсветку при наведении | |||
topLevelRows.forEach(function(row, rowIndex) { | |||
var cells = Array.prototype.slice.call(row.querySelectorAll('td, th')); | |||
cells.forEach(function(cell, index) { | cells.forEach(function(cell, index) { | ||
| Строка 426: | Строка 423: | ||
// Добавляем обработчик события при наведении мыши | // Добавляем обработчик события при наведении мыши | ||
cell.addEventListener('mouseover', function() { | cell.addEventListener('mouseover', function() { | ||
// | var highlightedRows = new Set(); | ||
var highlightedCells = new Set(); | |||
// Подсветка строк, охватываемых rowspan | |||
if (rowspan > 1) { | if (rowspan > 1) { | ||
for (var i = 0; i < rowspan; i++) { | for (var i = 0; i < rowspan; i++) { | ||
var targetRow = topLevelRows[rowIndex + i]; | var targetRow = topLevelRows[rowIndex + i]; | ||
if (targetRow) { | if (targetRow && !highlightedRows.has(targetRow)) { | ||
highlightedRows.add(targetRow); | |||
var targetCells = targetRow.querySelectorAll('td, th'); | var targetCells = targetRow.querySelectorAll('td, th'); | ||
Array.prototype.forEach.call(targetCells, function(innerCell, innerIndex) { | Array.prototype.forEach.call(targetCells, function(innerCell, innerIndex) { | ||
innerCell.style.backgroundColor = brightenColor(getComputedStyle(innerCell).backgroundColor); | innerCell.style.backgroundColor = brightenColor(getComputedStyle(innerCell).backgroundColor); | ||
innerCell.style.color = brightenColor(getComputedStyle(innerCell).color); | innerCell.style.color = brightenColor(getComputedStyle(innerCell).color); | ||
highlightedCells.add(innerCell); | |||
}); | }); | ||
} | } | ||
| Строка 444: | Строка 446: | ||
innerCell.style.backgroundColor = brightenColor(getComputedStyle(innerCell).backgroundColor); | innerCell.style.backgroundColor = brightenColor(getComputedStyle(innerCell).backgroundColor); | ||
innerCell.style.color = brightenColor(getComputedStyle(innerCell).color); | innerCell.style.color = brightenColor(getComputedStyle(innerCell).color); | ||
highlightedCells.add(innerCell); | |||
}); | }); | ||
| Строка 454: | Строка 457: | ||
var adjacentCells = adjacentRow.querySelectorAll('td, th'); | var adjacentCells = adjacentRow.querySelectorAll('td, th'); | ||
Array.prototype.forEach.call(adjacentCells, function(adjCell, adjIndex) { | Array.prototype.forEach.call(adjacentCells, function(adjCell, adjIndex) { | ||
if (! | if (!highlightedCells.has(adjCell)) { | ||
adjCell.style.backgroundColor = brightenColor(getComputedStyle(adjCell).backgroundColor); | adjCell.style.backgroundColor = brightenColor(getComputedStyle(adjCell).backgroundColor); | ||
adjCell.style.color = brightenColor(getComputedStyle(adjCell).color); | adjCell.style.color = brightenColor(getComputedStyle(adjCell).color); | ||
highlightedCells.add(adjCell); | |||
} | } | ||
}); | }); | ||
| Строка 463: | Строка 467: | ||
}); | }); | ||
}); | }); | ||
// Добавляем обработчик события, когда мышь уходит с ячейки | |||
cell.addEventListener('mouseout', function() { | cell.addEventListener('mouseout', function() { | ||
// Восстанавливаем стили для всех строк и ячеек | |||
highlightedRows.forEach(function(highlightedRow) { | |||
var rowIndex = topLevelRows.indexOf(highlightedRow); | |||
if (rowIndex >= 0) { | |||
var cells = Array.prototype.slice.call(highlightedRow.querySelectorAll('td, th')); | |||
cells.forEach(function(innerCell, innerIndex) { | |||
innerCell.style.backgroundColor = originalStyles[rowIndex][innerIndex].backgroundColor; | |||
innerCell.style.color = originalStyles[rowIndex][innerIndex].color; | |||
}); | |||
} | } | ||
} | }); | ||
// Восстанавливаем стили в текущем ряду | |||
cells.forEach(function(innerCell, innerIndex) { | cells.forEach(function(innerCell, innerIndex) { | ||
innerCell.style.backgroundColor = originalStyles[rowIndex][innerIndex].backgroundColor; | innerCell.style.backgroundColor = originalStyles[rowIndex][innerIndex].backgroundColor; | ||