@jaisocx/css-table-ordered 2.1.8 → 2.2.1

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.
Files changed (7) hide show
  1. package/MediaAndStyles/CssTableOrdered_main.css +1 -1
  2. package/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css +96 -15
  3. package/README.md +9 -2
  4. package/index.example.html +14 -14
  5. package/index.example_3_records.html +456 -0
  6. package/jaisocx-folder-listing-preview.html +12 -15
  7. package/package.json +4 -10
package/MediaAndStyles/CssTableOrdered_main.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Main .css file for the sites tool: CssTableOrdered */
1
+ /* EXAMPLE not used, Main .css file for the sites tool: CssTableOrdered */
2
2
  .jsx .CssTableOrdered {
3
3
  background-color: var(--CssTableOrdered--main--background-color);
4
4
  color: var(--CssTableOrdered--main--color);
package/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css CHANGED
@@ -1,53 +1,134 @@
1
1
  /* a layout theme */
2
2
 
3
- .jsx-css-table-holder.theme_fixed_columns_labels {
3
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels {
4
4
 
5
5
  --jsx--CssTable--holder--overflow-x: hidden;
6
6
  --jsx--CssTable--holder--overflow-y: hidden;
7
7
 
8
+ --jsx--CssTable--main--overflow-x: auto;
9
+ --jsx--CssTable--main--overflow-y: auto;
10
+
11
+
12
+
13
+ --jsx--CssTable--bright--grid--row--justify-content: stretch;
14
+ --jsx--CssTable--bright--grid--row--align-content: stretch;
15
+
8
16
 
9
- --jsx--CssTable--main--overflow-x: auto;
10
- --jsx--CssTable--main--overflow-y: auto;
11
17
 
12
- display: flex;
18
+ display: flex;
19
+ flex-direction: column;
20
+
21
+ /* inner elems, table line with columns names and table records are automatique aligned due to flex-grow and flex-shrink */
22
+ flex-basis: auto;
23
+
24
+ /* css prop value stretch allows to set flex-grow prop. */
25
+ align-items: stretch;
26
+ justify-content: stretch;
27
+
13
28
  }
14
29
 
15
30
 
16
31
 
17
- .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder {
32
+ /* the first line of the table with labels for columns names */
33
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder {
34
+
35
+ overflow-x: hidden;
36
+ overflow-y: hidden;
37
+
18
38
 
19
- flex-grow: 0;
20
39
 
40
+ /* the auto size according to the holding elem elem with display: flex row; justify-columns: stretch,
41
+ in order not to shrink when the table records block with flex-grow: 1 needs more place with overflow: auto; */
42
+ flex-shrink: 0;
21
43
 
22
- width: 100%;
44
+
45
+
46
+ width: 100%;
23
47
  min-width: 100%;
48
+ max-width: unset;
24
49
 
25
- height: fit-content;
26
- min-height: fit-content;
27
50
 
28
- overflow: hidden visible;
51
+ height: fit-content;
52
+ min-height: fit-content;
53
+ max-height: unset;
29
54
 
30
55
  }
31
56
 
57
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row {
58
+
59
+ overflow-x: hidden;
60
+ overflow-y: visible;
32
61
 
33
62
 
34
- .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row {
35
63
 
36
- width: fit-content;
64
+ width: fit-content;
37
65
  min-width: 100%;
66
+ max-width: unset;
67
+
68
+ height: fit-content;
69
+ min-height: fit-content;
70
+ max-height: unset;
71
+
72
+ }
73
+
74
+
38
75
 
39
- height: fit-content;
76
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row .cell {
77
+
78
+ height: auto;
40
79
  min-height: fit-content;
80
+ max-height: unset;
81
+
82
+ overflow-x: hidden;
83
+ overflow-y: visible;
84
+ }
41
85
 
42
- overflow: visible visible;
43
86
 
87
+
88
+ /* hides scrollbars, they may appear in some browsers in the first line of the html table. */
89
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder,
90
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row,
91
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row .cell {
92
+
93
+ /* Hide scrollbar for IE, Edge and Firefox */
94
+ -ms-overflow-style: none;
95
+ scrollbar-width: none;
44
96
  }
45
97
 
98
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder::-webkit-scrollbar,
99
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row::-webkit-scrollbar,
100
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.desktop-columns-labels-holder .row .cell::-webkit-scrollbar {
101
+ display: none;
102
+ }
103
+
104
+
105
+
106
+
107
+
108
+ /* the records of the html table */
109
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.records {
110
+
111
+ --jsx--CssTable--main--overflow-x: auto;
112
+ --jsx--CssTable--main--overflow-y: auto;
46
113
 
47
114
 
48
- .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.records {
49
115
 
50
116
  flex-grow: 1;
117
+ flex-shrink: 1;
118
+
119
+ width: 100%;
120
+ min-width: 100%;
121
+ max-width: unset;
51
122
 
52
123
  }
53
124
 
125
+ .jsx main .jsx-css-table-holder.theme_fixed_columns_labels .jsx-css-table.records .row {
126
+ width: 100%;
127
+ min-width: 100%;
128
+ max-width: unset;
129
+
130
+ overflow-x: visible;
131
+ }
132
+
133
+
134
+
package/README.md CHANGED
@@ -15,9 +15,9 @@ The jaisocx templates for files listing, https exceptions and others will be ava
15
15
 
16
16
 
17
17
 
18
- ## The latest .tgz archive (v.2.1.8 17th of month August 2025)
18
+ ## The latest .tgz archive (v.2.2.1 20th of month August 2025)
19
19
 
20
- [https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/jaisocx-css-table-ordered-2.1.8.tgz](https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/jaisocx-css-table-ordered-2.1.8.tgz)
20
+ [https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/jaisocx-css-table-ordered-2.2.1.tgz](https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/jaisocx-css-table-ordered-2.2.1.tgz)
21
21
 
22
22
 
23
23
 
@@ -26,9 +26,16 @@ The jaisocx templates for files listing, https exceptions and others will be ava
26
26
  ## Watch site in action
27
27
 
28
28
  ### With Orderby on laptops and larger displays.
29
+
29
30
  [https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/index.example.html](https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/index.example.html)
30
31
 
31
32
 
33
+ [https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/index.example_3_records.html](https://sandbox.brightday.email/sites_tools/js_tools/CssTableOrdered/index.example_3_records.html)
34
+
35
+
36
+
37
+
38
+
32
39
  ### Same html with theme jaisocx folder listing
33
40
 
34
41
  The mobile portrait view was fine tuned for the folder listing in the Jaisocx Sites Server.
package/index.example.html CHANGED
@@ -9,13 +9,17 @@
9
9
 
10
10
 
11
11
 
12
- <link rel="stylesheet" href="/sites_tools/css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css" />
13
- <link rel="stylesheet" href="/sites_tools/css_tools/CssTable/MediaAndStyles/CssTable_main_resolved_minimal.css" />
12
+ <base href="../../" />
14
13
 
14
+ <link rel="stylesheet" href="css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css" />
15
15
 
16
+ <!-- <link rel="stylesheet" href="css_tools/CssTable/MediaAndStyles/CssTable_main_relative.css" /> -->
17
+ <link rel="stylesheet" href="css_tools/CssTable/MediaAndStyles/CssTable_main_resolved_minimal.css" />
16
18
 
17
- <link rel="stylesheet" href="/sites_tools/js_tools/CssTableOrdered/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css" />
18
- <!-- <link rel="stylesheet" href="/sites_tools/js_tools/CssTableOrdered/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css" /> -->
19
+
20
+
21
+ <link rel="stylesheet" href="js_tools/CssTableOrdered/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css" />
22
+ <!-- <link rel="stylesheet" href="js_tools/CssTableOrdered/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css" /> -->
19
23
 
20
24
 
21
25
 
@@ -1677,8 +1681,8 @@
1677
1681
 
1678
1682
 
1679
1683
 
1680
- <script src="transpiled/Simple/scroll/CssTableScroll.js"></script>
1681
- <script src="transpiled/Simple/orderby/CssTableOrderby.js"></script>
1684
+ <script src="js_tools/CssTableOrdered/transpiled/Simple/scroll/CssTableScroll.js"></script>
1685
+ <script src="js_tools/CssTableOrdered/transpiled/Simple/orderby/CssTableOrderby.js"></script>
1682
1686
 
1683
1687
 
1684
1688
  <script>
@@ -1718,7 +1722,10 @@
1718
1722
  );
1719
1723
 
1720
1724
  const themeName = buttonNodeClicked.dataset.theme;
1721
- htmlNode.classList.add( themeName );
1725
+ if ( themeName && ( themeName.length !== 0 ) ) {
1726
+ htmlNode.classList.add( themeName );
1727
+ }
1728
+
1722
1729
  currentButtonNodeClicked = buttonNodeClicked;
1723
1730
  currentButtonNodeClicked.classList.add( "current" );
1724
1731
 
@@ -1754,13 +1761,6 @@
1754
1761
  // DOCUMENT ONLOAD, INVOKES THE FUNCTION TO PRELOAD THEME FONTS
1755
1762
  document.addEventListener('DOMContentLoaded', () => {
1756
1763
 
1757
- // const preloader = new Preloader();
1758
- // preloader
1759
- // .setThemesPreloads( themesPreloads )
1760
- // .setWebpackAlias( "@jaisocx-css-table-cdn-fonts" )
1761
- // .setWebpackAliasReplace( "https://sandbox.brightday.email/cdn/www/fonts" )
1762
- // .init();
1763
-
1764
1764
  // adding to buttons the event handler to turn on the theme.
1765
1765
  addThemeButtonsEventHandlers();
1766
1766
 
package/index.example_3_records.html ADDED
@@ -0,0 +1,456 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="jsx theme_visible_height">
3
+ <head>
4
+
5
+ <title>js orderby and sticky scroll</title>
6
+
7
+ <meta charset="utf-8" />
8
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
9
+
10
+
11
+
12
+ <base href="../../" />
13
+
14
+ <link rel="stylesheet" href="css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css" />
15
+
16
+ <!-- <link rel="stylesheet" href="css_tools/CssTable/MediaAndStyles/CssTable_main_relative.css" /> -->
17
+ <link rel="stylesheet" href="css_tools/CssTable/MediaAndStyles/CssTable_main_resolved_minimal.css" />
18
+
19
+
20
+
21
+ <link rel="stylesheet" href="js_tools/CssTableOrdered/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css" />
22
+ <!-- <link rel="stylesheet" href="js_tools/CssTableOrdered/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css" /> -->
23
+
24
+
25
+
26
+ <style>
27
+
28
+ .jsx {
29
+ --jsx--css-clean-start-2--h1--font-size: 1.05rem;
30
+ --jsx--css-clean-start-2--h2--font-size: 0.9rem;
31
+
32
+ --theme-button-width: fit-content;
33
+ }
34
+
35
+ .jsx themebuttons {
36
+ width: fit-content;
37
+ display: grid;
38
+ grid-auto-flow: column;
39
+ column-gap: 3rem;
40
+ margin: 0.9rem 0px 1.6rem 0px;
41
+ }
42
+
43
+ .jsx themebuttons button {
44
+ width: var(--theme-button-width);
45
+ }
46
+
47
+ .current::after {
48
+ content: "";
49
+ position: absolute;
50
+ bottom: -0.3rem;
51
+ left: 0;
52
+ width: 100%;
53
+ height: 0;
54
+ max-height: 0;
55
+ overflow-y: hidden;
56
+ border-bottom-width: 0.14rem;
57
+ border-bottom-style: solid;
58
+ border-bottom-color: var(--clean-start__text-color);
59
+ }
60
+
61
+ .jsx button {
62
+ background-color: transparent;
63
+ text-align: left;
64
+ }
65
+
66
+ #tooltip-button {
67
+ font-family: fantasy;
68
+ }
69
+
70
+ </style>
71
+ </head>
72
+ <body>
73
+
74
+ <main>
75
+
76
+ <content>
77
+
78
+ <h1>js orderby and sticky scroll</h1>
79
+ <h2>@jaisocx/css-table-ordered</h1>
80
+
81
+ <ThemeButtons>
82
+ <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
83
+ <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
84
+ <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
85
+ </ThemeButtons>
86
+
87
+ </content>
88
+
89
+
90
+ <!--starts markup of the table styled by @jaisocx/css-table-ordered npm package-->
91
+ <!--@jaisocx/css-table-ordered extends @jaisocx/css-table having one js class to orderby records in the table, onevent click label of the table column-->
92
+ <div class="jsx-css-table-holder jaisocx-folder-listing-columns theme_fixed_columns_labels theme_imaged theme_imaged_base">
93
+ <div class="jsx-css-table desktop-columns-labels-holder">
94
+
95
+ <!--the first table record with the names of the table columns, shown in the table bright mode-->
96
+ <div class="row">
97
+
98
+ <div class="cell" data-datatype="number" data-id="0"><span class="column-label">num.</span></div>
99
+
100
+ <div class="cell" data-datatype="string" data-id="1"><span class="column-label">Name</span></div>
101
+
102
+ <div class="cell" data-datatype="string" data-id="2"><span class="column-label">mime</span></div>
103
+
104
+ <div class="cell" data-datatype="number" data-id="3"><span class="column-label">size</span></div>
105
+
106
+ <div class="cell" data-datatype="string" data-id="4"><span class="column-label">last modified</span></div>
107
+
108
+ <div class="cell" data-datatype="string" data-id="5"><span class="column-label">url relative</span></div>
109
+
110
+ </div>
111
+ </div>
112
+ <div class="jsx-css-table records">
113
+
114
+
115
+ <!--table record with props of one file in the current folder-->
116
+ <div class="row folder">
117
+
118
+ <div class="cell ix number folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
119
+ <span class="column-label">num.</span>
120
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
121
+ <span class="cell-value">0</span>
122
+ </div>
123
+
124
+ <div class="cell name string folder ">
125
+ <span class="column-label">Name</span>
126
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
127
+ <span class="cell-value"><a href="https://update-listing-secure.brightday.email:443/">..</a></span>
128
+ </div>
129
+
130
+ <div class="cell mimeType string folder table-thin-field-hide-mobile ">
131
+ <span class="column-label">mime</span>
132
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
133
+ <span class="cell-value">folder</span>
134
+ </div>
135
+
136
+ <div class="cell size number folder table-thin-field-hide-mobile ">
137
+ <span class="column-label">size</span>
138
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
139
+ <span class="cell-value">0</span>
140
+ </div>
141
+
142
+ <div class="cell fileLastModifiedTimestampFormatted string folder table-thin-field-hide-mobile ">
143
+ <span class="column-label">last modified</span>
144
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
145
+ <span class="cell-value">Wed 30 Jul 2025 23:14:53.814 GMT</span>
146
+ </div>
147
+
148
+ <div class="cell fileUrlRelative string folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
149
+ <span class="column-label">url relative</span>
150
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
151
+ <span class="cell-value"><a href="https://update-listing-secure.brightday.email:443/">/</a></span>
152
+ </div>
153
+
154
+ </div>
155
+
156
+
157
+ <!--table record with props of one file in the current folder-->
158
+ <div class="row folder">
159
+
160
+ <div class="cell ix number folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
161
+ <span class="column-label">num.</span>
162
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
163
+ <span class="cell-value">1</span>
164
+ </div>
165
+
166
+ <div class="cell name string folder ">
167
+ <span class="column-label">Name</span>
168
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
169
+ <span class="cell-value"><a href="https://update-listing-secure.brightday.email:443/several_mime_types/subfolder/">subfolder</a></span>
170
+ </div>
171
+
172
+ <div class="cell mimeType string folder table-thin-field-hide-mobile ">
173
+ <span class="column-label">mime</span>
174
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
175
+ <span class="cell-value">folder</span>
176
+ </div>
177
+
178
+ <div class="cell size number folder table-thin-field-hide-mobile ">
179
+ <span class="column-label">size</span>
180
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
181
+ <span class="cell-value">0</span>
182
+ </div>
183
+
184
+ <div class="cell fileLastModifiedTimestampFormatted string folder table-thin-field-hide-mobile ">
185
+ <span class="column-label">last modified</span>
186
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
187
+ <span class="cell-value">Wed 30 Jul 2025 23:29:30.264 GMT</span>
188
+ </div>
189
+
190
+ <div class="cell fileUrlRelative string folder table-thin-field-hide-mobile table-thin-field-hide-tablet">
191
+ <span class="column-label">url relative</span>
192
+ <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
193
+ <span class="cell-value"><a href="https://update-listing-secure.brightday.email:443/several_mime_types/subfolder/">/several_mime_types/subfolder/</a></span>
194
+ </div>
195
+
196
+ </div>
197
+
198
+
199
+ <!--table record with props of one file in the current folder-->
200
+ <div class="row ">
201
+
202
+ <div class="cell ix number image_webp 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">2</span>
206
+ </div>
207
+
208
+ <div class="cell name string image_webp ">
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="https://update-listing-secure.brightday.email:443/several_mime_types/1.sm.webp">1.sm.webp</a></span>
212
+ </div>
213
+
214
+ <div class="cell mimeType string image_webp 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">image/webp</span>
218
+ </div>
219
+
220
+ <div class="cell size number image_webp 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">10474</span>
224
+ </div>
225
+
226
+ <div class="cell fileLastModifiedTimestampFormatted string image_webp 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:26:54.792 GMT</span>
230
+ </div>
231
+
232
+ <div class="cell fileUrlRelative string image_webp 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="https://update-listing-secure.brightday.email:443/several_mime_types/1.sm.webp">/several_mime_types/1.sm.webp</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 ">
243
+
244
+ <div class="cell ix number image_gif 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">3</span>
248
+ </div>
249
+
250
+ <div class="cell name string image_gif ">
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="https://update-listing-secure.brightday.email:443/several_mime_types/app-icon-16x16.gif">app-icon-16x16.gif</a></span>
254
+ </div>
255
+
256
+ <div class="cell mimeType string image_gif 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">image/gif</span>
260
+ </div>
261
+
262
+ <div class="cell size number image_gif 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">1039</span>
266
+ </div>
267
+
268
+ <div class="cell fileLastModifiedTimestampFormatted string image_gif 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:41:37.270 GMT</span>
272
+ </div>
273
+
274
+ <div class="cell fileUrlRelative string image_gif 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="https://update-listing-secure.brightday.email:443/several_mime_types/app-icon-16x16.gif">/several_mime_types/app-icon-16x16.gif</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_png 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">4</span>
290
+ </div>
291
+
292
+ <div class="cell name string image_png ">
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="https://update-listing-secure.brightday.email:443/several_mime_types/app-icon-16x16.png">app-icon-16x16.png</a></span>
296
+ </div>
297
+
298
+ <div class="cell mimeType string image_png 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/png</span>
302
+ </div>
303
+
304
+ <div class="cell size number image_png 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">1255</span>
308
+ </div>
309
+
310
+ <div class="cell fileLastModifiedTimestampFormatted string image_png 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:41:37.273 GMT</span>
314
+ </div>
315
+
316
+ <div class="cell fileUrlRelative string image_png 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="https://update-listing-secure.brightday.email:443/several_mime_types/app-icon-16x16.png">/several_mime_types/app-icon-16x16.png</a></span>
320
+ </div>
321
+
322
+ </div>
323
+
324
+ <!--table records finished-->
325
+
326
+ </div>
327
+ </div>
328
+ <!--@jaisocx/css-table-ordered markup finished-->
329
+
330
+
331
+ </main>
332
+
333
+ </body>
334
+
335
+
336
+
337
+
338
+
339
+ <script src="js_tools/CssTableOrdered/transpiled/Simple/scroll/CssTableScroll.js"></script>
340
+ <script src="js_tools/CssTableOrdered/transpiled/Simple/orderby/CssTableOrderby.js"></script>
341
+
342
+
343
+ <script>
344
+
345
+ currentButtonNodeClicked = null;
346
+
347
+
348
+ let cssClassesNames = [
349
+ "jsx",
350
+ "theme_visible_height"
351
+ ];
352
+
353
+
354
+
355
+ // declaring the function, this is used in the event handler of the theme turning button when clicked on this button.
356
+ function turnOnTheme ( buttonNodeClicked ) {
357
+
358
+ if ( currentButtonNodeClicked !== null ) {
359
+ currentButtonNodeClicked.classList.remove( "current" );
360
+ }
361
+
362
+ const htmlNode = document.getElementsByTagName("html")[0];
363
+ const htmlNodeClassList = htmlNode.classList;
364
+
365
+ const themeCssClassPrefix = "theme";
366
+
367
+ htmlNodeClassList.forEach (
368
+ (cssClassName) => {
369
+ if ( cssClassesNames.includes( cssClassName ) ) {
370
+ return;
371
+ }
372
+
373
+ if ( cssClassName.startsWith( themeCssClassPrefix ) === true ) {
374
+ htmlNodeClassList.remove( cssClassName );
375
+ }
376
+ }
377
+ );
378
+
379
+ const themeName = buttonNodeClicked.dataset.theme;
380
+ if ( themeName && ( themeName.length !== 0 ) ) {
381
+ htmlNode.classList.add( themeName );
382
+ }
383
+
384
+ currentButtonNodeClicked = buttonNodeClicked;
385
+ currentButtonNodeClicked.classList.add( "current" );
386
+
387
+ }
388
+
389
+ // declaring the function, this adds to buttons the event handler to turn on the theme.
390
+ // this function is invoked when the site loads in the browser,
391
+ // in the event handler for the event DOMContentLoaded
392
+ function addThemeButtonsEventHandlers() {
393
+
394
+ const buttonsIDs = [
395
+ "button-turn-on-base-theme",
396
+ "button-turn-on-daymode",
397
+ "button-turn-on-nightmode"
398
+ ];
399
+
400
+ for ( let buttonId of buttonsIDs ) {
401
+
402
+ let buttonNode = document.getElementById( buttonId );
403
+
404
+ buttonNode.addEventListener (
405
+ "click",
406
+ (evt) => {
407
+ let buttonNodeClicked = evt.target;
408
+ turnOnTheme ( buttonNodeClicked );
409
+ }
410
+ );
411
+
412
+ }
413
+ }
414
+
415
+
416
+ // DOCUMENT ONLOAD, INVOKES THE FUNCTION TO PRELOAD THEME FONTS
417
+ document.addEventListener('DOMContentLoaded', () => {
418
+
419
+ // adding to buttons the event handler to turn on the theme.
420
+ addThemeButtonsEventHandlers();
421
+
422
+ });
423
+
424
+ </script>
425
+
426
+
427
+
428
+ <script>
429
+
430
+ let orderbyClassInstance = new Object();
431
+
432
+ function addScrollEventHandlers() {
433
+ cssTableScrollInstance = new CssTableScroll();
434
+ cssTableScrollInstance.addScrollEventHandlers();
435
+ }
436
+
437
+ function addOrderbyEventHandler() {
438
+ orderbyClassInstance = new CssTableOrderby();
439
+ orderbyClassInstance.setRowsNumberNotOrdered( 1 );
440
+ let eventHandlerRetval = orderbyClassInstance.addOrderbyEventHandler();
441
+ }
442
+
443
+
444
+
445
+ // DOCUMENT ONLOAD
446
+ document.addEventListener('DOMContentLoaded', () => {
447
+
448
+ addScrollEventHandlers();
449
+
450
+ addOrderbyEventHandler();
451
+
452
+ });
453
+
454
+ </script>
455
+
456
+ </html>
package/jaisocx-folder-listing-preview.html CHANGED
@@ -7,15 +7,17 @@
7
7
  <meta charset="utf-8" />
8
8
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
9
9
 
10
+ <base href="../../" />
10
11
 
12
+ <link rel="stylesheet" href="css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css" />
11
13
 
12
- <link rel="stylesheet" href="/sites_tools/css_tools/CssCleanStart_2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css" />
13
- <link rel="stylesheet" href="/sites_tools/css_tools/CssTable/MediaAndStyles/CssTable_main_resolved_minimal.css" />
14
+ <!-- <link rel="stylesheet" href="css_tools/CssTable/MediaAndStyles/CssTable_main_relative.css" /> -->
15
+ <link rel="stylesheet" href="css_tools/CssTable/MediaAndStyles/CssTable_main_resolved_minimal.css" />
14
16
 
15
17
 
16
18
 
17
- <link rel="stylesheet" href="/sites_tools/js_tools/CssTableOrdered/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css" />
18
- <link rel="stylesheet" href="/sites_tools/js_tools/CssTableOrdered/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css" />
19
+ <link rel="stylesheet" href="js_tools/CssTableOrdered/MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css" />
20
+ <link rel="stylesheet" href="js_tools/CssTableOrdered/MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css" />
19
21
 
20
22
 
21
23
 
@@ -1677,9 +1679,8 @@
1677
1679
 
1678
1680
 
1679
1681
 
1680
- <script src="transpiled/Simple/scroll/CssTableScroll.js"></script>
1681
- <script src="transpiled/Simple/orderby/CssTableOrderby.js"></script>
1682
-
1682
+ <script src="js_tools/CssTableOrdered/transpiled/Simple/scroll/CssTableScroll.js"></script>
1683
+ <script src="js_tools/CssTableOrdered/transpiled/Simple/orderby/CssTableOrderby.js"></script>
1683
1684
 
1684
1685
  <script>
1685
1686
 
@@ -1718,7 +1719,10 @@
1718
1719
  );
1719
1720
 
1720
1721
  const themeName = buttonNodeClicked.dataset.theme;
1721
- htmlNode.classList.add( themeName );
1722
+ if ( themeName && ( themeName.length !== 0 ) ) {
1723
+ htmlNode.classList.add( themeName );
1724
+ }
1725
+
1722
1726
  currentButtonNodeClicked = buttonNodeClicked;
1723
1727
  currentButtonNodeClicked.classList.add( "current" );
1724
1728
 
@@ -1754,13 +1758,6 @@
1754
1758
  // DOCUMENT ONLOAD, INVOKES THE FUNCTION TO PRELOAD THEME FONTS
1755
1759
  document.addEventListener('DOMContentLoaded', () => {
1756
1760
 
1757
- // const preloader = new Preloader();
1758
- // preloader
1759
- // .setThemesPreloads( themesPreloads )
1760
- // .setWebpackAlias( "@jaisocx-css-table-cdn-fonts" )
1761
- // .setWebpackAliasReplace( "https://sandbox.brightday.email/cdn/www/fonts" )
1762
- // .init();
1763
-
1764
1761
  // adding to buttons the event handler to turn on the theme.
1765
1762
  addThemeButtonsEventHandlers();
1766
1763
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jaisocx/css-table-ordered",
3
- "version": "2.1.8",
3
+ "version": "2.2.1",
4
4
  "description": "",
5
5
  "author": "Jaisocx",
6
6
  "keywords": [
@@ -13,16 +13,13 @@
13
13
  "files": [
14
14
  "jaisocx-folder-listing-preview.html",
15
15
  "index.example.html",
16
-
16
+ "index.example_3_records.html",
17
17
  "MediaAndStyles/*.css",
18
18
  "MediaAndStyles/themes",
19
-
20
19
  "transpiled/CommonJS",
21
20
  "transpiled/ESNext",
22
21
  "transpiled/Simple",
23
-
24
22
  "webpack.aliases.json",
25
-
26
23
  "README.md"
27
24
  ],
28
25
  "private": false,
@@ -44,10 +41,7 @@
44
41
  }
45
42
  },
46
43
  "optionalDependencies": {
47
- "@jaisocx/css-clean-start-2": "~1.1.0",
48
- "@jaisocx/css-table": "~3.2.3"
44
+ "@jaisocx/css-clean-start-2": "~1.1.2",
45
+ "@jaisocx/css-table": "~3.2.6"
49
46
  }
50
47
  }
51
-
52
-
53
-