docs: update drag and drop tutorial (#29200)
* Working * Working * Make the native-file drag and drop documents use context bridge * Add per-file sections * Use the updated link format * Use path.join instead of string interpolation. Co-authored-by: Antón Molleda <molant@users.noreply.github.com> * Use fs.promises Co-authored-by: Antón Molleda <molant@users.noreply.github.com> * Update docs/tutorial/native-file-drag-drop.md Co-authored-by: Antón Molleda <molant@users.noreply.github.com> * fix formatting Co-authored-by: Antón Molleda <molant@users.noreply.github.com> * Update docs/tutorial/native-file-drag-drop.md Co-authored-by: Antón Molleda <molant@users.noreply.github.com> * Use more path.join instead of interpolation * Update with PR suggestions * Remove process.cwd() and add more example elements * Minor text fix * Fix typo Co-authored-by: Erick Zhao <erick@hotmail.ca> Co-authored-by: Antón Molleda <molant@users.noreply.github.com> Co-authored-by: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
parent
af426cbdab
commit
adb85f341b
5 changed files with 63 additions and 33 deletions
|
@ -7,12 +7,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
<p>
|
||||
We are using node <script>document.write(process.versions.node)</script>,
|
||||
Chrome <script>document.write(process.versions.chrome)</script>,
|
||||
and Electron <script>document.write(process.versions.electron)</script>.
|
||||
</p>
|
||||
<a href="#" id="drag">Drag me</a>
|
||||
<p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
|
||||
<div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
|
||||
<div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag me - File 2</div>
|
||||
<script src="renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,21 +1,28 @@
|
|||
const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
|
||||
const fs = require('fs');
|
||||
const http = require('http');
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
const https = require('https')
|
||||
|
||||
function createWindow () {
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
||||
win.loadFile('index.html')
|
||||
}
|
||||
const iconName = 'iconForDragAndDrop.png';
|
||||
const icon = fs.createWriteStream(`${process.cwd()}/${iconName}`);
|
||||
http.get('http://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
|
||||
|
||||
const iconName = path.join(__dirname, 'iconForDragAndDrop.png');
|
||||
const icon = fs.createWriteStream(iconName);
|
||||
|
||||
// Create a new file to copy - you can also copy existing files.
|
||||
fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
|
||||
fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
|
||||
|
||||
https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
|
||||
response.pipe(icon);
|
||||
});
|
||||
|
||||
|
@ -23,8 +30,8 @@ app.whenReady().then(createWindow)
|
|||
|
||||
ipcMain.on('ondragstart', (event, filePath) => {
|
||||
event.sender.startDrag({
|
||||
file: filePath,
|
||||
icon: `${process.cwd()}/${iconName}`
|
||||
file: path.join(__dirname, filePath),
|
||||
icon: iconName,
|
||||
})
|
||||
})
|
||||
|
||||
|
|
8
docs/fiddles/features/drag-and-drop/preload.js
Normal file
8
docs/fiddles/features/drag-and-drop/preload.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
const { contextBridge, ipcRenderer } = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
contextBridge.exposeInMainWorld('electron', {
|
||||
startDrag: (fileName) => {
|
||||
ipcRenderer.send('ondragstart', fileName)
|
||||
}
|
||||
})
|
|
@ -1,9 +1,9 @@
|
|||
const { ipcRenderer } = require('electron')
|
||||
const fs = require('fs')
|
||||
|
||||
document.getElementById('drag').ondragstart = (event) => {
|
||||
const fileName = 'drag-and-drop.md'
|
||||
fs.writeFileSync(fileName, '# Test drag and drop');
|
||||
document.getElementById('drag1').ondragstart = (event) => {
|
||||
event.preventDefault()
|
||||
ipcRenderer.send('ondragstart', process.cwd() + `/${fileName}`)
|
||||
window.electron.startDrag('drag-and-drop-1.md')
|
||||
}
|
||||
|
||||
document.getElementById('drag2').ondragstart = (event) => {
|
||||
event.preventDefault()
|
||||
window.electron.startDrag('drag-and-drop-2.md')
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue