Skip to content

Commit 60828b3

Browse files
StrutTowerStrutTower
committed
Fixed demo pages
1 parent c4058b0 commit 60828b3

File tree

9 files changed

+117
-51
lines changed

9 files changed

+117
-51
lines changed

‎demo-templates/examples.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ <h5>Default Styling Single File</h5>
2626
</div>
2727

2828
<div id="default-example-code" class="hidden">
29-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_default.html"></code></pre>
30-
<pre><code class="language-javascript" data-sample-url="scripts/examplesDefault.js"></code></pre>
29+
<pre><code class="language-html">@@include(html('./examples/_default.html'))</code></pre>
30+
<pre><code class="language-javascript">@@include('../demo/scripts/examplesDefault.js')</code></pre>
3131
</div>
3232

3333
<hr />
@@ -44,8 +44,8 @@ <h5>With Clear Button</h5>
4444
</div>
4545

4646
<div id="clear-button-example-code" class="hidden">
47-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_clearButton.html"></code></pre>
48-
<pre><code class="language-javascript" data-sample-url="scripts/examplesClearButton.js"></code></pre>
47+
<pre><code class="language-html">@@include(html('./examples/_clearButton.html'))</code></pre>
48+
<pre><code class="language-javascript">@@include('../demo/scripts/examplesClearButton.js')</code></pre>
4949
</div>
5050

5151
<hr />
@@ -66,8 +66,8 @@ <h5>Default Styling Single File With a Font Icon</h5>
6666
</div>
6767

6868
<div id="font-icon-example-code" class="hidden">
69-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_fontIcon.html"></code></pre>
70-
<pre><code class="language-javascript" data-sample-url="scripts/examplesFontIcon.js"></code></pre>
69+
<pre><code class="language-html">@@include(html('./examples/_fontIcon.html'))</code></pre>
70+
<pre><code class="language-javascript">@@include('../demo/scripts/examplesFontIcon.js')</code></pre>
7171
</div>
7272
<hr />
7373
</div>
@@ -83,8 +83,8 @@ <h5>Default Styling Multiple Files</h5>
8383
</div>
8484

8585
<div id="multiple-files-example-code" class="hidden">
86-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_multipleFiles.html"></code></pre>
87-
<pre><code class="language-javascript" data-sample-url="scripts/examplesMultipleFiles.js"></code></pre>
86+
<pre><code class="language-html">@@include(html('./examples/_multipleFiles.html'))</code></pre>
87+
<pre><code class="language-javascript">@@include('../demo/scripts/examplesMultipleFiles.js')</code></pre>
8888
</div>
8989

9090
<hr />
@@ -103,8 +103,8 @@ <h5>Using Bootstrap Styles</h5>
103103
</div>
104104

105105
<div id="bootstrap-styles-example-code" class="hidden">
106-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_bootstrapStyles.html"></code></pre>
107-
<pre><code class="language-javascript" data-sample-url="scripts/examplesBootstrapStyles.js"></code></pre>
106+
<pre><code class="language-html">@@include(html('./examples/_bootstrapStyles.html'))</code></pre>
107+
<pre><code class="language-javascript">@@include('../demo/scripts/examplesBootstrapStyles.js')</code></pre>
108108
</div>
109109
</div>
110110
</main>

‎demo-templates/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@ <h3>Tower File Input</h3>
2525
</p>
2626

2727
<div id="demo-index-code" class="hidden">
28-
<pre><code class="language-html" data-sample-url="~/../../demo-templates/index/_demo.html"></code></pre>
29-
<pre><code class="language-javascript" data-sample-url="scripts/mainDemoInput.js"></code></pre>
28+
<pre><code class="language-html">@@include(html('./index/_demo.html'))</code></pre>
29+
<pre><code class="language-javascript">@@include('../demo/scripts/mainDemoInput.js')</code></pre>
3030
</div>
3131

3232
<hr />
3333
<h5>Setup</h5>
3434

3535
<p>The most basic setup will look like this:</p>
3636

37-
<pre><code class="language-html" data-sample-url="../samples/basicSetupHtml.html"></code></pre>
38-
<pre><code class="language-javascript" data-sample-url="../samples/basicSetupJs.js"></code></pre>
37+
<pre><code class="language-html">@@include(html('../samples/basicSetupHtml.html'))</code></pre>
38+
<pre><code class="language-javascript">@@include('../samples/basicSetupJs.js')</code></pre>
3939

4040
<p>
4141
The input and the label must be in an element with the class <code>twr-file</code>.
@@ -52,7 +52,7 @@ <h5>Setup</h5>
5252
inside the main element:
5353
</p>
5454

55-
<pre><code class="language-html" data-sample-url="../samples/basicClearButton.html"></code></pre>
55+
<pre><code class="language-html">@@include(html('../samples/basicClearButton.html'))</code></pre>
5656

5757
<p>
5858
<a href="examples.html">More Examples</a>

‎demo-templates/partials/_scripts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
55
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
66

7-
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js" data-manual></script>
7+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
88
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
99
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
1010

‎demo/examples.html‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,13 @@ <h5>Default Styling Single File</h5>
9191
</div>
9292

9393
<div id="default-example-code" class="hidden">
94-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_default.html"></code></pre>
95-
<pre><code class="language-javascript" data-sample-url="scripts/examplesDefault.js"></code></pre>
94+
<pre><code class="language-html">&lt;div class=&quot;twr-file&quot;&gt;
95+
&lt;input type=&quot;file&quot; id=&quot;demoInput1&quot; /&gt;
96+
&lt;label for=&quot;demoInput1&quot; class=&quot;twr-file-button&quot;&gt;
97+
Select a File
98+
&lt;/label&gt;
99+
&lt;/div&gt;</code></pre>
100+
<pre><code class="language-javascript">new twrFileInput(document.getElementById('demoInput1'));</code></pre>
96101
</div>
97102

98103
<hr />
@@ -115,8 +120,16 @@ <h5>With Clear Button</h5>
115120
</div>
116121

117122
<div id="clear-button-example-code" class="hidden">
118-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_clearButton.html"></code></pre>
119-
<pre><code class="language-javascript" data-sample-url="scripts/examplesClearButton.js"></code></pre>
123+
<pre><code class="language-html">&lt;div class=&quot;twr-file&quot;&gt;
124+
&lt;input type=&quot;file&quot; id=&quot;demoInput4&quot; multiple /&gt;
125+
&lt;label for=&quot;demoInput4&quot; class=&quot;twr-file-button&quot;&gt;
126+
&lt;span class=&quot;mdi mdi-upload&quot;&gt;&lt;/span&gt;Select Files
127+
&lt;/label&gt;
128+
&lt;button type=&quot;button&quot; class=&quot;twr-file-clear twr-file-button&quot;&gt;Clear&lt;/button&gt;
129+
&lt;/div&gt;</code></pre>
130+
<pre><code class="language-javascript">new twrFileInput(document.getElementById('demoInput4'), {
131+
iconClass: 'mdi mdi-fw mdi-upload'
132+
});</code></pre>
120133
</div>
121134

122135
<hr />
@@ -143,8 +156,16 @@ <h5>Default Styling Single File With a Font Icon</h5>
143156
</div>
144157

145158
<div id="font-icon-example-code" class="hidden">
146-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_fontIcon.html"></code></pre>
147-
<pre><code class="language-javascript" data-sample-url="scripts/examplesFontIcon.js"></code></pre>
159+
<pre><code class="language-html">&lt;div class=&quot;twr-file&quot;&gt;
160+
&lt;input type=&quot;file&quot; id=&quot;demoInput2&quot; /&gt;
161+
&lt;label for=&quot;demoInput2&quot; class=&quot;twr-file-button&quot;&gt;
162+
&lt;span class=&quot;mdi mdi-upload&quot;&gt;&lt;/span&gt;Select a File
163+
&lt;/label&gt;
164+
&lt;button type=&quot;button&quot; class=&quot;twr-file-clear twr-file-button&quot;&gt;Clear&lt;/button&gt;
165+
&lt;/div&gt;</code></pre>
166+
<pre><code class="language-javascript">new twrFileInput(document.getElementById('demoInput2'), {
167+
iconClass: 'mdi mdi-fw mdi-upload'
168+
});</code></pre>
148169
</div>
149170
<hr />
150171
</div>
@@ -166,8 +187,16 @@ <h5>Default Styling Multiple Files</h5>
166187
</div>
167188

168189
<div id="multiple-files-example-code" class="hidden">
169-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_multipleFiles.html"></code></pre>
170-
<pre><code class="language-javascript" data-sample-url="scripts/examplesMultipleFiles.js"></code></pre>
190+
<pre><code class="language-html">&lt;div class=&quot;twr-file&quot;&gt;
191+
&lt;input type=&quot;file&quot; id=&quot;demoInput3&quot; multiple /&gt;
192+
&lt;label for=&quot;demoInput3&quot; class=&quot;twr-file-button&quot;&gt;
193+
&lt;span class=&quot;mdi mdi-upload&quot;&gt;&lt;/span&gt;Select Files
194+
&lt;/label&gt;
195+
&lt;button type=&quot;button&quot; class=&quot;twr-file-clear twr-file-button&quot;&gt;Clear&lt;/button&gt;
196+
&lt;/div&gt;</code></pre>
197+
<pre><code class="language-javascript">new twrFileInput(document.getElementById('demoInput3'), {
198+
iconClass: 'mdi mdi-fw mdi-upload'
199+
});</code></pre>
171200
</div>
172201

173202
<hr />
@@ -192,8 +221,16 @@ <h5>Using Bootstrap Styles</h5>
192221
</div>
193222

194223
<div id="bootstrap-styles-example-code" class="hidden">
195-
<pre><code class="language-html" data-sample-url="../demo-templates/examples/_bootstrapStyles.html"></code></pre>
196-
<pre><code class="language-javascript" data-sample-url="scripts/examplesBootstrapStyles.js"></code></pre>
224+
<pre><code class="language-html">&lt;div class=&quot;twr-file&quot;&gt;
225+
&lt;input type=&quot;file&quot; id=&quot;demoInput5&quot; multiple /&gt;
226+
&lt;label for=&quot;demoInput5&quot; class=&quot;btn btn-primary&quot;&gt;
227+
&lt;span class=&quot;mdi mdi-upload&quot;&gt;&lt;/span&gt;Select Files
228+
&lt;/label&gt;
229+
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary twr-file-clear align-top&quot;&gt;Clear&lt;/button&gt;
230+
&lt;/div&gt;</code></pre>
231+
<pre><code class="language-javascript">new twrFileInput(document.getElementById('demoInput5'), {
232+
iconClass: 'mdi mdi-fw mdi-upload'
233+
});</code></pre>
197234
</div>
198235
</div>
199236
</main>
@@ -206,7 +243,7 @@ <h5>Using Bootstrap Styles</h5>
206243

207244
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
208245

209-
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js" data-manual></script>
246+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
210247
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
211248
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
212249

‎demo/index.html‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,17 +100,39 @@ <h5>Live Demo</h5>
100100
</p>
101101

102102
<div id="demo-index-code" class="hidden">
103-
<pre><code class="language-html" data-sample-url="~/../../demo-templates/index/_demo.html"></code></pre>
104-
<pre><code class="language-javascript" data-sample-url="scripts/mainDemoInput.js"></code></pre>
103+
<pre><code class="language-html">&lt;div class=&quot;mb-3&quot;&gt;
104+
&lt;h5&gt;Live Demo&lt;/h5&gt;
105+
&lt;p&gt;
106+
Try picking a single non-image file, multiple files, and a single image file.
107+
&lt;/p&gt;
108+
&lt;div class=&quot;twr-file&quot;&gt;
109+
&lt;input type=&quot;file&quot; id=&quot;mainDemoInput&quot; multiple /&gt;
110+
111+
&lt;label for=&quot;mainDemoInput&quot; class=&quot;btn btn-primary&quot;&gt;
112+
&lt;span class=&quot;mdi mdi-upload&quot;&gt;&lt;/span&gt;Select Files
113+
&lt;/label&gt;
114+
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary twr-file-clear&quot; title=&quot;Clear Selected File(s)&quot;&gt;
115+
&lt;span class=&quot;mdi mdi-cancel pr-1&quot;&gt;&lt;/span&gt;Clear Selected File(s)
116+
&lt;/button&gt;
117+
&lt;/div&gt;
118+
&lt;/div&gt;</code></pre>
119+
<pre><code class="language-javascript">let input = document.getElementById('mainDemoInput');
120+
new twrFileInput(input);</code></pre>
105121
</div>
106122

107123
<hr />
108124
<h5>Setup</h5>
109125

110126
<p>The most basic setup will look like this:</p>
111127

112-
<pre><code class="language-html" data-sample-url="../samples/basicSetupHtml.html"></code></pre>
113-
<pre><code class="language-javascript" data-sample-url="../samples/basicSetupJs.js"></code></pre>
128+
<pre><code class="language-html">&lt;div class=&quot;twr-file&quot;&gt;
129+
&lt;input type=&quot;file&quot; id=&quot;file1&quot; /&gt;
130+
&lt;label for=&quot;file1&quot;&gt;
131+
Select a File
132+
&lt;/label&gt;
133+
&lt;/div&gt;</code></pre>
134+
<pre><code class="language-javascript">let input = document.getElementByID('file1');
135+
new twrFileInput(input);</code></pre>
114136

115137
<p>
116138
The input and the label must be in an element with the class <code>twr-file</code>.
@@ -127,7 +149,9 @@ <h5>Setup</h5>
127149
inside the main element:
128150
</p>
129151

130-
<pre><code class="language-html" data-sample-url="../samples/basicClearButton.html"></code></pre>
152+
<pre><code class="language-html">&lt;button type=&quot;button&quot; class=&quot;twr-file-clear twr-file-button&quot;&gt;
153+
Clear
154+
&lt;/button&gt;</code></pre>
131155

132156
<p>
133157
<a href="examples.html">More Examples</a>
@@ -175,7 +199,7 @@ <h5>Options</h5>
175199

176200
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
177201

178-
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js" data-manual></script>
202+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
179203
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
180204
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
181205

‎demo/scripts/scripts.js‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
Prism.hooks.add("before-highlight", function (env) {
2-
env.code = env.element.innerText;
3-
});
4-
5-
document.querySelectorAll('[data-sample-url]').forEach(function (element) {
6-
fetch(element.dataset.sampleUrl)
7-
.then(data => data.text())
8-
.then(function (response) {
9-
10-
element.innerText = response;
11-
Prism.highlightElement(element);
12-
});
13-
});
14-
151
document.querySelectorAll('.twr-toggle').forEach(function (element) {
162
element.addEventListener('click', function (e) {
173
e.preventDefault();

‎gulpfile.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ var gulp = require('gulp'),
55
terser = require('gulp-terser'),
66
rename = require('gulp-rename'),
77
fileInclude = require('gulp-file-include'),
8-
htmlBeautify = require('gulp-html-beautify');
8+
htmlBeautify = require('gulp-html-beautify')
9+
html = require('html-escaper');
910

1011
var options = {
1112
js: {
@@ -34,7 +35,11 @@ gulp.task('build-css', function () {
3435

3536
gulp.task('build-html', function () {
3637
return gulp.src(options.html.files)
37-
.pipe(fileInclude())
38+
.pipe(fileInclude({
39+
filters: {
40+
html: html.escape
41+
}
42+
}))
3843
.pipe(htmlBeautify())
3944
.pipe(gulp.dest(options.html.dest));
4045
});

‎package-lock.json‎

Lines changed: 14 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"gulp-clean-css": "4.3.0",
1212
"gulp-rename": "2.0.0",
1313
"gulp-file-include": "2.3.0",
14-
"gulp-html-beautify": "1.0.1"
14+
"gulp-html-beautify": "1.0.1",
15+
"html-escaper": "3.0.3"
1516
}
1617
}

0 commit comments

Comments
 (0)