mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-20 15:06:15 -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
|
|
@ -1,4 +1,5 @@
|
||||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../file-sharing/file-input-behavior.html">
|
||||||
<dom-module id="buddy-avatar">
|
<dom-module id="buddy-avatar">
|
||||||
<template>
|
<template>
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -47,6 +48,13 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([only1]) {
|
||||||
|
@apply(--layout-fit);
|
||||||
|
@apply(--layout-horizontal);
|
||||||
|
@apply(--layout-center-center);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
|
<paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
|
||||||
<div class="paper-font-subhead">{{_displayName}}</div>
|
<div class="paper-font-subhead">{{_displayName}}</div>
|
||||||
|
|
@ -56,6 +64,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
Polymer({
|
Polymer({
|
||||||
is: 'buddy-avatar',
|
is: 'buddy-avatar',
|
||||||
|
behaviors: [Chat.FileInputBehavior],
|
||||||
properties: {
|
properties: {
|
||||||
contact: Object,
|
contact: Object,
|
||||||
_displayName: {
|
_displayName: {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
|
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
|
||||||
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
|
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
|
||||||
<link rel="import" href="../file-sharing/file-input.html">
|
|
||||||
<link rel="import" href="buddy-avatar.html">
|
<link rel="import" href="buddy-avatar.html">
|
||||||
<link rel="import" href="personal-avatar.html">
|
<link rel="import" href="personal-avatar.html">
|
||||||
<dom-module id="buddy-finder">
|
<dom-module id="buddy-finder">
|
||||||
|
|
@ -61,18 +60,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[only] {
|
|
||||||
@apply(--layout-fit);
|
|
||||||
@apply(--layout-horizontal);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<div class="buddies">
|
<div class="buddies">
|
||||||
<template is="dom-repeat" items="{{buddies}}">
|
<template is="dom-repeat" items="{{buddies}}">
|
||||||
<file-input on-file-selected="_fileSelected" only$="{{!buddies.1}}">
|
<buddy-avatar on-file-selected="_fileSelected" only$="{{!buddies.1}}" contact="{{item}}" class="buddy"></buddy-avatar>
|
||||||
<buddy-avatar contact="{{item}}" class="buddy"></buddy-avatar>
|
|
||||||
</file-input>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div hidden$="{{buddies.0}}" class="explanation">
|
<div hidden$="{{buddies.0}}" class="explanation">
|
||||||
|
|
|
||||||
6
app/elements/file-sharing/file-input-behavior.html
Normal file
6
app/elements/file-sharing/file-input-behavior.html
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<link rel="import" href="file-drop-behavior.html">
|
||||||
|
<link rel="import" href="file-button-behavior.html">
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
Chat.FileInputBehavior = [Chat.FileDropBehavior,Chat.FileButtonBehavior];
|
||||||
|
</script>
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<link rel="import" href="file-drop-behavior.html">
|
|
||||||
<link rel="import" href="file-button-behavior.html">
|
|
||||||
<dom-module id="file-input">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<content></content>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
'use strict';
|
|
||||||
Polymer({
|
|
||||||
is: 'file-input',
|
|
||||||
behaviors: [Chat.FileDropBehavior,Chat.FileButtonBehavior]
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</dom-module>
|
|
||||||
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