Google Chrome | ✅ | - 113.0.5672.92 (Mac/arm64)
- 113.0.5672.93 (Win/x64)
Microsoft Edge | ✅ | - 113.0.1774.35 (Mac/arm64)
- 113.0.1774.35 (Win/x64)
Safari | ✅ | - 16.4 (18615.1.26.110.1) (Mac/arm64)
Mozilla Firefox | ✅ | - 113.0 (Mac/arm64)
- 112.0.2 (Win/x64)
Opera | ✅ | - 98.0.4759.39 (Mac/arm64)
- 98.0.4759.39 (Win/x64)
${brw.i18n.getMessage("extName")}
192 | ${!constants.patternConfigIsValid ? 193 | html`${brw.i18n.getMessage("errorInvalidConfig")}` : html``}
194 | `;
195 | }
196 | }
197 | // Define a custom element for the component so that it can be used in the HTML DOM.
198 | customElements.define("popup-header", PopupHeader);
199 |
200 | /**
201 | * Lit component for the on/off switch of the popup.
202 | * @extends LitElement
203 | */
204 | export class OnOffSwitch extends LitElement {
205 | // Reactive properties
206 | static properties = {
207 | // Variable for the activation state of the component.
208 | activation: { type: Number },
209 | // Variable for the reference to the parent component.
210 | app: { type: Object }
211 | };
212 |
213 | // CSS styles for the HTML elements in the component.
214 | static styles = [
215 | sharedStyles,
216 | onOffSwitchStyles
217 | ];
218 |
219 | /**
220 | * Function that handles a change of the on/off switch value.
221 | * @param {Event} event
222 | */
223 | async changeActivation(event) {
224 | if (this.activation !== activationState.PermanentlyOff) {
225 | if (this.activation === activationState.Off) {
226 | this.activation = activationState.On;
227 | } else {
228 | this.activation = activationState.Off;
229 | }
230 | this.app.activation = this.activation;
231 | }
232 | }
233 |
234 | /**
235 | * Render the HTML of the component.
236 | * @returns {html} HTML of the component
237 | */
238 | render() {
239 | return html`
240 |
241 |
245 |
249 |
250 | `;
251 | }
252 | }
253 | // Define a custom element for the component so that it can be used in the HTML DOM.
254 | customElements.define("on-off-switch", OnOffSwitch);
255 |
256 | /**
257 | * Lit component for the refresh button of the popup.
258 | * @extends LitElement
259 | */
260 | export class RefreshButton extends LitElement {
261 | // Reactive properties
262 | static properties = {
263 | // Variable that specifies whether the component should be hidden.
264 | hide: { type: Boolean },
265 | // Variable for the reference to the parent component.
266 | app: { type: Object }
267 | };
268 |
269 | // CSS styles for the HTML elements in the component.
270 | static styles = [
271 | sharedStyles,
272 | actionButtonStyles
273 | ];
274 |
275 | /**
276 | * Function to set the activation state for the current tab and to reload it.
277 | */
278 | async refreshTab() {
279 | // Set the activation state for the current tab.
280 | await brw.runtime.sendMessage({ "enableExtension": this.app.activation === activationState.On, "tabId": (await getCurrentTab()).id });
281 | // Reload the current tab.
282 | await brw.tabs.reload();
283 | // Set the initial activation state of the popup to the new activation state.
284 | this.app.initActivation = this.app.activation;
285 | }
286 |
287 | /**
288 | * Render the HTML of the component.
289 | * @returns {html} HTML of the component
290 | */
291 | render() {
292 | // Return an empty string if the component should be hidden.
293 | if (this.hide) {
294 | return html``;
295 | }
296 | return html`
297 |
298 | ${brw.i18n.getMessage("buttonReloadPageForChange")}
299 |
300 | `;
301 | }
302 | }
303 | // Define a custom element for the component so that it can be used in the HTML DOM.
304 | customElements.define("refresh-button", RefreshButton);
305 |
306 | /**
307 | * Lit component for the redo button of the popup.
308 | * @extends LitElement
309 | */
310 | export class RedoButton extends LitElement {
311 | // Reactive properties
312 | static properties = {
313 | // Variable for the activation state of the component.
314 | activation: { type: Number }
315 | };
316 |
317 | // CSS styles for the HTML elements in the component.
318 | static styles = [
319 | sharedStyles,
320 | actionButtonStyles
321 | ];
322 |
323 | /**
324 | * Function to trigger the pattern detection in the tab again.
325 | * @param {Event} event
326 | */
327 | async redoPatternCheck(event) {
328 | await brw.tabs.sendMessage((await getCurrentTab()).id, { action: "redoPatternHighlighting" });
329 | }
330 |
331 | /**
332 | * Render the HTML of the component.
333 | * @returns {html} HTML of the component
334 | */
335 | render() {
336 | // Return an empty string if the component is not activated.
337 | if (this.activation !== activationState.On) {
338 | return html``;
339 | }
340 | return html`
341 |
342 | ${brw.i18n.getMessage("buttonRedoPatternCheck")}
343 |
344 | `;
345 | }
346 | }
347 | // Define a custom element for the component so that it can be used in the HTML DOM.
348 | customElements.define("redo-button", RedoButton);
349 |
350 | /**
351 | * Lit component for the list of the detected patterns in the popup.
352 | * @extends LitElement
353 | */
354 | export class FoundPatternsList extends LitElement {
355 | // Reactive properties
356 | static properties = {
357 | // Variable for the activation state of the component.
358 | activation: { type: Number },
359 | // Variable for the results of the pattern detection from the content script.
360 | results: { type: Object }
361 | };
362 |
363 | // CSS styles for the HTML elements in the component.
364 | static styles = [
365 | sharedStyles,
366 | patternsListStyles,
367 | patternLinkStyles
368 | ];
369 |
370 | /**
371 | * Render the HTML of the component.
372 | * @returns {html} HTML of the component
373 | */
374 | render() {
375 | // Return an empty string if the component is not activated.
376 | if (this.activation !== activationState.On) {
377 | return html``;
378 | }
379 | return html`
380 |
381 | ${brw.i18n.getMessage("headingFoundPatterns")}
382 | ${this.results.countVisible}
383 |
384 | ${this.results.patterns?.map((pattern) => {
385 | let currentPatternInfo = constants.patternConfig.patterns.find(p => p.name === pattern.name);
386 | if (pattern.elementsVisible.length === 0) {
387 | return html``;
388 | }
389 | return html`
390 | -
391 | ${pattern.name}: ${pattern.elementsVisible.length}
392 |
`;
393 | })}
394 |
395 |
396 | `;
397 | }
398 | }
399 | // Define a custom element for the component so that it can be used in the HTML DOM.
400 | customElements.define("found-patterns-list", FoundPatternsList);
401 |
402 | /**
403 | * Lit component for the buttons used to show individual found patterns on the web page.
404 | * @extends LitElement
405 | */
406 | export class ShowPatternButtons extends LitElement {
407 | // Reactive properties
408 | static properties = {
409 | // Variable for the activation state of the component.
410 | activation: { type: Number },
411 | // Variable for the results of the pattern detection from the content script.
412 | results: { type: Object },
413 | // Variable for the pattern highlighter ID of the currently selected pattern.
414 | _currentPatternId: { type: Number, state: true },
415 | // Variable for the list of visible detected patterns.
416 | _visiblePatterns: { type: Array, state: true }
417 | };
418 |
419 | // CSS styles for the HTML elements in the component.
420 | static styles = [
421 | sharedStyles,
422 | patternLinkStyles,
423 | css`
424 | .button {
425 | font-size: large;
426 | cursor: pointer;
427 | user-select: none;
428 | }
429 |
430 | span {
431 | display: inline-block;
432 | text-align: center;
433 | }
434 |
435 | span:not(.button) {
436 | width: 110px;
437 | margin: 0 15px;
438 | }
439 | `
440 | ];
441 |
442 | /**
443 | * Function to extract only the visible elements from the `results` dictionary.
444 | */
445 | extractVisiblePatterns() {
446 | // Initialize the variable with an empty array.
447 | this._visiblePatterns = [];
448 | // Check if patterns were detected.
449 | if (this.results.patterns) {
450 | // Iterate through all detected patterns.
451 | for (const pattern of this.results.patterns) {
452 | // Check if there are visible elements for this pattern.
453 | if (pattern.elementsVisible.length > 0) {
454 | // Iterate through all visible elements.
455 | for (const elem of pattern.elementsVisible) {
456 | // Add the id of the element and the name of the pattern to the visible patterns.
457 | this._visiblePatterns.push({ "phid": elem, "patternName": pattern.name });
458 | }
459 | }
460 | }
461 | }
462 | }
463 |
464 | /**
465 | * Get the index of an element in the `_visiblePatterns` array by its pattern highlighter ID.
466 | * @param {number} phid The pattern highlighter ID.
467 | * @returns {number|-1} The index of the element with the `phid` in the `_visiblePatterns` array
468 | * or `-1` if the element is not in the array.
469 | */
470 | getIndexOfPatternId(phid) {
471 | // Create an array of IDs from the `_visiblePatterns` and get the index of the passed `phid`.
472 | return this._visiblePatterns.map(pattern => pattern.phid).indexOf(phid);
473 | }
474 |
475 | /**
476 | * Show the next or previous pattern element on the website.
477 | * @param {number} step `x` for the next pattern or `-x` for the previous pattern.
478 | */
479 | async showPattern(step) {
480 | /**
481 | * Index of the pattern element to be shown.
482 | */
483 | let idx;
484 | // If there was no pattern shown before, the index must be set to the first or last element of the array.
485 | if (!this._currentPatternId) {
486 | if (step > 0) {
487 | // If one of the next elements should be shown,
488 | // set the index to `0`.
489 | idx = 0;
490 | } else {
491 | // If one of the previous elements should be shown,
492 | // set the index to the last element of the array.
493 | idx = this._visiblePatterns.length - 1;
494 | }
495 | } else {
496 | // If an element has already been shown, use its index as a starting point.
497 | idx = this.getIndexOfPatternId(this._currentPatternId);
498 | if (idx === -1) {
499 | // If the element is no longer present in the array, set the index to `0`.
500 | idx = 0;
501 | } else {
502 | // Add the passed `step` parameter to the index.
503 | idx += step;
504 | }
505 | }
506 | if (idx >= this._visiblePatterns.length) {
507 | // If the new index is greater/equal than the number of elements in the array,
508 | // set it to `0`.
509 | idx = 0;
510 | } else if (idx < 0) {
511 | // If the new index is smaller than 0,
512 | // set it to the index of the last element of the array.
513 | idx = this._visiblePatterns.length - 1;
514 | }
515 | // Set the ID of the currently shown element to the ID of the element at the new index.
516 | this._currentPatternId = this._visiblePatterns[idx].phid;
517 | // Send a message to the content script to show the element with the ID of `_currentPatternId`.
518 | await brw.tabs.sendMessage((await getCurrentTab()).id, { "showElement": this._currentPatternId });
519 | }
520 |
521 | /**
522 | * Function to show the next pattern element.
523 | * Used as a click event handler.
524 | * @param {Event} event
525 | */
526 | async showNextPattern(event) {
527 | await this.showPattern(1);
528 | }
529 |
530 | /**
531 | * Function to show the previous pattern element.
532 | * Used as a click event handler.
533 | * @param {Event} event
534 | */
535 | async showPreviousPattern(event) {
536 | await this.showPattern(-1);
537 | }
538 |
539 | /**
540 | * Function to generate the HTML text for the currently shown pattern.
541 | * @returns {html} HTML of the text for the currently shown pattern element
542 | */
543 | getCurrentPatternText() {
544 | // Only generate a text when a pattern element is shown.
545 | if (this._currentPatternId) {
546 | // Get the index of the current pattern element in the array.
547 | let idx = this.getIndexOfPatternId(this._currentPatternId);
548 | // Only generate a text when the element is still present in the array.
549 | if (idx !== -1) {
550 | // Get information about the pattern type from the configuration constant of the extension.
551 | let currentPatternInfo = constants.patternConfig.patterns.find(p => p.name === this._visiblePatterns[idx].patternName);
552 | // Generate the HTML text.
553 | return html`
554 |
555 | ${this._visiblePatterns[idx].patternName}
556 |
`;
557 | }
558 | }
559 | return html``;
560 | }
561 |
562 | /**
563 | * Function to generate the HTML of the number of the currently shown pattern element
564 | * @returns {html} HTML of the number (`index + 1`) of the currently shown pattern element
565 | */
566 | getCurrentPatternNumber() {
567 | // Only generate a text when a pattern element is shown.
568 | if (this._currentPatternId) {
569 | // Get the index of the current pattern element in the array.
570 | let idx = this.getIndexOfPatternId(this._currentPatternId);
571 | // Only generate a text when the element is still present in the array.
572 | if (idx !== -1) {
573 | // Generate the HTML text with the number (`index + 1`).
574 | return `${idx + 1}`;
575 | }
576 | }
577 | return "-";
578 | }
579 |
580 | /**
581 | * From the Lit documentation (https://lit.dev/docs/components/lifecycle/):
582 | * "Called before `update()` to compute values needed during the update.".
583 | * Used here to react to changes in the `results` before the component is rendered.
584 | * @param {Map} changedProperties
585 | */
586 | willUpdate(changedProperties) {
587 | // Extract the visible elements from the `results`, if the `results` have changed.
588 | if (changedProperties.has("results")) {
589 | this.extractVisiblePatterns();
590 | }
591 | }
592 |
593 | /**
594 | * Render the HTML of the component.
595 | * @returns {html} HTML of the component
596 | */
597 | render() {
598 | // Return an empty string if the component is not activated or if no patterns were detected.
599 | if (this.activation !== activationState.On || this.results.countVisible === 0) {
600 | return html``;
601 | }
602 |
603 | return html`
604 |
605 | ${brw.i18n.getMessage("headingShowPattern")}
606 |
607 | ${brw.i18n.getMessage("showPatternState", [this.getCurrentPatternNumber(), this.results.countVisible.toString()])}
608 |
609 | ${this.getCurrentPatternText()}
610 |
611 | `;
612 | }
613 | }
614 | // Define a custom element for the component so that it can be used in the HTML DOM.
615 | customElements.define("show-pattern-button", ShowPatternButtons);
616 |
617 | /**
618 | * Lit component for the list of all supported patterns in the popup.
619 | * @extends LitElement
620 | */
621 | export class SupportedPatternsList extends LitElement {
622 | // CSS styles for the HTML elements in the component.
623 | static styles = [
624 | sharedStyles,
625 | patternsListStyles,
626 | patternLinkStyles,
627 | css`
628 | div {
629 | margin: 2.5em 0 1em;
630 | }
631 | `
632 | ];
633 |
634 | /**
635 | * Render the HTML of the component.
636 | * @returns {html} HTML of the component
637 | */
638 | render() {
639 | return html`
640 |
641 | ${brw.i18n.getMessage("headingSupportedPatterns")}
642 |
643 | ${constants.patternConfig.patterns.map((pattern) =>
644 | html`
645 | -
646 |
647 | ${pattern.name} (${pattern.languages.map(l => l.toUpperCase()).join(", ")})
648 |
649 |
`
650 | )}
651 |
652 |
653 | `;
654 | }
655 | }
656 | // Define a custom element for the component so that it can be used in the HTML DOM.
657 | customElements.define("supported-patterns-list", SupportedPatternsList);
658 |
659 | /**
660 | * Lit component for footer of the popup.
661 | * @extends LitElement
662 | */
663 | export class PopupFooter extends LitElement {
664 | // CSS styles for the HTML elements in the component.
665 | static styles = [
666 | sharedStyles,
667 | css`
668 | div {
669 | margin-top: 2em;
670 | }
671 | `
672 | ];
673 |
674 | /**
675 | * Render the HTML of the component.
676 | * @returns {html} HTML of the component
677 | */
678 | render() {
679 | return html`
680 |
681 | ${brw.i18n.getMessage("textMoreInformation")}: dapde.de.
682 |
683 | `;
684 | }
685 | }
686 | // Define a custom element for the component so that it can be used in the HTML DOM.
687 | customElements.define("popup-footer", PopupFooter);
688 |
--------------------------------------------------------------------------------
241 |
245 |
249 |
250 | `;
251 | }
252 | }
253 | // Define a custom element for the component so that it can be used in the HTML DOM.
254 | customElements.define("on-off-switch", OnOffSwitch);
255 |
256 | /**
257 | * Lit component for the refresh button of the popup.
258 | * @extends LitElement
259 | */
260 | export class RefreshButton extends LitElement {
261 | // Reactive properties
262 | static properties = {
263 | // Variable that specifies whether the component should be hidden.
264 | hide: { type: Boolean },
265 | // Variable for the reference to the parent component.
266 | app: { type: Object }
267 | };
268 |
269 | // CSS styles for the HTML elements in the component.
270 | static styles = [
271 | sharedStyles,
272 | actionButtonStyles
273 | ];
274 |
275 | /**
276 | * Function to set the activation state for the current tab and to reload it.
277 | */
278 | async refreshTab() {
279 | // Set the activation state for the current tab.
280 | await brw.runtime.sendMessage({ "enableExtension": this.app.activation === activationState.On, "tabId": (await getCurrentTab()).id });
281 | // Reload the current tab.
282 | await brw.tabs.reload();
283 | // Set the initial activation state of the popup to the new activation state.
284 | this.app.initActivation = this.app.activation;
285 | }
286 |
287 | /**
288 | * Render the HTML of the component.
289 | * @returns {html} HTML of the component
290 | */
291 | render() {
292 | // Return an empty string if the component should be hidden.
293 | if (this.hide) {
294 | return html``;
295 | }
296 | return html`
297 |
298 | ${brw.i18n.getMessage("buttonReloadPageForChange")}
299 |
300 | `;
301 | }
302 | }
303 | // Define a custom element for the component so that it can be used in the HTML DOM.
304 | customElements.define("refresh-button", RefreshButton);
305 |
306 | /**
307 | * Lit component for the redo button of the popup.
308 | * @extends LitElement
309 | */
310 | export class RedoButton extends LitElement {
311 | // Reactive properties
312 | static properties = {
313 | // Variable for the activation state of the component.
314 | activation: { type: Number }
315 | };
316 |
317 | // CSS styles for the HTML elements in the component.
318 | static styles = [
319 | sharedStyles,
320 | actionButtonStyles
321 | ];
322 |
323 | /**
324 | * Function to trigger the pattern detection in the tab again.
325 | * @param {Event} event
326 | */
327 | async redoPatternCheck(event) {
328 | await brw.tabs.sendMessage((await getCurrentTab()).id, { action: "redoPatternHighlighting" });
329 | }
330 |
331 | /**
332 | * Render the HTML of the component.
333 | * @returns {html} HTML of the component
334 | */
335 | render() {
336 | // Return an empty string if the component is not activated.
337 | if (this.activation !== activationState.On) {
338 | return html``;
339 | }
340 | return html`
341 |
342 | ${brw.i18n.getMessage("buttonRedoPatternCheck")}
343 |
344 | `;
345 | }
346 | }
347 | // Define a custom element for the component so that it can be used in the HTML DOM.
348 | customElements.define("redo-button", RedoButton);
349 |
350 | /**
351 | * Lit component for the list of the detected patterns in the popup.
352 | * @extends LitElement
353 | */
354 | export class FoundPatternsList extends LitElement {
355 | // Reactive properties
356 | static properties = {
357 | // Variable for the activation state of the component.
358 | activation: { type: Number },
359 | // Variable for the results of the pattern detection from the content script.
360 | results: { type: Object }
361 | };
362 |
363 | // CSS styles for the HTML elements in the component.
364 | static styles = [
365 | sharedStyles,
366 | patternsListStyles,
367 | patternLinkStyles
368 | ];
369 |
370 | /**
371 | * Render the HTML of the component.
372 | * @returns {html} HTML of the component
373 | */
374 | render() {
375 | // Return an empty string if the component is not activated.
376 | if (this.activation !== activationState.On) {
377 | return html``;
378 | }
379 | return html`
380 |
381 |
396 | `;
397 | }
398 | }
399 | // Define a custom element for the component so that it can be used in the HTML DOM.
400 | customElements.define("found-patterns-list", FoundPatternsList);
401 |
402 | /**
403 | * Lit component for the buttons used to show individual found patterns on the web page.
404 | * @extends LitElement
405 | */
406 | export class ShowPatternButtons extends LitElement {
407 | // Reactive properties
408 | static properties = {
409 | // Variable for the activation state of the component.
410 | activation: { type: Number },
411 | // Variable for the results of the pattern detection from the content script.
412 | results: { type: Object },
413 | // Variable for the pattern highlighter ID of the currently selected pattern.
414 | _currentPatternId: { type: Number, state: true },
415 | // Variable for the list of visible detected patterns.
416 | _visiblePatterns: { type: Array, state: true }
417 | };
418 |
419 | // CSS styles for the HTML elements in the component.
420 | static styles = [
421 | sharedStyles,
422 | patternLinkStyles,
423 | css`
424 | .button {
425 | font-size: large;
426 | cursor: pointer;
427 | user-select: none;
428 | }
429 |
430 | span {
431 | display: inline-block;
432 | text-align: center;
433 | }
434 |
435 | span:not(.button) {
436 | width: 110px;
437 | margin: 0 15px;
438 | }
439 | `
440 | ];
441 |
442 | /**
443 | * Function to extract only the visible elements from the `results` dictionary.
444 | */
445 | extractVisiblePatterns() {
446 | // Initialize the variable with an empty array.
447 | this._visiblePatterns = [];
448 | // Check if patterns were detected.
449 | if (this.results.patterns) {
450 | // Iterate through all detected patterns.
451 | for (const pattern of this.results.patterns) {
452 | // Check if there are visible elements for this pattern.
453 | if (pattern.elementsVisible.length > 0) {
454 | // Iterate through all visible elements.
455 | for (const elem of pattern.elementsVisible) {
456 | // Add the id of the element and the name of the pattern to the visible patterns.
457 | this._visiblePatterns.push({ "phid": elem, "patternName": pattern.name });
458 | }
459 | }
460 | }
461 | }
462 | }
463 |
464 | /**
465 | * Get the index of an element in the `_visiblePatterns` array by its pattern highlighter ID.
466 | * @param {number} phid The pattern highlighter ID.
467 | * @returns {number|-1} The index of the element with the `phid` in the `_visiblePatterns` array
468 | * or `-1` if the element is not in the array.
469 | */
470 | getIndexOfPatternId(phid) {
471 | // Create an array of IDs from the `_visiblePatterns` and get the index of the passed `phid`.
472 | return this._visiblePatterns.map(pattern => pattern.phid).indexOf(phid);
473 | }
474 |
475 | /**
476 | * Show the next or previous pattern element on the website.
477 | * @param {number} step `x` for the next pattern or `-x` for the previous pattern.
478 | */
479 | async showPattern(step) {
480 | /**
481 | * Index of the pattern element to be shown.
482 | */
483 | let idx;
484 | // If there was no pattern shown before, the index must be set to the first or last element of the array.
485 | if (!this._currentPatternId) {
486 | if (step > 0) {
487 | // If one of the next elements should be shown,
488 | // set the index to `0`.
489 | idx = 0;
490 | } else {
491 | // If one of the previous elements should be shown,
492 | // set the index to the last element of the array.
493 | idx = this._visiblePatterns.length - 1;
494 | }
495 | } else {
496 | // If an element has already been shown, use its index as a starting point.
497 | idx = this.getIndexOfPatternId(this._currentPatternId);
498 | if (idx === -1) {
499 | // If the element is no longer present in the array, set the index to `0`.
500 | idx = 0;
501 | } else {
502 | // Add the passed `step` parameter to the index.
503 | idx += step;
504 | }
505 | }
506 | if (idx >= this._visiblePatterns.length) {
507 | // If the new index is greater/equal than the number of elements in the array,
508 | // set it to `0`.
509 | idx = 0;
510 | } else if (idx < 0) {
511 | // If the new index is smaller than 0,
512 | // set it to the index of the last element of the array.
513 | idx = this._visiblePatterns.length - 1;
514 | }
515 | // Set the ID of the currently shown element to the ID of the element at the new index.
516 | this._currentPatternId = this._visiblePatterns[idx].phid;
517 | // Send a message to the content script to show the element with the ID of `_currentPatternId`.
518 | await brw.tabs.sendMessage((await getCurrentTab()).id, { "showElement": this._currentPatternId });
519 | }
520 |
521 | /**
522 | * Function to show the next pattern element.
523 | * Used as a click event handler.
524 | * @param {Event} event
525 | */
526 | async showNextPattern(event) {
527 | await this.showPattern(1);
528 | }
529 |
530 | /**
531 | * Function to show the previous pattern element.
532 | * Used as a click event handler.
533 | * @param {Event} event
534 | */
535 | async showPreviousPattern(event) {
536 | await this.showPattern(-1);
537 | }
538 |
539 | /**
540 | * Function to generate the HTML text for the currently shown pattern.
541 | * @returns {html} HTML of the text for the currently shown pattern element
542 | */
543 | getCurrentPatternText() {
544 | // Only generate a text when a pattern element is shown.
545 | if (this._currentPatternId) {
546 | // Get the index of the current pattern element in the array.
547 | let idx = this.getIndexOfPatternId(this._currentPatternId);
548 | // Only generate a text when the element is still present in the array.
549 | if (idx !== -1) {
550 | // Get information about the pattern type from the configuration constant of the extension.
551 | let currentPatternInfo = constants.patternConfig.patterns.find(p => p.name === this._visiblePatterns[idx].patternName);
552 | // Generate the HTML text.
553 | return html`
554 | ${brw.i18n.getMessage("headingFoundPatterns")}
382 |${this.results.countVisible}
383 |-
384 | ${this.results.patterns?.map((pattern) => {
385 | let currentPatternInfo = constants.patternConfig.patterns.find(p => p.name === pattern.name);
386 | if (pattern.elementsVisible.length === 0) {
387 | return html``;
388 | }
389 | return html`
390 |
- 391 | ${pattern.name}: ${pattern.elementsVisible.length} 392 | `; 393 | })} 394 |
555 | ${this._visiblePatterns[idx].patternName} 556 |
`; 557 | } 558 | } 559 | return html``; 560 | } 561 | 562 | /** 563 | * Function to generate the HTML of the number of the currently shown pattern element 564 | * @returns {html} HTML of the number (`index + 1`) of the currently shown pattern element 565 | */ 566 | getCurrentPatternNumber() { 567 | // Only generate a text when a pattern element is shown. 568 | if (this._currentPatternId) { 569 | // Get the index of the current pattern element in the array. 570 | let idx = this.getIndexOfPatternId(this._currentPatternId); 571 | // Only generate a text when the element is still present in the array. 572 | if (idx !== -1) { 573 | // Generate the HTML text with the number (`index + 1`). 574 | return `${idx + 1}`; 575 | } 576 | } 577 | return "-"; 578 | } 579 | 580 | /** 581 | * From the Lit documentation (https://lit.dev/docs/components/lifecycle/): 582 | * "Called before `update()` to compute values needed during the update.". 583 | * Used here to react to changes in the `results` before the component is rendered. 584 | * @param {Map} changedProperties 585 | */ 586 | willUpdate(changedProperties) { 587 | // Extract the visible elements from the `results`, if the `results` have changed. 588 | if (changedProperties.has("results")) { 589 | this.extractVisiblePatterns(); 590 | } 591 | } 592 | 593 | /** 594 | * Render the HTML of the component. 595 | * @returns {html} HTML of the component 596 | */ 597 | render() { 598 | // Return an empty string if the component is not activated or if no patterns were detected. 599 | if (this.activation !== activationState.On || this.results.countVisible === 0) { 600 | return html``; 601 | } 602 | 603 | return html` 604 |
605 |
611 | `;
612 | }
613 | }
614 | // Define a custom element for the component so that it can be used in the HTML DOM.
615 | customElements.define("show-pattern-button", ShowPatternButtons);
616 |
617 | /**
618 | * Lit component for the list of all supported patterns in the popup.
619 | * @extends LitElement
620 | */
621 | export class SupportedPatternsList extends LitElement {
622 | // CSS styles for the HTML elements in the component.
623 | static styles = [
624 | sharedStyles,
625 | patternsListStyles,
626 | patternLinkStyles,
627 | css`
628 | div {
629 | margin: 2.5em 0 1em;
630 | }
631 | `
632 | ];
633 |
634 | /**
635 | * Render the HTML of the component.
636 | * @returns {html} HTML of the component
637 | */
638 | render() {
639 | return html`
640 | ${brw.i18n.getMessage("headingShowPattern")}
606 | 607 | ${brw.i18n.getMessage("showPatternState", [this.getCurrentPatternNumber(), this.results.countVisible.toString()])} 608 | 609 | ${this.getCurrentPatternText()} 610 |
641 |
653 | `;
654 | }
655 | }
656 | // Define a custom element for the component so that it can be used in the HTML DOM.
657 | customElements.define("supported-patterns-list", SupportedPatternsList);
658 |
659 | /**
660 | * Lit component for footer of the popup.
661 | * @extends LitElement
662 | */
663 | export class PopupFooter extends LitElement {
664 | // CSS styles for the HTML elements in the component.
665 | static styles = [
666 | sharedStyles,
667 | css`
668 | div {
669 | margin-top: 2em;
670 | }
671 | `
672 | ];
673 |
674 | /**
675 | * Render the HTML of the component.
676 | * @returns {html} HTML of the component
677 | */
678 | render() {
679 | return html`
680 | ${brw.i18n.getMessage("headingSupportedPatterns")}
642 |-
643 | ${constants.patternConfig.patterns.map((pattern) =>
644 | html`
645 |
- 646 | 647 | ${pattern.name} (${pattern.languages.map(l => l.toUpperCase()).join(", ")}) 648 | 649 | ` 650 | )} 651 |
681 | ${brw.i18n.getMessage("textMoreInformation")}: dapde.de.
682 |
683 | `;
684 | }
685 | }
686 | // Define a custom element for the component so that it can be used in the HTML DOM.
687 | customElements.define("popup-footer", PopupFooter);
688 |
--------------------------------------------------------------------------------