-
Notifications
You must be signed in to change notification settings - Fork 2
/
test.html
235 lines (230 loc) · 8.57 KB
/
test.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<html>
<head>
<script src="https://unpkg.com/telescopic-text/lib/index.js"></script>
<link
href="https://unpkg.com/telescopic-text/lib/index.css"
rel="stylesheet"
/>
<title>transforming text playground</title>
<meta
name="description"
content="An interactive playground for creating transforming text."
/>
<meta property="og:image" content="/assets/android-chrome-512x512.png" />
<meta
property="twitter:image"
content="https://poems.verses.xyz/assets/android-chrome-512x512.png"
/>
<meta property="twitter:title" content="transforming text playground" />
<meta
name="twitter:description"
content="An interactive playground for creating transforming text."
/>
<meta name="twitter:card" content="summary" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap"
rel="stylesheet"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/assets/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/assets/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/assets/favicon-16x16.png"
/>
<link rel="manifest" href="/assets/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div class="noise-gradient"></div>
<div class="two-pane">
<div id="sidebar">
<a href="https://verses.xyz">
<img id="versesLogoImg" src="./logo.png" />
</a>
<p>
A collection of telescopic verses from the
<a href="https://verses.xyz/">verses</a> community.
</p>
<ul id="poem-list"></ul>
<p><a href="/">Back to collection.</a></p>
</div>
<div id="text-container" class="test">
<h1>Interactive Playground</h1>
<p>
This is an interactive site to play with making telescopic text using
the
<a href="github.com/jackyzha0/telescopic-text"
>telescopic-text library</a
>
maintained by <a href="https://jzhao.xyz/">jacky</a>, <a href="https://www.spencerchang.me/">spencer</a>, and other open-source contributors.
</p>
<p>
To play with how a telescopic poem might look and behave, enter your
text below, and the output will auto-update on top. If you would like
to add it to the collection, you can submit your finished poem to
<a
href="https://coda.io/form/Verses-Telescopic-Poem-Submission_dAfMm4cUAB8"
>this form</a
>.
</p>
<details>
<summary>
<b>How do I use this?</b>
</summary>
<p>
You can write transforming text using your favorite note app / text editor
and a bullet list (accepted bullet symbols are <code>-</code> and <code>*</code>)! Start with a single sentence like:
<br/>
<pre>- Texts are boundless shapeshifters</pre>
</p>
<p>At any point, you can break up the full sentence into separate lines. Bullets on the same indentation level are combined
into the same sentence, and any indented bullets will be used as an
expansion point for the parent bullet. At any point, you can break up
the full sentence into separate lines. Bullets at the same indentation
level. For example,<br/>
<pre>
- Texts
- Clear notes
- really clear notes
- and
- are boundless shapeshifters.
- are limitless shapeshifters.</pre>
would become the following:
</p>
<div id="example-poem"></div>
</details>
<hr/>
<div id="playground">
<div class="playgroundInputs">
<div>
<label for="separatorInput">Separator (defaults to space)</label>
<input
id="separatorInput"
name="separatorInput"
aria-label="separator"
/>
</div>
<div>
<label for="textModeInput">Text Mode</label>
<select
id="textModeInput"
name="textModeInput"
aria-label="textMode"
value="text"
>
<option value="text">Text</option>
<option value="html">Html</option>
</select>
</div>
<textarea
id="testInput"
placeholder="- my - beautiful - beautiful transforming - beautiful transforming soulful - poem - composition - verses"
></textarea>
</div>
<div>
<h2>Your Poem</h2>
<div id="text-container-inner"></div>
</div>
</div>
<br />
<div class="code-preview">
<b>Corresponding code</b>
<p>
The following code will render the above transforming text if put in
an HTML file.
</p>
<div id="copy-code-container">
<pre id="copy-code-content" class="language-html"></pre>
</div>
<p>
Remember that you need to import the library code in your head. The
easiest way is to include the following snippet:
</p>
<pre class="language-html">
<code class="language-html"><head>
...
<script src="https://unpkg.com/telescopic-text/lib/index.js"></script>
<link href="https://unpkg.com/telescopic-text/lib/index.css" rel="stylesheet">
</head></code>
</pre>
</div>
</div>
<script>
const testNode = createTelescopicTextFromBulletedList(`* Texts
* Clear notes
* really clear notes
* and sounds
* are boundless shapeshifters.
* are limitless shapeshifters.`);
const placeholderInput = `- my
- beautiful
- beautiful transforming
- beautiful transforming soulful
- poem
- composition
- verses`;
document.getElementById("example-poem").appendChild(testNode);
function onUpdateTelescopicText() {
const input = document.getElementById("testInput").value || placeholderInput;
const separatorValue =
document.getElementById("separatorInput").value || " ";
const textModeValue = document.getElementById("textModeInput").value;
const config = { separator: separatorValue, textMode: textModeValue };
const stringConfig = `{separator: '${separatorValue}', textMode: '${textModeValue}'}`;
const node = createTelescopicTextFromBulletedList(input, config);
const container = document.getElementById("text-container-inner");
container.replaceChildren(node);
// update the code block
const codeBlock = document.getElementById("copy-code-content");
const codeToCopyTemplate = `<div id="telescopicPoem"><\/div>
<script>
const telescopicContent = createTelescopicTextFromBulletedList(\`${input}\`, ${stringConfig});
const container = document.getElementById("telescopicPoem");
container.appendChild(telescopicContent);
<\/script>`;
const codeBlockNode = document.createElement("code");
codeBlockNode.classList.add("language-html");
codeBlockNode.appendChild(
document.createTextNode(codeToCopyTemplate)
);
codeBlock.replaceChildren(codeBlockNode);
Prism.highlightElement(codeBlockNode);
}
document
.getElementById("testInput")
.setAttribute("oninput", "onUpdateTelescopicText()");
document
.getElementById("separatorInput")
.setAttribute("onchange", "onUpdateTelescopicText()");
document
.getElementById("textModeInput")
.setAttribute("onchange", "onUpdateTelescopicText()");
// instantiate initial value with the placeholder.
onUpdateTelescopicText();
</script>
</div>
</body>
</html>