Last active
January 16, 2024 08:03
-
-
Save Imperat/45c09b8c558ee9b99e1c3270db7cfee6 to your computer and use it in GitHub Desktop.
Trying to debug full-screen issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> | |
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> | |
<link href="./styles.css" rel="stylesheet"> | |
<title>Hello World!</title> | |
</head> | |
<body> | |
<h1>Hello World!</h1> | |
We are using Node.js <span id="node-version"></span>, | |
Chromium <span id="chrome-version"></span>, | |
and Electron <span id="electron-version"></span>. | |
<button id="btn">Click me</button> | |
<div id="output"> | |
</div> | |
<!-- You can also require other files to run in this process --> | |
<script src="./renderer.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> | |
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> | |
<link href="./styles.css" rel="stylesheet"> | |
<title>Hello World!</title> | |
</head> | |
<body class="second"> | |
<div style="width: 100%; background: blue;">title</div> | |
<!-- You can also require other files to run in this process --> | |
<script src="./renderer.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Modules to control application life and create native browser window | |
const { app, BrowserWindow, BrowserView, Menu } = require('electron') | |
const path = require('path') | |
const TITLE_BAR_HEIGHT = 35; | |
function createWindow () { | |
const browserWindow = new BrowserWindow({ | |
width: 800, | |
height: 600, | |
titleBarStyle: 'hidden', | |
titleBarOverlay: true, | |
webPreferences: { | |
preload: path.join(__dirname, 'preload.js'), | |
} | |
}); | |
browserWindow.loadURL('about:blank'); | |
Menu.setApplicationMenu(null); | |
const browserViewContent = new BrowserView(); | |
browserWindow.addBrowserView(browserViewContent); | |
const windowContentBounds = browserWindow.getContentBounds(); | |
browserViewContent.setBounds({ | |
x: 0, | |
y: TITLE_BAR_HEIGHT, | |
width: windowContentBounds.width, | |
height: windowContentBounds.height - TITLE_BAR_HEIGHT | |
}); | |
browserViewContent.setAutoResize({ width: true, height: true }); | |
const browserViewTitleBar = new BrowserView(); | |
browserViewTitleBar.webContents.loadFile('index2.html'); | |
browserViewTitleBar.setBounds({ x: 0, y: 0, width: windowContentBounds.width, height: windowContentBounds.width }); | |
browserViewTitleBar.setAutoResize({ width: true, height: true }); | |
browserWindow.addBrowserView(browserViewTitleBar); | |
browserWindow.setTopBrowserView(browserViewContent); | |
browserViewContent.webContents.loadFile('index.html'); | |
browserViewContent.webContents.openDevTools(); | |
browserViewContent.webContents.on('enter-html-full-screen', () => { | |
browserWindow.addBrowserView(browserViewContent); | |
const { width, height } = browserWindow.getContentBounds(); | |
browserViewContent.setBounds({ x: 0, y: 0, width, height }); | |
}); | |
} | |
// This method will be called when Electron has finished | |
// initialization and is ready to create browser windows. | |
// Some APIs can only be used after this event occurs. | |
app.whenReady().then(() => { | |
createWindow() | |
}) | |
// Quit when all windows are closed, except on macOS. There, it's common | |
// for applications and their menu bar to stay active until the user quits | |
// explicitly with Cmd + Q. | |
app.on('window-all-closed', function () { | |
app.quit(); | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "fine-increase-whisper-94x8v", | |
"productName": "fine-increase-whisper-94x8v", | |
"description": "My Electron application description", | |
"keywords": [], | |
"main": "./main.js", | |
"version": "1.0.0", | |
"author": "Mikhail", | |
"scripts": { | |
"start": "electron ." | |
}, | |
"dependencies": {}, | |
"devDependencies": { | |
"electron": "26.6.2" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The preload script runs before. It has access to web APIs | |
* as well as Electron's renderer process modules and some | |
* polyfilled Node.js functions. | |
* | |
* https://www.electronjs.org/docs/latest/tutorial/sandbox | |
*/ | |
window.addEventListener('DOMContentLoaded', () => { | |
const replaceText = (selector, text) => { | |
const element = document.getElementById(selector) | |
if (element) element.innerText = text | |
} | |
for (const type of ['chrome', 'node', 'electron']) { | |
replaceText(`${type}-version`, process.versions[type]) | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const btn = document.getElementById('btn'); | |
const output = document.getElementById('output'); | |
let isFullScreen = false; | |
btn.addEventListener('click', () => { | |
if (isFullScreen) { | |
isFullScreen = false; | |
document.body.exitFullscreen(); | |
return; | |
} | |
isFullScreen = true; | |
btn.requestFullscreen(); | |
}); | |
window.addEventListener('mousemove', (e) => { | |
btn.innerText = `x: ${e.clientX}, y: ${e.clientY}`; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* styles.css */ | |
/* Add styles here to customize the appearance of your app */ | |
body { | |
background: orange; | |
} | |
body.second { | |
background: green; | |
-webkit-app-region: drag; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment