94 lines
2.2 KiB
HTML
94 lines
2.2 KiB
HTML
<!-- Components -->
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
<link rel="import" href="../paper-badge/paper-badge.html">
|
|
<link rel="import" href="../neon-animation/neon-animations.html">
|
|
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
|
|
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
|
|
<link rel="import" href="../neon-animation/animations/scale-down-animation.html">
|
|
|
|
<dom-module id="strolch-wc-badge">
|
|
<template>
|
|
<!-- Style -->
|
|
<style is="custom-style">
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
paper-badge {
|
|
--paper-badge-background: var(--paper-indigo-200);
|
|
top: -7px !important;
|
|
right: -7px !important;
|
|
bottom: initial !important;
|
|
left: initial !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- Content -->
|
|
<paper-badge id="badge" label="[[label]]" for="[[for]]"></paper-badge>
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
<!-- Settings -->
|
|
is: "strolch-wc-badge",
|
|
|
|
<!-- Behaviors -->
|
|
behaviors: [
|
|
Polymer.NeonAnimationRunnerBehavior
|
|
],
|
|
|
|
<!-- Properties -->
|
|
properties: {
|
|
for: {
|
|
type: String
|
|
},
|
|
hide: {
|
|
type: Boolean,
|
|
observer: "observeHide"
|
|
},
|
|
animationConfig: {
|
|
value: function() {
|
|
return {
|
|
"show": {
|
|
name: "scale-up-animation",
|
|
node: this.$.badge
|
|
},
|
|
"hide": {
|
|
name: "scale-down-animation",
|
|
node: this.$.badge
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
<!-- Observers -->
|
|
observeHide: function(newValue, oldValue) {
|
|
// show this element before the animation is started
|
|
this.hidden = false;
|
|
|
|
// animated to show/hide this badge
|
|
if(newValue) {
|
|
this.playAnimation("hide");
|
|
} else {
|
|
this.playAnimation("show");
|
|
}
|
|
},
|
|
|
|
<!-- Listeners -->
|
|
listeners: {
|
|
"neon-animation-finish": "onAnimationFinish"
|
|
},
|
|
onAnimationFinish: function() {
|
|
this.hidden = this.hide;
|
|
},
|
|
|
|
<!-- Function -->
|
|
ready: function() {
|
|
this.hidden = true;
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|