Skip to content

Commit ab09ce4

Browse files
fernanDOTdofernanDOTdo
committed
PageBackground: Code Review and add ENgrid Logger
1 parent 120a3e2 commit ab09ce4

3 files changed

Lines changed: 405 additions & 285 deletions

File tree

‎packages/scripts/dist/page-background.d.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
export declare class PageBackground {
22
private pageBackground;
33
private mutationObserver;
4+
private logger;
45
constructor();
6+
/**
7+
* Initialize background image by finding and setting CSS custom property
8+
*/
9+
private initializeBackgroundImage;
10+
/**
11+
* Set the background image URL as a CSS custom property
12+
*/
13+
private setBackgroundImageUrl;
514
/**
615
* Processes attribution positioning for background images by moving positioning classes
716
* and data attributes from images to their parent column containers.
@@ -32,8 +41,24 @@ export declare class PageBackground {
3241
* - topleft
3342
*/
3443
private processAttributionPositioning;
44+
/**
45+
* Process attribution for a single image
46+
*/
47+
private processImageAttribution;
48+
/**
49+
* Handle class-based attribution positioning
50+
*/
51+
private handleClassBasedAttribution;
52+
/**
53+
* Handle data attribute-based attribution positioning
54+
*/
55+
private handleDataAttributeAttribution;
3556
private setupMutationObserver;
3657
reprocessAttributionPositioning(): void;
58+
/**
59+
* Clean up resources and observers
60+
*/
61+
destroy(): void;
3762
private setDataAttributes;
3863
private hasVideoBackground;
3964
private hasImageBackground;

‎packages/scripts/dist/page-background.js‎

Lines changed: 153 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,57 @@
1-
import { ENGrid } from "./engrid";
1+
import { ENGrid, EngridLogger } from ".";
22
export class PageBackground {
33
constructor() {
4-
var _a;
54
// @TODO: Change page-backgroundImage to page-background
65
this.pageBackground = document.querySelector(".page-backgroundImage");
76
this.mutationObserver = null;
8-
// Finds any <img> added to the "backgroundImage" ENGRid section and sets it as the "--engrid__page-backgroundImage_url" CSS Custom Property
9-
const pageBackgroundImg = (_a = this.pageBackground) === null || _a === void 0 ? void 0 : _a.querySelector("img");
10-
if (this.pageBackground) {
11-
let pageBackgroundImgDataSrc = pageBackgroundImg === null || pageBackgroundImg === void 0 ? void 0 : pageBackgroundImg.getAttribute("data-src");
12-
let pageBackgroundImgSrc = pageBackgroundImg === null || pageBackgroundImg === void 0 ? void 0 : pageBackgroundImg.src;
13-
if (this.pageBackground && pageBackgroundImgDataSrc) {
14-
if (ENGrid.debug)
15-
console.log("A background image set in the page was found with a data-src value, setting it as --engrid__page-backgroundImage_url", pageBackgroundImgDataSrc);
16-
pageBackgroundImgDataSrc = "url('" + pageBackgroundImgDataSrc + "')";
17-
this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", pageBackgroundImgDataSrc);
18-
}
19-
else if (this.pageBackground && pageBackgroundImgSrc) {
20-
if (ENGrid.debug)
21-
console.log("A background image set in the page was found with a src value, setting it as --engrid__page-backgroundImage_url", pageBackgroundImgSrc);
22-
pageBackgroundImgSrc = "url('" + pageBackgroundImgSrc + "')";
23-
this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", pageBackgroundImgSrc);
24-
}
25-
else if (pageBackgroundImg) {
26-
if (ENGrid.debug)
27-
console.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
28-
}
29-
else {
30-
if (ENGrid.debug)
31-
console.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
32-
}
33-
}
34-
else {
35-
if (ENGrid.debug)
36-
console.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
7+
this.logger = new EngridLogger("PageBackground", "lightblue", "darkblue", "🖼️");
8+
if (!this.pageBackground) {
9+
this.logger.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
10+
return;
3711
}
12+
this.initializeBackgroundImage();
3813
this.setDataAttributes();
39-
// Move attribution classes and data attributes from background image to parent column
4014
this.processAttributionPositioning();
41-
// Set up mutation observer to watch for DOM changes
4215
this.setupMutationObserver();
4316
}
17+
/**
18+
* Initialize background image by finding and setting CSS custom property
19+
*/
20+
initializeBackgroundImage() {
21+
if (!this.pageBackground)
22+
return;
23+
const pageBackgroundImg = this.pageBackground.querySelector("img");
24+
if (!pageBackgroundImg) {
25+
this.logger.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
26+
return;
27+
}
28+
const dataSrc = pageBackgroundImg.getAttribute("data-src");
29+
const src = pageBackgroundImg.src;
30+
if (dataSrc) {
31+
this.setBackgroundImageUrl(dataSrc, "data-src");
32+
}
33+
else if (src) {
34+
this.setBackgroundImageUrl(src, "src");
35+
}
36+
else {
37+
this.logger.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
38+
}
39+
}
40+
/**
41+
* Set the background image URL as a CSS custom property
42+
*/
43+
setBackgroundImageUrl(imageUrl, sourceType) {
44+
if (!this.pageBackground || !imageUrl)
45+
return;
46+
try {
47+
const cssUrl = `url('${imageUrl}')`;
48+
this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", cssUrl);
49+
this.logger.log(`A background image set in the page was found with a ${sourceType} value, setting it as --engrid__page-backgroundImage_url`, imageUrl);
50+
}
51+
catch (error) {
52+
this.logger.error("Error setting background image URL:", error);
53+
}
54+
}
4455
/**
4556
* Processes attribution positioning for background images by moving positioning classes
4657
* and data attributes from images to their parent column containers.
@@ -71,81 +82,98 @@ export class PageBackground {
7182
* - topleft
7283
*/
7384
processAttributionPositioning() {
74-
if (this.pageBackground) {
75-
if (ENGrid.debug)
76-
console.log("Processing attribution positioning for background section:", this.pageBackground);
77-
// Define all supported attribution positioning classes
78-
const allowedClasses = [
79-
"attribution-center",
80-
"attribution-bottom",
81-
"attribution-bottomcenter",
82-
"attribution-bottomright",
83-
"attribution-bottomleft",
84-
"attribution-top",
85-
"attribution-topcenter",
86-
"attribution-topright",
87-
"attribution-topleft",
88-
"attribution-left",
89-
"attribution-leftcenter",
90-
"attribution-right",
91-
"attribution-rightcenter",
92-
];
85+
if (!this.pageBackground) {
86+
this.logger.log("No background section found for attribution positioning processing");
87+
return;
88+
}
89+
this.logger.log("Processing attribution positioning for background section:", this.pageBackground);
90+
// Define all supported attribution positioning classes
91+
const allowedClasses = [
92+
"attribution-center",
93+
"attribution-bottom",
94+
"attribution-bottomcenter",
95+
"attribution-bottomright",
96+
"attribution-bottomleft",
97+
"attribution-top",
98+
"attribution-topcenter",
99+
"attribution-topright",
100+
"attribution-topleft",
101+
"attribution-left",
102+
"attribution-leftcenter",
103+
"attribution-right",
104+
"attribution-rightcenter",
105+
];
106+
try {
93107
// Find all images in the background section (after any DOM transformations)
94108
const images = this.pageBackground.querySelectorAll("img");
95-
if (ENGrid.debug)
96-
console.log("Found images in background section:", images.length);
109+
this.logger.log("Found images in background section:", images.length);
97110
images.forEach((img) => {
98-
// Pattern 1: Check for class-based attribution positioning
99-
// Example: <img class="attribution-bottomright" src="...">
100-
const matchedClass = allowedClasses.find((cls) => img.classList.contains(cls));
101-
// Pattern 2: Check for data attribute-based attribution positioning
102-
// Example: <img data-background-position="bottomright" src="...">
103-
const dataPosition = img.getAttribute("data-background-position");
104-
if (matchedClass) {
105-
// Handle class-based attribution positioning
106-
if (ENGrid.debug)
107-
console.log("Found attribution class on image:", matchedClass, img);
108-
const parentDiv = img.closest(".en__component--column");
109-
if (parentDiv) {
110-
// Move the class from image to parent column
111-
img.classList.remove(matchedClass);
112-
parentDiv.classList.add(matchedClass);
113-
if (ENGrid.debug)
114-
console.log("Moved attribution class from image to parent column:", matchedClass, parentDiv);
115-
}
116-
else {
117-
if (ENGrid.debug)
118-
console.log("No parent .en__component--column found for image:", img);
119-
}
120-
}
121-
else if (dataPosition) {
122-
// Handle data attribute-based attribution positioning
123-
// Convert data attribute value to attribution class format
124-
const attributionClass = `attribution-${dataPosition}`;
125-
if (ENGrid.debug)
126-
console.log("Found data-background-position on image:", dataPosition, "->", attributionClass, img);
127-
const parentDiv = img.closest(".en__component--column");
128-
if (parentDiv) {
129-
// Remove data attribute from image and add class to parent column
130-
img.removeAttribute("data-background-position");
131-
parentDiv.classList.add(attributionClass);
132-
if (ENGrid.debug)
133-
console.log("Moved data-background-position from image to parent column as class:", attributionClass, parentDiv);
134-
}
135-
else {
136-
if (ENGrid.debug)
137-
console.log("No parent .en__component--column found for image:", img);
138-
}
139-
}
111+
this.processImageAttribution(img, allowedClasses);
140112
});
141113
}
114+
catch (error) {
115+
this.logger.error("Error processing attribution positioning:", error);
116+
}
117+
}
118+
/**
119+
* Process attribution for a single image
120+
*/
121+
processImageAttribution(img, allowedClasses) {
122+
// Pattern 1: Check for class-based attribution positioning
123+
// Example: <img class="attribution-bottomright" src="...">
124+
const matchedClass = allowedClasses.find((cls) => img.classList.contains(cls));
125+
// Pattern 2: Check for data attribute-based attribution positioning
126+
// Example: <img data-background-position="bottomright" src="...">
127+
const dataPosition = img.getAttribute("data-background-position");
128+
if (matchedClass) {
129+
this.handleClassBasedAttribution(img, matchedClass);
130+
}
131+
else if (dataPosition) {
132+
this.handleDataAttributeAttribution(img, dataPosition);
133+
}
134+
}
135+
/**
136+
* Handle class-based attribution positioning
137+
*/
138+
handleClassBasedAttribution(img, matchedClass) {
139+
this.logger.log("Found attribution class on image:", matchedClass, img);
140+
const parentDiv = img.closest(".en__component--column");
141+
if (parentDiv) {
142+
// Move the class from image to parent column
143+
img.classList.remove(matchedClass);
144+
parentDiv.classList.add(matchedClass);
145+
this.logger.log("Moved attribution class from image to parent column:", matchedClass, parentDiv);
146+
}
142147
else {
143-
if (ENGrid.debug)
144-
console.log("No background section found for attribution positioning processing");
148+
this.logger.log("No parent .en__component--column found for image:", img);
149+
}
150+
}
151+
/**
152+
* Handle data attribute-based attribution positioning
153+
*/
154+
handleDataAttributeAttribution(img, dataPosition) {
155+
// Convert data attribute value to attribution class format
156+
const attributionClass = `attribution-${dataPosition}`;
157+
this.logger.log("Found data-background-position on image:", dataPosition, "->", attributionClass, img);
158+
const parentDiv = img.closest(".en__component--column");
159+
if (parentDiv) {
160+
// Remove data attribute from image and add class to parent column
161+
img.removeAttribute("data-background-position");
162+
parentDiv.classList.add(attributionClass);
163+
this.logger.log("Moved data-background-position from image to parent column as class:", attributionClass, parentDiv);
164+
}
165+
else {
166+
this.logger.log("No parent .en__component--column found for image:", img);
145167
}
146168
}
147169
setupMutationObserver() {
148-
if (this.pageBackground && window.MutationObserver) {
170+
if (!this.pageBackground || !window.MutationObserver) {
171+
if (!window.MutationObserver) {
172+
this.logger.log("MutationObserver not supported in this browser");
173+
}
174+
return;
175+
}
176+
try {
149177
this.mutationObserver = new MutationObserver((mutations) => {
150178
let shouldReprocess = false;
151179
mutations.forEach((mutation) => {
@@ -155,8 +183,7 @@ export class PageBackground {
155183
}
156184
});
157185
if (shouldReprocess) {
158-
if (ENGrid.debug)
159-
console.log("DOM changes detected in background section, reprocessing attribution classes");
186+
this.logger.log("DOM changes detected in background section, reprocessing attribution classes");
160187
// Use a small delay to ensure all changes are complete
161188
setTimeout(() => {
162189
this.processAttributionPositioning();
@@ -170,31 +197,46 @@ export class PageBackground {
170197
attributes: true,
171198
attributeFilter: ["class"],
172199
});
173-
if (ENGrid.debug)
174-
console.log("MutationObserver set up for background section");
200+
this.logger.log("MutationObserver set up for background section");
201+
}
202+
catch (error) {
203+
this.logger.error("Error setting up MutationObserver:", error);
175204
}
176205
}
177206
// Public method to manually trigger reprocessing
178207
reprocessAttributionPositioning() {
179-
if (ENGrid.debug)
180-
console.log("Manually reprocessing attribution positioning");
208+
this.logger.log("Manually reprocessing attribution positioning");
181209
this.processAttributionPositioning();
182210
}
211+
/**
212+
* Clean up resources and observers
213+
*/
214+
destroy() {
215+
if (this.mutationObserver) {
216+
this.mutationObserver.disconnect();
217+
this.mutationObserver = null;
218+
this.logger.log("MutationObserver disconnected");
219+
}
220+
}
183221
setDataAttributes() {
184-
if (this.hasVideoBackground())
222+
if (this.hasVideoBackground()) {
185223
return ENGrid.setBodyData("page-background", "video");
186-
if (this.hasImageBackground())
224+
}
225+
if (this.hasImageBackground()) {
187226
return ENGrid.setBodyData("page-background", "image");
227+
}
188228
return ENGrid.setBodyData("page-background", "empty");
189229
}
190230
hasVideoBackground() {
191-
if (this.pageBackground) {
192-
return !!this.pageBackground.querySelector("video");
231+
if (!this.pageBackground) {
232+
return false;
193233
}
234+
return !!this.pageBackground.querySelector("video");
194235
}
195236
hasImageBackground() {
196-
if (this.pageBackground) {
197-
return (!this.hasVideoBackground() && !!this.pageBackground.querySelector("img"));
237+
if (!this.pageBackground) {
238+
return false;
198239
}
240+
return (!this.hasVideoBackground() && !!this.pageBackground.querySelector("img"));
199241
}
200242
}

0 commit comments

Comments
 (0)