-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (146 loc) · 5.92 KB
/
index.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
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en" class=" js content-loading loading"><head>
<meta charset="utf-8">
<meta name="author" content="stephband">
<meta name="description" content="Textbox tests">
<meta name="viewport" content="width=device-width">
<title>textboxes</title>
<script title="load">
document.documentElement.className += ' js content-loading loading';
window.addEventListener('DOMContentLoaded', () => document.documentElement.classList.remove('content-loading'));
// Wait for other load handlers to run first - Bolt does a few things on
// load (eg. data-targetable scrolls) and we want them to run before the loading
// class is removed
window.addEventListener('load', () => window.requestAnimationFrame(() => document.documentElement.classList.remove('loading')));
</script>
<link rel="shortcut icon" href="images/logo-64x64.ico">
<link rel="icon" type="image/png" href="images/logo-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/logo-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="images/logo-128x128.png" sizes="128x128">
<style>
@import './bolt/elements/html.css';
@import './bolt/elements/type.css';
@import './bolt/classes/atoms.css';
@import './bolt/classes/text.css';
body {
line-height: 1.5em;
padding: 1.5rem;
background-color: #eeeeee;
}
p {
padding: 0.3em;
box-shadow: 0 0 0 1px #cccccc;
}
* + p {
margin-top: 0.5rem !important;
}
textarea, p {
background-color: white;
}
textarea {
width: 100%;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: 0.3em;
/* Remove resize handle from textarea */
resize: none;
height: 5.1em;
border-color: #cccccc;
}
* + textarea {
margin-top: 0.5rem;
}
[contenteditable] {
white-space: normal;
word-wrap: normal;
overflow-x: auto;
}
.line-clamp {
display: block;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-clamp: 3;
max-height: 5.1em;
}
pre, input {
font-size: 16px;
line-height: 1.5rem;
}
small {
margin-top: 0.5rem;
display: block;
font-size: 14px;
line-height: 1.5rem;
}
</style>
</head>
<body class="3x-grid grid" style="font-size: 18px;">
<section class="x1 y1 x-stretch">
<pre>textarea</pre>
<textarea>Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</textarea>
<small>Textareas require a fixed height, this will not auto-expand</small>
</section>
<section class="x1 y2 x-stretch">
<pre>textarea, line-clamp</pre>
<textarea class="line-clamp">Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</textarea>
</section>
<section class="x1 y3 x-stretch">
<pre>textarea, line-clamp, scroll-reset</pre>
<textarea class="line-clamp scroll-reset">Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</textarea>
</section>
<section class="x2 y1 x-stretch">
<pre>p</pre>
<p>Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</p>
<small>Paragraphs do auto-expand</small>
</section>
<section class="x2 y2 x-stretch">
<pre>p[contenteditable], line-clamp</pre>
<p class="line-clamp" contenteditable>Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</p>
</section>
<section class="x2 y3 x-stretch">
<pre>p[contenteditable="plaintext-only"], line-clamp</pre>
<p class="line-clamp" contenteditable="plaintext-only">Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</p>
<small style="margin-top: 0.5rem; display: block;"><code>contenteditable="plaintext-only"</code> <a href="https://caniuse.com/mdn-html_global_attributes_contenteditable_plaintext-only">not available in FF</a></small>
</section>
<section class="x2 y4 x-stretch">
<pre>p[contenteditable], line-clamp, scroll-reset</pre>
<p class="line-clamp scroll-reset" contenteditable>Crunchum ipsum dolor, constructor function, sed do while loop python orientation semi colon incident.</p>
<small style="margin-top: 0.5rem; display: block;">In Safari, click-drag down exposes additional lines</small>
</section>
<form class="x3 y1 4y x-stretch sticky">
<pre>font-size</pre>
<input type="range" min="12" max="64" step="any" value="18" id="font-size" />
</form>
<script type="module">
import events from './dom/modules/events.js';
//events('cut copy paste input change keypress keydown keyup', document).each((e) => console.log(e.type, e));
events({
type: 'cut copy paste input change keypress keydown keyup',
select: '.scroll-reset'
}, document)
.each((e) => {
e.target.scrollTop = 0;
requestAnimationFrame(() => e.target.scrollTop = 0);
console.log(e.type);
});
events({
type: 'focusout',
select: '.scroll-reset'
}, document)
.each((e) => {
// Truncate to height
console.log(e.type);
while (e.target.scrollHeight > e.target.clientHeight) {
e.target.textContent = e.target.textContent.slice(0, -1)
}
});
events('input', document.getElementById('font-size')).each((e) => {
document.body.style.fontSize = e.target.value + 'px';
});
</script>
</body>
</html>