'use strict'; let initialOffset, indentWidth, firstMarker; const updaters = []; // eslint-disable-next-line no-jquery/no-global-selector const isRtl = $( 'html' ).attr( 'dir' ) === 'rtl'; function markTimestamp( parser, node, match ) { const dfParsers = parser.getLocalTimestampParsers(); const newNode = node.splitText( match.matchData.index ); newNode.splitText( match.matchData[ 0 ].length ); const wrapper = document.createElement( 'span' ); wrapper.className = 'ext-discussiontools-debughighlighter-timestamp'; // We might need to actually port all the date formatting code from MediaWiki's PHP code // if we want to support displaying dates in all the formats available in user preferences // (which include formats in several non-Gregorian calendars). const date = dfParsers[ match.parserIndex ]( match.matchData ).date; wrapper.title = date.format() + ' / ' + date.fromNow(); wrapper.appendChild( newNode ); node.parentNode.insertBefore( wrapper, node.nextSibling ); } function markSignature( sigNodes ) { const where = sigNodes[ 0 ], wrapper = document.createElement( 'span' ); wrapper.className = 'ext-discussiontools-debughighlighter-signature'; where.parentNode.insertBefore( wrapper, where ); while ( sigNodes.length ) { wrapper.appendChild( sigNodes.pop() ); } } function fixFakeFirstHeadingRect( rect, comment ) { // If the page has comments before the first section heading, they are connected to a "fake" // heading with an empty range. Visualize the page title as the heading for that section. if ( rect.x === 0 && rect.y === 0 && comment.type === 'heading' ) { const node = document.getElementsByClassName( 'firstHeading' )[ 0 ]; return node.getBoundingClientRect(); } return rect; } function calculateSizes() { // eslint-disable-next-line no-jquery/no-global-selector const $content = $( '#mw-content-text' ); const $test = $( '<dd>' ).appendTo( $( '<dl>' ).appendTo( $content ) ); const rect = $content[ 0 ].getBoundingClientRect(); initialOffset = isRtl ? document.body.scrollWidth - rect.left - rect.width : rect.left; indentWidth = parseFloat( $test.css( isRtl ? 'margin-right' : 'margin-left' ) ) + parseFloat( $test.parent().css( isRtl ? 'margin-right' : 'margin-left' ) ); $test.parent().remove(); } function markComment( comment ) { const marker = document.createElement( 'div' ); marker.className = 'ext-discussiontools-debughighlighter-comment'; if ( !firstMarker ) { firstMarker = marker; } let marker2 = null; if ( comment.parent ) { marker2 = document.createElement( 'div' ); marker2.className = 'ext-discussiontools-debughighlighter-comment-ruler'; } let markerWarnings = null; if ( comment.warnings && comment.warnings.length ) { markerWarnings = document.createElement( 'div' ); markerWarnings.className = 'ext-discussiontools-debughighlighter-comment-warnings'; markerWarnings.innerText = comment.warnings.join( '\n' ); } const update = function () { const rect = fixFakeFirstHeadingRect( comment.getRange().getBoundingClientRect(), comment ); const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; marker.style.top = ( rect.top + scrollTop ) + 'px'; marker.style.height = ( rect.height ) + 'px'; marker.style.left = ( rect.left + scrollLeft ) + 'px'; marker.style.width = ( rect.width ) + 'px'; if ( marker2 ) { let parentRect = comment.parent.getRange().getBoundingClientRect(); parentRect = fixFakeFirstHeadingRect( parentRect, comment.parent ); if ( comment.parent.level === 0 ) { // Twiddle so that it looks nice parentRect = Object.assign( {}, parentRect ); parentRect.height -= 10; } marker2.style.top = ( parentRect.top + parentRect.height + scrollTop ) + 'px'; marker2.style.height = ( rect.top - ( parentRect.top + parentRect.height ) + 10 ) + 'px'; if ( isRtl ) { marker2.style.right = ( initialOffset - indentWidth / 2 + comment.parent.level * indentWidth ) + 'px'; marker2.style.width = ( ( comment.level - comment.parent.level ) * indentWidth - indentWidth / 2 ) - 2 + 'px'; } else { marker2.style.left = ( initialOffset - indentWidth / 2 + comment.parent.level * indentWidth ) + 'px'; marker2.style.width = ( ( comment.level - comment.parent.level ) * indentWidth - indentWidth / 2 ) - 2 + 'px'; } } if ( markerWarnings ) { markerWarnings.style.cssText = marker.style.cssText; } }; updaters.push( update ); update(); document.body.appendChild( marker ); if ( marker2 ) { document.body.appendChild( marker2 ); } if ( markerWarnings ) { // Group warnings at the top as we use nth-child selectors // to alternate color of markers. document.body.insertBefore( markerWarnings, firstMarker ); } comment.replies.forEach( markComment ); } function markThreads( threads ) { calculateSizes(); threads.forEach( markComment ); // Reverse order so that box-shadows look right // eslint-disable-next-line no-jquery/no-global-selector $( 'body' ).append( $( '.ext-discussiontools-debughighlighter-comment-ruler' ).get().reverse() ); } function updateAll() { updaters.forEach( ( update ) => { calculateSizes(); update(); } ); } window.addEventListener( 'resize', OO.ui.debounce( updateAll, 500 ) ); module.exports = { markThreads: markThreads, markTimestamp: markTimestamp, markSignature: markSignature };