Skip to content

Commit

Permalink
Move UI setup to its own event
Browse files Browse the repository at this point in the history
Right now every single time text is selected a new event handler is added to the Save/Copy buttons.

This results in a huge number of event handlers being added to the buttons. In my testing after a few selections a single click on Copy the shutter action would be triggered 40+ times.

Here we move the event handler setup to its own event and read the config/paste on update events.
  • Loading branch information
zolrath committed Dec 1, 2022
1 parent 03df033 commit 93a41f6
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 37 deletions.
2 changes: 2 additions & 0 deletions src/extension.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ const hasOneSelection = (selections) =>
const runCommand = async (context) => {
const panel = await createPanel(context);

panel.webview.postMessage({ type: 'setup-ui', ...getConfig() });

const update = async () => {
await vscode.commands.executeCommand('editor.action.clipboardCopyWithSyntaxHighlightingAction');
panel.webview.postMessage({ type: 'update', ...getConfig() });
Expand Down
84 changes: 47 additions & 37 deletions webview/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const btnSave = $('#save');
const btnCopy = $('#secondMainBtn');

const showLineNumBtn = $('#showLineNumBtn');
const showWindowControls = $('#showWindowControls');
const showWindowControlsBtn = $('#showWindowControlsBtn');
const modeChangeBtn = $("#modeChangeBtn")

let _toolMode;
Expand All @@ -23,44 +23,19 @@ document.addEventListener('copy', () => takeSnap({ ...config, shutterAction: 'co
document.addEventListener('paste', (e) => pasteCode(config, e.clipboardData));

window.addEventListener('message', ({ data: { type, ...cfg } }) => {
if (type === 'update') {
if (type === 'setup-ui') {
config = cfg;

const {
fontLigatures,
tabSize,
backgroundColor,
boxShadow,
containerPadding,
roundedCorners,
showWindowControls,
showWindowTitle,
windowTitle,
shutterAction,
showLineNumbers,
toolMode
} = config;

_toolMode = toolMode

setVar('ligatures', fontLigatures ? 'normal' : 'none');
if (typeof fontLigatures === 'string') setVar('font-features', fontLigatures);
setVar('tab-size', tabSize);
setVar('container-background-color', backgroundColor);
setVar('box-shadow', boxShadow);
setVar('container-padding', containerPadding);
setVar('window-border-radius', roundedCorners ? '4px' : 0);

navbarNode.hidden = !showWindowControls && !showWindowTitle;
windowControlsNode.hidden = !showWindowControls;
windowTitleNode.hidden = !showWindowTitle;

windowTitleNode.textContent = windowTitle;

document.execCommand('paste');

let actions = []
if(shutterAction == "save") {
if (shutterAction === "save") {
actions = [
() => takeSnap(config),
() => takeSnap({ ...config, shutterAction: 'copy' }),
Expand All @@ -77,12 +52,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
btnSave.addEventListener('click', actions[0])
btnCopy.addEventListener('click', actions[1])

if(!showLineNumbers) {
document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0');
}

showLineNumBtn.addEventListener('click', () => {

document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0');

// showLineNumBtn.firstChild.classList.toggle('opacity-100');
Expand All @@ -94,9 +64,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
})
})

if(!showWindowControls){
document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0');
}

showWindowControlsBtn.addEventListener('click', () => {
document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0');
windowControlsNode.hidden = !windowControlsNode.hidden
Expand All @@ -109,14 +77,56 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => {
_toolMode = _toolMode==='advanced' ? 'simple': 'advanced'
toolModeToggled()
})
}
else if (type === 'update') {
config = cfg;

const {
fontLigatures,
tabSize,
backgroundColor,
boxShadow,
containerPadding,
roundedCorners,
showWindowControls,
showWindowTitle,
windowTitle,
showLineNumbers,
toolMode
} = config;

_toolMode = toolMode

setVar('ligatures', fontLigatures ? 'normal' : 'none');
if (typeof fontLigatures === 'string') setVar('font-features', fontLigatures);
setVar('tab-size', tabSize);
setVar('container-background-color', backgroundColor);
setVar('box-shadow', boxShadow);
setVar('container-padding', containerPadding);
setVar('window-border-radius', roundedCorners ? '4px' : 0);

navbarNode.hidden = !showWindowControls && !showWindowTitle;
windowControlsNode.hidden = !showWindowControls;
windowTitleNode.hidden = !showWindowTitle;

windowTitleNode.textContent = windowTitle;

if (!showLineNumbers) {
document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0');
}

if (!showWindowControls){
document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0');
}

document.execCommand('paste');
} else if (type === 'flash') {
cameraFlashAnimation();
}
});

const toolModeToggled = () => {
if(_toolMode=='advanced') {
if(_toolMode === 'advanced') {
btnCopy.classList.remove("hidden")
$('#showLineNumBtn').classList.remove("hidden")
$('#showWindowControlsBtn').classList.remove("hidden")
Expand Down

0 comments on commit 93a41f6

Please sign in to comment.