Code Coverage |
||||||||||
Lines |
Functions and Methods |
Classes and Traits |
||||||||
| Total | |
91.46% |
75 / 82 |
|
66.67% |
6 / 9 |
CRAP | |
0.00% |
0 / 1 |
| MakeSectionsTransform | |
91.46% |
75 / 82 |
|
66.67% |
6 / 9 |
30.56 | |
0.00% |
0 / 1 |
| __construct | |
100.00% |
2 / 2 |
|
100.00% |
1 / 1 |
1 | |||
| getHeadingName | |
57.14% |
4 / 7 |
|
0.00% |
0 / 1 |
5.26 | |||
| makeSections | |
93.75% |
30 / 32 |
|
0.00% |
0 / 1 |
7.01 | |||
| prepareHeading | |
100.00% |
7 / 7 |
|
100.00% |
1 / 1 |
3 | |||
| createSectionBodyElement | |
100.00% |
7 / 7 |
|
100.00% |
1 / 1 |
2 | |||
| getTopHeadings | |
85.71% |
12 / 14 |
|
0.00% |
0 / 1 |
7.14 | |||
| getFirstHeading | |
100.00% |
9 / 9 |
|
100.00% |
1 / 1 |
4 | |||
| interimTogglingSupport | |
100.00% |
3 / 3 |
|
100.00% |
1 / 1 |
1 | |||
| apply | |
100.00% |
1 / 1 |
|
100.00% |
1 / 1 |
1 | |||
| 1 | <?php |
| 2 | |
| 3 | namespace MobileFrontend\Transforms; |
| 4 | |
| 5 | use DOMDocument; |
| 6 | use DOMElement; |
| 7 | use DOMNode; |
| 8 | use DOMXPath; |
| 9 | use LogicException; |
| 10 | use MediaWiki\Html\Html; |
| 11 | use MediaWiki\ResourceLoader\ResourceLoader; |
| 12 | use Wikimedia\Parsoid\Utils\DOMCompat; |
| 13 | |
| 14 | /** |
| 15 | * Implements IMobileTransform, that splits the body of the document into |
| 16 | * sections demarcated by the $headings elements. Also moves the first paragraph |
| 17 | * in the lead section above the infobox. |
| 18 | * |
| 19 | * All member elements of the sections are added to a <code><div></code> so |
| 20 | * that the section bodies are clearly defined (to be "expandable" for |
| 21 | * example). |
| 22 | * |
| 23 | * @see IMobileTransform |
| 24 | */ |
| 25 | class MakeSectionsTransform implements IMobileTransform { |
| 26 | |
| 27 | /** |
| 28 | * Class name for collapsible section wrappers |
| 29 | */ |
| 30 | public const STYLE_COLLAPSIBLE_SECTION_CLASS = 'collapsible-block'; |
| 31 | |
| 32 | /** |
| 33 | * Whether scripts can be added in the output. |
| 34 | * @var bool |
| 35 | */ |
| 36 | private $scriptsEnabled; |
| 37 | |
| 38 | /** |
| 39 | * List of tags that could be considered as section headers. |
| 40 | * @var array |
| 41 | */ |
| 42 | private $topHeadingTags; |
| 43 | |
| 44 | /** |
| 45 | * |
| 46 | * @param array $topHeadingTags list of tags could ne cosidered as sections |
| 47 | * @param bool $scriptsEnabled wheather scripts are enabled |
| 48 | */ |
| 49 | public function __construct( |
| 50 | array $topHeadingTags, |
| 51 | bool $scriptsEnabled |
| 52 | ) { |
| 53 | $this->topHeadingTags = $topHeadingTags; |
| 54 | $this->scriptsEnabled = $scriptsEnabled; |
| 55 | } |
| 56 | |
| 57 | /** |
| 58 | * @param DOMNode|null $node |
| 59 | * @return string|false Heading tag name if the node is a heading |
| 60 | */ |
| 61 | private function getHeadingName( $node ) { |
| 62 | if ( !( $node instanceof DOMElement ) ) { |
| 63 | return false; |
| 64 | } |
| 65 | // We accept both kinds of nodes that can be returned by getTopHeadings(): |
| 66 | // a `<h1>` to `<h6>` node, or a `<div class="mw-heading">` node wrapping it. |
| 67 | // In the future `<div class="mw-heading">` will be required (T13555). |
| 68 | if ( DOMCompat::getClassList( $node )->contains( 'mw-heading' ) ) { |
| 69 | $node = DOMCompat::querySelector( $node, implode( ',', $this->topHeadingTags ) ); |
| 70 | if ( !( $node instanceof DOMElement ) ) { |
| 71 | return false; |
| 72 | } |
| 73 | } |
| 74 | return $node->tagName; |
| 75 | } |
| 76 | |
| 77 | /** |
| 78 | * Actually splits the body of the document into sections |
| 79 | * |
| 80 | * @param DOMElement $body representing the HTML of the current article. In the HTML the sections |
| 81 | * should not be wrapped. |
| 82 | * @param DOMElement[] $headingWrappers The headings (or wrappers) returned by getTopHeadings(): |
| 83 | * `<h1>` to `<h6>` nodes, or `<div class="mw-heading">` nodes wrapping them. |
| 84 | * In the future `<div class="mw-heading">` will be required (T13555). |
| 85 | */ |
| 86 | private function makeSections( DOMElement $body, array $headingWrappers ) { |
| 87 | $ownerDocument = $body->ownerDocument; |
| 88 | if ( $ownerDocument === null ) { |
| 89 | return; |
| 90 | } |
| 91 | // Find the parser output wrapper div |
| 92 | $xpath = new DOMXPath( $ownerDocument ); |
| 93 | $containers = $xpath->query( |
| 94 | // Equivalent of CSS attribute `~=` to support multiple classes |
| 95 | 'body/div[contains(concat(" ",normalize-space(@class)," ")," mw-parser-output ")][1]' |
| 96 | ); |
| 97 | if ( !$containers->length ) { |
| 98 | // No wrapper? This could be an old parser cache entry, or perhaps the |
| 99 | // OutputPage contained something that was not generated by the parser. |
| 100 | // Try using the <body> as the container. |
| 101 | $containers = $xpath->query( 'body' ); |
| 102 | if ( !$containers->length ) { |
| 103 | throw new LogicException( "HTML lacked body element even though we put it there ourselves" ); |
| 104 | } |
| 105 | } |
| 106 | |
| 107 | $container = $containers->item( 0 ); |
| 108 | $containerChild = $container->firstChild; |
| 109 | $firstHeading = reset( $headingWrappers ); |
| 110 | $firstHeadingName = $this->getHeadingName( $firstHeading ); |
| 111 | $sectionNumber = 0; |
| 112 | $sectionBody = $this->createSectionBodyElement( $ownerDocument, $sectionNumber, false ); |
| 113 | |
| 114 | while ( $containerChild ) { |
| 115 | $node = $containerChild; |
| 116 | $containerChild = $containerChild->nextSibling; |
| 117 | // If we've found a top level heading, insert the previous section if |
| 118 | // necessary and clear the container div. |
| 119 | if ( $firstHeadingName && $this->getHeadingName( $node ) === $firstHeadingName ) { |
| 120 | // The heading we are transforming is always 1 section ahead of the |
| 121 | // section we are currently processing |
| 122 | /** @phan-suppress-next-line PhanTypeMismatchArgumentSuperType DOMNode vs. DOMElement */ |
| 123 | $this->prepareHeading( $ownerDocument, $node, $sectionNumber + 1, $this->scriptsEnabled ); |
| 124 | // Insert the previous section body and reset it for the new section |
| 125 | $container->insertBefore( $sectionBody, $node ); |
| 126 | |
| 127 | $sectionNumber += 1; |
| 128 | $sectionBody = $this->createSectionBodyElement( |
| 129 | $ownerDocument, |
| 130 | $sectionNumber, |
| 131 | $this->scriptsEnabled |
| 132 | ); |
| 133 | continue; |
| 134 | } |
| 135 | |
| 136 | // If it is not a top level heading, keep appending the nodes to the |
| 137 | // section body container. |
| 138 | $sectionBody->appendChild( $node ); |
| 139 | } |
| 140 | |
| 141 | // Append the last section body. |
| 142 | $container->appendChild( $sectionBody ); |
| 143 | } |
| 144 | |
| 145 | /** |
| 146 | * Prepare section headings, add required classes and onclick actions |
| 147 | * |
| 148 | * @param DOMDocument $doc |
| 149 | * @param DOMElement $heading |
| 150 | * @param int $sectionNumber |
| 151 | * @param bool $isCollapsible |
| 152 | */ |
| 153 | private function prepareHeading( |
| 154 | DOMDocument $doc, DOMElement $heading, $sectionNumber, $isCollapsible |
| 155 | ) { |
| 156 | $className = $heading->hasAttribute( 'class' ) ? $heading->getAttribute( 'class' ) . ' ' : ''; |
| 157 | $heading->setAttribute( 'class', $className . 'section-heading' ); |
| 158 | if ( $isCollapsible ) { |
| 159 | $heading->setAttribute( 'onclick', 'mfTempOpenSection(' . $sectionNumber . ')' ); |
| 160 | } |
| 161 | |
| 162 | // prepend indicator - this avoids a reflow by creating a placeholder for a toggling indicator |
| 163 | $indicator = $doc->createElement( 'span' ); |
| 164 | $indicator->setAttribute( 'class', 'indicator mf-icon mf-icon-expand mf-icon--small' ); |
| 165 | $heading->insertBefore( $indicator, $heading->firstChild ?? $heading ); |
| 166 | } |
| 167 | |
| 168 | /** |
| 169 | * Creates a Section body element |
| 170 | * |
| 171 | * @param DOMDocument $doc |
| 172 | * @param int $sectionNumber |
| 173 | * @param bool $isCollapsible |
| 174 | * |
| 175 | * @return DOMElement |
| 176 | */ |
| 177 | private function createSectionBodyElement( DOMDocument $doc, $sectionNumber, $isCollapsible ) { |
| 178 | $sectionClass = 'mf-section-' . $sectionNumber; |
| 179 | if ( $isCollapsible ) { |
| 180 | // TODO: Probably good to rename this to the more generic 'section'. |
| 181 | // We have no idea how the skin will use this. |
| 182 | $sectionClass .= ' ' . self::STYLE_COLLAPSIBLE_SECTION_CLASS; |
| 183 | } |
| 184 | |
| 185 | // FIXME: The class `/mf\-section\-[0-9]+/` is kept for caching reasons |
| 186 | // but given class is unique usage is discouraged. [T126825] |
| 187 | $sectionBody = $doc->createElement( 'section' ); |
| 188 | $sectionBody->setAttribute( 'class', $sectionClass ); |
| 189 | $sectionBody->setAttribute( 'id', 'mf-section-' . $sectionNumber ); |
| 190 | return $sectionBody; |
| 191 | } |
| 192 | |
| 193 | /** |
| 194 | * Gets top headings in the document. |
| 195 | * |
| 196 | * Note well that the rank order is defined by the |
| 197 | * <code>MobileFormatter#topHeadingTags</code> property. |
| 198 | * |
| 199 | * @param DOMElement $doc |
| 200 | * @return array An array first is the highest rank headings |
| 201 | */ |
| 202 | private function getTopHeadings( DOMElement $doc ): array { |
| 203 | $headings = []; |
| 204 | |
| 205 | foreach ( $this->topHeadingTags as $tagName ) { |
| 206 | $allTags = DOMCompat::querySelectorAll( $doc, $tagName ); |
| 207 | |
| 208 | foreach ( $allTags as $el ) { |
| 209 | $parent = $el->parentNode; |
| 210 | if ( !( $parent instanceof DOMElement ) ) { |
| 211 | continue; |
| 212 | } |
| 213 | // Use the `<div class="mw-heading">` wrapper if it is present. When they are required |
| 214 | // (T13555), the querySelectorAll() above can use the class and this can be removed. |
| 215 | if ( DOMCompat::getClassList( $parent )->contains( 'mw-heading' ) ) { |
| 216 | $el = $parent; |
| 217 | } |
| 218 | // This check can be removed too when we require the wrappers. |
| 219 | if ( $parent->getAttribute( 'class' ) !== 'toctitle' ) { |
| 220 | $headings[] = $el; |
| 221 | } |
| 222 | } |
| 223 | if ( $headings ) { |
| 224 | return $headings; |
| 225 | } |
| 226 | |
| 227 | } |
| 228 | |
| 229 | return $headings; |
| 230 | } |
| 231 | |
| 232 | /** |
| 233 | * Retrieves the tag name of the first heading element (e.g., `h1`, `h2`, etc.) |
| 234 | * inside the `.mw-parser-output` container. If no headings are found, returns an |
| 235 | * empty string. |
| 236 | * |
| 237 | * Note: The function loops over all top-level sibling elements inside |
| 238 | * .mw-parser-output until it finds the first heading element. This approach is |
| 239 | * considered acceptable because: |
| 240 | * 1. It breaks immediately upon finding the first heading, so performance is not |
| 241 | * significantly impacted. |
| 242 | * 2. Practical HTML article structures are unlikely to contain a large number |
| 243 | * of elements without headings. |
| 244 | * |
| 245 | * @param DOMElement $doc |
| 246 | * @return string |
| 247 | */ |
| 248 | public function getFirstHeading( DOMElement $doc ): string { |
| 249 | $parserContent = DOMCompat::querySelector( $doc, '.mw-parser-output' ); |
| 250 | |
| 251 | if ( !$parserContent ) { |
| 252 | return ''; |
| 253 | } |
| 254 | |
| 255 | // Start with the first child element of '.mw-parser-output' |
| 256 | $currentElement = DOMCompat::getFirstElementChild( $parserContent ); |
| 257 | |
| 258 | // Traverse siblings to find the first heading element |
| 259 | while ( $currentElement ) { |
| 260 | // Check if the current element's tag name matches any heading tag |
| 261 | if ( in_array( $currentElement->tagName, $this->topHeadingTags ) ) { |
| 262 | |
| 263 | return $currentElement->tagName; |
| 264 | } |
| 265 | |
| 266 | // Move to the next sibling |
| 267 | $currentElement = DOMCompat::getNextElementSibling( $currentElement ); |
| 268 | } |
| 269 | |
| 270 | // Return an empty string if no heading is found |
| 271 | return ''; |
| 272 | } |
| 273 | |
| 274 | /** |
| 275 | * Make it possible to open sections while JavaScript is still loading. |
| 276 | * |
| 277 | * @return string The JavaScript code to add event handlers to the skin |
| 278 | */ |
| 279 | public static function interimTogglingSupport() { |
| 280 | $js = <<<JAVASCRIPT |
| 281 | function mfTempOpenSection( id ) { |
| 282 | var block = document.getElementById( "mf-section-" + id ); |
| 283 | block.className += " open-block"; |
| 284 | // The previous sibling to the content block is guaranteed to be the |
| 285 | // associated heading due to mobileformatter. We need to add the same |
| 286 | // class to flip the collapse arrow icon. |
| 287 | // <h[1-6]>heading</h[1-6]><div id="mf-section-[1-9]+"></div> |
| 288 | block.previousSibling.className += " open-block"; |
| 289 | } |
| 290 | JAVASCRIPT; |
| 291 | return Html::inlineScript( |
| 292 | ResourceLoader::filter( 'minify-js', $js ) |
| 293 | ); |
| 294 | } |
| 295 | |
| 296 | /** |
| 297 | * Performs html transformation that splits the body of the document into |
| 298 | * sections demarcated by the $headings elements. Also moves the first paragraph |
| 299 | * in the lead section above the infobox. |
| 300 | * @param DOMElement $doc html document |
| 301 | */ |
| 302 | public function apply( DOMElement $doc ) { |
| 303 | $this->makeSections( $doc, $this->getTopHeadings( $doc ) ); |
| 304 | } |
| 305 | } |