mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 23:36:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

first full roundtrip

Browse source
This commit is contained in:
Robin Linus 2015-12-19 01:18:02 +01:00
parent dd4809f519
commit dc1af5ae7b
19 changed files with 222 additions and 450 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/elements/buddy-finder/buddy-finder-button.html
View file

@ -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>

32
app/elements/buddy-finder/buddy-finder.html
View file

@ -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>

1
app/elements/buddy-finder/user-avatar.html
View file

@ -7,6 +7,7 @@
@apply(--layout-vertical);
@apply(--layout-center);
width: 120px;
height: 120px;
}
.avatar {

2
app/elements/contact-item/anonymous-contact-behavior.html
View file

@ -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++) {

1
app/elements/elements.html
View file

@ -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">

34
app/elements/file-sharing/file-button-behavior.html Normal file
View 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
View 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>

49
app/elements/file-sharing/file-drop-behavior.html
View file

@ -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>

11
app/elements/file-sharing/share-area.html → app/elements/file-sharing/file-input.html
View file

@ -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>

20
app/elements/file-sharing/file-sharing.html → app/elements/file-sharing/file-receiver.html
View file

@ -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
View 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>

36
app/elements/file-sharing/file-sharing-button-behavior.html
View file

@ -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>

58
app/elements/file-sharing/file-sharing-button.html
View file

@ -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>

1
app/elements/p2p-network/p2p-network-imports.html
View file

@ -1 +0,0 @@
<script src="../../../bower_components/peerjs/peer.min.js"></script>

227
app/elements/p2p-network/p2p-network.html
View file

@ -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>

36
app/elements/routing.html
View file

@ -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() {

1
app/index.html
View file

@ -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>

98
app/scripts/app.js
View file

@ -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';
'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');
// 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();
// 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!');
});
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();
}
};
// See https://github.com/Polymer/polymer/issues/1381
window.addEventListener('WebComponentsReady', function() {
// imports are loaded and elements have been registered
});
// 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!');
});
// 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;
// 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');
// 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();
};
});
})(document);

2
bower.json
View file

@ -1,5 +1,5 @@
{
"name": "polymer-starter-kit",
"name": "sharewithme",
"private": true,
"dependencies": {
"iron-elements": "PolymerElements/iron-elements#^1.0.0",