mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-25 09:16:18 -04:00
Add text-input files
This commit is contained in:
Paul Szymanski
Robin Linus
parent
c8111e37bb
commit
3fb735e901
8 changed files with 201 additions and 27 deletions
47
app/elements/text-sharing/demo/index.html
Normal file
47
app/elements/text-sharing/demo/index.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<title>paper-dialog demo</title>
|
||||
|
||||
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../text-input-dialog.html">
|
||||
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
|
||||
<link rel="import" href="../../../bower_components/paper-styles/color.html">
|
||||
<link rel="import" href="../../../bower_components/paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../../../bower_components/neon-animation/neon-animations.html">
|
||||
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||
<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
|
||||
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
|
||||
|
||||
<link rel="stylesheet" href="../../../paper-styles/demo.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<text-input-dialog></text-input-dialog>
|
||||
|
||||
|
||||
<script>
|
||||
document.querySelector("text-input-dialog").open();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
app/elements/text-sharing/text-input-behavior.html
Normal file
34
app/elements/text-sharing/text-input-behavior.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<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);
|
||||
}
|
||||
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>
|
||||
104
app/elements/text-sharing/text-input-dialog.html
Normal file
104
app/elements/text-sharing/text-input-dialog.html
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
|
||||
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../bower_components/neon-animation/animations/scale-up-animation.html">
|
||||
<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">
|
||||
<dom-module id="text-input-dialog">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#dialog,
|
||||
#download {
|
||||
width: 300px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.filename {
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
paper-textarea {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<paper-dialog id="dialog" 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>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-dismiss>Discard</paper-button>
|
||||
<a href="{{dataUri}}" target="_blank">
|
||||
<paper-button dialog-confirm autofocus>Open File</paper-button>
|
||||
</a>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
(function() {
|
||||
Polymer({
|
||||
is: 'text-input-dialog',
|
||||
open: function() {
|
||||
this.$.dialog.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);
|
||||
},
|
||||
_fileReceived: function(file) {
|
||||
this.downloadURI(file);
|
||||
},
|
||||
_decline: function() {
|
||||
app.conn.decline(this.file);
|
||||
},
|
||||
_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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
</dom-module>
|
||||
0
app/elements/text-sharing/text-sharing.html
Normal file
0
app/elements/text-sharing/text-sharing.html
Normal file
Loading…
Add table
Add a link
Reference in a new issue