2021-07-01 19:25:40 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
|
<style>
|
|
|
|
|
:root {
|
|
|
|
|
--fallback-title-bar-height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.draggable {
|
|
|
|
|
app-region: drag;
|
|
|
|
|
/* Pre-fix app-region during standardization process */
|
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nonDraggable {
|
|
|
|
|
app-region: no-drag;
|
|
|
|
|
/* Pre-fix app-region during standardization process */
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#titleBarContainer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: env(titlebar-area-y, 0);
|
|
|
|
|
height: env(titlebar-area-height, var(--fallback-title-bar-height));
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#titleBar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
user-select: none;
|
|
|
|
|
height: 100%;
|
|
|
|
|
left: env(titlebar-area-x, 0);
|
|
|
|
|
width: env(titlebar-area-width, 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#mainContent {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
top: env(titlebar-area-height, var(--fallback-title-bar-height));
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script>
|
|
|
|
|
const {ipcRenderer} = require('electron');
|
|
|
|
|
navigator.windowControlsOverlay.ongeometrychange = function() {
|
2022-01-10 22:31:39 +00:00
|
|
|
const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect();
|
2021-07-01 19:25:40 +00:00
|
|
|
ipcRenderer.send('geometrychange', {x, y, width, height});
|
|
|
|
|
};
|
2023-02-01 11:59:16 +00:00
|
|
|
</script>
|
2021-07-01 19:25:40 +00:00
|
|
|
<div id="titleBarContainer">
|
|
|
|
|
<div id="titleBar" class=" draggable">
|
|
|
|
|
<span class="draggable">Title goes here</span>
|
|
|
|
|
<input class="nonDraggable" type="text" placeholder="Search"></input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="mainContent"><!-- The rest of the webpage --></div>
|
|
|
|
|
<script>
|
|
|
|
|
function getCssOverlayProperties() {
|
|
|
|
|
const cssOverlayProps = {};
|
|
|
|
|
const titleBarContainer = document.getElementById('titleBarContainer');
|
|
|
|
|
const titleBar = document.getElementById('titleBar');
|
|
|
|
|
cssOverlayProps.y = titleBarContainer.computedStyleMap().get('top').value;
|
|
|
|
|
cssOverlayProps.height = titleBarContainer.computedStyleMap().get('height').value;
|
|
|
|
|
cssOverlayProps.x = titleBar.computedStyleMap().get('left').value;
|
|
|
|
|
cssOverlayProps.width = titleBar.computedStyleMap().get('width').value;
|
|
|
|
|
return cssOverlayProps;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getJSOverlayProperties() {
|
2023-02-01 11:59:16 +00:00
|
|
|
const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect();
|
2021-07-01 19:25:40 +00:00
|
|
|
return {x, y, width, height};
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
