[FIX] Iframe overlay (#631)

* update widget height when triggered

* fix state

* fix lint error

* fix

* css fix

* Lint me up inside

Co-authored-by: Martin <martin.schoeler@rocket.chat>

src/components/Messages/MessageText/markdown.js

@@ -81,4 +81,4 @@ md.use((md) => {
 	});
 });
 
-export const renderMarkdown = (...args) => sanitize(md.render(...args), { ADD_ATTR: ['target','rel'] });
+export const renderMarkdown = (...args) => sanitize(md.render(...args), { ADD_ATTR: ['target', 'rel'] });

src/lib/triggers.js

@@ -124,7 +124,6 @@ class Triggers {
 					}
 
 					route('/trigger-messages');
-					parentCall('openWidget');
 					store.setState({ minimized: false });
 				});
 			}

src/routes/TriggerMessage/component.js

@@ -1,8 +1,9 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 import Screen from '../../components/Screen';
 import { createClassName } from '../../components/helpers';
 import I18n from '../../i18n';
+import { parentCall } from '../../lib/parentCall';
 import styles from './styles.scss';
 
 
@@ -11,13 +12,29 @@ const defaultTitle = I18n.t('Messages');
 export default class TriggerMessage extends Component {
 	state = { }
 
+	constructor(props) {
+		super(props);
+		this.ref = createRef();
+	}
+
+	componentDidUpdate() {
+		let height = 0;
+
+		this.ref.current.base.children.forEach((el) => {
+			height += el.scrollHeight;
+		});
+
+		parentCall('resizeWidget', height);
+	}
+
 	render({ title, messages, loading, onStartChat = () => {}, departments, ...props }) {
 		const { theme: { color } } = props;
 		return (
 			<Screen
 				title={title || defaultTitle}
 				{...props}
 				triggered={true}
+				ref={this.ref}
 			>
 				<Screen.Content triggered={true}>
 					{messages && messages.map((message) => message.msg && <p className={createClassName(styles, 'trigger-message__message')}>{message.msg}</p>)}

src/routes/TriggerMessage/container.js

@@ -10,6 +10,7 @@ import TriggerMessage from './component';
 export class TriggerMessageContainer extends Component {
 	handleStart() {
 		parentCall('setFullScreenDocumentMobile');
+		parentCall('openWidget');
 		route('/');
 	}
 

src/routes/TriggerMessage/styles.scss

@@ -2,12 +2,16 @@
 
 .trigger-message {
 	&__message {
+		max-height: 192px;
+
 		margin: 0.4rem 0;
 
 		letter-spacing: 0;
 
 		font-size: 0.75rem;
+
 		line-height: 1rem;
+		overflow-wrap: normal;
 	}
 
 	&__footer {

src/store/Store.js

@@ -47,7 +47,7 @@ export default class Store {
 		});
 
 		window.addEventListener('visibilitychange', () => {
-			!this._state.minimized && parentCall('openWidget');
+			!this._state.minimized && !this._state.triggered && parentCall('openWidget');
 			this._state.iframe.visible ? parentCall('showWidget') : parentCall('hideWidget');
 		});
 

src/widget.js

@@ -23,6 +23,7 @@ let ready = false;
 let smallScreen = false;
 let bodyStyle;
 let scrollPosition;
+let widget_height;
 
 export const validCallbacks = [
 	'chat-maximized',
@@ -93,9 +94,8 @@ const updateWidgetStyle = (isOpened) => {
 		 * for widget.style.width
 		 */
 
+		widget.style.height = smallScreen ? '100%' : `${ WIDGET_MARGIN + widget_height + WIDGET_MARGIN + WIDGET_MINIMIZED_HEIGHT }px`;
 		widget.style.width = smallScreen ? '100%' : `${ WIDGET_MARGIN + WIDGET_OPEN_WIDTH + WIDGET_MARGIN }px`;
-		widget.style.height = smallScreen ? '100%'
-			: `${ WIDGET_MARGIN + WIDGET_OPEN_HEIGHT + WIDGET_MARGIN + WIDGET_MINIMIZED_HEIGHT + WIDGET_MARGIN }px`;
 	} else {
 		widget.style.left = 'auto';
 		widget.style.width = `${ WIDGET_MARGIN + WIDGET_MINIMIZED_WIDTH + WIDGET_MARGIN }px`;
@@ -153,12 +153,19 @@ const openWidget = () => {
 		return;
 	}
 
+	widget_height = WIDGET_OPEN_HEIGHT;
 	updateWidgetStyle(true);
 	widget.dataset.state = 'opened';
 	iframe.focus();
 	emitCallback('chat-maximized');
 };
 
+const resizeWidget = (height) => {
+	widget_height = height;
+	updateWidgetStyle(true);
+	widget.dataset.state = 'triggered';
+};
+
 function closeWidget() {
 	if (widget.dataset.state === 'closed') {
 		return;
@@ -197,14 +204,18 @@ const api = {
 	openPopout() {
 		closeWidget();
 		api.popup = window.open(`${ config.url }${ config.url.lastIndexOf('?') > -1 ? '&' : '?' }mode=popout`,
-			'livechat-popout', `width=${ WIDGET_OPEN_WIDTH }, height=${ WIDGET_OPEN_HEIGHT }, toolbars=no`);
+			'livechat-popout', `width=${ WIDGET_OPEN_WIDTH }, height=${ widget_height }, toolbars=no`);
 		api.popup.focus();
 	},
 
 	openWidget() {
 		openWidget();
 	},
 
+	resizeWidget(height) {
+		resizeWidget(height);
+	},
+
 	removeWidget() {
 		document.body.removeChild(widget);
 	},