-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
72 lines (62 loc) · 1.95 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/**
* @file
* This is the global trimlines functionality.
*
* `line_clamps` is global config with CSS selector, trim value and optional breakpoints trims.
*
* If browser supports `-webkit-clamp-lines` will be used trimCSS, else trimJs.
*/
import lineClamp from 'line-clamp';
export default (trimmedElements, context = document ) => {
const lineClampSupported = CSS.supports('line-clamp: 1') || CSS.supports('-webkit-line-clamp: 1');
for (const el in trimmedElements) {
if (trimmedElements.hasOwnProperty(el)) {
const element = trimmedElements[el];
index(element);
}
}
function index(element) {
context.addEventListener('DOMContentLoaded', () => {
Array.prototype.forEach.call(context.querySelectorAll(element.selector), (el) => {
if (el.classList.contains('init')) {
return;
}
el.classList.add('init');
let wrapper = wrapInner(el);
trim(wrapper, element.trim, element.forceJs);
});
});
}
function removeClampCss(el) {
for (let className of Array.from(el.classList)) {
if (className.startsWith('line-clamp-')) {
el.classList.remove(className);
}
}
}
function setLineHeight(el) {
el.style.removeProperty('line-height');
let lineHeight = window.getComputedStyle(el, null).getPropertyValue('line-height');
if (lineHeight.indexOf('px') >= 0) {
el.setAttribute('style', 'line-height:' + Math.ceil(parseFloat(lineHeight)) + 'px');
}
}
function trim(el, lines, forceJs) {
if (!forceJs) {
removeClampCss(el);
el.classList.add('line-clamp-' + lines);
}
if (!lineClampSupported || forceJs) {
setLineHeight(el);
lineClamp(el, lines);
}
}
function wrapInner(el) {
const wrapper = context.createElement('div');
el.appendChild(wrapper).classList.add('clamp-wrapper');
while (el.firstChild !== wrapper) {
wrapper.appendChild(el.firstChild);
}
return wrapper;
}
}