@gudhub/ssg-web-components-library 1.0.67 → 1.0.69
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/package.json +1 -1
- package/src/components/google-analytics/config.js +6 -0
- package/src/components/google-analytics/google-analytics.js +41 -0
- package/src/components/image-component/image-component.readme.md +87 -4
- package/src/components/masonry-gallery/masonry-gallery.js +1 -1
- package/src/config.js +4 -2
- package/src/components/image-component/image-component.md +0 -96
package/package.json
CHANGED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
class GoogleAnalytics extends GHComponent {
|
|
2
|
+
constructor() {
|
|
3
|
+
super();
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
onClientRender() {
|
|
7
|
+
const timeout = parseInt(this.getAttribute('data-timeout')) || 3000;
|
|
8
|
+
const googleId = this.getAttribute('data-googleId');
|
|
9
|
+
const script = document.createElement('script');
|
|
10
|
+
|
|
11
|
+
if (!googleId) {
|
|
12
|
+
script.innerHTML = 'No google id for analytics'
|
|
13
|
+
} else {
|
|
14
|
+
script.innerHTML = `
|
|
15
|
+
window.addEventListener('load', function () {
|
|
16
|
+
setTimeout(function () {
|
|
17
|
+
const gtagScript = document.createElement('script');
|
|
18
|
+
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=${googleId}';
|
|
19
|
+
gtagScript.async = true;
|
|
20
|
+
document.head.appendChild(gtagScript);
|
|
21
|
+
|
|
22
|
+
gtagScript.onload = function () {
|
|
23
|
+
window.dataLayer = window.dataLayer || [];
|
|
24
|
+
function gtag() {
|
|
25
|
+
dataLayer.push(arguments);
|
|
26
|
+
}
|
|
27
|
+
window.gtag = gtag;
|
|
28
|
+
gtag('js', new Date());
|
|
29
|
+
gtag('config', '${googleId}');
|
|
30
|
+
};
|
|
31
|
+
}, ${timeout});
|
|
32
|
+
});
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
document.querySelector('body').appendChild(script);
|
|
37
|
+
this.remove();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
window.customElements.define('google-analytics', GoogleAnalytics);
|
|
@@ -1,13 +1,96 @@
|
|
|
1
|
+
# Work types
|
|
2
|
+
|
|
3
|
+
We have two different ways to use this component:
|
|
4
|
+
|
|
5
|
+
1. Automatically: pass `data-src` and `data-url` attributes – the image will be fetched, saved, and loaded automatically (SSR supported).
|
|
6
|
+
2. Manually: use `src` to provide a static image path.
|
|
7
|
+
|
|
8
|
+
**Manually example:**
|
|
9
|
+
```html
|
|
10
|
+
<image-component
|
|
11
|
+
src="/assets/example.jpg"
|
|
12
|
+
alt="{Image alt here}"
|
|
13
|
+
title="{Image title here}"
|
|
14
|
+
lazyload
|
|
15
|
+
width="400"
|
|
16
|
+
height="300"
|
|
17
|
+
data-max-width="1200"
|
|
18
|
+
data-crop
|
|
19
|
+
></image-component>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
**Automatically example:**
|
|
23
|
+
```html
|
|
24
|
+
<image-component
|
|
25
|
+
data-src="/assets/cache/example.jpg"
|
|
26
|
+
data-url="https://example.com/image.jpg"
|
|
27
|
+
alt="{Image alt here}"
|
|
28
|
+
title="{Image title here}"
|
|
29
|
+
data-rerender
|
|
30
|
+
lazyload
|
|
31
|
+
data-max-width="1200"
|
|
32
|
+
data-crop
|
|
33
|
+
></image-component>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# Attributes:
|
|
2
39
|
|
|
40
|
+
| **Attribute** | **Description** | **Type / Example** |
|
|
41
|
+
| ---------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------- |
|
|
42
|
+
| `src` | Path to static image | `string`<br>`/assets/image.jpg` |
|
|
43
|
+
| `alt` | Alternative text for the image | `string`<br>`"Description of image"` |
|
|
44
|
+
| `title` | Image title (shown as tooltip) | `string`<br>`"My Image Title"` |
|
|
45
|
+
| `lazyload` | Enables native browser lazy loading (`loading="lazy"`) | `boolean` (just include the attribute) |
|
|
46
|
+
| `data-src` | Local path to save image fetched from `data-url` | `string`<br>`/assets/blog/top-web-development-books.jpg` |
|
|
47
|
+
| `data-url` | Remote image URL | `string`<br>`https://gudhub.com/userdata/29883/1083204.jpg` |
|
|
48
|
+
| `data-rerender` | Enables client-side rerendering after SSR *(currently not working❗❗❗)* | `boolean` (just include the attribute) |
|
|
49
|
+
| `width` | Image width | `string`<br>`"300"` |
|
|
50
|
+
| `height` | Image height | `string`<br>`"200"` |
|
|
51
|
+
| `data-max-width` | Optional maximum width configuration | `number`<br>`"600"` |
|
|
52
|
+
| `data-crop` | Optional crop configuration | `boolean` (just include the attribute) |
|
|
53
|
+
| `image-load-delay` | Delays image rendering (in ms) to optimize LCP (Largest Contentful Paint score) | `number`<br>`"500"` (default), `"0"` (no delay `"1000"` |
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
# Image processing behavior:
|
|
57
|
+
|
|
58
|
+
#### 1. `data-crop`
|
|
59
|
+
If the `data-crop` attribute is present:
|
|
60
|
+
- The image is **cropped** to fit exactly the target resolutions (`600w`, `1200w`, and original).
|
|
61
|
+
- Cropping uses a `cover` strategy — the image fills the space and is centered.
|
|
62
|
+
|
|
63
|
+
✅ **Combination with `data-max-width`:**
|
|
64
|
+
If `data-max-width` is also set (e.g., `data-max-width="600"`), **only** the responsive sizes **up to that max width** will be cropped.
|
|
65
|
+
If `data-max-width` is **not** set, **all** predefined sizes (`600w`, `1200w`, original) will be cropped.
|
|
66
|
+
|
|
67
|
+
#### 2. `data-max-width="600"`
|
|
68
|
+
If the `data-max-width` attribute is set:
|
|
69
|
+
- The image is **resized proportionally** to the specified width (e.g., `600px`).
|
|
70
|
+
- Aspect ratio is preserved, and no cropping is applied (unless combined with `data-crop`, see above).
|
|
71
|
+
|
|
72
|
+
#### 3. No Attributes
|
|
73
|
+
If neither `data-crop` nor `data-max-width` is set:
|
|
74
|
+
- The image is **resized proportionally** to a **default width of `1920px`**, maintaining the original aspect ratio.
|
|
75
|
+
|
|
76
|
+
---
|
|
3
77
|
|
|
4
|
-
# Component data-
|
|
78
|
+
# Component data-flow:
|
|
5
79
|
|
|
6
80
|
("?" means "unnecessary")
|
|
7
81
|
|
|
8
|
-
```
|
|
82
|
+
```config file
|
|
9
83
|
{
|
|
10
|
-
|
|
11
|
-
|
|
84
|
+
src?: "string",
|
|
85
|
+
alt?: "string",
|
|
86
|
+
title?: "string",
|
|
87
|
+
lazyload?: boolean,
|
|
88
|
+
data-src?: "string",
|
|
89
|
+
data-url?: "string",
|
|
90
|
+
data-rerender?: boolean,
|
|
91
|
+
width?: "number|string",
|
|
92
|
+
height?: "number|string",
|
|
93
|
+
data-max-width?: number,
|
|
94
|
+
data-crop?: boolean
|
|
12
95
|
}
|
|
13
96
|
```
|
|
@@ -184,7 +184,7 @@ class MasonryGallery extends GHComponent {
|
|
|
184
184
|
|
|
185
185
|
if (fullImageSrc) {
|
|
186
186
|
img.classList.add('open-modal');
|
|
187
|
-
img.setAttribute('data-modal-image',
|
|
187
|
+
img.setAttribute('data-modal-image', fullImageSrc);
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
img.setAttribute('data-image-loading', 'true');
|
package/src/config.js
CHANGED
|
@@ -61,8 +61,10 @@ export { htmlTemplate } from './components/html-template/config.js';
|
|
|
61
61
|
export { masonryGallery } from './components/masonry-gallery/config.js';
|
|
62
62
|
export { pageBannerWithVideo } from './components/page-banner-with-video/config.js';
|
|
63
63
|
export { youtubePlayer } from './components/youtube-player/config.js';
|
|
64
|
-
export { getInTouchBlockWithImage } from './components/get-in-touch-block-with-image/config.js'
|
|
65
|
-
export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/config.js'
|
|
64
|
+
export { getInTouchBlockWithImage } from './components/get-in-touch-block-with-image/config.js';
|
|
65
|
+
export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/config.js';
|
|
66
|
+
export { GoogleAnalytics } from './components/google-analytics/config.js';
|
|
67
|
+
|
|
66
68
|
|
|
67
69
|
|
|
68
70
|
// export { liqPayComponent } from './components/liqpay-component/config.js';
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
# Work types
|
|
2
|
-
|
|
3
|
-
We have two different ways to use this component:
|
|
4
|
-
|
|
5
|
-
1. Automatically: pass `data-src` and `data-url` attributes – the image will be fetched, saved, and loaded automatically (SSR supported).
|
|
6
|
-
2. Manually: use `src` to provide a static image path.
|
|
7
|
-
|
|
8
|
-
**Manually example:**
|
|
9
|
-
```html
|
|
10
|
-
<image-component
|
|
11
|
-
src="/assets/example.jpg"
|
|
12
|
-
alt="{Image alt here}"
|
|
13
|
-
title="{Image title here}"
|
|
14
|
-
lazyload
|
|
15
|
-
width="400"
|
|
16
|
-
height="300"
|
|
17
|
-
data-max-width="1200"
|
|
18
|
-
data-crop
|
|
19
|
-
></image-component>
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
**Automatically example:**
|
|
23
|
-
```html
|
|
24
|
-
<image-component
|
|
25
|
-
data-src="/assets/cache/example.jpg"
|
|
26
|
-
data-url="https://example.com/image.jpg"
|
|
27
|
-
alt="{Image alt here}"
|
|
28
|
-
title="{Image title here}"
|
|
29
|
-
data-rerender
|
|
30
|
-
lazyload
|
|
31
|
-
data-max-width="1200"
|
|
32
|
-
data-crop
|
|
33
|
-
></image-component>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
---
|
|
37
|
-
|
|
38
|
-
# Attributes:
|
|
39
|
-
|
|
40
|
-
| **Attribute** | **Description** | **Type / Example** |
|
|
41
|
-
| ---------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------- |
|
|
42
|
-
| `src` | Path to static image | `string`<br>`/assets/image.jpg` |
|
|
43
|
-
| `alt` | Alternative text for the image | `string`<br>`"Description of image"` |
|
|
44
|
-
| `title` | Image title (shown as tooltip) | `string`<br>`"My Image Title"` |
|
|
45
|
-
| `lazyload` | Enables native browser lazy loading (`loading="lazy"`) | `boolean` (just include the attribute) |
|
|
46
|
-
| `data-src` | Local path to save image fetched from `data-url` | `string`<br>`/assets/blog/top-web-development-books.jpg` |
|
|
47
|
-
| `data-url` | Remote image URL | `string`<br>`https://gudhub.com/userdata/29883/1083204.jpg` |
|
|
48
|
-
| `data-rerender` | Enables client-side rerendering after SSR *(currently not working❗❗❗)* | `boolean` (just include the attribute) |
|
|
49
|
-
| `width` | Image width | `string`<br>`"300"` |
|
|
50
|
-
| `height` | Image height | `string`<br>`"200"` |
|
|
51
|
-
| `data-max-width` | Optional maximum width configuration | `number`<br>`"600"` |
|
|
52
|
-
| `data-crop` | Optional crop configuration | `boolean` (just include the attribute) |
|
|
53
|
-
|
|
54
|
-
---
|
|
55
|
-
|
|
56
|
-
# Image processing behavior:
|
|
57
|
-
|
|
58
|
-
#### 1. `data-crop`
|
|
59
|
-
If the `data-crop` attribute is present:
|
|
60
|
-
- The image is **cropped** to fit exactly the target resolutions (`600w`, `1200w`, and original).
|
|
61
|
-
- Cropping uses a `cover` strategy — the image fills the space and is centered.
|
|
62
|
-
|
|
63
|
-
✅ **Combination with `data-max-width`:**
|
|
64
|
-
If `data-max-width` is also set (e.g., `data-max-width="600"`), **only** the responsive sizes **up to that max width** will be cropped.
|
|
65
|
-
If `data-max-width` is **not** set, **all** predefined sizes (`600w`, `1200w`, original) will be cropped.
|
|
66
|
-
|
|
67
|
-
#### 2. `data-max-width="600"`
|
|
68
|
-
If the `data-max-width` attribute is set:
|
|
69
|
-
- The image is **resized proportionally** to the specified width (e.g., `600px`).
|
|
70
|
-
- Aspect ratio is preserved, and no cropping is applied (unless combined with `data-crop`, see above).
|
|
71
|
-
|
|
72
|
-
#### 3. No Attributes
|
|
73
|
-
If neither `data-crop` nor `data-max-width` is set:
|
|
74
|
-
- The image is **resized proportionally** to a **default width of `1920px`**, maintaining the original aspect ratio.
|
|
75
|
-
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
# Component data-flow:
|
|
79
|
-
|
|
80
|
-
("?" means "unnecessary")
|
|
81
|
-
|
|
82
|
-
```config file
|
|
83
|
-
{
|
|
84
|
-
src?: "string",
|
|
85
|
-
alt?: "string",
|
|
86
|
-
title?: "string",
|
|
87
|
-
lazyload?: boolean,
|
|
88
|
-
data-src?: "string",
|
|
89
|
-
data-url?: "string",
|
|
90
|
-
data-rerender?: boolean,
|
|
91
|
-
width?: "number|string",
|
|
92
|
-
height?: "number|string",
|
|
93
|
-
data-max-width?: number,
|
|
94
|
-
data-crop?: boolean
|
|
95
|
-
}
|
|
96
|
-
```
|