1 | import global from 'global';
|
2 | import { addons } from '@storybook/addons';
|
3 | import { STORY_CHANGED } from '@storybook/core-events';
|
4 | import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';
|
5 | import { highlightStyle } from './highlight';
|
6 | const {
|
7 | document
|
8 | } = global;
|
9 |
|
10 | if (module && module.hot && module.hot.decline) {
|
11 | module.hot.decline();
|
12 | }
|
13 |
|
14 | const channel = addons.getChannel();
|
15 |
|
16 | const highlight = infos => {
|
17 | const id = HIGHLIGHT_STYLE_ID;
|
18 | resetHighlight();
|
19 |
|
20 | const elements = Array.from(new Set(infos.elements));
|
21 | const sheet = document.createElement('style');
|
22 | sheet.setAttribute('id', id);
|
23 | sheet.innerHTML = elements.map(target => `${target}{
|
24 | ${highlightStyle(infos.color)}
|
25 | }`).join(' ');
|
26 | document.head.appendChild(sheet);
|
27 | };
|
28 |
|
29 | const resetHighlight = () => {
|
30 | const id = HIGHLIGHT_STYLE_ID;
|
31 | const sheetToBeRemoved = document.getElementById(id);
|
32 |
|
33 | if (sheetToBeRemoved) {
|
34 | sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
|
35 | }
|
36 | };
|
37 |
|
38 | channel.on(STORY_CHANGED, resetHighlight);
|
39 | channel.on(EVENTS.HIGHLIGHT, highlight); |
\ | No newline at end of file |