mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-25 01:06:17 -04:00
Feature Request: Send text instead of files
This commit is contained in:
Robin Linus
parent
ce61dc7c60
commit
0e008a5f31
9 changed files with 288 additions and 111 deletions
36
app/elements/text-sharing/clipboard-behavior.html
Normal file
36
app/elements/text-sharing/clipboard-behavior.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
'use strict';
|
||||
(function(document) {
|
||||
var copyTextarea = document.createElement('textarea');
|
||||
copyTextarea.setAttribute('id', 'clipboard-textarea');
|
||||
var style = copyTextarea.style;
|
||||
style.position = 'absolute';
|
||||
style.top = '-10000px';
|
||||
document.body.appendChild(copyTextarea);
|
||||
|
||||
window.Chat.ClipboardBehavior = {
|
||||
copyToClipboard: function(content) {
|
||||
copyTextarea.value = content;
|
||||
var range = document.createRange();
|
||||
range.selectNode(copyTextarea);
|
||||
window.getSelection().addRange(range);
|
||||
|
||||
try {
|
||||
// Now that we've selected the anchor text, execute the copy command
|
||||
var successful = document.execCommand('copy');
|
||||
if (successful) {
|
||||
app.displayToast('Copied text to clipboard. Paste it where you want!');
|
||||
} else {
|
||||
console.log('failed to copy to clipboard', successful);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Oops, unable to copy', err);
|
||||
}
|
||||
|
||||
// Remove the selections - NOTE: Should use
|
||||
// removeRange(range) when it is supported
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
};
|
||||
}(document));
|
||||
</script>
|
||||
5
app/elements/text-sharing/linkify.html
Normal file
5
app/elements/text-sharing/linkify.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,34 +1,59 @@
|
|||
<link rel="import" href="text-input-dialog.html">
|
||||
<script>
|
||||
'use strict';
|
||||
window.Chat = window.Chat || {};
|
||||
Chat.TextInputBehavior = {
|
||||
get textInput() {
|
||||
var textInput = Polymer.dom(this).querySelector('.textInput');
|
||||
if (!textInput) {
|
||||
textInput = document.createElement('input');
|
||||
textInput.type = 'file';
|
||||
textInput.multiple = 'true';
|
||||
textInput.className = 'textInput';
|
||||
textInput.style.position = 'fixed';
|
||||
textInput.style.top = '-10000px';
|
||||
textInput.style.left = '-10000px';
|
||||
textInput.style.opacity = 0;
|
||||
Polymer.dom(this).appendChild(textInput);
|
||||
(function() {
|
||||
var textInput = Polymer.Base.create('text-input-dialog');
|
||||
textInput.className = 'textInput';
|
||||
document.body.appendChild(textInput);
|
||||
Chat.TextInputBehavior = {
|
||||
properties: {
|
||||
contact: Object,
|
||||
},
|
||||
get textInput() {
|
||||
var textInput = Polymer.dom(document).querySelector('.textInput');
|
||||
return textInput;
|
||||
},
|
||||
openTextDialog: function() {
|
||||
this.textInput.open(this.contact);
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'contextmenu': '_handleContextMenu',
|
||||
'down': '_handleDown',
|
||||
'up': '_handleUp',
|
||||
},
|
||||
_handleContextMenu: function(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
ev.cancelBubble = true;
|
||||
this.cancelAsync(this.pressTimer);
|
||||
this.openTextDialog();
|
||||
return false;
|
||||
},
|
||||
_handleUp: function(e) {
|
||||
this.cancelAsync(this.pressTimer);
|
||||
},
|
||||
_handleDown: function(ev) {
|
||||
this.pressTimer = this.async(function() {
|
||||
this.openTextDialog();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
ev.cancelBubble = true;
|
||||
return false;
|
||||
}, 1100);
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// this.addEventListener('mousedown', function(e) {
|
||||
// clearTimeout(this.pressTimer);
|
||||
// }.bind(this), false);
|
||||
// this.addEventListener('mousup', function(e) {
|
||||
// this.pressTimer = window.setTimeout(function() {
|
||||
// this.openTextDialog();
|
||||
// }, 1500);
|
||||
// }.bind(this), false);
|
||||
}
|
||||
return textInput;
|
||||
},
|
||||
attached: function() {
|
||||
this.textInput.onchange = function() {
|
||||
var files = this.textInput.files;
|
||||
this.notifyFilesSelection(files);
|
||||
}.bind(this);
|
||||
},
|
||||
listeners: {
|
||||
'tap': '_openDialog'
|
||||
},
|
||||
_openDialog: function() {
|
||||
this.textInput.value = null;
|
||||
this.textInput.click();
|
||||
}
|
||||
};
|
||||
};
|
||||
}());
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
<link rel="import" href="../../bower_components/neon-animation/animations/fade-out-animation.html">
|
||||
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
|
||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||
<link rel="import" href="../../bower_components/paper-spinner/paper-textarea.html">
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
|
||||
<link rel="import" href="linkify.html">
|
||||
<link rel="import" href="clipboard-behavior.html">
|
||||
<link rel="import" href="../sound-notification/sound-notification-behavior.html">
|
||||
<dom-module id="text-input-dialog">
|
||||
<template>
|
||||
<style>
|
||||
|
|
@ -12,92 +15,147 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
#dialog,
|
||||
#download {
|
||||
width: 300px;
|
||||
#sendDialog,
|
||||
#receiveDialog {
|
||||
width: 324px;
|
||||
z-index: 101;
|
||||
max-height: 320px;
|
||||
overflow: hidden;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.filename {
|
||||
@media all and (max-height: 600px) {
|
||||
#sendDialog {
|
||||
padding-top: 24px;
|
||||
top:0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#receivedText {
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
paper-textarea {
|
||||
height: 200px;
|
||||
max-height: 200px;
|
||||
width: calc(100% - 48px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#receivedText {
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 48px);
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 9;
|
||||
clamp: 9;
|
||||
}
|
||||
</style>
|
||||
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
|
||||
<paper-dialog id="sendDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
|
||||
<h2>Send Text</h2>
|
||||
<paper-textarea label="Enter Text"></paper-textarea>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-dismiss on-tap="_decline">Discard</paper-button>
|
||||
<paper-button dialog-confirm on-tap="_accept" autofocus>Send</paper-button>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
<paper-dialog id="download" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
|
||||
<h2>Text Received</h2>
|
||||
<p>Open File or Right Click and "Save as"...</p>
|
||||
<paper-textarea id="textInput" label="Enter Text" value="{{textToSend}}" autofocus></paper-textarea>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-dismiss>Discard</paper-button>
|
||||
<a href="{{dataUri}}" target="_blank">
|
||||
<paper-button dialog-confirm autofocus>Open File</paper-button>
|
||||
<paper-button dialog-dismiss on-tap="_send">Send</paper-button>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
<paper-dialog id="receiveDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
|
||||
<h2>Text Received</h2>
|
||||
<div>
|
||||
<div id="receivedText">
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-dismiss>Discard</paper-button>
|
||||
<a href="tel:{{tel}}" hidden$="{{!tel}}">
|
||||
<paper-button dialog-dismiss>Call</paper-button>
|
||||
</a>
|
||||
<paper-button on-tap="_copy" autofocus>Copy</paper-button>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
(function() {
|
||||
/*
|
||||
*
|
||||
* /^\+?[0-9x]*$/ is the first usuful Text sent via Snapdrop 2015/1/2 5:30
|
||||
*
|
||||
*/
|
||||
var phoneNumbers = /^\+?[0-9x/ ]*$/;
|
||||
Polymer({
|
||||
is: 'text-input-dialog',
|
||||
open: function() {
|
||||
this.$.dialog.open();
|
||||
behaviors: [Chat.ClipboardBehavior,Chat.SoundNotificationBehavior],
|
||||
properties: {
|
||||
textToSend: {
|
||||
type: String
|
||||
},
|
||||
receivedText: {
|
||||
type: String
|
||||
},
|
||||
contact: {
|
||||
type: Object
|
||||
},
|
||||
tel: {
|
||||
computed: '_isPhoneNumber(receivedText)',
|
||||
value: false
|
||||
}
|
||||
},
|
||||
open: function(contact) {
|
||||
this.contact = contact;
|
||||
this.$.sendDialog.open();
|
||||
},
|
||||
attached: function() {
|
||||
// this.async(function() {
|
||||
// app.conn.addEventListener('file-offer', function(e) {
|
||||
// this.file = e.detail;
|
||||
// this.$.dialog.open();
|
||||
// }.bind(this), false);
|
||||
// app.conn.addEventListener('file-received', function(e) {
|
||||
// this._fileReceived(e.detail);
|
||||
// }.bind(this), false);
|
||||
// app.conn.addEventListener('file-declined', function(e) {
|
||||
// app.displayToast('User declined file ' + e.detail.name);
|
||||
// }.bind(this), false);
|
||||
// app.conn.addEventListener('upload-complete', function(e) {
|
||||
// app.displayToast('User received file ' + e.detail.name);
|
||||
// }.bind(this), false);
|
||||
// app.conn.addEventListener('upload-error', function(e) {
|
||||
// app.displayToast('The other device did not respond. Please try again.');
|
||||
// }.bind(this), false);
|
||||
// }, 200);
|
||||
this.async(function() {
|
||||
app.conn.addEventListener('text-received', function(e) {
|
||||
var receivedText = e.detail.text;
|
||||
this.receivedText = receivedText;
|
||||
this.$.receivedText.textContent = receivedText;
|
||||
window.linkifyElement(this.$.receivedText, {}, document);
|
||||
this.$.receiveDialog.open();
|
||||
this.playSound();
|
||||
}.bind(this), false);
|
||||
}, 200);
|
||||
|
||||
this.$.textInput.addEventListener('keypress', function(e) {
|
||||
if (e.which === 13 || e.charCode === 13) {
|
||||
var key;
|
||||
var isShift;
|
||||
if (window.event) {
|
||||
key = window.event.keyCode;
|
||||
isShift = !!window.event.shiftKey; // typecast to boolean
|
||||
} else {
|
||||
key = e.which;
|
||||
isShift = !!e.shiftKey;
|
||||
}
|
||||
if (!isShift) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this._send();
|
||||
}
|
||||
}
|
||||
}.bind(this), false);
|
||||
},
|
||||
_fileReceived: function(file) {
|
||||
this.downloadURI(file);
|
||||
_send: function() {
|
||||
this.$.sendDialog.close();
|
||||
app.conn.sendText(this.contact.peerId, this.textToSend);
|
||||
},
|
||||
_decline: function() {
|
||||
app.conn.decline(this.file);
|
||||
_copy: function() {
|
||||
this.copyToClipboard(this.receivedText);
|
||||
|
||||
this.$.receiveDialog.close();
|
||||
console.log('text copied', this.receivedText);
|
||||
},
|
||||
_accept: function() {
|
||||
app.conn.accept(this.file);
|
||||
},
|
||||
downloadURI: function(file) {
|
||||
var link = document.createElement('a');
|
||||
var uri = (window.URL || window.webkitURL).createObjectURL(file.blob);
|
||||
if (typeof link.download !== 'undefined') {
|
||||
//download attribute is supported
|
||||
link.href = uri;
|
||||
link.download = file.name || 'blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} else {
|
||||
this.dataUri = uri;
|
||||
this.$.download.open();
|
||||
_isPhoneNumber: function(text) {
|
||||
if (!text || text.length < 5 || text.length > 100) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (phoneNumbers.test(text)) {
|
||||
return text;
|
||||
}
|
||||
|
||||
},
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue