snapdrop

A Progressive Web App for local file sharing
git clone http://git.hanabi.in/repos/snapdrop.git
Log | Files | Refs | README | LICENSE

commit dc1af5ae7b5a9d098afe02353a175fac8512888b
parent dd4809f51912098a325022ea887fbea23896b6dd
Author: Robin Linus <robin_woll@capira.de>
Date:   Sat, 19 Dec 2015 01:18:02 +0100

first full roundtrip

Diffstat:
Dapp/elements/buddy-finder/buddy-finder-button.html | 24------------------------
Mapp/elements/buddy-finder/buddy-finder.html | 32++++++++++++++++++++++----------
Mapp/elements/buddy-finder/user-avatar.html | 1+
Mapp/elements/contact-item/anonymous-contact-behavior.html | 2+-
Mapp/elements/elements.html | 1+
Aapp/elements/file-sharing/file-button-behavior.html | 34++++++++++++++++++++++++++++++++++
Aapp/elements/file-sharing/file-button.html | 14++++++++++++++
Mapp/elements/file-sharing/file-drop-behavior.html | 49++++++++++++++++++++++++++-----------------------
Aapp/elements/file-sharing/file-input.html | 17+++++++++++++++++
Aapp/elements/file-sharing/file-receiver.html | 52++++++++++++++++++++++++++++++++++++++++++++++++++++
Aapp/elements/file-sharing/file-selection-behavior.html | 25+++++++++++++++++++++++++
Dapp/elements/file-sharing/file-sharing-button-behavior.html | 36------------------------------------
Dapp/elements/file-sharing/file-sharing-button.html | 58----------------------------------------------------------
Dapp/elements/file-sharing/file-sharing.html | 48------------------------------------------------
Dapp/elements/file-sharing/share-area.html | 18------------------
Dapp/elements/p2p-network/p2p-network-imports.html | 1-
Mapp/elements/p2p-network/p2p-network.html | 227++++++++++++++++++-------------------------------------------------------------
Mapp/elements/routing.html | 36------------------------------------
Mapp/index.html | 1+
Mapp/scripts/app.js | 108++++++++++++++++++++++++-------------------------------------------------------
Mbower.json | 2+-
21 files changed, 279 insertions(+), 507 deletions(-)

diff --git a/app/elements/buddy-finder/buddy-finder-button.html b/app/elements/buddy-finder/buddy-finder-button.html @@ -1,24 +0,0 @@ -<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html"> -<dom-module id="buddy-finder-button"> - <template> - <style> - :host { - display: block; - } - - paper-icon-item { - height: 60px; - } - </style> - <paper-icon-item> - <iron-icon icon="chat:wifi-tethering" item-icon></iron-icon> - Find People - </paper-icon-item> - </template> - <script> - 'use strict'; - Polymer({ - is: 'buddy-finder-button' - }); - </script> -</dom-module> diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html @@ -1,7 +1,6 @@ <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="../contact-item/contact-item.html"> -<link rel="import" href="../file-sharing/share-area.html"> +<link rel="import" href="../file-sharing/file-input.html"> <link rel="import" href="user-avatar.html"> <dom-module id="buddy-finder"> <template> @@ -10,9 +9,9 @@ display: block; background-color: white; @apply(--layout-fit); - @apply(--layout-vertical); + @apply(--layout-horizontal); @apply(--layout-center-center); - border-left: 1px solid #ccc; + overflow: hidden; } .paper-font-display1 { @@ -24,6 +23,7 @@ .buddies { z-index: 1; + @apply(--layout-horizontal); } .buddy { @@ -52,13 +52,12 @@ <div class="paper-font-display1">People near by</div> <div class="buddies"> <template is="dom-repeat" items="{{buddies}}"> - <share-area> - <user-avatar on-tap="_connect" contact="{{item.peerId}}" class="buddy"></user-avatar> - </share-area> + <file-input on-file-selected="_fileDropped"> + <user-avatar contact="{{item.peerId}}" class="buddy"></user-avatar> + </file-input> </template> </div> <user-avatar contact="{{me}}" class="me"></user-avatar> - <iron-ajax auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax> <svg class="circles" viewBox="-0.5 -0.5 1140 700"> <circle class="circle" cx="570" cy="570" r="120" stroke="rgba(160,160,160,.4)"></circle> <circle class="circle" cx="570" cy="570" r="210" stroke="rgba(160,160,160,.35)"></circle> @@ -66,6 +65,7 @@ <circle class="circle" cx="570" cy="570" r="390" stroke="rgba(160,160,160,.2)"></circle> <circle class="circle" cx="570" cy="570" r="480" stroke="rgba(160,160,160,.15)"></circle> </svg> + <iron-ajax id="ajax" auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax> </template> <script> 'use strict'; @@ -77,8 +77,20 @@ type: String, } }, - _connect: function(e) { - Polymer.dom(document).querySelector('x-app').p2p.connectToPeer(e.model.item.peerId); + attached: function() { + //Ask server every second for changes + setInterval(function() { + this.$.ajax.generateRequest(); + }.bind(this), 1000); + }, + _fileDropped: function(e) { + var peerId = e.model.item.peerId; + var file = e.detail; + app.p2p.connectToPeer(peerId, function() { + app.p2p.sendFile(peerId, file); + }); + console.log('Send:', file); + console.log('To:', peerId); } }); </script> diff --git a/app/elements/buddy-finder/user-avatar.html b/app/elements/buddy-finder/user-avatar.html @@ -7,6 +7,7 @@ @apply(--layout-vertical); @apply(--layout-center); width: 120px; + height: 120px; } .avatar { diff --git a/app/elements/contact-item/anonymous-contact-behavior.html b/app/elements/contact-item/anonymous-contact-behavior.html @@ -1,6 +1,6 @@ <script> 'use strict'; -var Chat = window.Chat || {}; +window.Chat = window.Chat || {}; var djb2Code = function(str) { var hash = 5381; for (var i = 0; i < str.length; i++) { diff --git a/app/elements/elements.html b/app/elements/elements.html @@ -11,4 +11,5 @@ <link rel="import" href="../styles/shared-styles.html"> <link rel="import" href="buddy-finder/buddy-finder.html"> <link rel="import" href="p2p-network/p2p-network.html"> +<link rel="import" href="file-sharing/file-receiver.html"> diff --git a/app/elements/file-sharing/file-button-behavior.html b/app/elements/file-sharing/file-button-behavior.html @@ -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> diff --git a/app/elements/file-sharing/file-button.html b/app/elements/file-sharing/file-button.html @@ -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> diff --git a/app/elements/file-sharing/file-drop-behavior.html b/app/elements/file-sharing/file-drop-behavior.html @@ -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> diff --git a/app/elements/file-sharing/file-input.html b/app/elements/file-sharing/file-input.html @@ -0,0 +1,17 @@ +<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/file-sharing/file-receiver.html b/app/elements/file-sharing/file-receiver.html @@ -0,0 +1,52 @@ +<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 { + display: block; + position: fixed; + z-index: 100; + } + </style> + <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdro> + <h2>File Received</h2> + <p>You received file {{file.name}}</p> + <div class="buttons"> + <paper-button dialog-dismiss>Dismiss</paper-button> + <paper-button dialog-confirm on-tap="_download">Download</paper-button> + </div> + </paper-dialog> + </template> + <script> + 'use strict'; + Polymer({ + is: 'file-receiver', + attached: function() { + 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); + this.$.dialog.open(); + }, + _download: function() { + var link = document.createElement('a'); + link.download = this.file.name; + // Construct the uri + var uri = this.file.dataURI; + link.href = uri; + document.body.appendChild(link); + link.click(); + // Cleanup the DOM + document.body.removeChild(link); + //delete link; + } + }); + </script> +</dom-module> diff --git a/app/elements/file-sharing/file-selection-behavior.html b/app/elements/file-sharing/file-selection-behavior.html @@ -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> diff --git a/app/elements/file-sharing/file-sharing-button-behavior.html b/app/elements/file-sharing/file-sharing-button-behavior.html @@ -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> diff --git a/app/elements/file-sharing/file-sharing-button.html b/app/elements/file-sharing/file-sharing-button.html @@ -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> diff --git a/app/elements/file-sharing/file-sharing.html b/app/elements/file-sharing/file-sharing.html @@ -1,48 +0,0 @@ -<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html"> -<link rel="import" href="file-reader.html"> -<dom-module id="file-sharing"> - <template> - <style> - :host { - display: block; - position: fixed; - z-index: 100; - } - </style> - <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdro> - <h2>File Received</h2> - <p>You received file {{file.name}}</p> - <div class="buttons"> - <paper-button dialog-dismiss>Dismiss</paper-button> - <paper-button dialog-confirm on-tap="_download">Download</paper-button> - </div> - </paper-dialog> - </template> - <script> - 'use strict'; - Polymer({ - is: 'file-sharing', - attached: function() { - document.querySelector('x-app').addEventListener('file-received', function(e) { - this.fileReceived(e.detail); - }.bind(this), false); - }, - fileReceived: function(file) { - this.set('file', file); - this.$.dialog.open(); - }, - _download: function() { - var link = document.createElement('a'); - link.download = this.file.name; - // Construct the uri - var uri = this.file.url; - link.href = uri; - document.body.appendChild(link); - link.click(); - // Cleanup the DOM - document.body.removeChild(link); - //delete link; - } - }); - </script> -</dom-module> diff --git a/app/elements/file-sharing/share-area.html b/app/elements/file-sharing/share-area.html @@ -1,18 +0,0 @@ -<link rel="import" href="file-drop-behavior.html"> -<dom-module id="share-area"> - <template> - <style> - :host { - display: block; - } - </style> - <content></content> - </template> - <script> - 'use strict'; - Polymer({ - is: 'share-area', - behaviors: [Chat.FileDropBehavior] - }); - </script> -</dom-module> diff --git a/app/elements/p2p-network/p2p-network-imports.html b/app/elements/p2p-network/p2p-network-imports.html @@ -1 +0,0 @@ -<script src="../../../bower_components/peerjs/peer.min.js"></script> diff --git a/app/elements/p2p-network/p2p-network.html b/app/elements/p2p-network/p2p-network.html @@ -1,11 +1,6 @@ -<link rel="import" href="p2p-network-imports.html"> -<link rel="import" href="../../../bower_components/iron-localstorage/iron-localstorage.html"> +<script src="../../../bower_components/peerjs/peer.min.js"></script> <dom-module id="p2p-network"> <template> - <iron-localstorage name="peer-id" value="{{me}}" id="meStorage"> - </iron-localstorage> - <iron-localstorage name="peers" value="{{peers}}" on-iron-localstorage-load-empty="initializeDefaultPeers"> - </iron-localstorage> </template> <script> 'use strict'; @@ -15,16 +10,6 @@ me: { type: String, notify: true, - observer: '_initialize' - }, - peers: { - type: Array, - value: [], - notify: true, - }, - peer: { - value: 'loading', - notify: true } }, attached: function() { @@ -36,124 +21,62 @@ this._peer.destroy(); } }.bind(this); + this._initialize(); }, - _initialize: function(me) { - if (!this.initialized && this.$.meStorage._loaded) { - var options = { - host: 'yawim.com', - port: 443 , - path:'peerjs', - secure: true - }; - me = me ? me : undefined; - me = me === 'null' ? undefined : me; - this._peer = new Peer(me, options); - this._peer.on('open', function(id) { - console.log('My peer ID is: ' + id); - this.set('me', id); - this._peerOpen = true; - this._initCallbacks.forEach(function(cb) { - cb(); - }); - }.bind(this)); + _initialize: function() { + var options = { + host: 'yawim.com', + port: 443, + path: 'peerjs', + secure: true + }; + this._peer = new Peer(options); + this._peer.on('open', function(id) { + console.log('My peer ID is: ' + id); + this.set('me', id); + this._peerOpen = true; + this._initCallbacks.forEach(function(cb) { + cb(); + }); + }.bind(this)); + + this._peer.on('connection', this.connect.bind(this)); + this._peer.on('error', function(err) { + console.error(err); + //ugly hack to find out error type + if (err.message.indexOf('Could not connect to peer') > -1) { + delete this._connectedPeers[this.peer]; + this.set('peer', 'error'); + return; + } + if (err.message.indexOf('Lost connection to server') > -1) { + this._peer.destroy(); + this.set('me', this.me); + this._initialize(); + return; + } + }.bind(this)); - this._peer.on('connection', this.connect.bind(this)); - this._peer.on('error', function(err) { - console.error(err); - //ugly hack to find out error type - if (err.message.indexOf('Could not connect to peer') > -1) { - delete this._connectedPeers[this.peer]; - this.set('peer', 'error'); - return; - } - if (err.message.indexOf('Lost connection to server') > -1) { - this._peer.destroy(); - this.initialized = false; - this._connectedPeers = {}; - this.set('me', me); - this._initialize(this.me); - return; - } - }.bind(this)); - } - this.initialized = true; }, connect: function(c) { var peer = c.peer; - if (c.label === 'chat') { - c.on('data', function(data) { - this.addToHistory(c.peer, data); - this.sendIReceived(c.peer, data); - }.bind(this)); - c.on('close', function() { - console.log(c.peer + ' has left the chat.'); - delete this._connectedPeers[peer]; - }.bind(this)); - - if(!this.peers){ - this.set('peers',[]); - } - var peerInContacts = this.peers.some(function(p) { - return p.peer === peer; - }); - if (!peerInContacts) { - this.push('peers', { - peer: peer - }); - } - this._connectedPeers[peer] = 1; - - this.fire('connected-to-peer', peer); - } - if (c.label === 'file') { c.on('data', function(data) { - // If we're getting a file, create a URL for it. console.log('received!', data); this.fire('file-received', { peer: peer, - url: data.url, + dataURI: data.dataURI, name: data.name, }); }.bind(this)); } - - if (c.label === 'received-channel') { - c.on('data', function(data) { - this._peerReceivedMsg(c.peer, data); - }.bind(this)); - } - //send unsend messages - if (this._unsendMsgs[peer]) { - this._unsendMsgs[peer].forEach(function(msg) { - this.send(peer, msg); - }.bind(this)); - } }, connectToPeer: (function() { - function request(requestedPeer) { + function request(requestedPeer, callback) { return function() { - var c = this._peer.connect(requestedPeer, { - label: 'chat', - metadata: { - message: 'hi i want to chat with you!' - } - }); - c.on('open', function() { - this.connect(c); - }.bind(this)); - - - var c1 = this._peer.connect(requestedPeer, { - label: 'received-channel', - }); - c1.on('open', function() { - this.connect(c1); - }.bind(this)); - var f = this._peer.connect(requestedPeer, { label: 'file', @@ -161,84 +84,38 @@ }); f.on('open', function() { this.connect(f); + if (callback) { + callback(); + } }.bind(this)); f.on('error', function(err) { console.log(err); }); }; } - return function(requestedPeer) { - if (!this._connectedPeers[requestedPeer]) { - this.set('peer', 'loading'); - if (this._peerOpen) { - request(requestedPeer).bind(this)(); - } else { - this._initCallbacks.push(request(requestedPeer).bind(this)); - } + return function(requestedPeer, callback) { + if (this._peer.connections[requestedPeer]) { + return; + } + this.set('loading', true); + if (this._peerOpen) { + request(requestedPeer, callback).bind(this)(); + } else { + this._initCallbacks.push(request(requestedPeer, callback).bind(this)); } + }; }()), - send: function(peerId, msg) { - var conns = this._peer.connections[peerId]; - if (conns) { - for (var i = 0; i < conns.length; i++) { - var conn = conns[i]; - if (conn.label === 'chat') { - this._addToUnsendMsgs(peerId, msg); - conn.send(msg); - this.addToHistory(conn.peer, msg); - } - } - } else { - this._addToUnsendMsgs(peerId, msg); - this.connectToPeer(peerId); - } - }, sendFile: function(peerId, file) { var conns = this._peer.connections[peerId]; if (conns) { - for (var i = 0; i < conns.length; i++) { - var conn = conns[i]; + conns.forEach(function(conn) { if (conn.label === 'file') { conn.send(file); console.log('file send'); } - } - } - }, - _addToUnsendMsgs: function(peerId, msg) { - if (!this._unsendMsgs[peerId]) { - this._unsendMsgs[peerId] = []; - } - if (this._unsendMsgs[peerId].indexOf(msg) === -1) { - this._unsendMsgs[peerId].push(msg); - console.log('added unsend', msg); - } - }, - sendIReceived: function(peerId, msg) { - var conns = this._peer.connections[peerId]; - if (conns) { - for (var i = 0; i < conns.length; i++) { - var conn = conns[i]; - if (conn.label === 'received-channel') { - conn.send(msg); - } - } - } else { - this.connectToPeer(peerId); + }); } - }, - addToHistory: function(peerId, msg) { - console.log('send message', msg); - this.fire('new-message', msg); - }, - initializeDefaultPeers: function() { - this.peers = []; - }, - _peerReceivedMsg: function(peerId, msg) { - console.log('received', peerId, msg); - var i = this._unsendMsgs[peerId].indexOf(msg); - this._unsendMsgs[peerId].splice(i, 1); } }); </script> diff --git a/app/elements/routing.html b/app/elements/routing.html @@ -1,13 +1,3 @@ -<!-- -@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 ---> - <script src="../bower_components/page/page.js"></script> <script> window.addEventListener('WebComponentsReady', function() { @@ -21,21 +11,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN page.base(app.baseUrl.replace(/\/$/, '')); } - // Middleware - function scrollToTop(ctx, next) { - app.scrollPageToTop(); - next(); - } - - function closeDrawer(ctx, next) { - app.closeDrawer(); - next(); - } - - // Routes - page('*', scrollToTop, closeDrawer, function(ctx, next) { - next(); - }); page('/', function() { app.route = 'home'; @@ -45,18 +20,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN app.route = 'home'; }); - page('/users', function() { - app.route = 'users'; - }); - page('/users/:name', function(data) { - app.route = 'user-info'; - app.params = data.params; - }); - - page('/contact', function() { - app.route = 'contact'; - }); // 404 page('*', function() { diff --git a/app/index.html b/app/index.html @@ -43,6 +43,7 @@ <template is="dom-bind" id="app"> <buddy-finder me="{{me}}"></buddy-finder> <p2p-network me="{{me}}"></p2p-network> + <file-receiver></file-receiver> <paper-toast id="toast"> <span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span> </paper-toast> diff --git a/app/scripts/app.js b/app/scripts/app.js @@ -1,81 +1,37 @@ -/* -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 -*/ - (function(document) { - 'use strict'; - - // Grab a reference to our auto-binding template - // and give it some initial binding values - // Learn more about auto-binding templates at http://goo.gl/Dx1u2g - var app = document.querySelector('#app'); - - // Sets app default base URL - app.baseUrl = '/'; - if (window.location.port === '') { // if production - // Uncomment app.baseURL below and - // set app.baseURL to '/your-pathname/' if running from folder in production - // app.baseUrl = '/polymer-starter-kit/'; - } - - app.displayInstalledToast = function() { - // Check to make sure caching is actually enabled—it won't be in the dev environment. - if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) { - Polymer.dom(document).querySelector('#caching-complete').show(); + 'use strict'; + + // Grab a reference to our auto-binding template + // and give it some initial binding values + // Learn more about auto-binding templates at http://goo.gl/Dx1u2g + var app = document.querySelector('#app'); + + // Sets app default base URL + app.baseUrl = '/'; + if (window.location.port === '') { // if production + // Uncomment app.baseURL below and + // set app.baseURL to '/your-pathname/' if running from folder in production + // app.baseUrl = '/polymer-starter-kit/'; } - }; - - // Listen for template bound event to know when bindings - // have resolved and content has been stamped to the page - app.addEventListener('dom-change', function() { - console.log('Our app is ready to rock!'); - }); - - // See https://github.com/Polymer/polymer/issues/1381 - window.addEventListener('WebComponentsReady', function() { - // imports are loaded and elements have been registered - }); - - // Main area's paper-scroll-header-panel custom condensing transformation of - // the appName in the middle-container and the bottom title in the bottom-container. - // The appName is moved to top and shrunk on condensing. The bottom sub title - // is shrunk to nothing on condensing. - window.addEventListener('paper-header-transform', function(e) { - var appName = Polymer.dom(document).querySelector('#mainToolbar .app-name'); - var middleContainer = Polymer.dom(document).querySelector('#mainToolbar .middle-container'); - var bottomContainer = Polymer.dom(document).querySelector('#mainToolbar .bottom-container'); - var detail = e.detail; - var heightDiff = detail.height - detail.condensedHeight; - var yRatio = Math.min(1, detail.y / heightDiff); - // appName max size when condensed. The smaller the number the smaller the condensed size. - var maxMiddleScale = 0.50; - var auxHeight = heightDiff - detail.y; - var auxScale = heightDiff / (1 - maxMiddleScale); - var scaleMiddle = Math.max(maxMiddleScale, auxHeight / auxScale + maxMiddleScale); - var scaleBottom = 1 - yRatio; - - // Move/translate middleContainer - Polymer.Base.transform('translate3d(0,' + yRatio * 100 + '%,0)', middleContainer); - - // Scale bottomContainer and bottom sub title to nothing and back - Polymer.Base.transform('scale(' + scaleBottom + ') translateZ(0)', bottomContainer); - - // Scale middleContainer appName - Polymer.Base.transform('scale(' + scaleMiddle + ') translateZ(0)', appName); - }); - - // Scroll page to top and expand header - app.scrollPageToTop = function() { - app.$.headerPanelMain.scrollToTop(true); - }; - app.closeDrawer = function() { - app.$.paperDrawerPanel.closeDrawer(); - }; + app.displayInstalledToast = function() { + // Check to make sure caching is actually enabled—it won't be in the dev environment. + if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) { + Polymer.dom(document).querySelector('#caching-complete').show(); + } + }; + + // Listen for template bound event to know when bindings + // have resolved and content has been stamped to the page + app.addEventListener('dom-change', function() { + console.log('Our app is ready to rock!'); + }); + + // See https://github.com/Polymer/polymer/issues/1381 + window.addEventListener('WebComponentsReady', function() { + // imports are loaded and elements have been registered + app.p2p = document.querySelector('p2p-network'); + + }); })(document); diff --git a/bower.json b/bower.json @@ -1,5 +1,5 @@ { - "name": "polymer-starter-kit", + "name": "sharewithme", "private": true, "dependencies": { "iron-elements": "PolymerElements/iron-elements#^1.0.0",