From a3b348d9b6294e2bd11ae0a581716dd7eb4f707b Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Wed, 1 Mar 2023 10:44:57 +0100 Subject: [PATCH] refactor all missing html ids to kebap-case --- public/index.html | 74 +++++++++++------------ public/scripts/ui.js | 50 +++++++-------- public/styles.css | 46 +++++++------- public_included_ws_fallback/index.html | 74 +++++++++++------------ public_included_ws_fallback/scripts/ui.js | 50 +++++++-------- public_included_ws_fallback/styles.css | 46 +++++++------- 6 files changed, 170 insertions(+), 170 deletions(-) diff --git a/public/index.html b/public/index.html index 2c88850..59a257a 100644 --- a/public/index.html +++ b/public/index.html @@ -81,7 +81,7 @@
Pair devices to be discoverable on other networks
-

+

@@ -89,29 +89,29 @@ -
+
You can be discovered by everyone on this network
- +

Pair Devices

-
-

000 000

-
Input this key on another device
or scan the QR-Code.
+
+

000 000

+
Input this key on another device
or scan the QR-Code.
-
- - - - - - +
+ + + + + +
Enter key from another device to continue.
@@ -124,7 +124,7 @@ - +
@@ -139,43 +139,43 @@
- +

PairDrop

- + would like to share
-
- - +
+ +
- +
- +
- +
- + -

+

- +
@@ -183,16 +183,16 @@ - +

PairDrop

Send a Message to - +
-
+
@@ -203,36 +203,36 @@ - +

PairDrop - Message Received

-
- +
+ sent the following message:
- +
- +
- - + + - +
- +
diff --git a/public/scripts/ui.js b/public/scripts/ui.js index cd1aedd..25733b8 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -10,7 +10,7 @@ window.pasteMode.activated = false; // set display name Events.on('display-name', e => { const me = e.detail.message; - const $displayName = $('displayName') + const $displayName = $('display-name') $displayName.textContent = 'You are known as ' + me.displayName; $displayName.title = me.deviceName; }); @@ -497,10 +497,10 @@ class ReceiveDialog extends Dialog { class ReceiveFileDialog extends ReceiveDialog { constructor() { - super('receiveFileDialog'); + super('receive-file-dialog'); - this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload'); - this.$receiveTitleNode = this.$el.querySelector('#receiveTitle') + this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download'); + this.$receiveTitleNode = this.$el.querySelector('#receive-title') Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request)); this._filesQueue = []; @@ -659,15 +659,15 @@ class ReceiveFileDialog extends ReceiveDialog { class ReceiveRequestDialog extends ReceiveDialog { constructor() { - super('receiveRequestDialog'); + super('receive-request-dialog'); - this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName'); - this.$fileStemNode = this.$el.querySelector('#fileStem'); - this.$fileExtensionNode = this.$el.querySelector('#fileExtension'); - this.$fileOtherNode = this.$el.querySelector('#fileOther'); + this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name'); + this.$fileStemNode = this.$el.querySelector('#file-stem'); + this.$fileExtensionNode = this.$el.querySelector('#file-extension'); + this.$fileOtherNode = this.$el.querySelector('#file-other'); - this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest'); - this.$declineRequestBtn = this.$el.querySelector('#declineRequest'); + this.$acceptRequestBtn = this.$el.querySelector('#accept-request'); + this.$declineRequestBtn = this.$el.querySelector('#decline-request'); this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true)); this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false)); @@ -748,12 +748,12 @@ class ReceiveRequestDialog extends ReceiveDialog { class PairDeviceDialog extends Dialog { constructor() { - super('pairDeviceDialog'); + super('pair-device-dialog'); $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate()); - this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input'); + this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input'); this.$submitBtn = this.$el.querySelector('button[type="submit"]'); - this.$roomKey = this.$el.querySelector('#roomKey'); - this.$qrCode = this.$el.querySelector('#roomKeyQrCode'); + this.$roomKey = this.$el.querySelector('#room-key'); + this.$qrCode = this.$el.querySelector('#room-key-qr-code'); this.$clearSecretsBtn = $('clear-pair-devices'); this.$footerInstructionsPairedDevices = $('and-by-paired-devices'); let createJoinForm = this.$el.querySelector('form'); @@ -827,7 +827,7 @@ class PairDeviceDialog extends Dialog { } evaluateRoomKeyChars() { - if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) { + if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) { this.$submitBtn.setAttribute("disabled", ""); } else { this.inputRoomKey = ""; @@ -970,7 +970,7 @@ class PairDeviceDialog extends Dialog { class ClearDevicesDialog extends Dialog { constructor() { - super('clearDevicesDialog'); + super('clear-devices-dialog'); $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices()); let clearDevicesForm = this.$el.querySelector('form'); clearDevicesForm.addEventListener('submit', _ => this._onSubmit()); @@ -988,10 +988,10 @@ class ClearDevicesDialog extends Dialog { class SendTextDialog extends Dialog { constructor() { - super('sendTextDialog'); + super('send-text-dialog'); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); - this.$text = this.$el.querySelector('#textInput'); - this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName'); + this.$text = this.$el.querySelector('#text-input'); + this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name'); this.$form = this.$el.querySelector('form'); this.$submit = this.$el.querySelector('button[type="submit"]'); this.$form.addEventListener('submit', _ => this._send()); @@ -1048,7 +1048,7 @@ class SendTextDialog extends Dialog { class ReceiveTextDialog extends Dialog { constructor() { - super('receiveTextDialog'); + super('receive-text-dialog'); Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId)); this.$text = this.$el.querySelector('#text'); this.$copy = this.$el.querySelector('#copy'); @@ -1059,7 +1059,7 @@ class ReceiveTextDialog extends Dialog { Events.on("keydown", e => this._onKeyDown(e)); - this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName'); + this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name'); this._receiveTextQueue = []; } @@ -1120,13 +1120,13 @@ class ReceiveTextDialog extends Dialog { class Base64ZipDialog extends Dialog { constructor() { - super('base64PasteDialog'); + super('base64-paste-dialog'); const urlParams = new URL(window.location).searchParams; const base64Text = urlParams.get('base64text'); const base64Zip = urlParams.get('base64zip'); const base64Hash = window.location.hash.substring(1); - this.$pasteBtn = this.$el.querySelector('#base64PasteBtn'); + this.$pasteBtn = this.$el.querySelector('#base64-paste-btn'); if (base64Text) { this.show(); @@ -1353,7 +1353,7 @@ class Notifications { } _download(notification) { - $('shareOrDownload').click(); + $('share-or-download').click(); notification.close(); } diff --git a/public/styles.css b/public/styles.css index 25be4a1..d3c05ac 100644 --- a/public/styles.css +++ b/public/styles.css @@ -580,7 +580,7 @@ x-dialog x-paper { will-change: transform; } -#pairDeviceDialog x-paper { +#pair-device-dialog x-paper { position: absolute; top: max(50%, 350px); height: 650px; @@ -619,13 +619,13 @@ x-dialog .font-subheading { /* PairDevicesDialog */ -#keyInputContainer { +#key-input-container { width: 100%; display: flex; justify-content: center; } -#keyInputContainer>input { +#key-input-container>input { width: 45px; height: 45px; font-size: 30px; @@ -641,15 +641,15 @@ x-dialog .font-subheading { justify-content: center; } -#keyInputContainer>input + * { +#key-input-container>input + * { margin-left: 6px; } -#keyInputContainer>input:nth-of-type(4) { +#key-input-container>input:nth-of-type(4) { margin-left: 18px; } -#roomKey { +#room-key { font-size: 50px; letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px); display: inline-block; @@ -657,20 +657,20 @@ x-dialog .font-subheading { margin: 15px -15px; } -#roomKeyQrCode { +#room-key-qr-code { padding: inherit; margin: auto; width: 150px; height: 150px; } -#pairDeviceDialog hr { +#pair-device-dialog hr { margin-top: 40px; margin-bottom: 40px; width: 100%; } -#pairDeviceDialog x-background { +#pair-device-dialog x-background { padding: 16px!important; } @@ -685,8 +685,8 @@ x-dialog h2 { margin-top: 1rem; } -#receiveRequestDialog h2, -#receiveFileDialog h2 { +#receive-request-dialog h2, +#receive-file-dialog h2 { margin-bottom: 0.5rem; } @@ -715,11 +715,11 @@ x-dialog .row-reverse { word-break: normal; } -#fileName { +#file-name { font-style: italic; } -#fileStem { +#file-stem { max-width: 80%; overflow: hidden; text-overflow: ellipsis; @@ -733,13 +733,13 @@ x-dialog .row-reverse { /* Send Text Dialog */ -#textInput { +#text-input { min-height: 120px; } /* Receive Text Dialog */ -#receiveTextDialog #text { +#receive-text-dialog #text { width: 100%; word-break: break-all; max-height: 300px; @@ -752,15 +752,15 @@ x-dialog .row-reverse { margin-top:36px; } -#receiveTextDialog #text a { +#receive-text-dialog #text a { cursor: pointer; } -#receiveTextDialog #text a:hover { +#receive-text-dialog #text a:hover { text-decoration: underline; } -#receiveTextDialog h3 { +#receive-text-dialog h3 { /* Select the received text when double-clicking the dialog */ user-select: none; pointer-events: none; @@ -771,26 +771,26 @@ x-dialog .row-reverse { margin: auto -25px; } -#receiveTextDescriptionContainer { +#receive-text-description-container { margin-bottom: 25px; } -#base64PasteBtn { +#base64-paste-btn { width: 100%; height: 40vh; border: solid 12px #438cff; } -#base64PasteDialog button { +#base64-paste-dialog button { margin: auto; border-radius: 8px; } -#base64PasteDialog button[close] { +#base64-paste-dialog button[close] { margin-top: 20px; } -#base64PasteDialog button[close]:before { +#base64-paste-dialog button[close]:before { border-radius: 8px; } diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html index b5042a8..8227434 100644 --- a/public_included_ws_fallback/index.html +++ b/public_included_ws_fallback/index.html @@ -81,7 +81,7 @@
Pair devices to be discoverable on other networks
-

+

@@ -89,7 +89,7 @@ -
+
You can be discovered by everyone on this network @@ -99,22 +99,22 @@
- +

Pair Devices

-
-

000 000

-
Input this key on another device
or scan the QR-Code.
+
+

000 000

+
Input this key on another device
or scan the QR-Code.
-
- - - - - - +
+ + + + + +
Enter key from another device to continue.
@@ -127,7 +127,7 @@ - +
@@ -142,43 +142,43 @@
- +

PairDrop

- + would like to share
-
- - +
+ +
- +
- +
- +
- + -

+

- +
@@ -186,16 +186,16 @@ - +

PairDrop

Send a Message to - +
-
+
@@ -206,36 +206,36 @@ - +

PairDrop - Message Received

-
- +
+ sent the following message:
- +
- +
- - + + - +
- +
diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index d368173..dadfb02 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/public_included_ws_fallback/scripts/ui.js @@ -10,7 +10,7 @@ window.pasteMode.activated = false; // set display name Events.on('display-name', e => { const me = e.detail.message; - const $displayName = $('displayName') + const $displayName = $('display-name') $displayName.textContent = 'You are known as ' + me.displayName; $displayName.title = me.deviceName; }); @@ -498,10 +498,10 @@ class ReceiveDialog extends Dialog { class ReceiveFileDialog extends ReceiveDialog { constructor() { - super('receiveFileDialog'); + super('receive-file-dialog'); - this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload'); - this.$receiveTitleNode = this.$el.querySelector('#receiveTitle') + this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download'); + this.$receiveTitleNode = this.$el.querySelector('#receive-title') Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request)); this._filesQueue = []; @@ -660,15 +660,15 @@ class ReceiveFileDialog extends ReceiveDialog { class ReceiveRequestDialog extends ReceiveDialog { constructor() { - super('receiveRequestDialog'); + super('receive-request-dialog'); - this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName'); - this.$fileStemNode = this.$el.querySelector('#fileStem'); - this.$fileExtensionNode = this.$el.querySelector('#fileExtension'); - this.$fileOtherNode = this.$el.querySelector('#fileOther'); + this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name'); + this.$fileStemNode = this.$el.querySelector('#file-stem'); + this.$fileExtensionNode = this.$el.querySelector('#file-extension'); + this.$fileOtherNode = this.$el.querySelector('#file-other'); - this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest'); - this.$declineRequestBtn = this.$el.querySelector('#declineRequest'); + this.$acceptRequestBtn = this.$el.querySelector('#accept-request'); + this.$declineRequestBtn = this.$el.querySelector('#decline-request'); this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true)); this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false)); @@ -749,12 +749,12 @@ class ReceiveRequestDialog extends ReceiveDialog { class PairDeviceDialog extends Dialog { constructor() { - super('pairDeviceDialog'); + super('pair-device-dialog'); $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate()); - this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input'); + this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input'); this.$submitBtn = this.$el.querySelector('button[type="submit"]'); - this.$roomKey = this.$el.querySelector('#roomKey'); - this.$qrCode = this.$el.querySelector('#roomKeyQrCode'); + this.$roomKey = this.$el.querySelector('#room-key'); + this.$qrCode = this.$el.querySelector('#room-key-qr-code'); this.$clearSecretsBtn = $('clear-pair-devices'); this.$footerInstructionsPairedDevices = $('and-by-paired-devices'); let createJoinForm = this.$el.querySelector('form'); @@ -828,7 +828,7 @@ class PairDeviceDialog extends Dialog { } evaluateRoomKeyChars() { - if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) { + if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) { this.$submitBtn.setAttribute("disabled", ""); } else { this.inputRoomKey = ""; @@ -971,7 +971,7 @@ class PairDeviceDialog extends Dialog { class ClearDevicesDialog extends Dialog { constructor() { - super('clearDevicesDialog'); + super('clear-devices-dialog'); $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices()); let clearDevicesForm = this.$el.querySelector('form'); clearDevicesForm.addEventListener('submit', _ => this._onSubmit()); @@ -989,10 +989,10 @@ class ClearDevicesDialog extends Dialog { class SendTextDialog extends Dialog { constructor() { - super('sendTextDialog'); + super('send-text-dialog'); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); - this.$text = this.$el.querySelector('#textInput'); - this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName'); + this.$text = this.$el.querySelector('#text-input'); + this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name'); this.$form = this.$el.querySelector('form'); this.$submit = this.$el.querySelector('button[type="submit"]'); this.$form.addEventListener('submit', _ => this._send()); @@ -1049,7 +1049,7 @@ class SendTextDialog extends Dialog { class ReceiveTextDialog extends Dialog { constructor() { - super('receiveTextDialog'); + super('receive-text-dialog'); Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId)); this.$text = this.$el.querySelector('#text'); this.$copy = this.$el.querySelector('#copy'); @@ -1060,7 +1060,7 @@ class ReceiveTextDialog extends Dialog { Events.on("keydown", e => this._onKeyDown(e)); - this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName'); + this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name'); this._receiveTextQueue = []; } @@ -1121,13 +1121,13 @@ class ReceiveTextDialog extends Dialog { class Base64ZipDialog extends Dialog { constructor() { - super('base64PasteDialog'); + super('base64-paste-dialog'); const urlParams = new URL(window.location).searchParams; const base64Text = urlParams.get('base64text'); const base64Zip = urlParams.get('base64zip'); const base64Hash = window.location.hash.substring(1); - this.$pasteBtn = this.$el.querySelector('#base64PasteBtn'); + this.$pasteBtn = this.$el.querySelector('#base64-paste-btn'); if (base64Text) { this.show(); @@ -1354,7 +1354,7 @@ class Notifications { } _download(notification) { - $('shareOrDownload').click(); + $('share-or-download').click(); notification.close(); } diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index 60bb6a6..f153398 100644 --- a/public_included_ws_fallback/styles.css +++ b/public_included_ws_fallback/styles.css @@ -606,7 +606,7 @@ x-dialog x-paper { will-change: transform; } -#pairDeviceDialog x-paper { +#pair-device-dialog x-paper { position: absolute; top: max(50%, 350px); height: 650px; @@ -645,13 +645,13 @@ x-dialog .font-subheading { /* PairDevicesDialog */ -#keyInputContainer { +#key-input-container { width: 100%; display: flex; justify-content: center; } -#keyInputContainer>input { +#key-input-container>input { width: 45px; height: 45px; font-size: 30px; @@ -667,15 +667,15 @@ x-dialog .font-subheading { justify-content: center; } -#keyInputContainer>input + * { +#key-input-container>input + * { margin-left: 6px; } -#keyInputContainer>input:nth-of-type(4) { +#key-input-container>input:nth-of-type(4) { margin-left: 18px; } -#roomKey { +#room-key { font-size: 50px; letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px); display: inline-block; @@ -683,20 +683,20 @@ x-dialog .font-subheading { margin: 15px -15px; } -#roomKeyQrCode { +#room-key-qr-code { padding: inherit; margin: auto; width: 150px; height: 150px; } -#pairDeviceDialog hr { +#pair-device-dialog hr { margin-top: 40px; margin-bottom: 40px; width: 100%; } -#pairDeviceDialog x-background { +#pair-device-dialog x-background { padding: 16px!important; } @@ -711,8 +711,8 @@ x-dialog h2 { margin-top: 1rem; } -#receiveRequestDialog h2, -#receiveFileDialog h2 { +#receive-request-dialog h2, +#receive-file-dialog h2 { margin-bottom: 0.5rem; } @@ -741,11 +741,11 @@ x-dialog .row-reverse { word-break: normal; } -#fileName { +#file-name { font-style: italic; } -#fileStem { +#file-stem { max-width: 80%; overflow: hidden; text-overflow: ellipsis; @@ -759,13 +759,13 @@ x-dialog .row-reverse { /* Send Text Dialog */ -#textInput { +#text-input { min-height: 120px; } /* Receive Text Dialog */ -#receiveTextDialog #text { +#receive-text-dialog #text { width: 100%; word-break: break-all; max-height: 300px; @@ -778,15 +778,15 @@ x-dialog .row-reverse { margin-top:36px; } -#receiveTextDialog #text a { +#receive-text-dialog #text a { cursor: pointer; } -#receiveTextDialog #text a:hover { +#receive-text-dialog #text a:hover { text-decoration: underline; } -#receiveTextDialog h3 { +#receive-text-dialog h3 { /* Select the received text when double-clicking the dialog */ user-select: none; pointer-events: none; @@ -797,26 +797,26 @@ x-dialog .row-reverse { margin: auto -25px; } -#receiveTextDescriptionContainer { +#receive-text-description-container { margin-bottom: 25px; } -#base64PasteBtn { +#base64-paste-btn { width: 100%; height: 40vh; border: solid 12px #438cff; } -#base64PasteDialog button { +#base64-paste-dialog button { margin: auto; border-radius: 8px; } -#base64PasteDialog button[close] { +#base64-paste-dialog button[close] { margin-top: 20px; } -#base64PasteDialog button[close]:before { +#base64-paste-dialog button[close]:before { border-radius: 8px; }