Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated to support hosting #92

Merged
merged 2 commits into from
Mar 8, 2024
Merged

Updated to support hosting #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
530293d
Update setup to support smaller windows and hosting
johnman Mar 8, 2024
2cfd192
linting
johnman Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions how-to/use-window-options/client/src/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import type OpenFin from "@openfin/core";

const defaultCommonOptions: OpenFin.WindowCreationOptions = {
name: "test-child",
url: "./preview.html",
url: window.location.href.replace("app.html", "preview.html"),
icon: undefined,
autoShow: true,
alwaysOnTop: false,
opacity: 1,
contextMenu: true,
contextMenuOptions: { enabled: true },
showTaskbarIcon: true,
resizable: true,
minimizable: true,
Expand Down Expand Up @@ -106,11 +106,6 @@ async function initDom(): Promise<void> {
const btnPreview = document.querySelector("#btnPreview");
if (btnPreview) {
btnPreview.addEventListener("click", async () => {
if (previewWindow) {
await previewWindow.removeAllListeners();
await previewWindow.close(true);
previewWindow = undefined;
}
const previewOptions: OpenFin.WindowCreationOptions = {
...finalizeWindowOptions(),
saveWindowState: false
Expand Down
14 changes: 7 additions & 7 deletions how-to/use-window-options/public/html/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Window Options Builder</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/common/style/app.css" />
<link rel="stylesheet" href="../common/style/app.css" />
<script src="../js/app.bundle.js"></script>
</head>

Expand All @@ -16,7 +16,7 @@ <h1>Window Options Builder</h1>
<h1 class="tag">Demonstrate the customization options available for opening windows.</h1>
</div>
<div class="row middle gap10">
<image src="/common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
</div>
</header>
<main class="row fill gap20">
Expand Down Expand Up @@ -76,14 +76,14 @@ <h2>Common</h2>
<fieldset class="fill">
<label for="optionMinWidth">Min Width</label>
<div class="row gap20 middle">
<input type="range" id="optionMinWidth" min="600" max="1000" step="10" />
<input type="range" id="optionMinWidth" min="100" max="1000" step="10" />
<span id="optionMinWidthValue"></span>
</div>
</fieldset>
<fieldset class="fill">
<label for="optionMaxWidth">Max Width</label>
<div class="row gap20 middle">
<input type="range" id="optionMaxWidth" min="600" max="2000" step="10" />
<input type="range" id="optionMaxWidth" min="100" max="2000" step="10" />
<span id="optionMaxWidthValue"></span>
</div>
</fieldset>
Expand All @@ -92,14 +92,14 @@ <h2>Common</h2>
<fieldset class="fill">
<label for="optionMinHeight">Min Height</label>
<div class="row gap20 middle">
<input type="range" id="optionMinHeight" min="600" max="1000" step="10" />
<input type="range" id="optionMinHeight" min="100" max="1000" step="10" />
<span id="optionMinHeightValue"></span>
</div>
</fieldset>
<fieldset class="fill">
<label for="optionMaxHeight">Max Height</label>
<div class="row gap20 middle">
<input type="range" id="optionMaxHeight" min="600" max="2000" step="10" />
<input type="range" id="optionMaxHeight" min="100" max="2000" step="10" />
<span id="optionMaxHeightValue"></span>
</div>
</fieldset>
Expand Down Expand Up @@ -234,7 +234,7 @@ <h2>Preview</h2>
<div class="row spread">
<div class="row gap10">
<button id="btnPreview">Preview</button>
<button id="btnClosePreview">Close Preview</button>
<button id="btnClosePreview">Close Last Preview</button>
<button id="btnCopy">Copy to Clipboard</button>
<button id="btnReset">Reset to Defaults</button>
</div>
Expand Down
159 changes: 72 additions & 87 deletions how-to/use-window-options/public/html/preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,113 +5,99 @@
<title>Window Options Preview</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/common/style/app.css" />
<link rel="stylesheet" href="../common/style/app.css" />
</head>

<body class="col fill gap20">
<header class="row spread middle">
<div class="col">
<h1>Window Options Preview</h1>
<h1 class="tag">Demonstrate the customization options available for opening windows.</h1>
<h1 class="tag">Demonstrate customized window.</h1>
</div>
<div class="row middle gap10">
<image src="/common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
</div>
</header>
<main class="row fill gap20">
<div class="row fill spread gap20">This is the preview window.</div>
</main>
<footer>
<div class="column spread">
<button id="btnGrowVertical">+ Height</button>
<button id="btnShrinkVertical">- Height</button>
<button id="btnGrowHorizontal">+ Width</button>
<button id="btnShrinkHorizontal">- Width</button>
<main class="col gap10 scroll-horizontal">
<h4 id="windowName"></h4>
<fieldset class="row gap20 wrap" id="sizeContainer">
<select id="size">
<option selected="" value="+width">Increase Width</option>
<option value="-width">Decrease Width</option>
<option value="+height">Increase Height</option>
<option value="-height">Decrease Height</option>
</select>
<button id="btnApply">Apply</button>
</fieldset>
<fieldset class="row wrap">
<button id="btnCapture">Capture</button>
<button id="btnClosePreview">Close</button>
</div>
</footer>
</fieldset>
</main>
<script>
const btnGrowVertical = document.querySelector('#btnGrowVertical');
btnGrowVertical.addEventListener('click', async () => {
let options = await fin.me.getOptions();
let updated = false;
if (options.maxHeight !== -1) {
options.maxHeight += 100;
updated = true;
}
if (options.minHeight !== -1) {
options.minHeight += 100;
updated = true;
}
if (updated) {
await fin.me.updateOptions(options);
}
await fin.me.resizeBy(0, 100);
});
const windowName = document.querySelector('#windowName');
if (fin.me.isView) {
btnGrowVertical.style.display = 'none';
windowName.innerText = 'View Name: ' + fin.me.identity.name;
const sizeContainer = document.querySelector('#sizeContainer');
sizeContainer.style.display = 'none';
} else {
windowName.innerText = 'Window Name: ' + fin.me.identity.name;
}
const btnShrinkVertical = document.querySelector('#btnShrinkVertical');
btnShrinkVertical.addEventListener('click', async () => {
const size = document.querySelector('#size');
const btnApply = document.querySelector('#btnApply');
btnApply.addEventListener('click', async () => {
const action = size.value;
let options = await fin.me.getOptions();
let updated = false;
if (options.maxHeight !== -1) {
options.maxHeight -= 100;
updated = true;
}
if (options.minHeight !== -1) {
options.minHeight -= 100;
updated = true;
let height = 0;
let width = 0;
if (action === '+width') {
if (options.maxWidth !== -1) {
options.maxWidth += 100;
updated = true;
}
if (options.minWidth !== -1) {
options.minWidth += 100;
updated = true;
}
width = 100;
} else if (action === '-width') {
if (options.maxWidth !== -1) {
options.maxWidth -= 100;
updated = true;
}
if (options.minWidth !== -1) {
options.minWidth -= 100;
updated = true;
}
width = -100;
} else if (action === '+height') {
if (options.maxHeight !== -1) {
options.maxHeight += 100;
updated = true;
}
if (options.minHeight !== -1) {
options.minHeight += 100;
updated = true;
}
height = 100;
} else if (action === '-height') {
if (options.maxHeight !== -1) {
options.maxHeight -= 100;
updated = true;
}
if (options.minHeight !== -1) {
options.minHeight -= 100;
updated = true;
}
height = -100;
}
if (updated) {
await fin.me.updateOptions(options);
}
await fin.me.resizeBy(0, -100);
await fin.me.resizeBy(width, height);
});
if (fin.me.isView) {
btnShrinkVertical.style.display = 'none';
}
const btnGrowHorizontal = document.querySelector('#btnGrowHorizontal');
btnGrowHorizontal.addEventListener('click', async () => {
let options = await fin.me.getOptions();
let updated = false;
if (options.maxWidth !== -1) {
options.maxWidth += 100;
updated = true;
}
if (options.minWidth !== -1) {
options.minWidth += 100;
updated = true;
}
if (updated) {
await fin.me.updateOptions(options);
}
await fin.me.resizeBy(100, 0);
});
if (fin.me.isView) {
btnGrowHorizontal.style.display = 'none';
}
const btnShrinkHorizontal = document.querySelector('#btnShrinkHorizontal');
btnShrinkHorizontal.addEventListener('click', async () => {
let options = await fin.me.getOptions();
let updated = false;
if (options.maxWidth !== -1) {
options.maxWidth -= 100;
updated = true;
}
if (options.minWidth !== -1) {
options.minWidth -= 100;
updated = true;
}
if (updated) {
await fin.me.updateOptions(options);
}
await fin.me.resizeBy(-100, 0);
});
if (fin.me.isView) {
btnShrinkHorizontal.style.display = 'none';
}

const btnClosePreview = document.querySelector('#btnClosePreview');
btnClosePreview.addEventListener('click', async () => (await fin.Window.getCurrent()).close());
if (fin.me.isView) {
Expand All @@ -120,10 +106,9 @@ <h1 class="tag">Demonstrate the customization options available for opening wind
const btnCapture = document.querySelector('#btnCapture');
btnCapture.addEventListener('click', async () => {
console.log('SnapShot clicked');
const wnd = await fin.Window.getCurrent();

// Snapshot of a full visible window
let base64 = await wnd.getSnapshot();
let base64 = await fin.me.capturePage();

const link = document.createElement('a');
link.setAttribute('href', 'data:image/png;base64,' + base64);
Expand Down
Loading