refactor all missing html ids to kebap-case
This commit is contained in:
schlagmichdoch
parent
4566528179
commit
a3b348d9b6
6 changed files with 170 additions and 170 deletions
|
|
@ -81,7 +81,7 @@
|
|||
<div>Pair devices to be discoverable on other networks</div>
|
||||
</x-no-peers>
|
||||
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
|
||||
<p id="pasteFilename"></p>
|
||||
<p id="paste-filename"></p>
|
||||
</x-instructions>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
|
|
@ -89,29 +89,29 @@
|
|||
<svg class="icon logo">
|
||||
<use xlink:href="#wifi-tethering" />
|
||||
</svg>
|
||||
<div id="displayName" placeholder=" "></div>
|
||||
<div id="display-name" placeholder=" "></div>
|
||||
<div class="font-body2">
|
||||
You can be discovered by everyone <span id="on-this-network">on this network</span>
|
||||
<span id="and-by-paired-devices" hidden> and by <span id="paired-devices">paired devices</span></span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Pair Device Dialog -->
|
||||
<x-dialog id="pairDeviceDialog">
|
||||
<x-dialog id="pair-device-dialog">
|
||||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="center">Pair Devices</h2>
|
||||
<div class="center" id="roomKeyQrCode"></div>
|
||||
<h1 class="center" id="roomKey">000 000</h1>
|
||||
<div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
|
||||
<div id="room-key-qr-code" class="center"></div>
|
||||
<h1 id="room-key" class="center">000 000</h1>
|
||||
<div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
|
||||
<hr>
|
||||
<div id="keyInputContainer">
|
||||
<input type="tel" id="char0" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char1" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char2" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char3" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char4" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char5" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<div id="key-input-container">
|
||||
<input id="char0" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
|
||||
<input id="char1" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char2" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char3" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char4" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char5" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
</div>
|
||||
<div class="font-subheading center text-center">Enter key from another device to continue.</div>
|
||||
<div class="row-reverse space-between">
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
</form>
|
||||
</x-dialog>
|
||||
<!-- Clear Devices Dialog -->
|
||||
<x-dialog id="clearDevicesDialog">
|
||||
<x-dialog id="clear-devices-dialog">
|
||||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
|
|
@ -139,43 +139,43 @@
|
|||
</form>
|
||||
</x-dialog>
|
||||
<!-- Receive Request Dialog -->
|
||||
<x-dialog id="receiveRequestDialog">
|
||||
<x-dialog id="receive-request-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="center">PairDrop</h2>
|
||||
<div class="text-center file-description">
|
||||
<div>
|
||||
<span id="requestingPeerDisplayName"></span>
|
||||
<span id="requesting-peer-display-name"></span>
|
||||
<span>would like to share</span>
|
||||
</div>
|
||||
<div class="row" id="fileName">
|
||||
<span id="fileStem"></span>
|
||||
<span id="fileExtension"></span>
|
||||
<div id="file-name" class="row" >
|
||||
<span id="file-stem"></span>
|
||||
<span id="file-extension"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span id="fileOther"></span>
|
||||
<span id="file-other"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-body2 text-center file-size"></div>
|
||||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse space-between">
|
||||
<button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button>
|
||||
<button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
|
||||
<div class="separator"></div>
|
||||
<button class="button" id="declineRequest" title="ESCAPE">Decline</button>
|
||||
<button id="decline-request" class="button" title="ESCAPE">Decline</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- Receive File Dialog -->
|
||||
<x-dialog id="receiveFileDialog">
|
||||
<x-dialog id="receive-file-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="center" id="receiveTitle"></h2>
|
||||
<h2 id="receive-title" class="center"></h2>
|
||||
<div class="text-center file-description"></div>
|
||||
<div class="font-body2 text-center file-size"></div>
|
||||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse space-between">
|
||||
<a class="button" id="shareOrDownload" autofocus></a>
|
||||
<a id="share-or-download" class="button" autofocus></a>
|
||||
<div class="separator"></div>
|
||||
<button class="button" close>Close</button>
|
||||
</div>
|
||||
|
|
@ -183,16 +183,16 @@
|
|||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- Send Text Dialog -->
|
||||
<x-dialog id="sendTextDialog">
|
||||
<x-dialog id="send-text-dialog">
|
||||
<form action="#">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="text-center">PairDrop</h2>
|
||||
<div class="text-center">
|
||||
<span>Send a Message to</span>
|
||||
<span id="textSendPeerDisplayName"></span>
|
||||
<span id="text-send-peer-display-name"></span>
|
||||
</div>
|
||||
<div id="textInput" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
|
||||
<div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
|
||||
<div class="row-reverse">
|
||||
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
|
||||
<div class="separator"></div>
|
||||
|
|
@ -203,36 +203,36 @@
|
|||
</form>
|
||||
</x-dialog>
|
||||
<!-- Receive Text Dialog -->
|
||||
<x-dialog id="receiveTextDialog">
|
||||
<x-dialog id="receive-text-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2>PairDrop - Message Received</h2>
|
||||
<div id="receiveTextDescriptionContainer">
|
||||
<span id="receiveTextPeerDisplayName"></span>
|
||||
<div id="receive-text-description-container">
|
||||
<span id="receive-text-peer-display-name"></span>
|
||||
<span>sent the following message:</span>
|
||||
</div>
|
||||
<div class="row-separator"></div>
|
||||
<div id="text"></div>
|
||||
<div class="row-reverse">
|
||||
<button class="button" id="copy" title="CTRL/⌘ + C">Copy</button>
|
||||
<button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
|
||||
<div class="separator"></div>
|
||||
<button class="button" id="close" title="ESCAPE">Close</button>
|
||||
<button id="close" class="button" title="ESCAPE">Close</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- base64PasteDialog Dialog -->
|
||||
<x-dialog id="base64PasteDialog">
|
||||
<!-- base64 Paste Dialog -->
|
||||
<x-dialog id="base64-paste-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<button class="button center" id="base64PasteBtn" title="Paste">Tap here to paste files</button>
|
||||
<button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
|
||||
<button class="button center" close>Close</button>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- Toast -->
|
||||
<div class="toast-container full center">
|
||||
<x-toast class="row" shadow="1" id="toast"></x-toast>
|
||||
<x-toast id="toast" class="row" shadow="1"></x-toast>
|
||||
</div>
|
||||
<!-- About Page -->
|
||||
<x-about id="about" class="full center column">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
<div>Pair devices to be discoverable on other networks</div>
|
||||
</x-no-peers>
|
||||
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
|
||||
<p id="pasteFilename"></p>
|
||||
<p id="paste-filename"></p>
|
||||
</x-instructions>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<svg class="icon logo">
|
||||
<use xlink:href="#wifi-tethering" />
|
||||
</svg>
|
||||
<div id="displayName" placeholder=" "></div>
|
||||
<div id="display-name" placeholder=" "></div>
|
||||
<div class="font-body2">
|
||||
You can be discovered by everyone <span id="on-this-network">on this network</span>
|
||||
<span id="and-by-paired-devices" hidden> and by <span id="paired-devices">paired devices</span></span>
|
||||
|
|
@ -99,22 +99,22 @@
|
|||
</div>
|
||||
</footer>
|
||||
<!-- Pair Device Dialog -->
|
||||
<x-dialog id="pairDeviceDialog">
|
||||
<x-dialog id="pair-device-dialog">
|
||||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="center">Pair Devices</h2>
|
||||
<div class="center" id="roomKeyQrCode"></div>
|
||||
<h1 class="center" id="roomKey">000 000</h1>
|
||||
<div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
|
||||
<div id="room-key-qr-code" class="center"></div>
|
||||
<h1 id="room-key" class="center">000 000</h1>
|
||||
<div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
|
||||
<hr>
|
||||
<div id="keyInputContainer">
|
||||
<input type="tel" id="char0" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char1" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char2" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char3" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char4" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input type="tel" id="char5" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<div id="key-input-container">
|
||||
<input id="char0" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
|
||||
<input id="char1" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char2" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char3" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char4" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
<input id="char5" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
|
||||
</div>
|
||||
<div class="font-subheading center text-center">Enter key from another device to continue.</div>
|
||||
<div class="row-reverse space-between">
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
</form>
|
||||
</x-dialog>
|
||||
<!-- Clear Devices Dialog -->
|
||||
<x-dialog id="clearDevicesDialog">
|
||||
<x-dialog id="clear-devices-dialog">
|
||||
<form action="#">
|
||||
<x-background class="full center text-center">
|
||||
<x-paper shadow="2">
|
||||
|
|
@ -142,43 +142,43 @@
|
|||
</form>
|
||||
</x-dialog>
|
||||
<!-- Receive Request Dialog -->
|
||||
<x-dialog id="receiveRequestDialog">
|
||||
<x-dialog id="receive-request-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="center">PairDrop</h2>
|
||||
<div class="text-center file-description">
|
||||
<div>
|
||||
<span id="requestingPeerDisplayName"></span>
|
||||
<span id="requesting-peer-display-name"></span>
|
||||
<span>would like to share</span>
|
||||
</div>
|
||||
<div class="row" id="fileName">
|
||||
<span id="fileStem"></span>
|
||||
<span id="fileExtension"></span>
|
||||
<div id="file-name" class="row" >
|
||||
<span id="file-stem"></span>
|
||||
<span id="file-extension"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span id="fileOther"></span>
|
||||
<span id="file-other"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-body2 text-center file-size"></div>
|
||||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse space-between">
|
||||
<button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button>
|
||||
<button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
|
||||
<div class="separator"></div>
|
||||
<button class="button" id="declineRequest" title="ESCAPE">Decline</button>
|
||||
<button id="decline-request" class="button" title="ESCAPE">Decline</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- Receive File Dialog -->
|
||||
<x-dialog id="receiveFileDialog">
|
||||
<x-dialog id="receive-file-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="center" id="receiveTitle"></h2>
|
||||
<h2 id="receive-title" class="center"></h2>
|
||||
<div class="text-center file-description"></div>
|
||||
<div class="font-body2 text-center file-size"></div>
|
||||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse space-between">
|
||||
<a class="button" id="shareOrDownload" autofocus></a>
|
||||
<a id="share-or-download" class="button" autofocus></a>
|
||||
<div class="separator"></div>
|
||||
<button class="button" close>Close</button>
|
||||
</div>
|
||||
|
|
@ -186,16 +186,16 @@
|
|||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- Send Text Dialog -->
|
||||
<x-dialog id="sendTextDialog">
|
||||
<x-dialog id="send-text-dialog">
|
||||
<form action="#">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2 class="text-center">PairDrop</h2>
|
||||
<div class="text-center">
|
||||
<span>Send a Message to</span>
|
||||
<span id="textSendPeerDisplayName"></span>
|
||||
<span id="text-send-peer-display-name"></span>
|
||||
</div>
|
||||
<div id="textInput" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
|
||||
<div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
|
||||
<div class="row-reverse">
|
||||
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
|
||||
<div class="separator"></div>
|
||||
|
|
@ -206,36 +206,36 @@
|
|||
</form>
|
||||
</x-dialog>
|
||||
<!-- Receive Text Dialog -->
|
||||
<x-dialog id="receiveTextDialog">
|
||||
<x-dialog id="receive-text-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h2>PairDrop - Message Received</h2>
|
||||
<div id="receiveTextDescriptionContainer">
|
||||
<span id="receiveTextPeerDisplayName"></span>
|
||||
<div id="receive-text-description-container">
|
||||
<span id="receive-text-peer-display-name"></span>
|
||||
<span>sent the following message:</span>
|
||||
</div>
|
||||
<div class="row-separator"></div>
|
||||
<div id="text"></div>
|
||||
<div class="row-reverse">
|
||||
<button class="button" id="copy" title="CTRL/⌘ + C">Copy</button>
|
||||
<button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
|
||||
<div class="separator"></div>
|
||||
<button class="button" id="close" title="ESCAPE">Close</button>
|
||||
<button id="close" class="button" title="ESCAPE">Close</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- base64PasteDialog Dialog -->
|
||||
<x-dialog id="base64PasteDialog">
|
||||
<!-- base64 Paste Dialog -->
|
||||
<x-dialog id="base64-paste-dialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<button class="button center" id="base64PasteBtn" title="Paste">Tap here to paste files</button>
|
||||
<button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
|
||||
<button class="button center" close>Close</button>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
</x-dialog>
|
||||
<!-- Toast -->
|
||||
<div class="toast-container full center">
|
||||
<x-toast class="row" shadow="1" id="toast"></x-toast>
|
||||
<x-toast id="toast" class="row" shadow="1"></x-toast>
|
||||
</div>
|
||||
<!-- About Page -->
|
||||
<x-about id="about" class="full center column">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue