-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.ejs
129 lines (114 loc) · 4.96 KB
/
template.ejs
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!-- Based on https://github.com/morishitter/psg-theme-default -->
<!doctype html>
<html class="psg-theme" lang="en">
<head>
<meta charset="UTF-8">
<title><%= projectName %></title>
<style><%- codeStyle %><%- tmplStyle %><%- processedCSS %></style>
</head>
<body>
<div class="psg-wrapper">
<div id="psg-nav-toggler" class="psg-nav-toggler">☰</div>
<nav id="psg-menu" class="psg-menu">
<a href="" class="psg-logo">
<!-- <img
title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo-leftp.svg"> -->
</a>
<ul class="psg-ComponentList">
<% if (Array.isArray(colorPalette) && colorPalette.length !== 0) { %>
<a href="#color-palette" class="psg-ComponentList__item">
<li>Color Palette</li>
</a>
<% } %>
<% maps.forEach(function (map) { %>
<% if (map.link.title !== null) { %>
<a href="#<%= map.link.id %>" class="psg-ComponentList__item">
<li>
<%= map.link.title %>
</li>
</a>
<% } %>
<% }) %>
</ul>
</nav>
<div id="psg-main" class="psg-main">
<header class="psg-title">
<h1><%= projectName %></h1>
</header>
<div class="psg-container">
<% if (Array.isArray(colorPalette) && colorPalette.length !== 0) { %>
<section class="psg-section">
<h2 id="color-palette" class="psg-component-title">Color Palette</h2>
<div class="psg-contents">
<div class="psg-colorPalette">
<% colorPalette.forEach(function (palette) { %>
<div class="psg-colorBox">
<div class="psg-colorBox__sample" style="background-color: <%= palette.color %>">
</div>
<div class="psg-colorBox__name">
<%= palette.name %><br>
<%= palette.color %>
</div>
</div>
<% }) %>
</div>
</div>
</section>
<% } %>
<% maps.forEach(function (map) { %>
<section class="psg-section">
<h2 id="<%= map.link.id %>" class="psg-component-title"><%= map.link.title %></h2>
<div class="psg-contents">
<%- map.html %>
</div>
</section>
<section class="psg-css-code psg-section">
<% if (showCode) { %>
<button class="button-small button-tertiary psg-css-code-toggle">View CSS code</button>
<pre class="psg-css-code-box" style="display: none;"><div><code class="lang-css"><%- map.rule %></code></div></pre>
<% } %>
</section>
<% }) %>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Remove empty titles
var emptyTitles = document.querySelectorAll('.psg-component-title');
for (var q = 0; q < emptyTitles.length; q++) {
// console.log("'" + emptyTitles[q].innerHTML + "'");
if (emptyTitles[q].innerHTML == "") {
emptyTitles[q].style.display = "none";
}
}
// Toggle CSS code
var cssCodeToggle = document.querySelectorAll('.psg-css-code-toggle');
for (var i = 0; i < cssCodeToggle.length; i++) {
cssCodeToggle[i].addEventListener("click", function(e) {
var sib = e.currentTarget.parentNode.querySelector('.psg-css-code-box');
sib.style.display = sib.style.display == "none" ? "block" : "none";
}, false);
}
// Toggle navigation
var toggler = document.getElementById("psg-nav-toggler");
toggler.addEventListener("click", toggleNav);
function toggleNav() {
var nav = document.getElementById("psg-menu");
var main = document.getElementById("psg-main");
var toggl = document.getElementById("psg-nav-toggler");
if ( nav.classList.contains('psg-menu-closed') ) {
nav.classList.remove('psg-menu-closed');
main.classList.remove('psg-menu-closed');
toggl.classList.remove('psg-menu-closed');
} else {
nav.classList.add('psg-menu-closed');
main.classList.add('psg-menu-closed');
toggl.classList.add('psg-menu-closed');
};
}
});
</script>
</body>
</html>