wikimedia/mediawiki-extensions-DiscussionTools
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools synced 2024-11-11 17:02:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve comment ruler drawing in debug mode when indentation is weird

Browse source 
Ignore the horizontal position of the comments' bounding boxes entirely.
It can be crazy because of de-indentation in the middle of the comment,
and even just text formatting with padding/margins (e.g. `<code>`) can
make it look weird. Just draw the rulers based on detected indentation.

Change-Id: Id4e5edf076d44bdedfb45958260d797daea29ed1
This commit is contained in:
Bartosz Dziewoński 2020-02-08 19:50:41 +01:00
parent a491e3aaac
commit 3896babde3
1 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
modules/highlighter.js
View file

@ -1,6 +1,8 @@
'use strict';
var parser = require( 'ext.discussionTools.parser' );
var
parser = require( 'ext.discussionTools.parser' ),
initialOffset, indentWidth;
function markTimestamp( node, match ) {
var
@ -51,6 +53,27 @@ function fixFakeFirstHeadingRect( rect, comment ) {
return rect;
}
function calculateSizes() {
var $content, rect, $test, rtl;
if ( initialOffset !== undefined ) {
return;
}
// eslint-disable-next-line no-jquery/no-global-selector
rtl = $( 'html' ).attr( 'dir' ) === 'rtl';
// eslint-disable-next-line no-jquery/no-global-selector
$content = $( '#mw-content-text' );
$test = $( '<dd>' ).appendTo( $( '<dl>' ).appendTo( $content ) );
rect = $content[ 0 ].getBoundingClientRect();
initialOffset = rtl ? document.body.scrollWidth - rect.left - rect.width : rect.left;
indentWidth = parseFloat( $test.css( rtl ? 'margin-right' : 'margin-left' ) ) +
parseFloat( $test.parent().css( rtl ? 'margin-right' : 'margin-left' ) );
$test.parent().remove();
}
function markComment( comment ) {
var
// eslint-disable-next-line no-jquery/no-global-selector
@ -71,6 +94,8 @@ function markComment( comment ) {
marker.style.width = ( rect.width ) + 'px';
document.body.appendChild( marker );
calculateSizes();
if ( comment.parent ) {
parentRect = getBoundingRect( comment.parent );
parentRect = fixFakeFirstHeadingRect( parentRect, comment.parent );
@ -78,22 +103,17 @@ function markComment( comment ) {
// Twiddle so that it looks nice
parentRect = $.extend( {}, parentRect );
parentRect.height -= 10;
if ( rtl ) {
parentRect.width += 20;
} else {
parentRect.left -= 20;
}
}
marker2.className = 'detected-comment-ruler';
marker2.style.top = ( parentRect.top + parentRect.height + scrollTop ) + 'px';
marker2.style.height = ( rect.top - ( parentRect.top + parentRect.height ) + 10 ) + 'px';
if ( rtl ) {
marker2.style.left = ( rect.left + rect.width + scrollLeft ) + 'px';
marker2.style.width = ( 10 ) + 'px';
marker2.style.right = ( initialOffset - indentWidth / 2 + comment.parent.level * indentWidth ) + 'px';
marker2.style.width = ( ( comment.level - comment.parent.level ) * indentWidth - indentWidth / 2 ) + 'px';
} else {
marker2.style.left = ( parentRect.left + 10 + scrollLeft ) + 'px';
marker2.style.width = ( rect.left - ( parentRect.left + 10 ) ) + 'px';
marker2.style.left = ( initialOffset - indentWidth / 2 + comment.parent.level * indentWidth ) + 'px';
marker2.style.width = ( ( comment.level - comment.parent.level ) * indentWidth - indentWidth / 2 ) + 'px';
}
document.body.appendChild( marker2 );
}