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

update components

Browse source
This commit is contained in:
Luke Pulverenti 2016-01-12 12:58:06 -05:00
parent d22c983370
commit 409710f87b
11 changed files with 477 additions and 449 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/iron-a11y-keys-behavior/.bower.json vendored
View file

@ -1,6 +1,6 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.1.0",
"version": "1.1.1",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
@ -31,11 +31,11 @@
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.1.0",
"_release": "1.1.1",
"_resolution": {
"type": "version",
"tag": "v1.1.0",
"commit": "cd8c972278c0d916bef57209d7dce5b81e67687c"
"tag": "v1.1.1",
"commit": "12af7cb19b2c6b3887e37a5ea1501ffe676d1e8a"
},
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",

2
dashboard-ui/bower_components/iron-a11y-keys-behavior/bower.json vendored
View file

@ -1,6 +1,6 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.1.0",
"version": "1.1.1",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",

3
dashboard-ui/bower_components/iron-a11y-keys-behavior/demo/x-key-aware.html vendored
View file

@ -86,7 +86,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
keyBindings: {
'* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
'a': '_updatePressed',
'shift+a alt+a': '_updatePressed'
'shift+a alt+a': '_updatePressed',
'shift+tab shift+space': '_updatePressed'
},
_updatePressed: function(event) {

51
dashboard-ui/bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html vendored
View file

@ -65,6 +65,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
'meta': 'metaKey'
};
/**
* KeyboardEvent.key is mostly represented by printable character made by
* the keyboard, with unprintable keys labeled nicely.
*
* However, on OS X, Alt+char can make a Unicode character that follows an
* Apple-specific mapping. In this case, we fall back to .keyCode.
*/
var KEY_CHAR = /[a-z0-9*]/;
/**
* Matches a keyIdentifier string.
*/
@ -81,14 +90,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
*/
var SPACE_KEY = /^space(bar)?/;
function transformKey(key) {
/**
* Transforms the key.
* @param {string} key The KeyBoardEvent.key
* @param {Boolean} [noSpecialChars] Limits the transformation to
* alpha-numeric characters.
*/
function transformKey(key, noSpecialChars) {
var validKey = '';
if (key) {
var lKey = key.toLowerCase();
if (lKey === ' ' || SPACE_KEY.test(lKey)) {
validKey = 'space';
} else if (lKey.length == 1) {
if (!noSpecialChars || KEY_CHAR.test(lKey)) {
validKey = lKey;
}
} else if (ARROW_KEY.test(lKey)) {
validKey = lKey.replace('arrow', '');
} else if (lKey == 'multiply') {
@ -139,17 +156,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return validKey;
}
function normalizedKeyForEvent(keyEvent) {
// fall back from .key, to .keyIdentifier, to .keyCode, and then to
// .detail.key to support artificial keyboard events
return transformKey(keyEvent.key) ||
/**
* Calculates the normalized key for a KeyboardEvent.
* @param {KeyboardEvent} keyEvent
* @param {Boolean} [noSpecialChars] Set to true to limit keyEvent.key
* transformation to alpha-numeric chars. This is useful with key
* combinations like shift + 2, which on FF for MacOS produces
* keyEvent.key = @
* To get 2 returned, set noSpecialChars = true
* To get @ returned, set noSpecialChars = false
*/
function normalizedKeyForEvent(keyEvent, noSpecialChars) {
// Fall back from .key, to .keyIdentifier, to .keyCode, and then to
// .detail.key to support artificial keyboard events.
return transformKey(keyEvent.key, noSpecialChars) ||
transformKeyIdentifier(keyEvent.keyIdentifier) ||
transformKeyCode(keyEvent.keyCode) ||
transformKey(keyEvent.detail.key) || '';
transformKey(keyEvent.detail.key, noSpecialChars) || '';
}
function keyComboMatchesEvent(keyCombo, event, eventKey) {
return eventKey === keyCombo.key &&
function keyComboMatchesEvent(keyCombo, event) {
// For combos with modifiers we support only alpha-numeric keys
var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers);
return keyEvent === keyCombo.key &&
(!keyCombo.hasModifiers || (
!!event.shiftKey === !!keyCombo.shiftKey &&
!!event.ctrlKey === !!keyCombo.ctrlKey &&
@ -286,9 +315,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
keyboardEventMatchesKeys: function(event, eventString) {
var keyCombos = parseEventString(eventString);
var eventKey = normalizedKeyForEvent(event);
for (var i = 0; i < keyCombos.length; ++i) {
if (keyComboMatchesEvent(keyCombos[i], event, eventKey)) {
if (keyComboMatchesEvent(keyCombos[i], event)) {
return true;
}
}
@ -388,11 +416,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return;
}
var eventKey = normalizedKeyForEvent(event);
for (var i = 0; i < keyBindings.length; i++) {
var keyCombo = keyBindings[i][0];
var handlerName = keyBindings[i][1];
if (keyComboMatchesEvent(keyCombo, event, eventKey)) {
if (keyComboMatchesEvent(keyCombo, event)) {
this._triggerKeyHandler(keyCombo, handlerName, event);
// exit the loop if eventDefault was prevented
if (event.defaultPrevented) {

24
dashboard-ui/bower_components/iron-a11y-keys-behavior/test/basic-test.html vendored
View file

@ -97,7 +97,8 @@ suite('Polymer.IronA11yKeysBehavior', function() {
],
keyBindings: {
'space': '_keyHandler'
'space': '_keyHandler',
'@': '_keyHandler'
}
});
@ -179,6 +180,13 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(keys.keyCount).to.be.equal(1);
});
test('handles special character @', function() {
var event = new CustomEvent('keydown');
event.key = '@';
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
test('do not trigger the handler for non-specified keys', function() {
MockInteractions.pressEnter(keys);
@ -284,6 +292,19 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(keys.keyCount).to.be.equal(1);
});
test('check if KeyBoardEvent.key is alpha-numberic', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;
event.shiftKey = true;
event.key = 'å';
event.keyCode = event.code = 65;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
test('trigger also bindings without modifiers', function() {
var event = new CustomEvent('keydown');
// Combo `shift+enter`.
@ -305,6 +326,7 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(shiftEnterSpy.called).to.be.true;
expect(enterSpy.calledAfter(shiftEnterSpy)).to.be.true;
});
});
suite('alternative event keys', function() {

6
dashboard-ui/bower_components/iron-behaviors/.bower.json vendored
View file

@ -29,14 +29,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-behaviors",
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.12",
"_resolution": {
"type": "version",
"tag": "v1.0.12",
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
},
"_source": "git://github.com/polymerelements/iron-behaviors.git",
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-behaviors"
"_originalSource": "PolymerElements/iron-behaviors"
}

6
dashboard-ui/bower_components/paper-input/.bower.json vendored
View file

@ -53,7 +53,7 @@
"tag": "v1.1.4",
"commit": "8ca01ac3cafc61abd980d262875ffca0c79640fa"
},
"_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-input"
"_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.9",
"_originalSource": "polymerelements/paper-input"
}

11
dashboard-ui/bower_components/paper-slider/.bower.json vendored
View file

@ -1,6 +1,6 @@
{
"name": "paper-slider",
"version": "1.0.8",
"version": "1.0.9",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
@ -17,12 +17,11 @@
},
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
@ -36,11 +35,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/paper-slider",
"_release": "1.0.8",
"_release": "1.0.9",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "5cad377a1321656a2bdc65644b1ad26ab76f1ecb"
"tag": "v1.0.9",
"commit": "5814b574e9440cec40619157f00b7aa2ced20c8d"
},
"_source": "git://github.com/PolymerElements/paper-slider.git",
"_target": "~1.0.3",

30
dashboard-ui/bower_components/paper-slider/.travis.yml vendored
View file

@ -1,9 +1,15 @@
language: node_js
sudo: false
matrix:
include:
- node_js: stable
script: xvfb-run wct
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install
env:
global:
- secure: W9pv3wK5AyI038GpPZpFo5yii72up1pTHM9yu8TI4th6Q/TiUQCa8GbjAMhUcbMDl3Y4i50WjckykSox+c506Zs5Pe5vDCaKpHT/iOHYqjIaQEDGGvvKWxSTJr82HY2taNhkH7seksg7oKq8dL7DCBLyKJUl03hGmRqZABjIw9fWjSNUb9PVdlZass5nJaqw954t76GYBWcQ71fntm8uCnSrQoviHEprvfwZMNnK0mhd79VmBohl83jpFU8FaYEWLc5IFY29u7McLxgynZBggwhGSrvdDrOYG4jtn26RNx4mNCcJGxejzadvf4K6H2S45SGnsCIjJRJbl8MV+ni18VqC/BuCF2J4k8QqSRtWi2mSq/l9DOgIiwViPRjPRxoK+a+/6qA7pQ1aMXBWWF4FjngvgoZHcY2J5FptbRltDtalrUSbUVmmKNoWwaJa4Sb5OopJdr0herGds946qzQKW1FLqkcDTtF6c4fZqK12WVEIXZLXiP9sV9+dBJDXT4oWzgjo2GHAiMEzV6Xk3oZ/RHmWJ34Bemy7M5zYKDHErLhD6/UXiA/tYlTqqgu/4Jdxs07ilWmaVd3kTYywRYuTzR4yO3xq8ElpEnpby2WobGiVCsuzQwOe4fWSvV4wS8TpSdigoGxYQ+FPrrbc7jhgRodyZP1xF/mTHlIvNmaTYYc=
- secure: xLLhaBejrIuYAxwQoFPsrvnBpeDVY8IYdThJ36fJnD4V0jpqS7m8b2rw5fYrtwWvmEAQlqJ20/hnjfp9kKXr6Qpkj2im9d0KWdw4xAyD2KxiG/u5pBn1Y+zE9iGjq+NGa58EJDNaxQSnaXmVnk55tyT9W3ailkiO/lEtaofXXXGqiW9Nxa9D0GtbbNWBypcoc7X/HXCcg5hVpdVjEFh3Y+nFWIdqJEO0V7oKujfb5yFhu5PRU7siTzdN+nLoPXPMlkBa3aWwPLdM1D9HKXN1jBX6dM9dH3oz20K/TCPpbO5u675vfuTT9iP9XuLy4LB/cl7S6bcopvhU5ipkQvLEieeq73EP1hz5vwdSWgleXkNhWBInhzeHLTI04M49ZxIc0NEay2Tvx9tQl5e8BT1/WglpjnHvqx/VoF7zkHRfWyWeObL6YyFVFiJ0Gz3ExJTUCruQRBen+g2Cqr1qwBN4bFPhgxzHW58ECdsDFvfpZT3I7h/wnCzNVOZx+A74nVwDpl6zg+/+GWpqZF2ILGbRDTcjp1A/eH+FMwnQccRLiBcXm4v4y8pFfaNzjRwswUQjnMV5KyIV+dSyQQAh9sBedFJjeWm1HSy3UXFZvyc6gQIG5GR5uGWkyxYHdCxBFMYFj2xmEzoLwF7omu5CXF0TUdYxb5hvUBMEqEEKIwte2VE=
node_js: 4
addons:
firefox: latest
apt:
@ -11,18 +17,6 @@ matrix:
- google-chrome
packages:
- google-chrome-stable
- node_js: node
script:
- |
if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
wct -s 'default'
fi
before_script:
- npm install web-component-tester
- npm install bower
- export PATH=$PWD/node_modules/.bin:$PATH
- bower install
env:
global:
- secure: W9pv3wK5AyI038GpPZpFo5yii72up1pTHM9yu8TI4th6Q/TiUQCa8GbjAMhUcbMDl3Y4i50WjckykSox+c506Zs5Pe5vDCaKpHT/iOHYqjIaQEDGGvvKWxSTJr82HY2taNhkH7seksg7oKq8dL7DCBLyKJUl03hGmRqZABjIw9fWjSNUb9PVdlZass5nJaqw954t76GYBWcQ71fntm8uCnSrQoviHEprvfwZMNnK0mhd79VmBohl83jpFU8FaYEWLc5IFY29u7McLxgynZBggwhGSrvdDrOYG4jtn26RNx4mNCcJGxejzadvf4K6H2S45SGnsCIjJRJbl8MV+ni18VqC/BuCF2J4k8QqSRtWi2mSq/l9DOgIiwViPRjPRxoK+a+/6qA7pQ1aMXBWWF4FjngvgoZHcY2J5FptbRltDtalrUSbUVmmKNoWwaJa4Sb5OopJdr0herGds946qzQKW1FLqkcDTtF6c4fZqK12WVEIXZLXiP9sV9+dBJDXT4oWzgjo2GHAiMEzV6Xk3oZ/RHmWJ34Bemy7M5zYKDHErLhD6/UXiA/tYlTqqgu/4Jdxs07ilWmaVd3kTYywRYuTzR4yO3xq8ElpEnpby2WobGiVCsuzQwOe4fWSvV4wS8TpSdigoGxYQ+FPrrbc7jhgRodyZP1xF/mTHlIvNmaTYYc=
- secure: xLLhaBejrIuYAxwQoFPsrvnBpeDVY8IYdThJ36fJnD4V0jpqS7m8b2rw5fYrtwWvmEAQlqJ20/hnjfp9kKXr6Qpkj2im9d0KWdw4xAyD2KxiG/u5pBn1Y+zE9iGjq+NGa58EJDNaxQSnaXmVnk55tyT9W3ailkiO/lEtaofXXXGqiW9Nxa9D0GtbbNWBypcoc7X/HXCcg5hVpdVjEFh3Y+nFWIdqJEO0V7oKujfb5yFhu5PRU7siTzdN+nLoPXPMlkBa3aWwPLdM1D9HKXN1jBX6dM9dH3oz20K/TCPpbO5u675vfuTT9iP9XuLy4LB/cl7S6bcopvhU5ipkQvLEieeq73EP1hz5vwdSWgleXkNhWBInhzeHLTI04M49ZxIc0NEay2Tvx9tQl5e8BT1/WglpjnHvqx/VoF7zkHRfWyWeObL6YyFVFiJ0Gz3ExJTUCruQRBen+g2Cqr1qwBN4bFPhgxzHW58ECdsDFvfpZT3I7h/wnCzNVOZx+A74nVwDpl6zg+/+GWpqZF2ILGbRDTcjp1A/eH+FMwnQccRLiBcXm4v4y8pFfaNzjRwswUQjnMV5KyIV+dSyQQAh9sBedFJjeWm1HSy3UXFZvyc6gQIG5GR5uGWkyxYHdCxBFMYFj2xmEzoLwF7omu5CXF0TUdYxb5hvUBMEqEEKIwte2VE=
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

5
dashboard-ui/bower_components/paper-slider/bower.json vendored
View file

@ -1,6 +1,6 @@
{
"name": "paper-slider",
"version": "1.0.8",
"version": "1.0.9",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
@ -17,12 +17,11 @@
},
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",

108
dashboard-ui/bower_components/paper-slider/paper-slider.html vendored
View file

@ -9,15 +9,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-styles/color.html">
<!--
Material design: [Sliders](https://www.google.com/design/spec/components/sliders.html)
@ -47,15 +46,16 @@ Custom property | Description | Default
`--paper-slider-active-color` | The progress bar color | `--google-blue-700`
`--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
`--paper-slider-knob-color` | The knob color | `--google-blue-700`
`--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-500`
`--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-400`
`--paper-slider-pin-color` | The pin color | `--google-blue-700`
`--paper-slider-font-color` | The pin's text color | `#fff`
`--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500`
`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
`--paper-slider-disabled-active-color` | The disabled progress bar color | `--paper-grey-400`
`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
`--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
`--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `#c8c8c8`
`--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8c8`
`--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400`
`--paper-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`
`--paper-slider-height` | Height of the progress bar | `2px`
`--paper-slider-input` | Mixin applied to the input in editable mode | `{}`
@group Paper Elements
@element paper-slider
@ -79,8 +79,8 @@ Custom property | Description | Default
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --paper-grey-400);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --paper-grey-400);
}
/* focus shows the ripple */
@ -116,7 +116,7 @@ Custom property | Description | Default
.ring > .bar-container {
left: calc(5px + var(--paper-slider-height, 2px)/2);
transition: left 0.18s ease, width 0.18s ease;
transition: left 0.18s ease;
}
.ring.expand.dragging > .bar-container {
@ -124,25 +124,17 @@ Custom property | Description | Default
}
.ring.expand:not(.pin) > .bar-container {
left: calc(15px + var(--paper-slider-height, 2px)/2);
left: calc(8px + var(--paper-slider-height, 2px)/2);
}
#sliderBar {
padding: 15px 0;
width: 100%;
background-color: var(--paper-slider-bar-color, transparent);
--paper-progress-container-color: var(--paper-grey-400);
--paper-progress-height: var(--paper-slider-height, 2px);
}
.ring #sliderBar {
margin-left: calc(-5px - var(--paper-slider-height, 2px)/2);
width: calc(100% + 5px + var(--paper-slider-height, 2px)/2);
}
.ring.expand:not(.pin) #sliderBar {
margin-left: calc(-15px - var(--paper-slider-height, 2px)/2);
width: calc(100% + 15px + var(--paper-slider-height, 2px)/2);
}
.slider-markers {
position: absolute;
top: calc(14px + var(--paper-slider-height,2px)/2);
@ -198,29 +190,27 @@ Custom property | Description | Default
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 50%;
background-color: var(--paper-slider-knob-color, --google-blue-700);
border: 2px solid var(--paper-slider-knob-color, --google-blue-700);
border-radius: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition-property: margin, height, width, background-color, border;
transition-duration: 0.1s;
transition-property: -webkit-transform, background-color, border;
transition-property: transform, background-color, border;
transition-duration: 0.18s;
transition-timing-function: ease;
}
.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
margin: 0;
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.ring > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
}
#sliderKnobInner::before {
@ -243,12 +233,12 @@ Custom property | Description | Default
#sliderKnobInner::before,
#sliderKnobInner::after {
transition: -webkit-transform .2s ease, background-color .18s ease;
transition: transform .2s ease, background-color .18s ease;
transition: -webkit-transform .18s ease, background-color .18s ease;
transition: transform .18s ease, background-color .18s ease;
}
.pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: var(--paper-slider-pin-start-color, #c8c8c8);
background-color: var(--paper-slider-pin-start-color, --paper-grey-400);
}
.pin.expand > #sliderKnob > #sliderKnobInner::before {
@ -284,6 +274,7 @@ Custom property | Description | Default
--paper-input-container-input: {
text-align: center;
};
@apply(--paper-slider-input);
}
/* disabled state */
@ -291,26 +282,23 @@ Custom property | Description | Default
pointer-events: none;
}
.disabled > #sliderKnob {
top: 2px;
margin-left: calc(-13px - var(--paper-slider-height, 2px)/2);
width: calc(26px + var(--paper-slider-height, 2px));
height: calc(26px + var(--paper-slider-height, 2px));
}
.disabled > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
background-color: var(--paper-slider-disabled-knob-color, --paper-grey-400);
border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-400);
-webkit-transform: scale3d(0.75, 0.75, 1);
transform: scale3d(0.75, 0.75, 1);
}
.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
}
paper-ripple {
color: var(--paper-slider-knob-color, --google-blue-700);
}
</style>
<div id="sliderContainer"
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
@ -343,9 +331,10 @@ Custom property | Description | Default
on-up="_resetKnob"
on-track="_onTrack"
on-transitionend="_knobTransitionEnd">
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
</div>
</div>
<template is="dom-if" if="[[editable]]">
<paper-input
id="input"
@ -362,21 +351,19 @@ Custom property | Description | Default
</paper-input>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-slider',
behaviors: [
Polymer.IronA11yKeysBehavior,
Polymer.IronFormElementBehavior,
Polymer.PaperInkyFocusBehavior,
Polymer.IronRangeBehavior
],
properties: {
/**
* If true, the slider thumb snaps to tick marks evenly spaced based
* on the `step` property value.
@ -542,10 +529,13 @@ Custom property | Description | Default
_positionKnob: function(ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setPinValue(this.immediateValue);
this._setRatio(this._calcRatio(this.immediateValue));
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
if (this.dragging) {
this._knobstartx = this.ratio * this._w;
this.translate3d(0, 0, 0, this.$.sliderKnob);
}
},
_calcKnobPosition: function(ratio) {
@ -570,7 +560,8 @@ Custom property | Description | Default
_trackStart: function(event) {
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._startx = this._x || 0;
this._startx = this._x;
this._knobstartx = this._startx;
this._minx = - this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
@ -589,12 +580,8 @@ Custom property | Description | Default
this._setImmediateValue(immediateValue);
// update knob's position
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
this._setPinValue(immediateValue);
},
_setPinValue: function (value) {
this.pinValue = value;
},
_trackEnd: function() {
@ -739,7 +726,6 @@ Custom property | Description | Default
this._ripple.holdDown = receivedFocusFromKeyboard;
}
}
});
/**
@ -762,5 +748,5 @@ Custom property | Description | Default
*
* @event change
*/
</script>
</dom-module>