forked from newsdev/ai2html
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ai2html-template.html
99 lines (95 loc) · 3.05 KB
/
ai2html-template.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fivethirtyeight.com/wp-content/themes/espn-fivethirtyeight/dist/css/fiveThirtyEight.css">
<title>{{ alt }}</title>
</head>
<body>
<div class="ai2html-container">
<div class="chart-header">
<h1 class="hed">{{ hed }}</h1>
<p class="dek">{{ dek }}</p>
</div>
<figure>
{{ ai2htmlPartial }}
</figure>
<img style="display:none;" alt="{{ alt }}" src="{{ apple_news_src }}"/>
<div class="note">{{ note }}</div>
<div class="chart-footer">
<div class="footer-left">FiveThirtyEight</div>
<div class="footer-right">{{ source }}</div>
</div>
</div>
<!-- ai2html responsive graphic script -->
<!-- Adapted from https://github.com/newsdev/ai2html/blob/gh-pages/_includes/resizer-script.html -->
<script type="text/javascript">
(function () {
// only want one resizer on the page
if (document.documentElement.className.indexOf("g-resizer-v3-init") > -1) return;
document.documentElement.className += " g-resizer-v3-init";
// require IE9+
if (!("querySelector" in document)) return;
function resizer() {
var elements = Array.prototype.slice.call(document.querySelectorAll("[data-min-width]")),
widthById = {};
elements.forEach(function (el) {
var parent = el.parentNode,
width = widthById[parent.id] || parent.getBoundingClientRect().width,
minwidth = el.getAttribute("data-min-width"),
maxwidth = el.getAttribute("data-max-width");
widthById[parent.id] = width;
if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
try {
if (window.parent && window.parent.$) {
window.parent.$("body").trigger("resizedcontent", [window]);
}
} catch (e) {
console.log(e);
}
// For Pym.js compatibility
// makes sure child iframe adjusts after resizer function fires
child.sendHeight()
}
document.addEventListener('DOMContentLoaded', resizer);
// feel free to replace throttle with _.throttle, if available
window.addEventListener('resize', throttle(resizer, 200));
function throttle(func, wait) {
// from underscore.js
var _now = Date.now || function () {
return new Date().getTime();
},
context, args, result, timeout = null, previous = 0;
var later = function () {
previous = _now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function () {
var now = _now(), remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
})();
</script>
</body>
</html>