commit 3fb735e901a59aaec861c87494137f526adc1f2c
parent c8111e37bb6e76bebc95f49e35b2c8507e7130a0
Author: Paul Szymanski <mail@pszy.de>
Date: Sat, 2 Jan 2016 02:26:07 +0100
Add text-input files
Diffstat:
8 files changed, 203 insertions(+), 27 deletions(-)
diff --git a/app/elements/buddy-finder/buddy-avatar.html b/app/elements/buddy-finder/buddy-avatar.html
@@ -1,4 +1,5 @@
<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">
<template>
<style>
@@ -47,6 +48,13 @@
user-select: none;
margin-top: 4px;
}
+
+ :host([only1]) {
+ @apply(--layout-fit);
+ @apply(--layout-horizontal);
+ @apply(--layout-center-center);
+ cursor: pointer;
+ }
</style>
<paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
<div class="paper-font-subhead">{{_displayName}}</div>
@@ -56,6 +64,7 @@
'use strict';
Polymer({
is: 'buddy-avatar',
+ behaviors: [Chat.FileInputBehavior],
properties: {
contact: Object,
_displayName: {
diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html
@@ -1,6 +1,5 @@
<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="../file-sharing/file-input.html">
<link rel="import" href="buddy-avatar.html">
<link rel="import" href="personal-avatar.html">
<dom-module id="buddy-finder">
@@ -61,18 +60,10 @@
}
}
- [only] {
- @apply(--layout-fit);
- @apply(--layout-horizontal);
- @apply(--layout-center-center);
- cursor: pointer;
- }
</style>
<div class="buddies">
<template is="dom-repeat" items="{{buddies}}">
- <file-input on-file-selected="_fileSelected" only$="{{!buddies.1}}">
- <buddy-avatar contact="{{item}}" class="buddy"></buddy-avatar>
- </file-input>
+ <buddy-avatar on-file-selected="_fileSelected" only$="{{!buddies.1}}" contact="{{item}}" class="buddy"></buddy-avatar>
</template>
</div>
<div hidden$="{{buddies.0}}" class="explanation">
diff --git a/app/elements/file-sharing/file-input-behavior.html b/app/elements/file-sharing/file-input-behavior.html
@@ -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>
+\ No newline at end of file
diff --git a/app/elements/file-sharing/file-input.html b/app/elements/file-sharing/file-input.html
@@ -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>
diff --git a/app/elements/text-sharing/demo/index.html b/app/elements/text-sharing/demo/index.html
@@ -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>
+\ No newline at end of file
diff --git a/app/elements/text-sharing/text-input-behavior.html b/app/elements/text-sharing/text-input-behavior.html
@@ -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>
diff --git a/app/elements/text-sharing/text-input-dialog.html b/app/elements/text-sharing/text-input-dialog.html
@@ -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>
diff --git a/app/elements/text-sharing/text-sharing.html b/app/elements/text-sharing/text-sharing.html
