milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

drop jqm collapsible

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-01 22:27:33 -05:00
parent b796e249e3
commit 45b881dd00
8 changed files with 240 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

157
dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html vendored Normal file
View file

@ -0,0 +1,157 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/transform-animation.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<iron-iconset-svg name="emby-collapsible-icons" size="24">
<svg>
<defs>
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
</defs>
</svg>
</iron-iconset-svg>
<dom-module id="emby-collapsible">
<template>
<style>
iron-collapse {
padding-left: 16px;
padding-right: 16px;
}
</style>
<div>
<paper-button on-tap="toggleExpand" id="expandButton" class="emby-collapsible-button" style="margin:0;display: flex; justify-content: center; align-items: center;">
<h3 class="emby-collapsible-title" title="[[title]]">[[title]]</h3>
<iron-icon id="expandIcon" style="margin-left: auto; margin-right: .5em;"></iron-icon>
</paper-button>
<iron-collapse id="contentCollapse" class="emby-collapsible-content" opened="{{expanded}}">
<content></content>
</iron-collapse>
</div>
</template>
<script>
Polymer({
is: 'emby-collapsible',
behaviors: [Polymer.NeonAnimationRunnerBehavior],
properties: {
expanded: {
type: Boolean,
value: false,
notify: true,
observer: '_expandedChanged'
},
expandMoreTitle: {
type: String,
value: "Show More"
},
expandLessTitle: {
type: String,
value: "Show Less"
},
enableRotateAnimation: {
type: Boolean,
value: true
},
expandMoreIcon: {
type: String,
value: "expand-more"
},
expandLessIcon: {
type: String,
value: "expand-less"
},
animationConfig: {
value: function () {
return {
'rotateIcon': {
name: 'transform-animation',
node: this.$.expandIcon,
transformOrigin: "50% 50%",
transformFrom: "rotate(0)",
transformTo: "rotate(180deg)",
timing: { duration: 350 }
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_onNeonAnimationFinish: function () {
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
},
// Fires when an instance of the element is created
created: function () { },
// Fires when the local DOM has been fully prepared
ready: function () {
//Set initial icon
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
//Set initial title
if (this.expanded) {
this.$.expandButton.title = this.expandLessTitle;
}
else {
this.$.expandButton.title = this.expandMoreTitle;
}
},
// Fires when the element was inserted into the document
attached: function () { },
// Fires when the element was removed from the document
detached: function () { },
// Fires when an attribute was added, removed, or updated
_expandedChanged: function (newVal, oldVal) {
//If icon is already set no need to animate!
if ((newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-less")) || (!newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-more"))) {
return;
}
//Set title
if (newVal) {
this.$.expandButton.title = this.expandLessTitle;
}
else {
this.$.expandButton.title = this.expandMoreTitle;
}
if (this.enableRotateAnimation) {
//Play rotate animation
this.cancelAnimation();
this.playAnimation('rotateIcon');
}
else {
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
}
},
toggleExpand: function () {
this.expanded = !this.expanded;
}
});
</script>
</dom-module>