Permalink
Find file
7f11d46 May 18, 2016
196 lines (173 sloc) 5.27 KB
<!--
@license
Copyright (c) 2016 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
-->
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-button/paper-button.html">
<dom-module id="na-editor">
<template>
<style>
:host {
display: none;
position: absolute;
overflow: hidden;
top: 46px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
:host([opened]) {
display: block;
}
:host(.open) {
background-color: var(--paper-purple-500);
}
paper-button {
color: var(--paper-purple-50);
}
#background {
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 512px;
width: 256px;
height: 256px;
background-color: var(--paper-purple-500);
transform-origin: 128px 128px;
}
na-note {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
:host(.open) na-note {
position: relative;
margin: auto;
width: calc(100vw - 20px);
max-width: 480px;
}
.controls {
display: block;
position: relative;
margin: 10px auto;
width: calc(100vw - 20px);
max-width: 480px;
@apply(--layout-horizontal);
@apply(--layout-center);
justify-content: space-between;
transition: opacity 0.3s;
opacity: 0;
}
:host(.open) .controls {
opacity: 1;
}
</style>
<div id="background"></div>
<na-note id="note" title="{{note.title}}" body="{{note.body}}" editable></na-note>
<div class="controls">
<paper-button on-tap="delete">Delete</paper-button>
<paper-button on-tap="save">Done</paper-button>
</div>
</template>
<script>
Polymer({
is: 'na-editor',
properties: {
note: {
type: Object,
notify: true
},
opened: {
type: Boolean,
reflectToAttribute: true,
readOnly: true,
value: false
},
},
open: function(noteElement) {
this._setOpened(true);
this.__editedNoteElement = noteElement;
if (noteElement) {
noteElement.style.opacity = 0;
this.transitionInFrom(noteElement.getBoundingClientRect());
} else {
this.create();
}
},
create: function() {
this._setOpened(true);
this.note = { title: '', body: '' };
this.transitionInFrom(this.getBoundingClientRect());
},
save: function() {
this.close('save');
},
delete: function() {
this.close('delete');
},
close: function(detail) {
if (this.__editedNoteElement) {
this.__editedNoteElement.style.opacity = 1;
this.__editedNoteElement = null;
}
this.fire('close', detail, { bubbles: false });
this.transitionOut().then(function() {
Polymer.dom(this).classList.remove('open');
this._setOpened(false);
}.bind(this));
},
transitionInFrom: function(rect) {
var targetRect = this.getBoundingClientRect();
var targetLeft = targetRect.width > 500 ?
targetRect.width / 2 - 240 : 10;
var targetWidth = targetRect.width > 500 ?
'480px' : 'calc(100vw - 20px)'
var noteAnimation = this.$.note.animate([{
transform: `translate(${rect.left}px,${rect.top - 46}px)`,
width: `${rect.width}px`,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}, {
transform: `translate(${targetLeft}px, 0px)`,
width: targetWidth
}], 500);
var backgroundAnimation = this.$.background.animate([{
transform: `translate(${rect.left + rect.width / 2 - 128}px, ${rect.top - 46 + rect.height / 2 - 128}px) scale(0.1)`,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}, {
transform: `scale(${targetRect.width / 256 * 4})`
}], 800);
noteAnimation.addEventListener('finish', function() {
Polymer.dom(this).classList.add('open');
}.bind(this));
},
transitionOut: function() {
var animation = this.animate([{
opacity: 1,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}, {
opacity: 0
}], 300);
this.$.note.animate([{
transform: 'translateY(0) scale(1)',
opacity: 1,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}, {
transform: 'translateY(10px) scale(0.9)',
opacity: 0
}], 500);
return new Promise(function(resolve) {
animation.addEventListener('finish', resolve);
}.bind(this));
}
});
</script>
</dom-module>