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; | ||
| Строка 353: | Строка 353: | ||
var noHeader = table.classList.contains('no-header-table'); | var noHeader = table.classList.contains('no-header-table'); | ||
if (!tbody) return; | |||
if (tbody) | |||
// Получаем все строки <tr> внутри tbody, исключая строки с вложенными таблицами | |||
var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr')).filter(function(row) { | |||
return !row.querySelector('table'); | |||
}); | |||
// Пропускаем первую строку, если нет thead и нет класса 'no-header' | |||
var topLevelRows = (!thead && !noHeader) ? rows.slice(1) : rows; | |||
var hasInvalidRowspan = false; | |||
var hasTooManyRowspan = false; | |||
// Проверка на корректность rowspan | |||
topLevelRows.forEach(function(row) { | |||
var cells = Array.prototype.slice.call(row.querySelectorAll('td, th')).filter(function(cell) { | |||
return !cell.classList.contains('mobile'); | |||
}); | |||
var cellCount = cells.length; | |||
var rowspanCount = cells.filter(function(cell) { | |||
return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1'; | |||
}).length; | |||
if (rowspanCount > 2) { | |||
hasTooManyRowspan = true; | |||
return; | |||
} | |||
if (cellCount <= 3 && rowspanCount > 1) { | |||
hasTooManyRowspan = true; | |||
return; | |||
} | |||
var hasValidRowspanEdge = cells.some(function(cell, index) { | |||
return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1' && (index === 0 || index === cells.length - 1); | |||
}); | }); | ||
if (!hasValidRowspanEdge && cells.some(function(cell, index) { | |||
if (hasTooManyRowspan || hasInvalidRowspan) return; | return cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1' && index > 0 && index < cells.length - 1; | ||
})) { | |||
hasInvalidRowspan = true; | |||
} | |||
}); | |||
if (hasTooManyRowspan || hasInvalidRowspan) return; | |||
// Проходим по каждой строке для добавления событий подсветки | |||
topLevelRows.forEach(function(row, rowIndex) { | |||
var cells = Array.prototype.slice.call(row.querySelectorAll('td, th')); | |||
var originalStyles = cells.map(function(cell) { | |||
return { | |||
backgroundColor: getComputedStyle(cell).backgroundColor, | |||
color: getComputedStyle(cell).color | |||
}; | |||
}); | |||
cells.forEach(function(cell, cellIndex) { | |||
if (cell.hasAttribute('rowspan') && cell.getAttribute('rowspan') !== '1') { | |||
var rowspan = parseInt(cell.getAttribute('rowspan'), 10); | |||
// | // Наведение на ячейку с rowspan | ||
cell.addEventListener('mouseover', function() { | cell.addEventListener('mouseover', function() { | ||
for (var i = rowIndex; i < rowIndex + rowspan; i++) { | |||
if (! | var targetRow = rows[i]; | ||
if (!targetRow) continue; | |||
var targetCells = Array.prototype.slice.call(targetRow.querySelectorAll('td, th')); | |||
} | targetCells.forEach(function(targetCell) { | ||
} | targetCell.style.backgroundColor = brightenColor(getComputedStyle(targetCell).backgroundColor); | ||
targetCell.style.color = brightenColor(getComputedStyle(targetCell).color); | |||
}); | |||
} | |||
}); | }); | ||
// | // Убираем подсветку при выходе мыши | ||
cell.addEventListener('mouseout', function() { | cell.addEventListener('mouseout', function() { | ||
for (var i = rowIndex; i < rowIndex + rowspan; i++) { | |||
if (! | var targetRow = rows[i]; | ||
if (!targetRow) continue; | |||
var targetCells = Array.prototype.slice.call(targetRow.querySelectorAll('td, th')); | |||
} | targetCells.forEach(function(targetCell, targetIndex) { | ||
targetCell.style.backgroundColor = originalStyles[targetIndex].backgroundColor; | |||
targetCell.style.color = originalStyles[targetIndex].color; | |||
}); | |||
} | |||
}); | |||
// Наведение на ячейки, которые охвачены rowspan | |||
for (var i = rowIndex + 1; i < rowIndex + rowspan; i++) { | |||
if (!rows[i]) continue; | |||
var affectedRow = rows[i]; | |||
var affectedCells = Array.prototype.slice.call(affectedRow.querySelectorAll('td, th')); | |||
affectedCells.forEach(function(affectedCell) { | |||
affectedCell.addEventListener('mouseover', function() { | |||
cell.style.backgroundColor = brightenColor(getComputedStyle(cell).backgroundColor); | |||
cell.style.color = brightenColor(getComputedStyle(cell).color); | |||
}); | |||
affectedCell.addEventListener('mouseout', function() { | |||
cell.style.backgroundColor = originalStyles[cellIndex].backgroundColor; | |||
cell.style.color = originalStyles[cellIndex].color; | |||
}); | |||
}); | }); | ||
} | } | ||
} | } | ||
}); | }); | ||
} | }); | ||
}); | }); | ||
} | } | ||