@jaisocx/css-clean-start-2 1.0.0
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/CssCleanStart_2_main.css +430 -0
- package/MediaAndStyles/CssCleanStart_2_main_Webpack.css +18 -0
- package/MediaAndStyles/CssCleanStart_2_main_Webpack_min.css +19 -0
- package/MediaAndStyles/CssCleanStart_2_main_relative.css +17 -0
- package/MediaAndStyles/CssCleanStart_2_main_resolved.css +6796 -0
- package/MediaAndStyles/CssCleanStart_2_main_resolved_min.css +625 -0
- package/MediaAndStyles/CssCleanStart_2_presets.css +51 -0
- package/MediaAndStyles/responsive_size_Constants.css +137 -0
- package/MediaAndStyles/themes/theme_base/CssCleanStart_2_theme_base_main.css +193 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_sm_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_sm_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_md_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_md_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_sm_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_sm_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l05_laptop_md_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l05_laptop_md_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_landscape__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_portrait__CssCleanStart_2__theme_base.css +231 -0
- package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Relative.css +106 -0
- package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Webpack.css +106 -0
- package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Webpack_min.css +106 -0
- package/README.md +109 -0
- package/index.html +197 -0
- package/package.json +50 -0
- package/responsive_sizes.html +158 -0
- package/transpiled/CommonJS/index.d.ts +2 -0
- package/transpiled/CommonJS/index.d.ts.map +1 -0
- package/transpiled/CommonJS/index.js +4 -0
- package/transpiled/CommonJS/index.js.map +1 -0
- package/transpiled/CommonJS/webpack.aliases.cjs +19 -0
- package/transpiled/CommonJS/webpack.aliases.cjs.map +1 -0
- package/transpiled/CommonJS/webpack.aliases.d.cts +6 -0
- package/transpiled/CommonJS/webpack.aliases.d.cts.map +1 -0
- package/transpiled/CommonJS/webpack.aliases.d.mts +6 -0
- package/transpiled/CommonJS/webpack.aliases.d.mts.map +1 -0
- package/transpiled/CommonJS/webpack.aliases.mjs +15 -0
- package/transpiled/CommonJS/webpack.aliases.mjs.map +1 -0
- package/transpiled/CommonJS/webpackAliases.d.ts +2 -0
- package/transpiled/CommonJS/webpackAliases.d.ts.map +1 -0
- package/transpiled/CommonJS/webpackAliases.js +64 -0
- package/transpiled/CommonJS/webpackAliases.js.map +1 -0
- package/transpiled/ESNext/index.d.ts +2 -0
- package/transpiled/ESNext/index.d.ts.map +1 -0
- package/transpiled/ESNext/index.js +2 -0
- package/transpiled/ESNext/index.js.map +1 -0
- package/transpiled/ESNext/webpack.aliases.cjs +19 -0
- package/transpiled/ESNext/webpack.aliases.cjs.map +1 -0
- package/transpiled/ESNext/webpack.aliases.d.cts +6 -0
- package/transpiled/ESNext/webpack.aliases.d.cts.map +1 -0
- package/transpiled/ESNext/webpack.aliases.d.mts +6 -0
- package/transpiled/ESNext/webpack.aliases.d.mts.map +1 -0
- package/transpiled/ESNext/webpack.aliases.mjs +14 -0
- package/transpiled/ESNext/webpack.aliases.mjs.map +1 -0
- package/transpiled/ESNext/webpackAliases.d.ts +2 -0
- package/transpiled/ESNext/webpackAliases.d.ts.map +1 -0
- package/transpiled/ESNext/webpackAliases.js +28 -0
- package/transpiled/ESNext/webpackAliases.js.map +1 -0
- package/webpack.aliases.json +4 -0
package/index.html
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="jsx example">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
|
|
6
|
+
<title>CssCleanStart_2</title>
|
|
7
|
+
|
|
8
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
9
|
+
<meta charset="utf-8">
|
|
10
|
+
|
|
11
|
+
<base href=".">
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<link rel="stylesheet" href="MediaAndStyles/CssCleanStart_2_main_relative.css">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
|
|
21
|
+
.jsx.example {
|
|
22
|
+
--jsx--css-clean-start-2--site--margin: 0 auto 0 auto;
|
|
23
|
+
--jsx--css-clean-start-2--site--padding: 2rem;
|
|
24
|
+
|
|
25
|
+
--jsx--css-clean-start-2--h--margin: 1.4rem 0 0.2rem 0;
|
|
26
|
+
|
|
27
|
+
--jsx--css-clean-start-2--h1--color: #6c6c6c;
|
|
28
|
+
--jsx--css-clean-start-2--h2--color: #5c7c5c;
|
|
29
|
+
--jsx--css-clean-start-2--h3--color: #5e9e5e;
|
|
30
|
+
|
|
31
|
+
--jsx--css-clean-start-2--h1--font-size: 1.75rem;
|
|
32
|
+
--jsx--css-clean-start-2--h1--line-height: 1.99rem;
|
|
33
|
+
|
|
34
|
+
--jsx--css-clean-start-2--h2--font-size: 1.3rem;
|
|
35
|
+
--jsx--css-clean-start-2--h2--line-height: 1.49rem;
|
|
36
|
+
|
|
37
|
+
--jsx--css-clean-start-2--h3--font-size: 1rem;
|
|
38
|
+
--jsx--css-clean-start-2--h3--line-height: 1.4rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
</style>
|
|
42
|
+
|
|
43
|
+
<head>
|
|
44
|
+
<body>
|
|
45
|
+
|
|
46
|
+
<main>
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
<h1>Css Clean Start 2. examples</h1>
|
|
50
|
+
|
|
51
|
+
<h3>@jaisocx/css-clean-start-2</h3>
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<h2>1. in a custom html tag, 2 span tags</h2>
|
|
56
|
+
|
|
57
|
+
<h3>1.1. raw html preview</h3>
|
|
58
|
+
<pre>
|
|
59
|
+
<text>
|
|
60
|
+
<span>Hello</span>
|
|
61
|
+
<span>How are You</span>
|
|
62
|
+
</text></pre>
|
|
63
|
+
|
|
64
|
+
<h3>1.2. rendered html view</h3>
|
|
65
|
+
<text>
|
|
66
|
+
<span>Hello</span>
|
|
67
|
+
<span>How are You</span>
|
|
68
|
+
</text>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
<h2>2. <p> text blocks</h2>
|
|
73
|
+
<text>
|
|
74
|
+
<p>sentence line 1. sentence line 1. sentence line 1. sentence line 1. sentence line 1.</p>
|
|
75
|
+
<p>sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2. sentence line 2.</p>
|
|
76
|
+
<p>sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3. sentence line 3.</p>
|
|
77
|
+
</text>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
<h2>3. <ul></h2>
|
|
82
|
+
|
|
83
|
+
<h3>3.1. <ul></h3>
|
|
84
|
+
<ul>
|
|
85
|
+
<li>
|
|
86
|
+
<a href="javascript: void(0);">link example 1</a>
|
|
87
|
+
</li>
|
|
88
|
+
<li>
|
|
89
|
+
<a href="javascript: void(0);">link example 2</a>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<a href="javascript: void(0);">link example 3</a>
|
|
93
|
+
</li>
|
|
94
|
+
</ul>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<h3>3.2. <ul class="ul-reset"></h3>
|
|
99
|
+
|
|
100
|
+
<nav class="ul-reset">
|
|
101
|
+
<ul>
|
|
102
|
+
<li>
|
|
103
|
+
<a href="javascript: void(0);">link example 1</a>
|
|
104
|
+
</li>
|
|
105
|
+
<li>
|
|
106
|
+
<a href="javascript: void(0);">link example 2</a>
|
|
107
|
+
</li>
|
|
108
|
+
<li>
|
|
109
|
+
<a href="javascript: void(0);">link example 3</a>
|
|
110
|
+
</li>
|
|
111
|
+
</ul>
|
|
112
|
+
</nav>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
<h2>4. <table></h2>
|
|
116
|
+
<table>
|
|
117
|
+
<!-- Table Caption -->
|
|
118
|
+
<caption>Table Caption</caption>
|
|
119
|
+
|
|
120
|
+
<!-- Define column styles -->
|
|
121
|
+
<colgroup>
|
|
122
|
+
<col style="width: 8rem;">
|
|
123
|
+
<col style="width: 8rem;">
|
|
124
|
+
<col style="width: 8rem;">
|
|
125
|
+
<col style="width: 8rem;">
|
|
126
|
+
</colgroup>
|
|
127
|
+
|
|
128
|
+
<!-- Table Header -->
|
|
129
|
+
<thead>
|
|
130
|
+
<tr>
|
|
131
|
+
<th>Product</th>
|
|
132
|
+
<th>Price</th>
|
|
133
|
+
<th>Quantity</th>
|
|
134
|
+
<th>Total</th>
|
|
135
|
+
</tr>
|
|
136
|
+
</thead>
|
|
137
|
+
|
|
138
|
+
<!-- Table Body -->
|
|
139
|
+
<tbody>
|
|
140
|
+
<tr>
|
|
141
|
+
<td>Apple</td>
|
|
142
|
+
<td>$1.00</td>
|
|
143
|
+
<td>5</td>
|
|
144
|
+
<td>$5.00</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>Banana</td>
|
|
148
|
+
<td>$0.50</td>
|
|
149
|
+
<td>10</td>
|
|
150
|
+
<td>$5.00</td>
|
|
151
|
+
</tr>
|
|
152
|
+
<tr>
|
|
153
|
+
<td>Orange</td>
|
|
154
|
+
<td>$0.80</td>
|
|
155
|
+
<td>7</td>
|
|
156
|
+
<td>$5.60</td>
|
|
157
|
+
</tr>
|
|
158
|
+
</tbody>
|
|
159
|
+
|
|
160
|
+
<!-- Table Footer -->
|
|
161
|
+
<tfoot>
|
|
162
|
+
<tr>
|
|
163
|
+
<td colspan="3">Sum</td>
|
|
164
|
+
<td>$15.60</td>
|
|
165
|
+
</tr>
|
|
166
|
+
</tfoot>
|
|
167
|
+
</table>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
<h2>5. <pre></h2>
|
|
173
|
+
<pre>
|
|
174
|
+
Shopping List:
|
|
175
|
+
- Apples
|
|
176
|
+
- Bananas
|
|
177
|
+
- Milk
|
|
178
|
+
- Bread
|
|
179
|
+
</pre>
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
</main>
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
<script>
|
|
187
|
+
// document.addEventListener('DOMContentLoaded', () => {
|
|
188
|
+
// //
|
|
189
|
+
// });
|
|
190
|
+
</script>
|
|
191
|
+
</body>
|
|
192
|
+
|
|
193
|
+
</html>
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@jaisocx/css-clean-start-2",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"author": "Jaisocx",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"css",
|
|
8
|
+
"styles"
|
|
9
|
+
],
|
|
10
|
+
"files": [
|
|
11
|
+
"index.html",
|
|
12
|
+
"responsive_sizes.html",
|
|
13
|
+
|
|
14
|
+
"MediaAndStyles/*.css",
|
|
15
|
+
"MediaAndStyles/themes/",
|
|
16
|
+
"MediaAndStyles/fonts/",
|
|
17
|
+
|
|
18
|
+
"transpiled/CommonJS",
|
|
19
|
+
"transpiled/ESNext",
|
|
20
|
+
"transpiled/Simple",
|
|
21
|
+
|
|
22
|
+
"webpack.aliases.json",
|
|
23
|
+
|
|
24
|
+
"README.md"
|
|
25
|
+
],
|
|
26
|
+
"optionalDependencies": {
|
|
27
|
+
"@jaisocx/responsive-sizes": "~1.2.2"
|
|
28
|
+
},
|
|
29
|
+
"private": false,
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public"
|
|
32
|
+
},
|
|
33
|
+
"type": "module",
|
|
34
|
+
"main": "./transpiled/CommonJS/index.js",
|
|
35
|
+
"types": "./transpiled/ESNext/index.d.ts",
|
|
36
|
+
"module": "./transpiled/ESNext/index.js",
|
|
37
|
+
"exports": {
|
|
38
|
+
".": {
|
|
39
|
+
"import": "./transpiled/ESNext/index.js",
|
|
40
|
+
"require": "./transpiled/CommonJS/index.js"
|
|
41
|
+
},
|
|
42
|
+
"./WebpackAliases": {
|
|
43
|
+
"import": "./transpiled/ESNext/webpack.aliases.mjs",
|
|
44
|
+
"require": "./transpiled/CommonJS/webpack.aliases.cjs"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="jsx">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Responsive Sizes</title>
|
|
5
|
+
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
<base href="." >
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<!--
|
|
15
|
+
IN THE DEV CONSOLE YOU SEE
|
|
16
|
+
39 CSS FILES,
|
|
17
|
+
css-clean-start and the responsive css files set
|
|
18
|
+
easier to review one css file, for example with one media query.
|
|
19
|
+
Best in development mode.
|
|
20
|
+
-->
|
|
21
|
+
<link rel="stylesheet" href="MediaAndStyles/CssCleanStart_2_main_relative.css">
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
<script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizesConstants.js"></script>
|
|
26
|
+
<script src="node_modules/@jaisocx/responsive-sizes/transpiled/Simple/ResponsiveSizes.js"></script>
|
|
27
|
+
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
|
|
31
|
+
<main>
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<h1>Responsive Sizes</h1>
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<h2 id="responsive_sizes">Tests</h2>
|
|
38
|
+
|
|
39
|
+
<pre id="info" style="display: block; height: auto; overflow-y: visible; overflow-x: scroll; padding: 2rem; background-color: darkturquoise; color: white;"></pre>
|
|
40
|
+
|
|
41
|
+
</main>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
let responsiveSizesConstants = new Object();
|
|
45
|
+
let responsiveSizesInstance = new Object();
|
|
46
|
+
|
|
47
|
+
function addOnSite( html ) {
|
|
48
|
+
let info = document.getElementById('info');
|
|
49
|
+
|
|
50
|
+
let locHtml = html + "\n\n";
|
|
51
|
+
|
|
52
|
+
info.insertAdjacentHTML( 'beforeEnd', locHtml );
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function setOnSite( html ) {
|
|
56
|
+
let info = document.getElementById('info');
|
|
57
|
+
|
|
58
|
+
info.innerHTML = html;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
function applySizesInfo( force ) {
|
|
62
|
+
|
|
63
|
+
let foreceUpdateSizesInfo_false = false;
|
|
64
|
+
|
|
65
|
+
let html_size1 = responsiveSizesInstance.mobile( force ) ? "mobile" : "";
|
|
66
|
+
let html_size2 = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false ) ? "tablet" : "";
|
|
67
|
+
let html_size3 = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false ) ? "desktop" : "";
|
|
68
|
+
|
|
69
|
+
let size = responsiveSizesInstance.getCssVariableArray()[4];
|
|
70
|
+
|
|
71
|
+
let html_orientation1 = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false ) ? "portrait" : "";
|
|
72
|
+
let html_orientation2 = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false ) ? "landscape" : "";
|
|
73
|
+
|
|
74
|
+
let html_array = [
|
|
75
|
+
html_size1,
|
|
76
|
+
html_size2,
|
|
77
|
+
html_size3,
|
|
78
|
+
" ",
|
|
79
|
+
size,
|
|
80
|
+
" ",
|
|
81
|
+
html_orientation1,
|
|
82
|
+
html_orientation2,
|
|
83
|
+
];
|
|
84
|
+
|
|
85
|
+
let html = html_array.join( "" );
|
|
86
|
+
|
|
87
|
+
let info = document.getElementById('responsive_sizes');
|
|
88
|
+
|
|
89
|
+
info.innerHTML = html;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
function responsiveSizesTest( force ) {
|
|
94
|
+
// responsiveSizesInstance = new ResponsiveSizes();
|
|
95
|
+
|
|
96
|
+
let responsiveSizeName = responsiveSizesInstance.getResponsiveSizeName( force );
|
|
97
|
+
|
|
98
|
+
let foreceUpdateSizesInfo_false = false;
|
|
99
|
+
let mobile = responsiveSizesInstance.mobile( foreceUpdateSizesInfo_false );
|
|
100
|
+
let tablet = responsiveSizesInstance.tablet( foreceUpdateSizesInfo_false );
|
|
101
|
+
let desktop = responsiveSizesInstance.desktop( foreceUpdateSizesInfo_false );
|
|
102
|
+
let orientationPortrait = responsiveSizesInstance.orientationPortrait( foreceUpdateSizesInfo_false );
|
|
103
|
+
let orientationLandscape = responsiveSizesInstance.orientationLandscape( foreceUpdateSizesInfo_false );
|
|
104
|
+
|
|
105
|
+
let lines = {
|
|
106
|
+
"responsiveSizeName": responsiveSizeName,
|
|
107
|
+
"mobile": mobile,
|
|
108
|
+
"tablet": tablet,
|
|
109
|
+
"desktop": desktop,
|
|
110
|
+
"orientationPortrait": orientationPortrait,
|
|
111
|
+
"orientationLandscape": orientationLandscape
|
|
112
|
+
};
|
|
113
|
+
let locHtml = JSON.stringify(lines, null, 2);
|
|
114
|
+
|
|
115
|
+
addOnSite( responsiveSizeName );
|
|
116
|
+
|
|
117
|
+
addOnSite( locHtml );
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function responsiveSizeNameTestJson() {
|
|
121
|
+
// responsiveSizesInstance = new ResponsiveSizes();
|
|
122
|
+
let responsiveSizeJsonText = responsiveSizesInstance.toString();
|
|
123
|
+
setOnSite( responsiveSizeJsonText );
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
function addResizeEventHandler() {
|
|
127
|
+
window.addEventListener('resize', () => {
|
|
128
|
+
applySizesInfo( true );
|
|
129
|
+
responsiveSizeNameTestJson( false );
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
function assignEventsHandlers() {
|
|
134
|
+
addResizeEventHandler();
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// Call the function to load remote data when the DOM is fully loaded
|
|
138
|
+
// This ensures that the function is called after the HTML content is loaded
|
|
139
|
+
// and the DOM is ready for manipulation
|
|
140
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
141
|
+
responsiveSizesConstants = new ResponsiveSizesConstants();
|
|
142
|
+
responsiveSizesInstance = new ResponsiveSizes();
|
|
143
|
+
responsiveSizesInstance
|
|
144
|
+
.setResponsiveSizeConstantName("--responsive_size")
|
|
145
|
+
.setResponsiveSizeSelector("html.jsx");
|
|
146
|
+
|
|
147
|
+
assignEventsHandlers();
|
|
148
|
+
|
|
149
|
+
applySizesInfo( true );
|
|
150
|
+
responsiveSizeNameTestJson( false );
|
|
151
|
+
// responsiveSizesTest( false );
|
|
152
|
+
});
|
|
153
|
+
</script>
|
|
154
|
+
|
|
155
|
+
</body>
|
|
156
|
+
</html>
|
|
157
|
+
|
|
158
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,4EAA0E"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// the hardcoded copy of .cjs file
|
|
3
|
+
const fs = require("node:fs");
|
|
4
|
+
const path = require("node:path");
|
|
5
|
+
const getWebpackAliases = require("./webpackAliases.js");
|
|
6
|
+
// Get the filename and directory in a CommonJS-compatible way
|
|
7
|
+
const fileName = __filename;
|
|
8
|
+
const currentDir = path.resolve(__dirname);
|
|
9
|
+
const projectRoot = path.resolve(currentDir, "../../../");
|
|
10
|
+
let webpackAliasesResolved = getWebpackAliases(projectRoot);
|
|
11
|
+
// Exporting the WebpackAliases object
|
|
12
|
+
module.exports = {
|
|
13
|
+
WebpackAliases: {
|
|
14
|
+
resolve: {
|
|
15
|
+
alias: Object.assign({}, webpackAliasesResolved),
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=webpack.aliases.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.cjs","sourceRoot":"","sources":["../../src/webpack.aliases.cjs"],"names":[],"mappings":";AAAA,kCAAkC;AAElC,MAAM,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAClC,MAAM,iBAAiB,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAIzD,8DAA8D;AAC9D,MAAM,QAAQ,GAAG,UAAU,CAAC;AAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAI1D,IAAI,sBAAsB,GAAG,iBAAiB,CAAE,WAAW,CAAE,CAAC;AAE9D,sCAAsC;AACtC,MAAM,CAAC,OAAO,GAAG;IACf,cAAc,EAAE;QACd,OAAO,EAAE;YACP,KAAK,oBAAO,sBAAsB,CAAE;SACrC;KACF;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.d.cts","sourceRoot":"","sources":["../../src/webpack.aliases.cjs"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.d.mts","sourceRoot":"","sources":["../../src/webpack.aliases.mjs"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// the hardcoded copy of .mjs file
|
|
3
|
+
import * as path from "node:path";
|
|
4
|
+
import { fileURLToPath } from "node:url";
|
|
5
|
+
import { getWebpackAliases } from "./webpackAliases.js";
|
|
6
|
+
let fileName = fileURLToPath(import.meta.url);
|
|
7
|
+
let currentDir = path.resolve(fileName);
|
|
8
|
+
let projectRoot = path.resolve(currentDir, "../../../");
|
|
9
|
+
let webpackAliasesResolved = getWebpackAliases(projectRoot);
|
|
10
|
+
export let WebpackAliases = {
|
|
11
|
+
resolve: {
|
|
12
|
+
alias: Object.assign({}, webpackAliasesResolved),
|
|
13
|
+
},
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=webpack.aliases.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.mjs","sourceRoot":"","sources":["../../src/webpack.aliases.mjs"],"names":[],"mappings":";AAAA,kCAAkC;AAElC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,IAAI,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9C,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAC;AAC1C,IAAI,WAAW,GAAG,IAAI,CAAC,OAAO,CAAE,UAAU,EAAE,WAAW,CAAE,CAAC;AAG1D,IAAI,sBAAsB,GAAG,iBAAiB,CAAE,WAAW,CAAE,CAAC;AAG9D,MAAM,CAAC,IAAI,cAAc,GAAG;IAC1B,OAAO,EAAE;QACP,KAAK,oBAAO,sBAAsB,CAAE;KACrC;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpackAliases.d.ts","sourceRoot":"","sources":["../../src/webpackAliases.ts"],"names":[],"mappings":"AAMA,wBAAgB,iBAAiB,CAAE,WAAW,EAAE,GAAG,GAAI,GAAG,CAiDzD"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// the hardcoded copy of .ts file
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.getWebpackAliases = getWebpackAliases;
|
|
38
|
+
const path = __importStar(require("node:path"));
|
|
39
|
+
const fs = __importStar(require("node:fs"));
|
|
40
|
+
function getWebpackAliases(packageRoot) {
|
|
41
|
+
const PROJECT_ROOT_PLACEHOLDER = "${packageRoot}/";
|
|
42
|
+
const WEBPACK_ALIASES_JSON__FILENAME = "webpack.aliases.json";
|
|
43
|
+
const WEBPACK_ALIASES_JSON__CHARSET = "utf8";
|
|
44
|
+
const CHAR_ZERO_LEN = "";
|
|
45
|
+
const webpackAliasesJsonPath = path.resolve(packageRoot, WEBPACK_ALIASES_JSON__FILENAME);
|
|
46
|
+
// Read and parse the JSON file
|
|
47
|
+
const json = fs.readFileSync(webpackAliasesJsonPath, WEBPACK_ALIASES_JSON__CHARSET);
|
|
48
|
+
const aliases = JSON.parse(json);
|
|
49
|
+
console.info(aliases);
|
|
50
|
+
const webpackAliasesResolved = {};
|
|
51
|
+
for (const propName in aliases) {
|
|
52
|
+
const aliasPath = aliases[propName];
|
|
53
|
+
const pathReplaced = aliasPath.replace(PROJECT_ROOT_PLACEHOLDER, CHAR_ZERO_LEN);
|
|
54
|
+
const pathResolved = path.resolve(packageRoot, pathReplaced);
|
|
55
|
+
webpackAliasesResolved[propName] = pathResolved;
|
|
56
|
+
}
|
|
57
|
+
// let webpackAliases = {
|
|
58
|
+
// resolve: {
|
|
59
|
+
// alias: { ...webpackAliasesResolved },
|
|
60
|
+
// },
|
|
61
|
+
// };
|
|
62
|
+
return webpackAliasesResolved;
|
|
63
|
+
}
|
|
64
|
+
//# sourceMappingURL=webpackAliases.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpackAliases.js","sourceRoot":"","sources":["../../src/webpackAliases.ts"],"names":[],"mappings":";AAAA,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMjC,8CAiDC;AArDD,gDAAkC;AAClC,4CAA8B;AAG9B,SAAgB,iBAAiB,CAAE,WAAgB;IACjD,MAAM,wBAAwB,GAAQ,iBAAiB,CAAC;IACxD,MAAM,8BAA8B,GAAQ,sBAAsB,CAAC;IACnE,MAAM,6BAA6B,GAAQ,MAAM,CAAC;IAClD,MAAM,aAAa,GAAQ,EAAE,CAAC;IAE9B,MAAM,sBAAsB,GAAQ,IAAI,CAAC,OAAO,CAC9C,WAAW,EACX,8BAA8B,CAC/B,CAAC;IAGF,+BAA+B;IAC/B,MAAM,IAAI,GAAQ,EAAE,CAAC,YAAY,CAC/B,sBAAsB,EACtB,6BAA6B,CAC9B,CAAC;IAEF,MAAM,OAAO,GAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEtB,MAAM,sBAAsB,GAAQ,EAAE,CAAC;IAEvC,KAAK,MAAM,QAAQ,IAAI,OAAO,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAQ,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEzC,MAAM,YAAY,GAAQ,SAAS,CAAC,OAAO,CACzC,wBAAwB,EACxB,aAAa,CACd,CAAC;QAEF,MAAM,YAAY,GAAQ,IAAI,CAAC,OAAO,CACpC,WAAW,EACX,YAAY,CACb,CAAC;QAEF,sBAAsB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;IAElD,CAAC;IAGD,yBAAyB;IACzB,eAAe;IACf,4CAA4C;IAC5C,OAAO;IACP,KAAK;IACL,OAAO,sBAAsB,CAAC;AAEhC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kEAAkE,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// the hardcoded copy of .cjs file
|
|
3
|
+
const fs = require("node:fs");
|
|
4
|
+
const path = require("node:path");
|
|
5
|
+
const getWebpackAliases = require("./webpackAliases.js");
|
|
6
|
+
// Get the filename and directory in a CommonJS-compatible way
|
|
7
|
+
const fileName = __filename;
|
|
8
|
+
const currentDir = path.resolve(__dirname);
|
|
9
|
+
const projectRoot = path.resolve(currentDir, "../../../");
|
|
10
|
+
let webpackAliasesResolved = getWebpackAliases(projectRoot);
|
|
11
|
+
// Exporting the WebpackAliases object
|
|
12
|
+
module.exports = {
|
|
13
|
+
WebpackAliases: {
|
|
14
|
+
resolve: {
|
|
15
|
+
alias: { ...webpackAliasesResolved },
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=webpack.aliases.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.cjs","sourceRoot":"","sources":["../../src/webpack.aliases.cjs"],"names":[],"mappings":";AAAA,kCAAkC;AAElC,MAAM,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAClC,MAAM,iBAAiB,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAIzD,8DAA8D;AAC9D,MAAM,QAAQ,GAAG,UAAU,CAAC;AAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAI1D,IAAI,sBAAsB,GAAG,iBAAiB,CAAE,WAAW,CAAE,CAAC;AAE9D,sCAAsC;AACtC,MAAM,CAAC,OAAO,GAAG;IACf,cAAc,EAAE;QACd,OAAO,EAAE;YACP,KAAK,EAAE,EAAE,GAAG,sBAAsB,EAAE;SACrC;KACF;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.d.cts","sourceRoot":"","sources":["../../src/webpack.aliases.cjs"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.d.mts","sourceRoot":"","sources":["../../src/webpack.aliases.mjs"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// the hardcoded copy of .mjs file
|
|
2
|
+
import * as path from "node:path";
|
|
3
|
+
import { fileURLToPath } from "node:url";
|
|
4
|
+
import { getWebpackAliases } from "./webpackAliases.js";
|
|
5
|
+
let fileName = fileURLToPath(import.meta.url);
|
|
6
|
+
let currentDir = path.resolve(fileName);
|
|
7
|
+
let projectRoot = path.resolve(currentDir, "../../../");
|
|
8
|
+
let webpackAliasesResolved = getWebpackAliases(projectRoot);
|
|
9
|
+
export let WebpackAliases = {
|
|
10
|
+
resolve: {
|
|
11
|
+
alias: { ...webpackAliasesResolved },
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=webpack.aliases.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpack.aliases.mjs","sourceRoot":"","sources":["../../src/webpack.aliases.mjs"],"names":[],"mappings":"AAAA,kCAAkC;AAElC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,IAAI,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9C,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAC;AAC1C,IAAI,WAAW,GAAG,IAAI,CAAC,OAAO,CAAE,UAAU,EAAE,WAAW,CAAE,CAAC;AAG1D,IAAI,sBAAsB,GAAG,iBAAiB,CAAE,WAAW,CAAE,CAAC;AAG9D,MAAM,CAAC,IAAI,cAAc,GAAG;IAC1B,OAAO,EAAE;QACP,KAAK,EAAE,EAAE,GAAG,sBAAsB,EAAE;KACrC;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webpackAliases.d.ts","sourceRoot":"","sources":["../../src/webpackAliases.ts"],"names":[],"mappings":"AAMA,wBAAgB,iBAAiB,CAAE,WAAW,EAAE,GAAG,GAAI,GAAG,CAiDzD"}
|