1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-06-22 00:39:24 -04:00
parent f64a03b3f4
commit 75a40a8dbb
17 changed files with 177 additions and 88 deletions

View file

@ -1,4 +1,5 @@
<!--
@license
Copyright (c) 2014 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
@ -37,7 +38,7 @@ Example:
<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
...
downAction: function(e) {
this.$.ripple.downAction({x: e.x, y: e.y});
this.$.ripple.downAction({detail: {x: e.x, y: e.y}});
},
upAction: function(e) {
this.$.ripple.upAction();
@ -75,15 +76,6 @@ Apply `circle` class to make the rippling effect within a circle.
<dom-module id="paper-ripple">
<!--
Fired when the animation finishes. This is useful if you want to wait until the ripple
animation finishes to perform some action.
@event transitionend
@param {Object} detail
@param {Object} detail.node The animated node
-->
<template>
<style>
:host {
@ -559,16 +551,7 @@ Apply `circle` class to make the rippling effect within a circle.
},
get target () {
var ownerRoot = Polymer.dom(this).getOwnerRoot();
var target;
if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
target = ownerRoot.host;
} else {
target = this.parentNode;
}
return target;
return this.keyEventTarget;
},
keyBindings: {
@ -581,14 +564,19 @@ Apply `circle` class to make the rippling effect within a circle.
// Set up a11yKeysBehavior to listen to key events on the target,
// so that space and enter activate the ripple even if the target doesn't
// handle key events. The key handlers deal with `noink` themselves.
this.keyEventTarget = this.target;
this.listen(this.target, 'up', 'uiUpAction');
this.listen(this.target, 'down', 'uiDownAction');
if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host;
} else {
this.keyEventTarget = this.parentNode;
}
this.listen(this.keyEventTarget, 'up', 'uiUpAction');
this.listen(this.keyEventTarget, 'down', 'uiDownAction');
},
detached: function() {
this.unlisten(this.target, 'up', 'uiUpAction');
this.unlisten(this.target, 'down', 'uiDownAction');
this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
this.keyEventTarget = null;
},
get shouldKeepAnimating () {
@ -636,6 +624,7 @@ Apply `circle` class to make the rippling effect within a circle.
ripple.downAction(event);
if (!this._animating) {
this._animating = true;
this.animate();
}
},
@ -665,6 +654,7 @@ Apply `circle` class to make the rippling effect within a circle.
ripple.upAction(event);
});
this._animating = true;
this.animate();
},
@ -703,11 +693,12 @@ Apply `circle` class to make the rippling effect within a circle.
},
animate: function() {
if (!this._animating) {
return;
}
var index;
var ripple;
this._animating = true;
for (index = 0; index < this.ripples.length; ++index) {
ripple = this.ripples[index];
@ -752,6 +743,15 @@ Apply `circle` class to make the rippling effect within a circle.
this.upAction();
}
}
/**
Fired when the animation finishes.
This is useful if you want to wait until
the ripple animation finishes to perform some action.
@event transitionend
@param {{node: Object}} detail Contains the animated node.
*/
});
})();
</script>