Update extension.js

This commit is contained in:
ErikrafT 2025-05-03 19:21:57 -03:00 committed by GitHub
parent 9286f21223
commit b4a2507d43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 89 additions and 55 deletions

View File

@ -1,69 +1,103 @@
const vscode = require('vscode');
const path = require('path');
function activate(context) {
// Registrar o comando para abrir a visualização
let disposable = vscode.commands.registerCommand('erikraftDrop.open', function () {
const panel = vscode.window.createWebviewPanel(
'erikraftDrop',
'ErikrafT Drop',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
vscode.commands.executeCommand('workbench.view.extension.erikraftDrop');
});
// Registrar o provedor de visualização
const viewProvider = new ErikrafTDropViewProvider(context.extensionPath);
context.subscriptions.push(
vscode.window.registerWebviewViewProvider('erikraftDrop.view', viewProvider)
);
context.subscriptions.push(disposable);
}
class ErikrafTDropViewProvider {
constructor(extensionPath) {
this.extensionPath = extensionPath;
}
resolveWebviewView(webviewView) {
webviewView.webview.options = {
enableScripts: true,
localResourceRoots: [
vscode.Uri.file(path.join(this.extensionPath, 'images')),
vscode.Uri.file(path.join(this.extensionPath, 'media'))
]
};
webviewView.webview.html = this.getWebviewContent(webviewView.webview);
}
getWebviewContent(webview) {
const darkIconPath = webview.asWebviewUri(vscode.Uri.file(
path.join(this.extensionPath, 'images', 'ui-icon-dark.svg')
));
const lightIconPath = webview.asWebviewUri(vscode.Uri.file(
path.join(this.extensionPath, 'images', 'ui-icon-light.svg')
));
return `
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; style-src ${webview.cspSource}; script-src ${webview.cspSource}; frame-src https://drop.erikraft.com;">
<title>ErikrafT Drop</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: var(--vscode-editor-background);
color: var(--vscode-editor-foreground);
}
iframe {
border: none;
width: 100%;
height: calc(100% - 40px);
max-width: 400px;
margin: 0 auto;
display: block;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.icon-container img {
max-width: 80px;
height: auto;
}
</style>
</head>
<body>
<div class="icon-container">
<picture>
<source srcset="${darkIconPath}" media="(prefers-color-scheme: dark)" />
<img src="${lightIconPath}" alt="ErikrafT Drop Icon" />
</picture>
</div>
<iframe
src="https://drop.erikraft.com/"
allow="clipboard-write; camera; microphone; autoplay;"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
></iframe>
</body>
</html>
`;
}
}
exports.activate = activate;
function deactivate() {}
exports.deactivate = deactivate;
function getWebviewContent() {
return `
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>ErikrafT Drop</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #fff;
}
iframe {
border: none;
width: 100%;
height: 100%;
}
picture {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Ícone para temas claro e escuro -->
<picture>
<source srcset="images/ui-icon-dark.svg" media="(prefers-color-scheme: dark)" />
<img src="images/ui-icon-light.svg" alt="ErikrafT Drop Icon" width="120" />
</picture>
<!-- GIFs para o README.md -->
<div style="text-align: center; padding: 20px;">
<img src="images/screenshot1.gif" alt="Demo 1" width="300"/>
<img src="images/screenshot2.gif" alt="Demo 2" width="300"/>
</div>
<iframe src="https://drop.erikraft.com/" allow="clipboard-write; camera; microphone; autoplay;"></iframe>
</body>
</html>
`;
}