-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
159 lines (138 loc) · 4.71 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spanner.js test drive</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic' rel='stylesheet'>
<style>
body {
font: 400 125%/1.66 "Open Sans", sans-serif;
margin: 0 auto;
max-width: 44em;
padding: 3em;
}
section {
margin: 0 0 4.5em 0;
}
h1, h2, h3 {
border-bottom: 1px solid #ddd;
line-height: 1.1;
letter-spacing: -0.05em;
text-transform: uppercase;
}
a {
color: inherit;
}
.result,
pre {
background-color: #272822;
border-radius: 0.25em;
padding: 0.875em;
font: 400 1.125em/1.3 sans-serif;
color: #F00;
}
pre {
color: #fff;
}
[class*="char"] {
color: #A6E22E;
}
</style>
</head>
<body>
<h1>Spanner.js test drive</h1>
<p>All succeeded letterings should be green, otherwise they are red.</p>
<section>
<h2>Using ID's</h2>
<pre><code class="language-markup"><div id="example-1">Text</div></code></pre>
<pre><code class="language-javascript">spanner( document.getElementById("example-1") );</code></pre>
<h3>Result</h3>
<div class="result">
<div id="example-1">text</div>
</div>
</section>
<section>
<h2>Using classes</h2>
<pre><code class="language-markup"><div class="clazz">clazzified</div>
<div class="clazz">clazzified as well</div></code></pre>
<pre><code class="language-javascript">spanner( document.getElementsByClassName("clazz") );</code></pre>
<h3>Result</h3>
<div class="result" id="example-2">
<div class="clazz">clazzified</div>
<div class="clazz">clazzified as well</div>
</div>
</section>
<section>
<h2>Using elements</h2>
<pre><code class="language-markup"><article>Dah Article</article>
<article>Dah Article also isse cool!</article></code></pre>
<pre><code class="language-javascript">spanner( document.getElementsByTagName("article") );</code></pre>
<h3>Result</h3>
<div class="result" id="example-3">
<article>Dah Article</article>
<article>Dah Article also isse cool!</article>
</div>
</section>
<section>
<h2>Including line–breaks</h2>
<p>Spanner.js can play nicely with the break tag.</p>
<pre><code class="language-markup"><div id="example-4">Text<br/>and more</div></code></pre>
<pre><code class="language-javascript">spanner( document.getElementById("example-4") );</code></pre>
<h3>Result</h3>
<div class="result">
<div id="example-4">Text<br/>and more</div>
</div>
</section>
<section>
<h2>Including inline tags</h2>
<p>Spanner.js can recognize inline tags one level deep.</p>
<pre><code class="language-markup"><div id="example-5">Text <em>and<em> <strong>more<strong></div></code></pre>
<pre><code class="language-javascript">spanner( document.getElementById("example-5") );</code></pre>
<h3>Result</h3>
<div class="result">
<div id="example-5">Text <em>and</em> <strong>more</strong> <a href="">link</a></div>
</div>
</section>
<section>
<h2>Using the span element</h2>
<p>Spanner.js tries not to break when already using spans</p>
<pre><code class="language-markup"><div id="example-6">Text <span>here<span></div></code></pre>
<pre><code class="language-javascript">spanner( document.getElementById("example-6") );</code></pre>
<h3>Result</h3>
<div class="result">
<div id="example-6">Text <span>here</span></div>
</div>
</section>
<section>
<h2>Breaking the function</h2>
<p>Here we are looking for a non-existing element with id 'non-existing-id'. Remember to put all calls to spanner inside a try-catch block, to prevent breaking the complete program.</p>
<pre><code class="language-markup"><aside>Derp</aside></code></pre>
<pre><code class="language-javascript">spanner( document.getElementById("non-existing-id") );</code></pre>
<h3>Result</h3>
<div class="result">
<aside>Derp</aside>
</div>
</section>
<script src="spanner.js"></script>
<script>
// Example 1: using an ID selector
spanner( document.getElementById("example-1") );
// Example 2: using a classname selector
spanner( document.getElementById("example-2").getElementsByClassName("clazz") );
// Example 3: using elements
spanner( document.getElementById("example-3").getElementsByTagName("article") );
// Example 4: using line-breaks
spanner( document.getElementById("example-4") );
// Example 5: using inline tags
spanner( document.getElementById("example-5") );
// Example 6: using inline tags
spanner( document.getElementById("example-6") );
// Example 8: breaking bad
try {
spanner( document.getElementById("non-existing-id") );
} catch (e) {
console.warn(e);
}
</script>
</body>
</html>