mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 11:28:23 -07:00
297 lines
8.1 KiB
HTML
297 lines
8.1 KiB
HTML
<!--
|
|
@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
|
|
-->
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
<link rel="import" href="../paper-styles/paper-styles.html">
|
|
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
|
|
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
|
|
|
|
<!--
|
|
The progress bars are for situations where the percentage completed can be
|
|
determined. They give users a quick sense of how much longer an operation
|
|
will take.
|
|
|
|
Example:
|
|
|
|
<paper-progress value="10"></paper-progress>
|
|
|
|
There is also a secondary progress which is useful for displaying intermediate
|
|
progress, such as the buffer level during a streaming playback progress bar.
|
|
|
|
Example:
|
|
|
|
<paper-progress value="10" secondary-progress="30"></paper-progress>
|
|
|
|
### Styling progress bar:
|
|
|
|
To change the active progress bar color:
|
|
|
|
paper-progress {
|
|
--paper-progress-active-color: #e91e63;
|
|
}
|
|
|
|
To change the secondary progress bar color:
|
|
|
|
paper-progress {
|
|
--paper-progress-secondary-color: #f8bbd0;
|
|
}
|
|
|
|
To change the progress bar background color:
|
|
|
|
paper-progress {
|
|
--paper-progress-container-color: #64ffda;
|
|
}
|
|
|
|
Add the class `transiting` to a paper-progress to animate the progress bar when
|
|
the value changed. You can also customize the transition:
|
|
|
|
paper-progress {
|
|
--paper-progress-transition-duration: 0.08s;
|
|
--paper-progress-transition-timing-function: ease;
|
|
--paper-progress-transition-transition-delay: 0s;
|
|
}
|
|
|
|
The following mixins are available for styling:
|
|
|
|
|
|
|
|
Custom property | Description | Default
|
|
----------------|-------------|----------
|
|
`--paper-progress-container` | Mixin applied to container | `{}`
|
|
|
|
|
|
|
|
|
|
@group Paper Elements
|
|
@element paper-progress
|
|
@hero hero.svg
|
|
@demo demo/index.html
|
|
-->
|
|
|
|
<dom-module id="paper-progress">
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 4px;
|
|
}
|
|
|
|
:host(.transiting) #activeProgress,
|
|
:host(.transiting) #secondaryProgress {
|
|
-webkit-transition-property: -webkit-transform;
|
|
transition-property: transform;
|
|
|
|
/* Duration */
|
|
-webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
|
transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
|
|
|
/* Timing function */
|
|
-webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
|
transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
|
|
|
/* Delay */
|
|
-webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
|
|
transition-delay: var(--paper-progress-transition-delay, 0s);
|
|
}
|
|
|
|
#progressContainer {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
@apply(--paper-progress-container);
|
|
}
|
|
|
|
#progressContainer, #indeterminateSplitter {
|
|
background-color: var(--paper-progress-container-color, --google-grey-300);
|
|
}
|
|
|
|
#activeProgress,
|
|
#secondaryProgress {
|
|
-webkit-transform-origin: left center;
|
|
transform-origin: left center;
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
#activeProgress {
|
|
background-color: var(--paper-progress-active-color, --google-green-500);
|
|
}
|
|
|
|
#secondaryProgress {
|
|
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
|
}
|
|
|
|
#indeterminateSplitter {
|
|
display: none;
|
|
}
|
|
|
|
#activeProgress.indeterminate {
|
|
-webkit-transform-origin: right center;
|
|
transform-origin: right center;
|
|
-webkit-animation: indeterminate-bar 2s linear infinite;
|
|
animation: indeterminate-bar 2s linear infinite;
|
|
}
|
|
|
|
#indeterminateSplitter.indeterminate {
|
|
display: block;
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
|
animation: indeterminate-splitter 2s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate-bar {
|
|
0% {
|
|
-webkit-transform: scaleX(1) translateX(-100%);
|
|
}
|
|
50% {
|
|
-webkit-transform: scaleX(1) translateX(0%);
|
|
}
|
|
75% {
|
|
-webkit-transform: scaleX(1) translateX(0%);
|
|
-webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
|
}
|
|
100% {
|
|
-webkit-transform: scaleX(0) translateX(0%);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate-splitter {
|
|
0% {
|
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
|
}
|
|
30% {
|
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
|
-webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
|
}
|
|
90% {
|
|
-webkit-transform: scaleX(.75) translateX(125%);
|
|
}
|
|
100% {
|
|
-webkit-transform: scaleX(.75) translateX(125%);
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-bar {
|
|
0% {
|
|
transform: scaleX(1) translateX(-100%);
|
|
}
|
|
50% {
|
|
transform: scaleX(1) translateX(0%);
|
|
}
|
|
75% {
|
|
transform: scaleX(1) translateX(0%);
|
|
animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
|
}
|
|
100% {
|
|
transform: scaleX(0) translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-splitter {
|
|
0% {
|
|
transform: scaleX(.75) translateX(-125%);
|
|
}
|
|
30% {
|
|
transform: scaleX(.75) translateX(-125%);
|
|
animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
|
}
|
|
90% {
|
|
transform: scaleX(.75) translateX(125%);
|
|
}
|
|
100% {
|
|
transform: scaleX(.75) translateX(125%);
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
|
<div id="secondaryProgress" class="fit"></div>
|
|
<div id="activeProgress" class="fit"></div>
|
|
<div id="indeterminateSplitter" class="fit"></div>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
Polymer({
|
|
|
|
is: 'paper-progress',
|
|
|
|
behaviors: [
|
|
Polymer.IronRangeBehavior
|
|
],
|
|
|
|
properties: {
|
|
|
|
/**
|
|
* The number that represents the current secondary progress.
|
|
*/
|
|
secondaryProgress: {
|
|
type: Number,
|
|
value: 0,
|
|
notify: true
|
|
},
|
|
|
|
/**
|
|
* The secondary ratio
|
|
*/
|
|
secondaryRatio: {
|
|
type: Number,
|
|
value: 0,
|
|
readOnly: true,
|
|
observer: '_secondaryRatioChanged'
|
|
},
|
|
|
|
/**
|
|
* Use an indeterminate progress indicator.
|
|
*/
|
|
indeterminate: {
|
|
type: Boolean,
|
|
value: false,
|
|
notify: true,
|
|
observer: '_toggleIndeterminate'
|
|
}
|
|
},
|
|
|
|
observers: [
|
|
'_ratioChanged(ratio)',
|
|
'_secondaryProgressChanged(secondaryProgress, min, max)'
|
|
],
|
|
|
|
_toggleIndeterminate: function() {
|
|
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
|
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
|
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
|
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
|
},
|
|
|
|
_transformProgress: function(progress, ratio) {
|
|
var transform = 'scaleX(' + (ratio / 100) + ')';
|
|
progress.style.transform = progress.style.webkitTransform = transform;
|
|
},
|
|
|
|
_ratioChanged: function(ratio) {
|
|
this._transformProgress(this.$.activeProgress, ratio);
|
|
},
|
|
|
|
_secondaryRatioChanged: function(secondaryRatio) {
|
|
this._transformProgress(this.$.secondaryProgress, secondaryRatio);
|
|
},
|
|
|
|
_secondaryProgressChanged: function() {
|
|
this.secondaryProgress = this._clampValue(this.secondaryProgress);
|
|
this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|