source: node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js

main
Last change on this file was d24f17c, checked in by Aleksandar Panovski <apano77@…>, 15 months ago

Initial commit
  • Property mode set to 100644
File size: 10.1 KB
RevLine 
[d24f17c]1(function () {
2
3 if (typeof Prism === 'undefined' || typeof document === 'undefined' || !document.querySelector) {
4 return;
5 }
6
7 var LINE_NUMBERS_CLASS = 'line-numbers';
8 var LINKABLE_LINE_NUMBERS_CLASS = 'linkable-line-numbers';
9 var NEW_LINE_EXP = /\n(?!$)/g;
10
11 /**
12 * @param {string} selector
13 * @param {ParentNode} [container]
14 * @returns {HTMLElement[]}
15 */
16 function $$(selector, container) {
17 return Array.prototype.slice.call((container || document).querySelectorAll(selector));
18 }
19
20 /**
21 * Returns whether the given element has the given class.
22 *
23 * @param {Element} element
24 * @param {string} className
25 * @returns {boolean}
26 */
27 function hasClass(element, className) {
28 return element.classList.contains(className);
29 }
30
31 /**
32 * Calls the given function.
33 *
34 * @param {() => any} func
35 * @returns {void}
36 */
37 function callFunction(func) {
38 func();
39 }
40
41 // Some browsers round the line-height, others don't.
42 // We need to test for it to position the elements properly.
43 var isLineHeightRounded = (function () {
44 var res;
45 return function () {
46 if (typeof res === 'undefined') {
47 var d = document.createElement('div');
48 d.style.fontSize = '13px';
49 d.style.lineHeight = '1.5';
50 d.style.padding = '0';
51 d.style.border = '0';
52 d.innerHTML = '&nbsp;<br />&nbsp;';
53 document.body.appendChild(d);
54 // Browsers that round the line-height should have offsetHeight === 38
55 // The others should have 39.
56 res = d.offsetHeight === 38;
57 document.body.removeChild(d);
58 }
59 return res;
60 };
61 }());
62
63 /**
64 * Returns the top offset of the content box of the given parent and the content box of one of its children.
65 *
66 * @param {HTMLElement} parent
67 * @param {HTMLElement} child
68 */
69 function getContentBoxTopOffset(parent, child) {
70 var parentStyle = getComputedStyle(parent);
71 var childStyle = getComputedStyle(child);
72
73 /**
74 * Returns the numeric value of the given pixel value.
75 *
76 * @param {string} px
77 */
78 function pxToNumber(px) {
79 return +px.substr(0, px.length - 2);
80 }
81
82 return child.offsetTop
83 + pxToNumber(childStyle.borderTopWidth)
84 + pxToNumber(childStyle.paddingTop)
85 - pxToNumber(parentStyle.paddingTop);
86 }
87
88 /**
89 * Returns whether the Line Highlight plugin is active for the given element.
90 *
91 * If this function returns `false`, do not call `highlightLines` for the given element.
92 *
93 * @param {HTMLElement | null | undefined} pre
94 * @returns {boolean}
95 */
96 function isActiveFor(pre) {
97 if (!pre || !/pre/i.test(pre.nodeName)) {
98 return false;
99 }
100
101 if (pre.hasAttribute('data-line')) {
102 return true;
103 }
104
105 if (pre.id && Prism.util.isActive(pre, LINKABLE_LINE_NUMBERS_CLASS)) {
106 // Technically, the line numbers plugin is also necessary but this plugin doesn't control the classes of
107 // the line numbers plugin, so we can't assume that they are present.
108 return true;
109 }
110
111 return false;
112 }
113
114 var scrollIntoView = true;
115
116 Prism.plugins.lineHighlight = {
117 /**
118 * Highlights the lines of the given pre.
119 *
120 * This function is split into a DOM measuring and mutate phase to improve performance.
121 * The returned function mutates the DOM when called.
122 *
123 * @param {HTMLElement} pre
124 * @param {string | null} [lines]
125 * @param {string} [classes='']
126 * @returns {() => void}
127 */
128 highlightLines: function highlightLines(pre, lines, classes) {
129 lines = typeof lines === 'string' ? lines : (pre.getAttribute('data-line') || '');
130
131 var ranges = lines.replace(/\s+/g, '').split(',').filter(Boolean);
132 var offset = +pre.getAttribute('data-line-offset') || 0;
133
134 var parseMethod = isLineHeightRounded() ? parseInt : parseFloat;
135 var lineHeight = parseMethod(getComputedStyle(pre).lineHeight);
136 var hasLineNumbers = Prism.util.isActive(pre, LINE_NUMBERS_CLASS);
137 var codeElement = pre.querySelector('code');
138 var parentElement = hasLineNumbers ? pre : codeElement || pre;
139 var mutateActions = /** @type {(() => void)[]} */ ([]);
140 var lineBreakMatch = codeElement.textContent.match(NEW_LINE_EXP);
141 var numberOfLines = lineBreakMatch ? lineBreakMatch.length + 1 : 1;
142 /**
143 * The top offset between the content box of the <code> element and the content box of the parent element of
144 * the line highlight element (either `<pre>` or `<code>`).
145 *
146 * This offset might not be zero for some themes where the <code> element has a top margin. Some plugins
147 * (or users) might also add element above the <code> element. Because the line highlight is aligned relative
148 * to the <pre> element, we have to take this into account.
149 *
150 * This offset will be 0 if the parent element of the line highlight element is the `<code>` element.
151 */
152 var codePreOffset = !codeElement || parentElement == codeElement ? 0 : getContentBoxTopOffset(pre, codeElement);
153
154 ranges.forEach(function (currentRange) {
155 var range = currentRange.split('-');
156
157 var start = +range[0];
158 var end = +range[1] || start;
159 end = Math.min(numberOfLines + offset, end);
160
161 if (end < start) {
162 return;
163 }
164
165 /** @type {HTMLElement} */
166 var line = pre.querySelector('.line-highlight[data-range="' + currentRange + '"]') || document.createElement('div');
167
168 mutateActions.push(function () {
169 line.setAttribute('aria-hidden', 'true');
170 line.setAttribute('data-range', currentRange);
171 line.className = (classes || '') + ' line-highlight';
172 });
173
174 // if the line-numbers plugin is enabled, then there is no reason for this plugin to display the line numbers
175 if (hasLineNumbers && Prism.plugins.lineNumbers) {
176 var startNode = Prism.plugins.lineNumbers.getLine(pre, start);
177 var endNode = Prism.plugins.lineNumbers.getLine(pre, end);
178
179 if (startNode) {
180 var top = startNode.offsetTop + codePreOffset + 'px';
181 mutateActions.push(function () {
182 line.style.top = top;
183 });
184 }
185
186 if (endNode) {
187 var height = (endNode.offsetTop - startNode.offsetTop) + endNode.offsetHeight + 'px';
188 mutateActions.push(function () {
189 line.style.height = height;
190 });
191 }
192 } else {
193 mutateActions.push(function () {
194 line.setAttribute('data-start', String(start));
195
196 if (end > start) {
197 line.setAttribute('data-end', String(end));
198 }
199
200 line.style.top = (start - offset - 1) * lineHeight + codePreOffset + 'px';
201
202 line.textContent = new Array(end - start + 2).join(' \n');
203 });
204 }
205
206 mutateActions.push(function () {
207 line.style.width = pre.scrollWidth + 'px';
208 });
209
210 mutateActions.push(function () {
211 // allow this to play nicely with the line-numbers plugin
212 // need to attack to pre as when line-numbers is enabled, the code tag is relatively which screws up the positioning
213 parentElement.appendChild(line);
214 });
215 });
216
217 var id = pre.id;
218 if (hasLineNumbers && Prism.util.isActive(pre, LINKABLE_LINE_NUMBERS_CLASS) && id) {
219 // This implements linkable line numbers. Linkable line numbers use Line Highlight to create a link to a
220 // specific line. For this to work, the pre element has to:
221 // 1) have line numbers,
222 // 2) have the `linkable-line-numbers` class or an ascendant that has that class, and
223 // 3) have an id.
224
225 if (!hasClass(pre, LINKABLE_LINE_NUMBERS_CLASS)) {
226 // add class to pre
227 mutateActions.push(function () {
228 pre.classList.add(LINKABLE_LINE_NUMBERS_CLASS);
229 });
230 }
231
232 var start = parseInt(pre.getAttribute('data-start') || '1');
233
234 // iterate all line number spans
235 $$('.line-numbers-rows > span', pre).forEach(function (lineSpan, i) {
236 var lineNumber = i + start;
237 lineSpan.onclick = function () {
238 var hash = id + '.' + lineNumber;
239
240 // this will prevent scrolling since the span is obviously in view
241 scrollIntoView = false;
242 location.hash = hash;
243 setTimeout(function () {
244 scrollIntoView = true;
245 }, 1);
246 };
247 });
248 }
249
250 return function () {
251 mutateActions.forEach(callFunction);
252 };
253 }
254 };
255
256
257 function applyHash() {
258 var hash = location.hash.slice(1);
259
260 // Remove pre-existing temporary lines
261 $$('.temporary.line-highlight').forEach(function (line) {
262 line.parentNode.removeChild(line);
263 });
264
265 var range = (hash.match(/\.([\d,-]+)$/) || [, ''])[1];
266
267 if (!range || document.getElementById(hash)) {
268 return;
269 }
270
271 var id = hash.slice(0, hash.lastIndexOf('.'));
272 var pre = document.getElementById(id);
273
274 if (!pre) {
275 return;
276 }
277
278 if (!pre.hasAttribute('data-line')) {
279 pre.setAttribute('data-line', '');
280 }
281
282 var mutateDom = Prism.plugins.lineHighlight.highlightLines(pre, range, 'temporary ');
283 mutateDom();
284
285 if (scrollIntoView) {
286 document.querySelector('.temporary.line-highlight').scrollIntoView();
287 }
288 }
289
290 var fakeTimer = 0; // Hack to limit the number of times applyHash() runs
291
292 Prism.hooks.add('before-sanity-check', function (env) {
293 var pre = env.element.parentElement;
294 if (!isActiveFor(pre)) {
295 return;
296 }
297
298 /*
299 * Cleanup for other plugins (e.g. autoloader).
300 *
301 * Sometimes <code> blocks are highlighted multiple times. It is necessary
302 * to cleanup any left-over tags, because the whitespace inside of the <div>
303 * tags change the content of the <code> tag.
304 */
305 var num = 0;
306 $$('.line-highlight', pre).forEach(function (line) {
307 num += line.textContent.length;
308 line.parentNode.removeChild(line);
309 });
310 // Remove extra whitespace
311 if (num && /^(?: \n)+$/.test(env.code.slice(-num))) {
312 env.code = env.code.slice(0, -num);
313 }
314 });
315
316 Prism.hooks.add('complete', function completeHook(env) {
317 var pre = env.element.parentElement;
318 if (!isActiveFor(pre)) {
319 return;
320 }
321
322 clearTimeout(fakeTimer);
323
324 var hasLineNumbers = Prism.plugins.lineNumbers;
325 var isLineNumbersLoaded = env.plugins && env.plugins.lineNumbers;
326
327 if (hasClass(pre, LINE_NUMBERS_CLASS) && hasLineNumbers && !isLineNumbersLoaded) {
328 Prism.hooks.add('line-numbers', completeHook);
329 } else {
330 var mutateDom = Prism.plugins.lineHighlight.highlightLines(pre);
331 mutateDom();
332 fakeTimer = setTimeout(applyHash, 1);
333 }
334 });
335
336 window.addEventListener('hashchange', applyHash);
337 window.addEventListener('resize', function () {
338 var actions = $$('pre')
339 .filter(isActiveFor)
340 .map(function (pre) {
341 return Prism.plugins.lineHighlight.highlightLines(pre);
342 });
343 actions.forEach(callFunction);
344 });
345
346}());
Note: See TracBrowser for help on using the repository browser.