Skip to content

Commit f720aaa

Browse files
rgembalikrgembalik
committed
Code refactor
Split element creation and element update Apply BEM to class names Add html syntax highlight with vscode extension
1 parent 7c8684f commit f720aaa

File tree

5 files changed

+181
-141
lines changed

5 files changed

+181
-141
lines changed

‎.vscode/extensions.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"recommendations": [
3+
// code quality plugins
4+
"dbaeumer.vscode-eslint",
5+
"esbenp.prettier-vscode",
6+
7+
// plugin that helps with html strings in js files
8+
"tobermory.es6-string-html"
9+
]
10+
}

‎plugins/build-handler.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,29 @@ export const onBuildHandler = (buttonSettings, contentObject, id) => {
2121

2222
const statusMessageContainer = document.getElementById(statusBoxId);
2323
const buttonElement = document.getElementById(buttonId);
24-
buttonElement.classList.add('loading');
2524

26-
const writeStatus = (message) => {
25+
const updateStatus = (message) => {
2726
statusMessageContainer.innerHTML = message;
2827
};
2928

30-
const pluginLink = `
29+
const pluginLink = /* html */ `
3130
<a
32-
class="plugin-dn-link"
31+
class="plugin-deploy-netlify__link"
3332
href="${buildInstance}"
3433
target="_blank">
3534
Go to page: ${buildInstance}
36-
</a>`;
35+
</a>
36+
`;
3737

3838
if (!buildWebhookURL) {
39-
writeStatus(pluginLink);
39+
updateStatus(pluginLink);
4040
return;
4141
} else {
42-
writeStatus('Updating preview link...');
42+
updateStatus('Updating preview link...');
4343
}
4444

45+
buttonElement.disabled = true;
46+
buttonElement.classList.add('plugin-deploy-netlify__button--loading');
4547
return fetch(buildWebhookURL, {
4648
mode: 'no-cors',
4749
method: 'POST',
@@ -50,16 +52,16 @@ export const onBuildHandler = (buttonSettings, contentObject, id) => {
5052
'content-type': 'application/json;charset=UTF-8',
5153
},
5254
})
53-
.then(() => {
54-
writeStatus(pluginLink);
55-
buttonElement.classList.remove('loading');
56-
})
55+
.then(() => updateStatus(pluginLink))
5756
.catch((error) => {
5857
if (error.message) {
59-
writeStatus(error.message);
58+
updateStatus(error.message);
6059
} else {
61-
writeStatus('Failed to fetch');
60+
updateStatus('Failed to fetch');
6261
}
63-
buttonElement.classList.remove('loading');
62+
})
63+
.finally(() => {
64+
buttonElement.disabled = false;
65+
buttonElement.classList.remove('plugin-deploy-netlify__button--loading');
6466
});
6567
};

‎plugins/sidebar-panel/index.js‎

Lines changed: 55 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,55 @@ import {
22
addElementToCache,
33
getCachedElement,
44
} from '../../common/plugin-element-cache';
5-
import { getKeyPattern } from '../../common/plugin-helpers';
6-
7-
import { onBuildHandler } from '../build-handler';
5+
import { createNetlifyItem, updateNetlifyItem } from './panel-button';
6+
7+
const createPanelElement = (cacheKey) => {
8+
const panelElement = document.createElement('div');
9+
panelElement.classList.add('plugin-deploy-netlify');
10+
panelElement.id = cacheKey;
11+
panelElement.innerHTML = /*html*/ `
12+
<span id="plugin-deploy-netlify__header" class="plugin-deploy-netlify__header">
13+
Netlify builds
14+
</span>
15+
<div class="plugin-deploy-netlify__button-list"></div>
16+
<img class="plugin-deploy-netlify__logo" alt="Logo Netlify">
17+
`;
18+
19+
addElementToCache(panelElement, cacheKey);
20+
21+
return panelElement;
22+
};
823

9-
const itemNetlify = (buttonSettings, contentObject, id, isCreating) => {
10-
const buildInstance = getKeyPattern(
11-
buttonSettings?.build_instance_url,
12-
contentObject,
13-
);
14-
const buttonLabel = getKeyPattern(
15-
buttonSettings?.displayName || 'Build site',
16-
contentObject,
24+
const updatePanelElement = (
25+
pluginContainer,
26+
settingsForCtd,
27+
contentObject,
28+
isCreating,
29+
) => {
30+
const buttonList = pluginContainer.querySelector(
31+
'.plugin-deploy-netlify__button-list',
1732
);
18-
19-
const pluginContainerItem = document.createElement('div');
20-
pluginContainerItem.classList.add('plugin-dn-container-item');
21-
22-
// :: Status
23-
const statusMessageContainer = document.createElement('div');
24-
statusMessageContainer.id = `${id}-status`;
25-
statusMessageContainer.classList.add('plugin-dn-status-message');
26-
27-
// :: Button
28-
const pluginButton = document.createElement('button');
29-
pluginButton.id = `${id}-button`;
30-
pluginButton.classList.add('plugin-dn-button');
31-
pluginButton.innerText = buttonLabel;
32-
pluginButton.onclick = () =>
33-
onBuildHandler(buttonSettings, contentObject, id);
34-
35-
// :: Button disabled status
36-
if (isCreating) {
37-
pluginButton.classList.add('disabled');
38-
} else {
39-
pluginButton.classList.remove('disabled');
33+
settingsForCtd.forEach((buttonSettings, index) => {
34+
const itemUniqueID = `netlify-item-child-${index}`;
35+
let htmlItem = buttonList.children[index];
36+
if (!htmlItem) {
37+
htmlItem = createNetlifyItem(itemUniqueID);
38+
buttonList.appendChild(htmlItem);
39+
}
40+
updateNetlifyItem(
41+
htmlItem,
42+
buttonSettings,
43+
contentObject,
44+
itemUniqueID,
45+
isCreating,
46+
);
47+
return htmlItem;
48+
});
49+
50+
// Remove unnecessary items
51+
while (settingsForCtd.length < buttonList.children.length) {
52+
buttonList.children[buttonList.children.length - 1].remove();
4053
}
41-
42-
// :: Message
43-
if (buildInstance && !isCreating) {
44-
statusMessageContainer.innerHTML = `
45-
<a
46-
class="plugin-dn-link"
47-
href="${buildInstance}"
48-
target="_blank">
49-
Go to page: ${buildInstance}
50-
</a>`;
51-
}
52-
53-
// :: Append new elements
54-
pluginContainerItem.appendChild(pluginButton);
55-
pluginContainerItem.appendChild(statusMessageContainer);
56-
57-
// :: Checking if build instance
58-
59-
if (!buildInstance) {
60-
pluginButton.classList.add('disabled');
61-
pluginButton.disabled = true;
62-
statusMessageContainer.classList.add('active');
63-
statusMessageContainer.innerText =
64-
"Can't find build instance url. Check the plugin settings.";
65-
}
66-
67-
return pluginContainerItem;
6854
};
6955

7056
export const handlePanelPlugin = (
@@ -92,33 +78,16 @@ export const handlePanelPlugin = (
9278

9379
let pluginContainer = getCachedElement(cacheKey)?.element;
9480

95-
if (!pluginContainer || isCreating) {
96-
pluginContainer = document.createElement('div');
97-
pluginContainer.classList.add('plugin-dn-container');
98-
99-
const headerElement = document.createElement('span');
100-
headerElement.classList.add('plugin-dn-header');
101-
headerElement.id = 'plugin-dn-header';
102-
headerElement.innerText = 'Netlify Builds';
103-
104-
pluginContainer.appendChild(headerElement);
105-
addElementToCache(pluginContainer, cacheKey);
106-
107-
// Case: disable buttons on create item
108-
const items = settingsForCtd.map((item, index) => {
109-
const itemUniqueID = `netlify-item-child-${index}`;
110-
return itemNetlify(item, contentObject, itemUniqueID, isCreating);
111-
});
112-
113-
pluginContainer.append(...items);
114-
115-
const imgLogo = document.createElement('img');
116-
imgLogo.classList.add('plugin-dn-logo');
117-
118-
imgLogo.alt = 'Logo Netlify';
119-
120-
pluginContainer.appendChild(imgLogo);
81+
if (!pluginContainer) {
82+
pluginContainer = createPanelElement(cacheKey);
12183
}
12284

85+
updatePanelElement(
86+
pluginContainer,
87+
settingsForCtd,
88+
contentObject,
89+
isCreating,
90+
);
91+
12392
return pluginContainer;
12493
};

‎plugins/sidebar-panel/panel-button.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { getKeyPattern } from '../../common/plugin-helpers';
2+
import { onBuildHandler } from '../build-handler';
3+
4+
export const updateNetlifyItem = (
5+
htmlElement,
6+
buttonSettings,
7+
contentObject,
8+
id,
9+
isCreating,
10+
) => {
11+
const buildInstance = getKeyPattern(
12+
buttonSettings?.build_instance_url,
13+
contentObject,
14+
);
15+
const buttonLabel = getKeyPattern(
16+
buttonSettings?.displayName || 'Build site',
17+
contentObject,
18+
);
19+
const buildWebhookURL = getKeyPattern(
20+
buttonSettings?.build_webhook_url,
21+
contentObject,
22+
);
23+
24+
const pluginButton = htmlElement.querySelector(
25+
'.plugin-deploy-netlify__button',
26+
);
27+
const statusMessageContainer = htmlElement.querySelector(
28+
'.plugin-deploy-netlify__status-message',
29+
);
30+
31+
// :: Update button label and onclick handler
32+
pluginButton.innerText = buttonLabel;
33+
pluginButton.onclick = () =>
34+
onBuildHandler(buttonSettings, contentObject, id);
35+
36+
// :: Disable button if object is not yet saved
37+
pluginButton.disabled = isCreating || !buildWebhookURL;
38+
39+
const updateInProgress = pluginButton.classList.contains(
40+
'plugin-deploy-netlify__button--loading',
41+
);
42+
43+
// do not update status message if update is in progress
44+
if (updateInProgress) {
45+
return;
46+
}
47+
// :: Message
48+
if (buildInstance && !isCreating) {
49+
statusMessageContainer.innerHTML = /*html*/ `
50+
<a
51+
class="plugin-deploy-netlify__link"
52+
href="${buildInstance}"
53+
target="_blank">
54+
Go to page: ${buildInstance}
55+
</a>
56+
`;
57+
} else if (isCreating) {
58+
statusMessageContainer.innerText = buildWebhookURL
59+
? 'Save the object to build site'
60+
: '';
61+
}
62+
};
63+
64+
export const createNetlifyItem = (id) => {
65+
const pluginContainerItem = document.createElement('div');
66+
pluginContainerItem.classList.add('plugin-deploy-netlify__item');
67+
68+
pluginContainerItem.innerHTML = /* html */ `
69+
<button id="${id}-button" class="plugin-deploy-netlify__button">
70+
Build site
71+
</button>
72+
<div id="${id}-status" class="plugin-deploy-netlify__status-message"></div>
73+
`;
74+
75+
return pluginContainerItem;
76+
};

0 commit comments

Comments
 (0)