@jaisocx/css-table-ordered 2.3.5 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MediaAndStyles/CssTableOrdered_main_Webpack.css +5 -0
- package/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css +1 -1
- package/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Webpack.css +3 -3
- package/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_thin.css +4 -3
- package/MediaAndStyles/themes/theme_jaisocx_folder_listing/responsive_size_Imports_CssTable_theme_jaisocx_folder_listing_Webpack.css +38 -38
- package/MediaAndStyles/themes/theme_jaisocx_folder_listing/responsive_size_Imports_CssTable_theme_jaisocx_folder_listing_Webpack_minimal.css +38 -38
- package/README.md +42 -38
- package/css_table_ordered_few_rows_preview.html +686 -0
- package/css_table_ordered_preview.html +1947 -0
- package/index.preview.html +1945 -0
- package/package.json +14 -17
- package/transpiled/Simple/scroll/CssTableScroll.js +2 -2
- package/webpack.aliases.json +1 -0
|
@@ -0,0 +1,686 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" id="css_table_few_rows" class="jsx css_table_ordered_preview theme_visible_height jaisocx-folder-listing">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<link
|
|
6
|
+
id="icon_jaisocx"
|
|
7
|
+
rel="icon"
|
|
8
|
+
type="image/x-icon"
|
|
9
|
+
href="node_modules/@jaisocx/css_clean_start_lite/favicon/Icon_Jaisocx.ico"
|
|
10
|
+
href-fallback="../css_clean_start_lite/favicon/Icon_Jaisocx.ico"
|
|
11
|
+
onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
<title> Css Table Ordered </title>
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<base href="./" />
|
|
19
|
+
|
|
20
|
+
<meta charset="utf-8" />
|
|
21
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<!--# CSS CLEAN START LITE: html & css WHEN STARTING A SITE FROM SCRATCH -->
|
|
28
|
+
<link
|
|
29
|
+
rel="stylesheet"
|
|
30
|
+
type="text/css"
|
|
31
|
+
charset="utf-8"
|
|
32
|
+
href="node_modules/@jaisocx/css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
|
|
33
|
+
href-fallback="../css_clean_start_lite/MediaAndStyles/CssCleanStart_Lite_main_resolved.css"
|
|
34
|
+
onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
|
|
35
|
+
/>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<!--# CSS TABLE: css FOR THE SERVER SIDE PRODUCED TABLE MARKUP -->
|
|
40
|
+
<link
|
|
41
|
+
rel="stylesheet"
|
|
42
|
+
type="text/css"
|
|
43
|
+
charset="utf-8"
|
|
44
|
+
href="node_modules/@jaisocx/css-table/MediaAndStyles/CssTable_main_resolved.css"
|
|
45
|
+
href-fallback="../css-table/MediaAndStyles/CssTable_main_resolved.css"
|
|
46
|
+
onerror="javascript: ( () => { this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); this.onerror = null; } )();"
|
|
47
|
+
/>
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
<!--# CSS TABLE ORDERED: css FOR THE SERVER SIDE PRODUCED TABLE MARKUP -->
|
|
52
|
+
<link
|
|
53
|
+
rel="stylesheet"
|
|
54
|
+
type="text/css"
|
|
55
|
+
charset="utf-8"
|
|
56
|
+
href="MediaAndStyles/CssTableOrdered_main_resolved.css"
|
|
57
|
+
/>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
<style name="theme_turn_on">
|
|
62
|
+
|
|
63
|
+
.jsx {
|
|
64
|
+
--theme-button-width: fit-content;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.jsx button {
|
|
68
|
+
background-color: transparent;
|
|
69
|
+
text-align: left;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.jsx themebuttons {
|
|
73
|
+
width: fit-content;
|
|
74
|
+
display: grid;
|
|
75
|
+
grid-auto-flow: column;
|
|
76
|
+
column-gap: 3rem;
|
|
77
|
+
margin: 1.2rem 0 1.2rem 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.jsx themebuttons button {
|
|
81
|
+
width: var(--theme-button-width);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.current::after {
|
|
85
|
+
content: "";
|
|
86
|
+
position: absolute;
|
|
87
|
+
bottom: -0.3rem;
|
|
88
|
+
left: 0;
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 0;
|
|
91
|
+
max-height: 0;
|
|
92
|
+
overflow-y: hidden;
|
|
93
|
+
border-bottom-width: 0.14rem;
|
|
94
|
+
border-bottom-style: solid;
|
|
95
|
+
border-bottom-color: var(--clean-start__text-color);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
</style>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
<style name="css clean start overrides for this site">
|
|
103
|
+
|
|
104
|
+
.jsx#css_table_few_rows {
|
|
105
|
+
--jsx--css-clean-start-2--site--padding: 1rem 1rem 0.3rem 1rem;
|
|
106
|
+
|
|
107
|
+
--jsx--css-clean-start-2--h1--font-size: 1.05rem;
|
|
108
|
+
--jsx--css-clean-start-2--h2--font-size: 0.9rem;
|
|
109
|
+
--jsx--css-clean-start-2--h3--font-size: 0.83rem;
|
|
110
|
+
|
|
111
|
+
--jsx--css-clean-start-2--h2--font-weight: 500;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
</style>
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
<style name="css clean start lite mobile portrait">
|
|
119
|
+
|
|
120
|
+
@media only screen and (min-width: 2px) and (max-width: 767px) and (orientation: portrait),
|
|
121
|
+
only screen and (min-width: 2px) and (max-width: 767px) and (orientation: landscape) {
|
|
122
|
+
|
|
123
|
+
.jsx.theme_visible_height {
|
|
124
|
+
|
|
125
|
+
--responsive_size: responsive_size_til_h03_tablet_s_portrait;
|
|
126
|
+
|
|
127
|
+
--jsx--css-clean-start-2--site--min-width: 100%;
|
|
128
|
+
--jsx--css-clean-start-2--site--max-width: 100%;
|
|
129
|
+
--jsx--css-clean-start-2--site--width: 100%;
|
|
130
|
+
|
|
131
|
+
--jsx--css-clean-start-2--h1--font-size: 1rem;
|
|
132
|
+
--jsx--css-clean-start-2--h1--line-height: 1.3rem;
|
|
133
|
+
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.jsx.theme_visible_height h2,
|
|
137
|
+
.jsx.theme_visible_height h3,
|
|
138
|
+
.jsx.theme_visible_height description {
|
|
139
|
+
display: none;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.jsx themebuttons {
|
|
143
|
+
margin: 1rem 0 1rem 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
</style>
|
|
149
|
+
|
|
150
|
+
</head>
|
|
151
|
+
<body>
|
|
152
|
+
|
|
153
|
+
<main>
|
|
154
|
+
|
|
155
|
+
<content>
|
|
156
|
+
|
|
157
|
+
<h1> Css Table Ordered few rows </h1>
|
|
158
|
+
<h2> @jaisocx/css-table-ordered </h2>
|
|
159
|
+
<h3> css_table_ordered_few_rows_preview.html </h3>
|
|
160
|
+
<description>
|
|
161
|
+
Css sites tool styling a server side rendered database table data to a grid view,
|
|
162
|
+
with solutions for sticky scroll and order by on columns via browser's js engine
|
|
163
|
+
</description>
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
<ThemeButtons>
|
|
168
|
+
<button id="button-turn-on-base" data-theme="">Base Theme</button>
|
|
169
|
+
<button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
|
|
170
|
+
<button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
|
|
171
|
+
</ThemeButtons>
|
|
172
|
+
|
|
173
|
+
</content>
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
<!--starts markup of the table styled by @jaisocx/css-table-ordered npm package-->
|
|
178
|
+
<div class="jsx-css-table-holder theme_fixed_columns_labels theme_imaged theme_imaged_mimetypes_base jaisocx-folder-listing jaisocx-folder-listing-columns">
|
|
179
|
+
<div class="jsx-css-table desktop-columns-labels-holder">
|
|
180
|
+
<!--the first table record with the names of the table columns, shown in the table bright mode-->
|
|
181
|
+
<div class="row">
|
|
182
|
+
|
|
183
|
+
<div class="cell" data-datatype="number" data-id="0"><span class="column-label">num.</span></div>
|
|
184
|
+
|
|
185
|
+
<div class="cell" data-datatype="string" data-id="1"><span class="column-label">Name</span></div>
|
|
186
|
+
|
|
187
|
+
<div class="cell" data-datatype="string" data-id="2"><span class="column-label">mime</span></div>
|
|
188
|
+
|
|
189
|
+
<div class="cell" data-datatype="number" data-id="3"><span class="column-label">size</span></div>
|
|
190
|
+
|
|
191
|
+
<div class="cell" data-datatype="string" data-id="4"><span class="column-label">last modified</span></div>
|
|
192
|
+
|
|
193
|
+
<div class="cell" data-datatype="string" data-id="5"><span class="column-label">url relative</span></div>
|
|
194
|
+
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="jsx-css-table records">
|
|
198
|
+
|
|
199
|
+
<!--table record with props of one file in the current folder-->
|
|
200
|
+
<div class="row folder">
|
|
201
|
+
|
|
202
|
+
<div class="cell ix number folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
203
|
+
<span class="column-label">num.</span>
|
|
204
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
205
|
+
<span class="cell-value">0</span>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div class="cell name string folder ">
|
|
209
|
+
<span class="column-label">Name</span>
|
|
210
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
211
|
+
<span class="cell-value"><a href="javasscript: void(0);">..</a></span>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div class="cell mimeType string folder table-thin-field-hide-mobile ">
|
|
215
|
+
<span class="column-label">mime</span>
|
|
216
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
217
|
+
<span class="cell-value">folder</span>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div class="cell size number folder table-thin-field-hide-mobile ">
|
|
221
|
+
<span class="column-label">size</span>
|
|
222
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
223
|
+
<span class="cell-value">0</span>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<div class="cell fileLastModifiedTimestampFormatted string folder table-thin-field-hide-mobile ">
|
|
227
|
+
<span class="column-label">last modified</span>
|
|
228
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
229
|
+
<span class="cell-value">Wed 30 Jul 2025 23:14:53.814 GMT</span>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="cell fileUrlRelative string folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
233
|
+
<span class="column-label">url relative</span>
|
|
234
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
235
|
+
<span class="cell-value"><a href="javasscript: void(0);">/</a></span>
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
<!--table record with props of one file in the current folder-->
|
|
242
|
+
<div class="row folder">
|
|
243
|
+
|
|
244
|
+
<div class="cell ix number folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
245
|
+
<span class="column-label">num.</span>
|
|
246
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
247
|
+
<span class="cell-value">1</span>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<div class="cell name string folder ">
|
|
251
|
+
<span class="column-label">Name</span>
|
|
252
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
253
|
+
<span class="cell-value"><a href="javasscript: void(0);">subfolder</a></span>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<div class="cell mimeType string folder table-thin-field-hide-mobile ">
|
|
257
|
+
<span class="column-label">mime</span>
|
|
258
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
259
|
+
<span class="cell-value">folder</span>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div class="cell size number folder table-thin-field-hide-mobile ">
|
|
263
|
+
<span class="column-label">size</span>
|
|
264
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
265
|
+
<span class="cell-value">0</span>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
<div class="cell fileLastModifiedTimestampFormatted string folder table-thin-field-hide-mobile ">
|
|
269
|
+
<span class="column-label">last modified</span>
|
|
270
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
271
|
+
<span class="cell-value">Wed 30 Jul 2025 23:29:30.264 GMT</span>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<div class="cell fileUrlRelative string folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
275
|
+
<span class="column-label">url relative</span>
|
|
276
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
277
|
+
<span class="cell-value"><a href="javasscript: void(0);">/several_mime_types/subfolder/</a></span>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
<!--table record with props of one file in the current folder-->
|
|
284
|
+
<div class="row ">
|
|
285
|
+
|
|
286
|
+
<div class="cell ix number image_webp table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
287
|
+
<span class="column-label">num.</span>
|
|
288
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
289
|
+
<span class="cell-value">2</span>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
<div class="cell name string image_webp ">
|
|
293
|
+
<span class="column-label">Name</span>
|
|
294
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
295
|
+
<span class="cell-value"><a href="javasscript: void(0);">1.sm.webp</a></span>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div class="cell mimeType string image_webp table-thin-field-hide-mobile ">
|
|
299
|
+
<span class="column-label">mime</span>
|
|
300
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
301
|
+
<span class="cell-value">image/webp</span>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<div class="cell size number image_webp table-thin-field-hide-mobile ">
|
|
305
|
+
<span class="column-label">size</span>
|
|
306
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
307
|
+
<span class="cell-value">10474</span>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div class="cell fileLastModifiedTimestampFormatted string image_webp table-thin-field-hide-mobile ">
|
|
311
|
+
<span class="column-label">last modified</span>
|
|
312
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
313
|
+
<span class="cell-value">Wed 30 Jul 2025 23:26:54.792 GMT</span>
|
|
314
|
+
</div>
|
|
315
|
+
|
|
316
|
+
<div class="cell fileUrlRelative string image_webp table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
317
|
+
<span class="column-label">url relative</span>
|
|
318
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
319
|
+
<span class="cell-value"><a href="javasscript: void(0);">/several_mime_types/1.sm.webp</a></span>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
<!--table record with props of one file in the current folder-->
|
|
326
|
+
<div class="row ">
|
|
327
|
+
|
|
328
|
+
<div class="cell ix number image_gif table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
329
|
+
<span class="column-label">num.</span>
|
|
330
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
331
|
+
<span class="cell-value">3</span>
|
|
332
|
+
</div>
|
|
333
|
+
|
|
334
|
+
<div class="cell name string image_gif ">
|
|
335
|
+
<span class="column-label">Name</span>
|
|
336
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
337
|
+
<span class="cell-value"><a href="javasscript: void(0);">app-icon-16x16.gif</a></span>
|
|
338
|
+
</div>
|
|
339
|
+
|
|
340
|
+
<div class="cell mimeType string image_gif table-thin-field-hide-mobile ">
|
|
341
|
+
<span class="column-label">mime</span>
|
|
342
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
343
|
+
<span class="cell-value">image/gif</span>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div class="cell size number image_gif table-thin-field-hide-mobile ">
|
|
347
|
+
<span class="column-label">size</span>
|
|
348
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
349
|
+
<span class="cell-value">1039</span>
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<div class="cell fileLastModifiedTimestampFormatted string image_gif table-thin-field-hide-mobile ">
|
|
353
|
+
<span class="column-label">last modified</span>
|
|
354
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
355
|
+
<span class="cell-value">Wed 30 Jul 2025 23:41:37.270 GMT</span>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<div class="cell fileUrlRelative string image_gif table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
359
|
+
<span class="column-label">url relative</span>
|
|
360
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
361
|
+
<span class="cell-value"><a href="javasscript: void(0);">/several_mime_types/app-icon-16x16.gif</a></span>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
</div>
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
<!--table record with props of one file in the current folder-->
|
|
368
|
+
<div class="row ">
|
|
369
|
+
|
|
370
|
+
<div class="cell ix number image_png table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
371
|
+
<span class="column-label">num.</span>
|
|
372
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
373
|
+
<span class="cell-value">4</span>
|
|
374
|
+
</div>
|
|
375
|
+
|
|
376
|
+
<div class="cell name string image_png ">
|
|
377
|
+
<span class="column-label">Name</span>
|
|
378
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
379
|
+
<span class="cell-value"><a href="javasscript: void(0);">app-icon-16x16.png</a></span>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
<div class="cell mimeType string image_png table-thin-field-hide-mobile ">
|
|
383
|
+
<span class="column-label">mime</span>
|
|
384
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
385
|
+
<span class="cell-value">image/png</span>
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
<div class="cell size number image_png table-thin-field-hide-mobile ">
|
|
389
|
+
<span class="column-label">size</span>
|
|
390
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
391
|
+
<span class="cell-value">1255</span>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<div class="cell fileLastModifiedTimestampFormatted string image_png table-thin-field-hide-mobile ">
|
|
395
|
+
<span class="column-label">last modified</span>
|
|
396
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
397
|
+
<span class="cell-value">Wed 30 Jul 2025 23:41:37.273 GMT</span>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<div class="cell fileUrlRelative string image_png table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
401
|
+
<span class="column-label">url relative</span>
|
|
402
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
403
|
+
<span class="cell-value"><a href="javasscript: void(0);">/several_mime_types/app-icon-16x16.png</a></span>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
</div>
|
|
407
|
+
|
|
408
|
+
|
|
409
|
+
<!--table record with props of one file in the current folder-->
|
|
410
|
+
<div class="row ">
|
|
411
|
+
|
|
412
|
+
<div class="cell ix number video_mp4 table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
413
|
+
<span class="column-label">num.</span>
|
|
414
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
415
|
+
<span class="cell-value">5</span>
|
|
416
|
+
</div>
|
|
417
|
+
|
|
418
|
+
<div class="cell name string video_mp4 ">
|
|
419
|
+
<span class="column-label">Name</span>
|
|
420
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
421
|
+
<span class="cell-value"><a href="javasscript: void(0);">music_video_clip.mp4</a></span>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
<div class="cell mimeType string video_mp4 table-thin-field-hide-mobile ">
|
|
425
|
+
<span class="column-label">mime</span>
|
|
426
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
427
|
+
<span class="cell-value">video/mp4</span>
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<div class="cell size number video_mp4 table-thin-field-hide-mobile ">
|
|
431
|
+
<span class="column-label">size</span>
|
|
432
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
433
|
+
<span class="cell-value">14648889</span>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
<div class="cell fileLastModifiedTimestampFormatted string video_mp4 table-thin-field-hide-mobile ">
|
|
437
|
+
<span class="column-label">last modified</span>
|
|
438
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
439
|
+
<span class="cell-value">Wed 30 Jul 2025 23:31:52.531 GMT</span>
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<div class="cell fileUrlRelative string video_mp4 table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
443
|
+
<span class="column-label">url relative</span>
|
|
444
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
445
|
+
<span class="cell-value"><a href="javasscript: void(0);">/several_mime_types/music_video_clip.mp4</a></span>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
</div>
|
|
449
|
+
|
|
450
|
+
|
|
451
|
+
<!--table record with props of one file in the current folder-->
|
|
452
|
+
<div class="row ">
|
|
453
|
+
|
|
454
|
+
<div class="cell ix number application_java_vm table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
455
|
+
<span class="column-label">num.</span>
|
|
456
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
457
|
+
<span class="cell-value">6</span>
|
|
458
|
+
</div>
|
|
459
|
+
|
|
460
|
+
<div class="cell name string application_java_vm ">
|
|
461
|
+
<span class="column-label">Name</span>
|
|
462
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
463
|
+
<span class="cell-value"><a href="javasscript: void(0);">ConfHttp.class</a></span>
|
|
464
|
+
</div>
|
|
465
|
+
|
|
466
|
+
<div class="cell mimeType string application_java_vm table-thin-field-hide-mobile ">
|
|
467
|
+
<span class="column-label">mime</span>
|
|
468
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
469
|
+
<span class="cell-value">application/java-vm</span>
|
|
470
|
+
</div>
|
|
471
|
+
|
|
472
|
+
<div class="cell size number application_java_vm table-thin-field-hide-mobile ">
|
|
473
|
+
<span class="column-label">size</span>
|
|
474
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
475
|
+
<span class="cell-value">990</span>
|
|
476
|
+
</div>
|
|
477
|
+
|
|
478
|
+
<div class="cell fileLastModifiedTimestampFormatted string application_java_vm table-thin-field-hide-mobile ">
|
|
479
|
+
<span class="column-label">last modified</span>
|
|
480
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
481
|
+
<span class="cell-value">Wed 30 Jul 2025 23:42:02.290 GMT</span>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<div class="cell fileUrlRelative string application_java_vm table-thin-field-hide-mobile table-thin-field-hide-tablet">
|
|
485
|
+
<span class="column-label">url relative</span>
|
|
486
|
+
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
487
|
+
<span class="cell-value"><a href="javasscript: void(0);">/several_mime_types/ConfHttp.class</a></span>
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
</div>
|
|
491
|
+
|
|
492
|
+
<!--table records finished-->
|
|
493
|
+
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
<!--@jaisocx/css-table-ordered markup finished-->
|
|
497
|
+
|
|
498
|
+
</main>
|
|
499
|
+
|
|
500
|
+
</body>
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
|
|
504
|
+
<script src="transpiled/Simple/scroll/CssTableScroll.js"></script>
|
|
505
|
+
|
|
506
|
+
<script src="transpiled/Simple/orderby/CssTableOrderby.js"></script>
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
|
|
510
|
+
<script>
|
|
511
|
+
|
|
512
|
+
let cssTableScrollInstance = new Object();
|
|
513
|
+
let orderbyInstance = new Object();
|
|
514
|
+
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
function addScrollEventHandlers() {
|
|
518
|
+
cssTableScrollInstance = new CssTableScroll();
|
|
519
|
+
cssTableScrollInstance.addScrollEventHandlers();
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
function addOrderbyEventHandler() {
|
|
523
|
+
orderbyInstance = new CssTableOrderby();
|
|
524
|
+
orderbyInstance.setRowsNumberNotOrdered( 1 );
|
|
525
|
+
let eventHandlerRetval = orderbyInstance.addOrderbyEventHandler();
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
|
|
530
|
+
// DOCUMENT ONLOAD, FIXED SCROLL AND ORDERBY
|
|
531
|
+
document.addEventListener (
|
|
532
|
+
"DOMContentLoaded",
|
|
533
|
+
() => {
|
|
534
|
+
addScrollEventHandlers();
|
|
535
|
+
addOrderbyEventHandler();
|
|
536
|
+
}
|
|
537
|
+
);
|
|
538
|
+
|
|
539
|
+
</script>
|
|
540
|
+
|
|
541
|
+
|
|
542
|
+
|
|
543
|
+
<script>
|
|
544
|
+
|
|
545
|
+
const cssClassesNames = [
|
|
546
|
+
"jsx",
|
|
547
|
+
"theme_visible_height"
|
|
548
|
+
];
|
|
549
|
+
|
|
550
|
+
const themeCssClassPrefix = "theme";
|
|
551
|
+
|
|
552
|
+
const buttonsIDs = [
|
|
553
|
+
"button-turn-on-base",
|
|
554
|
+
"button-turn-on-daymode",
|
|
555
|
+
"button-turn-on-nightmode"
|
|
556
|
+
];
|
|
557
|
+
|
|
558
|
+
let currentButtonNodeClicked = null;
|
|
559
|
+
|
|
560
|
+
|
|
561
|
+
|
|
562
|
+
// declaring the function, this is used in the event handler of the theme turning button when clicked on this button.
|
|
563
|
+
function turnOnTheme ( buttonNodeClicked ) {
|
|
564
|
+
|
|
565
|
+
if ( currentButtonNodeClicked !== null ) {
|
|
566
|
+
currentButtonNodeClicked.classList.remove( "current" );
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
const htmlNode = document.getElementsByTagName("html")[0];
|
|
570
|
+
const htmlNodeClassList = htmlNode.classList;
|
|
571
|
+
|
|
572
|
+
htmlNodeClassList.forEach (
|
|
573
|
+
(cssClassName) => {
|
|
574
|
+
if ( cssClassesNames.includes( cssClassName ) ) {
|
|
575
|
+
return;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
if ( cssClassName.startsWith( themeCssClassPrefix ) === true ) {
|
|
579
|
+
htmlNodeClassList.remove( cssClassName );
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
);
|
|
583
|
+
|
|
584
|
+
const themeName = buttonNodeClicked.dataset.theme;
|
|
585
|
+
if ( themeName && ( themeName.length !== 0 ) ) {
|
|
586
|
+
htmlNode.classList.add( themeName );
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
currentButtonNodeClicked = buttonNodeClicked;
|
|
590
|
+
currentButtonNodeClicked.classList.add( "current" );
|
|
591
|
+
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
// declaring the function, this adds to buttons the event handler to turn on the theme.
|
|
595
|
+
// this function is invoked when the site loads in the browser,
|
|
596
|
+
// in the event handler for the event DOMContentLoaded
|
|
597
|
+
function addThemeButtonsEventHandlers() {
|
|
598
|
+
|
|
599
|
+
for ( let buttonId of buttonsIDs ) {
|
|
600
|
+
|
|
601
|
+
let buttonNode = document.getElementById( buttonId );
|
|
602
|
+
|
|
603
|
+
buttonNode.addEventListener (
|
|
604
|
+
"click",
|
|
605
|
+
(evt) => {
|
|
606
|
+
let buttonNodeClicked = evt.target;
|
|
607
|
+
turnOnTheme ( buttonNodeClicked );
|
|
608
|
+
}
|
|
609
|
+
);
|
|
610
|
+
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
|
|
615
|
+
// DOCUMENT ONLOAD
|
|
616
|
+
document.addEventListener (
|
|
617
|
+
"DOMContentLoaded",
|
|
618
|
+
() => {
|
|
619
|
+
// adding to buttons the event handler to turn on the theme.
|
|
620
|
+
addThemeButtonsEventHandlers();
|
|
621
|
+
}
|
|
622
|
+
);
|
|
623
|
+
|
|
624
|
+
</script>
|
|
625
|
+
|
|
626
|
+
|
|
627
|
+
|
|
628
|
+
<script name="imaged_styles">
|
|
629
|
+
|
|
630
|
+
const linkUrlHoisted_S = "node_modules/@jaisocx/css-table/MediaAndStyles/themes/theme_imaged_mimetypes_base_dep/CssTable_theme_imaged_mimetypes_base_dep_hoisted.css";
|
|
631
|
+
const linkUrlHoisted_H = "../css-table/MediaAndStyles/themes/theme_imaged_mimetypes_base_dep/CssTable_theme_imaged_mimetypes_base_dep_hoisted.css";
|
|
632
|
+
const linkUrlShallow_S = "node_modules/@jaisocx/css-table/MediaAndStyles/themes/theme_imaged_mimetypes_base_dep/CssTable_theme_imaged_mimetypes_base_dep_shallow.css";
|
|
633
|
+
const linkUrlShallow_H = "../css-table/MediaAndStyles/themes/theme_imaged_mimetypes_base_dep/CssTable_theme_imaged_mimetypes_base_dep_shallow.css";
|
|
634
|
+
|
|
635
|
+
let linkUrlLoading = "";
|
|
636
|
+
|
|
637
|
+
function addLink( url ) {
|
|
638
|
+
let lnk = document.createElement( "LINK" );
|
|
639
|
+
lnk.rel = "stylesheet";
|
|
640
|
+
lnk.type = "text/css";
|
|
641
|
+
lnk.charset = "utf-8";
|
|
642
|
+
lnk.href = url;
|
|
643
|
+
document.getElementsByTagName( "HEAD" )[0].append( lnk );
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
async function loadImagedStyles( testShallowUrl ) {
|
|
647
|
+
|
|
648
|
+
let response = { status: 404 };
|
|
649
|
+
|
|
650
|
+
try {
|
|
651
|
+
response = await fetch ( testShallowUrl );
|
|
652
|
+
} catch ( e ) {
|
|
653
|
+
response = { status: 404 };
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
if ( response.status === 200 ) {
|
|
657
|
+
linkUrlLoading = linkUrlHoisted_S;
|
|
658
|
+
} else {
|
|
659
|
+
linkUrlLoading = linkUrlHoisted_H;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
addLink ( linkUrlLoading );
|
|
663
|
+
|
|
664
|
+
return 1;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
|
|
668
|
+
|
|
669
|
+
// DOCUMENT ONLOAD
|
|
670
|
+
document.addEventListener (
|
|
671
|
+
"DOMContentLoaded",
|
|
672
|
+
() => {
|
|
673
|
+
loadImagedStyles ( "node_modules/@jaisocx/media_tools_images_mini_mimetypes_base/MediaAndStyles/images/audio_and_video_mime_type.png" )
|
|
674
|
+
.then (
|
|
675
|
+
( retVal ) => { return 1; }
|
|
676
|
+
);
|
|
677
|
+
}
|
|
678
|
+
);
|
|
679
|
+
|
|
680
|
+
</script>
|
|
681
|
+
|
|
682
|
+
|
|
683
|
+
|
|
684
|
+
</html>
|
|
685
|
+
|
|
686
|
+
|