Skip to content

Commit

Permalink
Rename private elements field with underscore prefix (#1758)
Browse files Browse the repository at this point in the history 
Related #1120

This is non-functional change.

Notes
* Pattern matched: `this\.elements(?=\W)`
   Replaced with: `this._elements`

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1758"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>
  • Loading branch information
@jdeanwallace
jdeanwallace authored Mar 28, 2024
1 parent 95e46c6 commit 2d14eeb
Show file tree
Hide file tree
Showing 12 changed files with 140 additions and 134 deletions.
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,13 +415,13 @@ This event will be picked up by the `overlay-panel` which will hide the X close
### Create element references in `connectedCallback()`
If a component's JavaScript requires access to any of the elements in the web component's HTML, assign those elements an `id` attribute and store them in a member object called `this.elements`
If a component's JavaScript requires access to any of the elements in the web component's HTML, assign those elements an `id` attribute and store them in a member object called `this._elements`
```javascript
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.elements = {
this._elements = {
noFilesText: this.shadowRoot.getElementById("no-backing-files"),
table: this.shadowRoot.getElementById("backing-files-table"),
tableBody: this.shadowRoot.getElementById("table-body"),
Expand Down
10 changes: 5 additions & 5 deletions app/templates/custom-elements/button-dropdown.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@
this._handleCloseOnOutsideClick =
this._handleCloseOnOutsideClick.bind(this);

this.elements = {
this._elements = {
dropdownButton: this.shadowRoot.getElementById("dropdown-button"),
dropdownItems: this.shadowRoot.getElementById("dropdown-items"),
};
this.elements.dropdownButton.addEventListener("click", () =>
this._elements.dropdownButton.addEventListener("click", () =>
this._toggleDropdown()
);
}
Expand All @@ -91,18 +91,18 @@
}

_isDropdownShowing() {
return this.elements.dropdownItems.style.display === "block";
return this._elements.dropdownItems.style.display === "block";
}

_showDropdown() {
this.elements.dropdownItems.style.display = "block";
this._elements.dropdownItems.style.display = "block";
// `addEventListener` will only register a function once, so it’s safe
// to call this method multiple times.
document.addEventListener("click", this._handleCloseOnOutsideClick);
}

_closeDropdown() {
this.elements.dropdownItems.style.display = "none";
this._elements.dropdownItems.style.display = "none";
document.removeEventListener(
"click",
this._handleCloseOnOutsideClick
Expand Down
32 changes: 16 additions & 16 deletions app/templates/custom-elements/change-hostname-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ <h3>Changing Hostname</h3>
this.attachShadow({ mode: "open" }).appendChild(
template.content.cloneNode(true)
);
this.elements = {
this._elements = {
inputError: this.shadowRoot.getElementById("input-error"),
hostnameInput: this.shadowRoot.getElementById("hostname-input"),
changeAndRestart:
Expand All @@ -126,18 +126,18 @@ <h3>Changing Hostname</h3>
futureLocation: this.shadowRoot.getElementById("future-location"),
};

this.elements.hostnameInput.addEventListener("input", () => {
this._elements.hostnameInput.addEventListener("input", () => {
this._onInputChanged();
});
this.elements.changeAndRestart.addEventListener("click", () => {
this._elements.changeAndRestart.addEventListener("click", () => {
this._doChangeHostname();
});
this.elements.hostnameInput.addEventListener("keydown", (evt) => {
this._elements.hostnameInput.addEventListener("keydown", (evt) => {
if (evt.code === "Enter") {
this.elements.changeAndRestart.click();
this._elements.changeAndRestart.click();
}
});
this.elements.cancelHostnameChange.addEventListener("click", () => {
this._elements.cancelHostnameChange.addEventListener("click", () => {
this.dispatchEvent(new DialogClosedEvent());
});
}
Expand All @@ -164,15 +164,15 @@ <h3>Changing Hostname</h3>
}

initialize() {
this.elements.inputError.hide();
this._elements.inputError.hide();
this.state = this.states.INITIALIZING;
determineHostname()
.then((hostname) => {
this.initialHostname = hostname;
this.elements.hostnameInput.value = hostname;
this._elements.hostnameInput.value = hostname;
this._onInputChanged(hostname);
this.state = this.states.PROMPT;
this.elements.hostnameInput.focus();
this._elements.hostnameInput.focus();
})
.catch((error) => {
this.dispatchEvent(
Expand All @@ -186,14 +186,14 @@ <h3>Changing Hostname</h3>

_onInputChanged() {
const isEqualToInitialValue =
this.elements.hostnameInput.value === this.initialHostname;
const isEmpty = this.elements.hostnameInput.value === "";
this.elements.changeAndRestart.disabled =
this._elements.hostnameInput.value === this.initialHostname;
const isEmpty = this._elements.hostnameInput.value === "";
this._elements.changeAndRestart.disabled =
isEmpty || isEqualToInitialValue;
}

_doChangeHostname() {
changeHostname(this.elements.hostnameInput.value)
changeHostname(this._elements.hostnameInput.value)
.then((newHostname) => {
return shutdown(/*restart=*/ true).then(() => newHostname);
})
Expand All @@ -205,16 +205,16 @@ <h3>Changing Hostname</h3>
);
})
.then((redirectURL) => {
this.elements.futureLocation.innerText = redirectURL;
this.elements.futureLocation.href = redirectURL;
this._elements.futureLocation.innerText = redirectURL;
this._elements.futureLocation.href = redirectURL;
this.state = this.states.CHANGING;
return this._waitForReboot(redirectURL);
})
.catch((error) => {
if (error.code === "INVALID_HOSTNAME") {
// Display validation errors inline in order to make it more
// convenient for the user to correct them.
this.elements.inputError.show();
this._elements.inputError.show();
this.state = this.states.PROMPT;
return;
}
Expand Down
10 changes: 5 additions & 5 deletions app/templates/custom-elements/debug-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,15 @@ <h3>Debug Logs</h3>
redacted: null, // The text with sensitive data being redacted.
};

this.elements = {
this._elements = {
includeSensitiveData: this.shadowRoot.getElementById(
"include-sensitive-data"
),
logsText: this.shadowRoot.querySelector("#logs-success .logs"),
shareLogsButton:
this.shadowRoot.querySelector("#share-logs-button"),
};
this.elements.includeSensitiveData.addEventListener(
this._elements.includeSensitiveData.addEventListener(
"input",
(event) => {
this.includeSensitiveData = !event.target.checked;
Expand Down Expand Up @@ -168,7 +168,7 @@ <h3>Debug Logs</h3>
}

_getLogTextAsDisplayed() {
return this.elements.logsText.textContent;
return this._elements.logsText.textContent;
}

/**
Expand All @@ -182,8 +182,8 @@ <h3>Debug Logs</h3>
const logsDisplayText = this.includeSensitiveData
? this._logText.original
: this._logText.redacted;
this.elements.logsText.textContent = logsDisplayText;
this.elements.shareLogsButton.initialize(
this._elements.logsText.textContent = logsDisplayText;
this._elements.shareLogsButton.initialize(
/*getLogsTextCb=*/ () => logsDisplayText
);
}
Expand Down
4 changes: 2 additions & 2 deletions app/templates/custom-elements/feature-pro-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ <h3>This Feature is Available in TinyPilot Pro</h3>
this.attachShadow({ mode: "open" }).appendChild(
template.content.cloneNode(true)
);
this.elements = {
this._elements = {
cancelUpgradeToPro: this.shadowRoot.getElementById(
"cancel-upgrade-to-pro"
),
};
this.elements.cancelUpgradeToPro.addEventListener("click", () => {
this._elements.cancelUpgradeToPro.addEventListener("click", () => {
this.dispatchEvent(new DialogClosedEvent());
});
}
Expand Down
10 changes: 5 additions & 5 deletions app/templates/custom-elements/overlay-panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
this.attachShadow({ mode: "open" }).appendChild(
template.content.cloneNode(true)
);
this.elements = {
this._elements = {
dialog: this.shadowRoot.querySelector("#panel"),
};
this.show = this.show.bind(this);
Expand Down Expand Up @@ -105,16 +105,16 @@

// Prevent auto-close behavior of native <dialog> if the user presses
// the ESC key.
this.elements.dialog.addEventListener("cancel", (evt) => {
this._elements.dialog.addEventListener("cancel", (evt) => {
evt.preventDefault();
});
}

show(isShown = true) {
if (isShown) {
this.elements.dialog.showModal();
this._elements.dialog.showModal();
} else {
this.elements.dialog.close();
this._elements.dialog.close();
}
this.dispatchEvent(
new CustomEvent("overlay-toggled", {
Expand All @@ -126,7 +126,7 @@
}

isShown() {
return this.elements.dialog.open;
return this._elements.dialog.open;
}
}
);
Expand Down
24 changes: 12 additions & 12 deletions app/templates/custom-elements/paste-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,41 +45,41 @@ <h3>Paste Text</h3>
this.attachShadow({ mode: "open" }).appendChild(
template.content.cloneNode(true)
);
this.elements = {
this._elements = {
pasteArea: this.shadowRoot.querySelector("#paste-area"),
confirmButton: this.shadowRoot.querySelector("#confirm-btn"),
cancelButton: this.shadowRoot.querySelector("#cancel-btn"),
};
this.elements.pasteArea.addEventListener("input", () =>
this.elements.confirmButton.toggleAttribute(
this._elements.pasteArea.addEventListener("input", () =>
this._elements.confirmButton.toggleAttribute(
"disabled",
this.elements.pasteArea.value.length === 0
this._elements.pasteArea.value.length === 0
)
);
this.elements.pasteArea.addEventListener("keydown", (evt) => {
this._elements.pasteArea.addEventListener("keydown", (evt) => {
if (evt.code === "Enter" && !evt.shiftKey) {
evt.preventDefault();
this.elements.confirmButton.click();
this._elements.confirmButton.click();
// Prevent this keystroke from being forwarded to the target system.
evt.stopPropagation();
}
});
this.elements.confirmButton.addEventListener("click", () =>
this._elements.confirmButton.addEventListener("click", () =>
this._handleConfirmPaste()
);
this.elements.cancelButton.addEventListener("click", () =>
this._elements.cancelButton.addEventListener("click", () =>
this._closeDialog()
);
}

initialize() {
this.elements.pasteArea.value = "";
this.elements.pasteArea.focus();
this.elements.confirmButton.toggleAttribute("disabled", true);
this._elements.pasteArea.value = "";
this._elements.pasteArea.focus();
this._elements.confirmButton.toggleAttribute("disabled", true);
}

_handleConfirmPaste() {
const text = this.elements.pasteArea.value;
const text = this._elements.pasteArea.value;
const language = this._browserLanguage();
pasteText(text, language)
.then(() => this._closeDialog())
Expand Down
30 changes: 15 additions & 15 deletions app/templates/custom-elements/remote-screen.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
template.content.cloneNode(true)
);

this.elements = {
this._elements = {
video: this.shadowRoot.getElementById("webrtc-output"),
image: this.shadowRoot.getElementById("mjpeg-output"),
};
Expand All @@ -140,10 +140,10 @@
// spinner for the browser tab. Therefore, we need to initialize the
// source object lazily whenever we want to access it, and clear it
// when we don’t need it anymore.
this.elements.video.srcObject = null;
this._elements.video.srcObject = null;

this._addScreenEventListeners(this.elements.video);
this._addScreenEventListeners(this.elements.image);
this._addScreenEventListeners(this._elements.video);
this._addScreenEventListeners(this._elements.image);

window.addEventListener("resize", this.onWindowResize);

Expand Down Expand Up @@ -337,7 +337,7 @@
* unmute the audio track. (Which might not succeed, though.)
*/
async enableWebrtc() {
const video = this.elements.video;
const video = this._elements.video;
if (!video.srcObject) {
return;
}
Expand All @@ -364,7 +364,7 @@
return;
}
this.webrtcEnabled = true;
this.elements.image.removeAttribute("src");
this._elements.image.removeAttribute("src");
this.dispatchEvent(new VideoStreamingModeChangedEvent("H264"));
}

Expand All @@ -374,7 +374,7 @@
* @param {MediaStreamTrack} mediaStreamTrack - https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack
*/
async addWebrtcStreamTrack(mediaStreamTrack) {
const video = this.elements.video;
const video = this._elements.video;
if (!video.srcObject) {
// Lazy-initialize the media stream. (See comment in
// `connectedCallback`.)
Expand Down Expand Up @@ -407,7 +407,7 @@
* @param {MediaStreamTrack} mediaStreamTrack - https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack
*/
removeWebrtcStreamTrack(mediaStreamTrack) {
const video = this.elements.video;
const video = this._elements.video;
if (!video.srcObject) {
return;
}
Expand All @@ -425,7 +425,7 @@
* retry playing, so that we at least end up having video active.
*/
async _playWebrtcVideo(shouldRetryWithMuting = true) {
const video = this.elements.video;
const video = this._elements.video;

try {
await video.play();
Expand Down Expand Up @@ -472,7 +472,7 @@
* eligible. We have to act on best guess basis here.
*/
_onGlobalUserInteraction() {
const video = this.elements.video;
const video = this._elements.video;
if (!this.webrtcEnabled || video.muted === false) {
return;
}
Expand All @@ -489,21 +489,21 @@
* Displays the MJPEG stream while hiding the WebRTC stream.
*/
enableMjpeg() {
if (this.elements.image.hasAttribute("src")) {
if (this._elements.image.hasAttribute("src")) {
return;
}
this.elements.image.src = "/stream?advance_headers=1";
this._elements.image.src = "/stream?advance_headers=1";
this.webrtcEnabled = false;
// Clean up the media stream. (See comment in `connectedCallback`.)
this.elements.video.srcObject = null;
this._elements.video.srcObject = null;
this.dispatchEvent(new VideoStreamingModeChangedEvent("MJPEG"));
}

_getCurrentScreenElement() {
if (this.webrtcEnabled) {
return this.elements.video;
return this._elements.video;
} else {
return this.elements.image;
return this._elements.image;
}
}
}
Expand Down
Loading

0 comments on commit 2d14eeb

Please sign in to comment.