From 3fb735e901a59aaec861c87494137f526adc1f2c Mon Sep 17 00:00:00 2001
From: Paul Szymanski <mail@pszy.de>
Date: Sat, 2 Jan 2016 02:26:07 +0100
Subject: [PATCH] Add text-input files

---
 app/elements/buddy-finder/buddy-avatar.html   |   9 ++
 app/elements/buddy-finder/buddy-finder.html   |  11 +-
 .../file-sharing/file-input-behavior.html     |   6 +
 app/elements/file-sharing/file-input.html     |  17 ---
 app/elements/text-sharing/demo/index.html     |  47 ++++++++
 .../text-sharing/text-input-behavior.html     |  34 ++++++
 .../text-sharing/text-input-dialog.html       | 104 ++++++++++++++++++
 app/elements/text-sharing/text-sharing.html   |   0
 8 files changed, 201 insertions(+), 27 deletions(-)
 create mode 100644 app/elements/file-sharing/file-input-behavior.html
 delete mode 100644 app/elements/file-sharing/file-input.html
 create mode 100644 app/elements/text-sharing/demo/index.html
 create mode 100644 app/elements/text-sharing/text-input-behavior.html
 create mode 100644 app/elements/text-sharing/text-input-dialog.html
 create mode 100644 app/elements/text-sharing/text-sharing.html

diff --git a/app/elements/buddy-finder/buddy-avatar.html b/app/elements/buddy-finder/buddy-avatar.html
index 086f38f..8f637e4 100644
--- 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
index 9a6352d..d66446a 100644
--- 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
new file mode 100644
index 0000000..4603c63
--- /dev/null
+++ 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
deleted file mode 100644
index 7fcdd76..0000000
--- a/app/elements/file-sharing/file-input.html
+++ /dev/null
@@ -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
new file mode 100644
index 0000000..dd6a607
--- /dev/null
+++ 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
new file mode 100644
index 0000000..a34994f
--- /dev/null
+++ 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
new file mode 100644
index 0000000..32805d0
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e69de29