Skip to content

Commit

Permalink
Merge pull request #28 from UiPath/app-content-height-updates
Browse files Browse the repository at this point in the history 
Added demo page for app content height updates
  • Loading branch information
@abhishekks805
abhishekks805 authored Dec 10, 2024
2 parents bd1bed5 + 527888d commit 81fe0e9
Show file tree
Hide file tree
Showing 2 changed files with 258 additions and 0 deletions.
102 changes: 102 additions & 0 deletions demo-pages/app-content-height-updates/host-page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Page with Header and Footer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.header {
background-color: #f8f9fa;
color: #333;
padding: 20px 0;
border-bottom: 1px solid #e0e0e0;
}

.footer {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
border-top: 1px solid #e0e0e0;
}

.content {
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}

.embed {
width: 100%;
height: 500px; /* Adjust the height here */
}
</style>
</head>
<body>

<!-- Header -->
<header class="header">
<div class="container">
<h1 class="h3 text-center">My website</h1>
</div>
</header>

<!-- Main content (iframe embedded here) -->
<div class="content">
<embed src="https://staging.uipath.com/0e3eda16-46de-49be-8d90-26cd7b13dbcc/apps_/default/run/production/3528fc57-376e-49f6-9742-c5f9735bc099/cdcdd4bf-a1b8-44ca-a028-ee707ab696c4/IDdc28cb67105c44ad84e4ba4a52ba84bb/public?el=VB&target=*" class="embed"></embed>
</div>

<!-- Footer -->
<footer class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</footer>

<!-- Optionally add Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script>
// Constants to be used in the functions, defined here for better visibility
const MIN_HEIGHT = 500;
const UPDATE_SIZE = 100;

// Global flags
let wasUpdatedToZero = false;
let shouldStop = false;
let lastEventHeight = 0;

// Get the element
const embed = document.getElementsByClassName('embed')[0];

window.addEventListener('message', function (event) {
// Check the event type and avoid repetitive height update
if (event.data.event !== "APP_CONTENT_HEIGHT_UPDATED" && lastEventHeight === event.data.height) return;
lastEventHeight = event.data.height;
updateHeight(event);
});
function updateHeight(event) {
if (event.data.height === MIN_HEIGHT) return;

if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {
shouldStop = wasUpdatedToZero = false;
embed.style.height = Math.max(event.data.height - UPDATE_SIZE, MIN_HEIGHT) + 'px';
} else if (event.data.event === "APP_CONTENT_RESIZED") {
if (event.data.height > 0) {
if (wasUpdatedToZero) {
shouldStop = true;
embed.style.height = Math.max(parseInt(event.data.height), MIN_HEIGHT) + 'px';
wasUpdatedToZero = false;
} else {
if (!shouldStop) {
embed.style.height = Math.max(parseInt(event.data.height) - UPDATE_SIZE, MIN_HEIGHT) + 'px';
}
}
} else {
wasUpdatedToZero = true;
embed.style.height = Math.max(parseInt(embed.style.height) + UPDATE_SIZE, MIN_HEIGHT) + 'px';
}
}
}
</script>
</body>
</html>
156 changes: 156 additions & 0 deletions demo-pages/app-content-height-updates/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Page with Device Frame</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* Material Card Style */
.card {
max-width: 75%;
margin: 50px auto;
padding: 50px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
}

/* Mobile device frame style */
.device-frame {
position: relative;
width: 380px;
height: 680px;
background-color: #fff;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 0 auto;
padding-top: 40px;
}

.device-frame:before {
content: '';
position: absolute;
top: 10px;
left: 50%;
width: 80%;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
transform: translateX(-50%);
}

.device-frame .iframe-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
}

/* Content Layout */
.content {
display: flex;
justify-content: center;
align-items: center;
}

/* Instructions Section */
.instructions {
margin-left: 20px;
flex: 1;
max-height: 680px; /* Ensure it's the same height as the iframe */
overflow-y: auto;
overflow-x: hidden;
}

.instructions ul {
list-style-type: disc;
padding-left: 20px;
}

pre {
background-color: #f1f1f1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

.pre-container {
padding-left: 1rem;
}

body {
overflow: hidden;
}
</style>
</head>
<body>

<!-- Main Content -->
<div class="content">
<div class="card">
<div class="col-4">
<!-- Device Frame on the left -->
<div class="device-frame">
<iframe id="webAppIframe" src="./host-page.html" class="iframe-container"></iframe>
</div>
</div>

<div class="col-8 instructions">
<!-- Instructions on the right -->
<h5>Instructions:</h5>
<ul>
<li>This page embeds a mobile app inside a device frame.</li>
<li>The iframe dynamically loads content and displays it inside the device frame.</li>
<li>The mobile app content adjusts its height based on its content to prevent scrollbars.</li>
<li>You can use the buttons inside the iframe to interact with the app and modify content.</li>
<li>All content is displayed responsively for mobile viewing.</li>
</ul>
<!-- Code snippets -->
<div class="row" style="">
<h5>How to implement this?</h5>

<p>1. HTML Changes - Append <code>target</code> query param with your website's <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin" target="_blank">
origin</a> to the public app URL</p>
<div class="pre-container">
<pre style="width: 100%; overflow: auto; white-space: nowrap;">
<code>&lt;iframe src="https://cloud.uipath.com/...?el=VB&<b>target=https://mywebsite.com</b>" id="appIframe"&gt;&lt;/iframe&gt;</code>
</pre>
</div>

<p>2. Script to embed on your webpage that can subscribe to App Height changes and resize the iframe.</p>
<div class="pre-container">
<pre style="width: 100%; height: 300px; overflow: auto;"><code>
window.addEventListener('message', function(event) {
if (event.origin !== "https://yourapp.com") return;
if (event.data && event.data.type === "resize") {
var iframe = document.getElementById("webAppIframe");
iframe.style.height = event.data.height + 'px';
}
});
function sendResizeMessage() {
var iframe = document.getElementById("webAppIframe");
var iframeHeight = iframe.contentWindow.document.body.scrollHeight;
parent.postMessage({ type: "resize", height: iframeHeight }, "*");
}
window.onload = function() {
var iframe = document.getElementById("webAppIframe");
iframe.onload = sendResizeMessage;
};</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit 81fe0e9

Please sign in to comment.