This document provides an overview of the News Sentiment Component, including the resizing functionality for iframes. This feature ensures that the component remains responsive and user-friendly across various devices and screen sizes.
## Overview
The News Sentiment Component is designed to present sentiment analysis for news articles. One of its key features is the ability to resize the iframe dynamically based on the content's height and width. This is achieved through the `sendResizeEvent` method, which communicates with the parent window.
## Code Implementation
### Sending Resize Event
The following method is used to send resize data to the parent window:
```typescript
sendResizeEvent() {
const iframeResizeData = {
type: 'resize', // Indicates the type of event being sent
height: document.body.scrollHeight, // The total height of the content within the iframe
width: document.body.scrollWidth, // The total width of the content within the iframe
viewportHeight: window.innerHeight, // The height of the browser viewport
viewportWidth: window.innerWidth, // The width of the browser viewport
aspectRatio: window.innerWidth / window.innerHeight, // The ratio of width to height
deviceType: /Mobi|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop', // Determines the device type
orientation: window.innerHeight > window.innerWidth ? 'portrait' : 'landscape' // Detects the current orientation
};
parent.postMessage(iframeResizeData, '*'); // Sends the updated resize data
}
```
#### Explanation of `sendResizeEvent` Method
- **`type: 'resize'`**: Indicates the event type, allowing the parent application to differentiate between various messages.
- **`height: document.body.scrollHeight`**: Captures the total height of the document, including content not visible on the screen.
- **`width: document.body.scrollWidth`**: Captures the total width of the document, including overflow content.
- **`viewportHeight: window.innerHeight`**: Provides the height of the visible area in the browser window.
- **`viewportWidth: window.innerWidth`**: Provides the width of the visible area in the browser window.
- **`aspectRatio: window.innerWidth / window.innerHeight`**: Calculates the aspect ratio of the viewport to maintain correct proportions.
- **`deviceType: /Mobi|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop'`**: Detects whether the current device is mobile or desktop based on the user agent string.
- **`orientation: window.innerHeight > window.innerWidth ? 'portrait' : 'landscape'`**: Detects the current orientation of the device.
- **`parent.postMessage(iframeResizeData, '*')`**: Sends the resize data to the parent window, enabling it to adjust layouts accordingly.
### Receiving Resize Event
- To handle the resize event in the parent window, use the following code snippet:
```javascript
window.addEventListener("message", function (event) {
if (event.data.type === "resize") {
console.log("News Sentiment Resize Event", event.data);
}
});
```
- To handle the layout change event in the parent window, use the following code snippet:
```javascript
window.addEventListener("message", function (event) {
if (event.data.type === "layout") {
console.log("News Sentiment Layout Event", event.data);
}
});
```
#### Explanation of Receiving Resize Event Code
- **`window.addEventListener("message", function (event) {...})`**: Sets up an event listener that listens for messages sent from the iframe.
- **`if (event.data.type === "resize")`**: Checks if the received message is of the type "resize," indicating that it contains resize data.
- **`console.log("News Sentiment Resize Event", event.data);`**: Logs the resize event data to the console for debugging and further handling.
