mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-30 19:49:14 -04:00
first full roundtrip
This commit is contained in:
Robin Linus
parent
dd4809f519
commit
dc1af5ae7b
19 changed files with 222 additions and 450 deletions
34
app/elements/file-sharing/file-button-behavior.html
Normal file
34
app/elements/file-sharing/file-button-behavior.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<link rel="import" href="file-selection-behavior.html">
|
||||
<script>
|
||||
'use strict';
|
||||
window.Chat = window.Chat || {};
|
||||
Chat.FileButtonBehaviorImpl = {
|
||||
get fileInput() {
|
||||
var fileInput = Polymer.dom(this).querySelector('.fileInput');
|
||||
if (!fileInput) {
|
||||
fileInput = document.createElement('input');
|
||||
fileInput.type = 'file';
|
||||
fileInput.className = 'fileInput';
|
||||
fileInput.style.position = 'fixed';
|
||||
fileInput.style.top = '-10000px';
|
||||
fileInput.style.left = '-10000px';
|
||||
fileInput.style.opacity = 0;
|
||||
Polymer.dom(this).appendChild(fileInput);
|
||||
}
|
||||
return fileInput;
|
||||
},
|
||||
attached: function() {
|
||||
this.fileInput.onchange = function() {
|
||||
var files = this.fileInput.files;
|
||||
this.notifyFilesSelection(files);
|
||||
}.bind(this);
|
||||
},
|
||||
listeners: {
|
||||
'tap': '_openDialog'
|
||||
},
|
||||
_openDialog: function() {
|
||||
this.fileInput.click();
|
||||
}
|
||||
};
|
||||
Chat.FileButtonBehavior = [Chat.FileButtonBehaviorImpl, Chat.FileSelectionBehavior];
|
||||
</script>
|
||||
14
app/elements/file-sharing/file-button.html
Normal file
14
app/elements/file-sharing/file-button.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="file-button-behavior.html">
|
||||
<dom-module id="file-button">
|
||||
<template>
|
||||
<paper-icon-button id="btn" icon="chat:attach-file" on-tap="_upload"></paper-icon-button>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'file-button',
|
||||
behaviors: [Chat.FileButtonBehavior]
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -1,37 +1,40 @@
|
|||
<link rel="import" href="file-selection-behavior.html">
|
||||
<script>
|
||||
'use strict';
|
||||
Chat = window.Chat || {};
|
||||
Chat.FileDropBehavior = {
|
||||
window.Chat = window.Chat || {};
|
||||
Chat.FileDropBehaviorImpl = {
|
||||
attached: function() {
|
||||
var dropZone = this;
|
||||
|
||||
// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
|
||||
dropZone.addEventListener('dragover', function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
this.style.transform = 'scale(1.2)';
|
||||
});
|
||||
dropZone.style.transform = 'scale(1.2)';
|
||||
}, false);
|
||||
|
||||
var dragEnd = function() {
|
||||
dropZone.style.transform = 'scale(1)';
|
||||
};
|
||||
|
||||
dropZone.addEventListener('dragleave', dragEnd, false);
|
||||
dropZone.addEventListener('dragexit', dragEnd, false);
|
||||
dropZone.addEventListener('dragend', dragEnd, false);
|
||||
|
||||
// Get file data on drop
|
||||
dropZone.addEventListener('drop', function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
var files = e.dataTransfer.files; // Array of all files
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i];
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e2) {
|
||||
// finished reading file data.
|
||||
console.log('file dropped');
|
||||
this.fire('file-uploaded', {
|
||||
url: e2.target.result,
|
||||
name: file.name
|
||||
});
|
||||
}.bind(this);
|
||||
reader.readAsDataURL(file); // start reading the file data.
|
||||
}
|
||||
dropZone.addEventListener('drop', function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
//call dragend
|
||||
dragEnd();
|
||||
|
||||
// Get files
|
||||
var files = event.dataTransfer.files;
|
||||
// Notify Selection
|
||||
this.notifyFilesSelection(files);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
Chat.FileDropBehavior = [Chat.FileDropBehaviorImpl, Chat.FileSelectionBehavior];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
<link rel="import" href="file-drop-behavior.html">
|
||||
<dom-module id="share-area">
|
||||
<link rel="import" href="file-button-behavior.html">
|
||||
<dom-module id="file-input">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'share-area',
|
||||
behaviors: [Chat.FileDropBehavior]
|
||||
is: 'file-input',
|
||||
behaviors: [Chat.FileDropBehavior,Chat.FileButtonBehavior]
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
|
||||
<link rel="import" href="file-reader.html">
|
||||
<dom-module id="file-sharing">
|
||||
<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">
|
||||
<dom-module id="file-receiver">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
|
|
@ -21,11 +23,13 @@
|
|||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'file-sharing',
|
||||
is: 'file-receiver',
|
||||
attached: function() {
|
||||
document.querySelector('x-app').addEventListener('file-received', function(e) {
|
||||
this.fileReceived(e.detail);
|
||||
}.bind(this), false);
|
||||
this.async(function() {
|
||||
app.p2p.addEventListener('file-received', function(e) {
|
||||
this.fileReceived(e.detail);
|
||||
}.bind(this), false);
|
||||
},200);
|
||||
},
|
||||
fileReceived: function(file) {
|
||||
this.set('file', file);
|
||||
|
|
@ -35,7 +39,7 @@
|
|||
var link = document.createElement('a');
|
||||
link.download = this.file.name;
|
||||
// Construct the uri
|
||||
var uri = this.file.url;
|
||||
var uri = this.file.dataURI;
|
||||
link.href = uri;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
25
app/elements/file-sharing/file-selection-behavior.html
Normal file
25
app/elements/file-sharing/file-selection-behavior.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
'use strict';
|
||||
window.Chat = window.Chat || {};
|
||||
Chat.FileSelectionBehavior = {
|
||||
notifyFilesSelection: function(files) {
|
||||
if(!files){
|
||||
console.log('no files selected...');
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i];
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e2) {
|
||||
// finished reading file data.
|
||||
console.log('file dropped');
|
||||
this.fire('file-selected', {
|
||||
dataURI: e2.target.result,
|
||||
name: file.name
|
||||
});
|
||||
}.bind(this);
|
||||
reader.readAsDataURL(file); // start reading the file data.
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<script>
|
||||
'use strict';
|
||||
Chat.FileSharingButtonBehavior = {
|
||||
properties: {
|
||||
file: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
get fileInput(){
|
||||
var fileInput=document.querySelector('input');
|
||||
},
|
||||
attached: function() {
|
||||
this.$.file.onchange = function(value) {
|
||||
this.file = this.$.file.value;
|
||||
console.log(this.file);
|
||||
var files = this.$.file.files;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i];
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e2) {
|
||||
// finished reading file data.
|
||||
console.log('file dropped');
|
||||
this.fire('file-uploaded', {
|
||||
url: e2.target.result,
|
||||
name: file.name
|
||||
});
|
||||
}.bind(this);
|
||||
reader.readAsDataURL(file); // start reading the file data.
|
||||
}
|
||||
}.bind(this);
|
||||
},
|
||||
_upload: function() {
|
||||
this.$.file.click();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="file-reader.html">
|
||||
<dom-module id="file-sharing-button">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#file {
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
}
|
||||
</style>
|
||||
<paper-icon-button id="btn" icon="chat:attach-file" on-tap="_upload"></paper-icon-button>
|
||||
<input id="file" type="file" value="{{file::input}}">
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'file-sharing-button',
|
||||
properties: {
|
||||
file: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
attached: function() {
|
||||
this.$.file.onchange = function(value) {
|
||||
this.file = this.$.file.value;
|
||||
console.log(this.file);
|
||||
|
||||
var files = this.$.file.files;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var file = files[i];
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e2) {
|
||||
// finished reading file data.
|
||||
console.log('file dropped');
|
||||
this.fire('file-uploaded', {
|
||||
url: e2.target.result,
|
||||
name: file.name
|
||||
});
|
||||
}.bind(this);
|
||||
reader.readAsDataURL(file); // start reading the file data.
|
||||
}
|
||||
|
||||
|
||||
}.bind(this);
|
||||
},
|
||||
_upload: function() {
|
||||
this.$.file.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
Loading…
Add table
Add a link
Reference in a new issue