From ec663949901f19eea06446b52d0043bf7181eaff Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Thu, 19 Aug 2021 21:45:48 -0300 Subject: [PATCH] [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 --- .../Messages/MessageText/markdown.js | 2 +- src/lib/triggers.js | 1 - src/routes/TriggerMessage/component.js | 19 ++++++++++++++++++- src/routes/TriggerMessage/container.js | 1 + src/routes/TriggerMessage/styles.scss | 4 ++++ src/store/Store.js | 2 +- src/widget.js | 17 ++++++++++++++--- 7 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/components/Messages/MessageText/markdown.js b/src/components/Messages/MessageText/markdown.js index 2bc461121..ca1c4d6bf 100644 --- a/src/components/Messages/MessageText/markdown.js +++ b/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'] }); diff --git a/src/lib/triggers.js b/src/lib/triggers.js index 830ec4222..9d6b24245 100644 --- a/src/lib/triggers.js +++ b/src/lib/triggers.js @@ -124,7 +124,6 @@ class Triggers { } route('/trigger-messages'); - parentCall('openWidget'); store.setState({ minimized: false }); }); } diff --git a/src/routes/TriggerMessage/component.js b/src/routes/TriggerMessage/component.js index 4261257fb..f675ad4b0 100644 --- a/src/routes/TriggerMessage/component.js +++ b/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,6 +12,21 @@ 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 ( @@ -18,6 +34,7 @@ export default class TriggerMessage extends Component { title={title || defaultTitle} {...props} triggered={true} + ref={this.ref} > {messages && messages.map((message) => message.msg &&

{message.msg}

)} diff --git a/src/routes/TriggerMessage/container.js b/src/routes/TriggerMessage/container.js index a3232d0e0..cf2be5792 100644 --- a/src/routes/TriggerMessage/container.js +++ b/src/routes/TriggerMessage/container.js @@ -10,6 +10,7 @@ import TriggerMessage from './component'; export class TriggerMessageContainer extends Component { handleStart() { parentCall('setFullScreenDocumentMobile'); + parentCall('openWidget'); route('/'); } diff --git a/src/routes/TriggerMessage/styles.scss b/src/routes/TriggerMessage/styles.scss index 0e6dc8f90..e55ae2fe1 100644 --- a/src/routes/TriggerMessage/styles.scss +++ b/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 { diff --git a/src/store/Store.js b/src/store/Store.js index bb8ac8664..58e78f4b0 100644 --- a/src/store/Store.js +++ b/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'); }); diff --git a/src/widget.js b/src/widget.js index d1286107c..ba60fb47f 100644 --- a/src/widget.js +++ b/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,7 +204,7 @@ 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(); }, @@ -205,6 +212,10 @@ const api = { openWidget(); }, + resizeWidget(height) { + resizeWidget(height); + }, + removeWidget() { document.body.removeChild(widget); },