web-documentation 1.0.17 → 1.0.19

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 (4) hide show
  1. package/build/deploy.js +4 -4
  2. package/package.json +8 -8
  3. package/source/index.css +20 -20
  4. package/source/index.ts +22 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "web-documentation",
3
- "version": "1.0.17",
3
+ "version": "1.0.19",
4
4
  "description": "Declarative multilanguage documentation website generator",
5
5
  "keywords": [
6
6
  "documentation",
@@ -50,9 +50,9 @@
50
50
  "watch": "weboptimizer build --watch"
51
51
  },
52
52
  "devDependencies": {
53
- "@aws-sdk/client-s3": "^3.1051.0",
54
- "@babel/eslint-parser": "^7.28.6",
55
- "@babel/runtime": "^7.29.2",
53
+ "@aws-sdk/client-s3": "^3.1053.0",
54
+ "@babel/eslint-parser": "^7.29.7",
55
+ "@babel/runtime": "^7.29.7",
56
56
  "@eslint/js": "^10.0.1",
57
57
  "@stylistic/eslint-plugin": "^5.10.0",
58
58
  "@types/archiver": "^7.0.0",
@@ -68,7 +68,7 @@
68
68
  "@webcomponents/webcomponentsjs": "^2.8.0",
69
69
  "archiver": "^8.0.0",
70
70
  "bootstrap-icons": "^1.13.1",
71
- "clientnode": "^4.0.1405",
71
+ "clientnode": "^4.0.1411",
72
72
  "css-loader": "^7.1.4",
73
73
  "cssnano": "^8.0.1",
74
74
  "default-gateway": "^7.2.2",
@@ -96,7 +96,7 @@
96
96
  "postcss-preset-env": "^11.3.0",
97
97
  "postcss-scss": "^4.0.9",
98
98
  "postcss-sprites": "^4.2.1",
99
- "postcss-url": "^10.1.3",
99
+ "postcss-url": "^10.1.4",
100
100
  "prop-types": "^15.8.1",
101
101
  "style-loader": "^4.0.0",
102
102
  "stylelint": "^17.12.0",
@@ -105,10 +105,10 @@
105
105
  "ua-parser-js": "^2.0.10",
106
106
  "unzipper": "^0.12.3",
107
107
  "web-component-wrapper": "^0.0.592",
108
- "web-internationalization": "^2.0.30",
108
+ "web-internationalization": "^2.0.34",
109
109
  "weboptimizer": "^3.0.24",
110
110
  "webpack-dev-server": "^5.2.4",
111
- "website-utilities": "^1.0.426"
111
+ "website-utilities": "^1.0.438"
112
112
  },
113
113
  "engines": {
114
114
  "node": ">=24",
package/source/index.css CHANGED
@@ -18,13 +18,13 @@ endregion */
18
18
 
19
19
  :root {
20
20
  /* region extra small dimension */
21
- @custom-media --w-extra-extra-small (min-width: 360px);
22
- @custom-media --w-extra-small (min-width: 500px);
21
+ @custom-media --wu-extra-extra-small (min-width: 360px);
22
+ @custom-media --wu-extra-small (min-width: 500px);
23
23
  /* endregion */
24
24
  /* region default media query dimensions */
25
- @custom-media --w-small (min-width: 768px);
26
- @custom-media --w-medium (min-width: 992px);
27
- @custom-media --w-large (min-width: 1200px);
25
+ @custom-media --wu-small (min-width: 768px);
26
+ @custom-media --wu-medium (min-width: 992px);
27
+ @custom-media --wu-large (min-width: 1200px);
28
28
  /* endregion */
29
29
  }
30
30
 
@@ -89,7 +89,7 @@ body {
89
89
 
90
90
  background-image: url("image/arrowDown.png");
91
91
  background-position: 0 0;
92
- height: var(--w-default-space);
92
+ height: var(--wu-default-space);
93
93
  width: 20px;
94
94
  }
95
95
  /* stylelint-enable at-rule-no-unknown */
@@ -102,7 +102,7 @@ body {
102
102
  background-color: var(--color8);
103
103
  color: var(--color7);
104
104
 
105
- font-family: var(--w-typography-font-family);
105
+ font-family: var(--wu-typography-font-family);
106
106
  font-size: 14px;
107
107
 
108
108
  margin: 0;
@@ -120,7 +120,7 @@ body {
120
120
  position: relative;
121
121
 
122
122
  margin: 0 auto;
123
- padding: var(--w-default-space) calc(var(--w-default-space) / 2);
123
+ padding: var(--wu-default-space) calc(var(--wu-default-space) / 2);
124
124
  }
125
125
  /** endregion */
126
126
  /** region headline */
@@ -132,7 +132,7 @@ body {
132
132
  h6 {
133
133
  color: var(--color8);
134
134
 
135
- font-family: var(--w-typography-font-family-headline);
135
+ font-family: var(--wu-typography-font-family-headline);
136
136
  font-size: 2em;
137
137
 
138
138
  letter-spacing: -1px;
@@ -302,7 +302,7 @@ body {
302
302
 
303
303
  display: none;
304
304
  float: right;
305
- margin-left: var(--w-default-space);
305
+ margin-left: var(--wu-default-space);
306
306
  margin-top: 39px;
307
307
  }
308
308
  /* region download buttons */
@@ -318,7 +318,7 @@ body {
318
318
  font-size: 1.2em;
319
319
  font-weight: bolder;
320
320
  height: 66px;
321
- margin-right: calc(var(--w-default-space) / 2);
321
+ margin-right: calc(var(--wu-default-space) / 2);
322
322
  overflow: hidden;
323
323
  padding-top: 29px;
324
324
  text-align: center;
@@ -374,7 +374,7 @@ body {
374
374
 
375
375
  .section__home {
376
376
  p {
377
- margin: var(--w-default-space) 0 0 0;
377
+ margin: var(--wu-default-space) 0 0 0;
378
378
  }
379
379
 
380
380
  code {
@@ -391,7 +391,7 @@ body {
391
391
 
392
392
  border: 1px solid var(--color4);
393
393
 
394
- margin: var(--w-default-space) 0 0 0;
394
+ margin: var(--wu-default-space) 0 0 0;
395
395
  }
396
396
 
397
397
  .show-example-wrapper {
@@ -401,15 +401,15 @@ body {
401
401
  border-top: 0;
402
402
 
403
403
  margin-top: -14px;
404
- padding: calc(var(--w-default-space) / 2);
404
+ padding: calc(var(--wu-default-space) / 2);
405
405
 
406
406
  h3 {
407
407
  color: var(--color5);
408
- font-family: var(--w-typography-font-family);
408
+ font-family: var(--wu-typography-font-family);
409
409
  font-size: 0.9em;
410
410
  font-weight: bold;
411
411
  letter-spacing: 1px;
412
- margin-bottom: calc(var(--w-default-space) / 2);
412
+ margin-bottom: calc(var(--wu-default-space) / 2);
413
413
  margin-top: 0;
414
414
  }
415
415
 
@@ -422,14 +422,14 @@ body {
422
422
  /* endregion */
423
423
  /* region responsive */
424
424
  /** region extra extra small */
425
- @media (--w-extra-extra-small) {
425
+ @media (--wu-extra-extra-small) {
426
426
  /** region extra small */
427
- @media (--w-extra-small) {
427
+ @media (--wu-extra-small) {
428
428
  .header__inner__links__api-link span {
429
429
  display: initial;
430
430
  }
431
431
 
432
- @media (--w-small) {
432
+ @media (--wu-small) {
433
433
  /* region small */
434
434
  /** region headline */
435
435
  h2 {
@@ -464,7 +464,7 @@ body {
464
464
  }
465
465
  /* endregion */
466
466
  /* region medium */
467
- @media (--w-medium) {
467
+ @media (--wu-medium) {
468
468
  .top-link { right: 45px; }
469
469
 
470
470
  .section__home code {
package/source/index.ts CHANGED
@@ -26,9 +26,11 @@ import {
26
26
  getAll,
27
27
  getText,
28
28
  globalContext,
29
+ interruptableScrollTo,
29
30
  Logger,
30
31
  Mapping,
31
32
  NOOP,
33
+ timeout,
32
34
  wrap
33
35
  } from 'clientnode'
34
36
  import {func, object} from 'clientnode/property-types'
@@ -216,8 +218,6 @@ export class WebDocumentation<
216
218
  }
217
219
  // endregion
218
220
  // region protected methods
219
- /// region event handler
220
- /// endregion
221
221
  /**
222
222
  * Extends given options by default options.
223
223
  */
@@ -280,7 +280,26 @@ export class WebDocumentation<
280
280
  this.tableOfContentDomNode.append(createDomNodes(listItems))
281
281
 
282
282
  this.tableOfContentLinkDomNodes =
283
- this.tableOfContentDomNode.querySelectorAll<HTMLAnchorElement>('a')
283
+ this.tableOfContentDomNode.querySelectorAll<HTMLAnchorElement>(
284
+ this.options.selectors.tableOfContentLinks
285
+ )
286
+
287
+ for (const domNode of this.tableOfContentLinkDomNodes)
288
+ this.addSecureEventListener(
289
+ domNode,
290
+ 'click',
291
+ (event) => {
292
+ event.preventDefault()
293
+
294
+ const selector = event.target.getAttribute('href')
295
+ if (selector) {
296
+ const targetDomNode =
297
+ this.hostDomNode.querySelector(selector)
298
+ if (targetDomNode)
299
+ interruptableScrollTo({targetDomNode})
300
+ }
301
+ }
302
+ )
284
303
 
285
304
  this.tableOfContentDomNode.style.display = 'initial'
286
305
  }