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", "name": "iron-a11y-keys-behavior",
"version": "1.1.0", "version": "1.1.1",
"description": "A behavior that enables keybindings for greater a11y.", "description": "A behavior that enables keybindings for greater a11y.",
"keywords": [ "keywords": [
"web-components", "web-components",
@ -31,11 +31,11 @@
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior", "homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.1.0", "_release": "1.1.1",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.0", "tag": "v1.1.1",
"commit": "cd8c972278c0d916bef57209d7dce5b81e67687c" "commit": "12af7cb19b2c6b3887e37a5ea1501ffe676d1e8a"
}, },
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git", "_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0", "_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", "name": "iron-a11y-keys-behavior",
"version": "1.1.0", "version": "1.1.1",
"description": "A behavior that enables keybindings for greater a11y.", "description": "A behavior that enables keybindings for greater a11y.",
"keywords": [ "keywords": [
"web-components", "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: { keyBindings: {
'* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed', '* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
'a': '_updatePressed', 'a': '_updatePressed',
'shift+a alt+a': '_updatePressed' 'shift+a alt+a': '_updatePressed',
'shift+tab shift+space': '_updatePressed'
}, },
_updatePressed: function(event) { _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' '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. * 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)?/; 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 = ''; var validKey = '';
if (key) { if (key) {
var lKey = key.toLowerCase(); var lKey = key.toLowerCase();
if (lKey === ' ' || SPACE_KEY.test(lKey)) { if (lKey === ' ' || SPACE_KEY.test(lKey)) {
validKey = 'space'; validKey = 'space';
} else if (lKey.length == 1) { } else if (lKey.length == 1) {
if (!noSpecialChars || KEY_CHAR.test(lKey)) {
validKey = lKey; validKey = lKey;
}
} else if (ARROW_KEY.test(lKey)) { } else if (ARROW_KEY.test(lKey)) {
validKey = lKey.replace('arrow', ''); validKey = lKey.replace('arrow', '');
} else if (lKey == 'multiply') { } else if (lKey == 'multiply') {
@ -139,17 +156,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return validKey; return validKey;
} }
function normalizedKeyForEvent(keyEvent) { /**
// fall back from .key, to .keyIdentifier, to .keyCode, and then to * Calculates the normalized key for a KeyboardEvent.
// .detail.key to support artificial keyboard events * @param {KeyboardEvent} keyEvent
return transformKey(keyEvent.key) || * @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) || transformKeyIdentifier(keyEvent.keyIdentifier) ||
transformKeyCode(keyEvent.keyCode) || transformKeyCode(keyEvent.keyCode) ||
transformKey(keyEvent.detail.key) || ''; transformKey(keyEvent.detail.key, noSpecialChars) || '';
} }
function keyComboMatchesEvent(keyCombo, event, eventKey) { function keyComboMatchesEvent(keyCombo, event) {
return eventKey === keyCombo.key && // For combos with modifiers we support only alpha-numeric keys
var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers);
return keyEvent === keyCombo.key &&
(!keyCombo.hasModifiers || ( (!keyCombo.hasModifiers || (
!!event.shiftKey === !!keyCombo.shiftKey && !!event.shiftKey === !!keyCombo.shiftKey &&
!!event.ctrlKey === !!keyCombo.ctrlKey && !!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) { keyboardEventMatchesKeys: function(event, eventString) {
var keyCombos = parseEventString(eventString); var keyCombos = parseEventString(eventString);
var eventKey = normalizedKeyForEvent(event);
for (var i = 0; i < keyCombos.length; ++i) { for (var i = 0; i < keyCombos.length; ++i) {
if (keyComboMatchesEvent(keyCombos[i], event, eventKey)) { if (keyComboMatchesEvent(keyCombos[i], event)) {
return true; return true;
} }
} }
@ -388,11 +416,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return; return;
} }
var eventKey = normalizedKeyForEvent(event);
for (var i = 0; i < keyBindings.length; i++) { for (var i = 0; i < keyBindings.length; i++) {
var keyCombo = keyBindings[i][0]; var keyCombo = keyBindings[i][0];
var handlerName = keyBindings[i][1]; var handlerName = keyBindings[i][1];
if (keyComboMatchesEvent(keyCombo, event, eventKey)) { if (keyComboMatchesEvent(keyCombo, event)) {
this._triggerKeyHandler(keyCombo, handlerName, event); this._triggerKeyHandler(keyCombo, handlerName, event);
// exit the loop if eventDefault was prevented // exit the loop if eventDefault was prevented
if (event.defaultPrevented) { 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: { keyBindings: {
'space': '_keyHandler' 'space': '_keyHandler',
'@': '_keyHandler'
} }
}); });
@ -179,6 +180,13 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(keys.keyCount).to.be.equal(1); 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() { test('do not trigger the handler for non-specified keys', function() {
MockInteractions.pressEnter(keys); MockInteractions.pressEnter(keys);
@ -284,6 +292,19 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(keys.keyCount).to.be.equal(1); 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() { test('trigger also bindings without modifiers', function() {
var event = new CustomEvent('keydown'); var event = new CustomEvent('keydown');
// Combo `shift+enter`. // Combo `shift+enter`.
@ -305,6 +326,7 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(shiftEnterSpy.called).to.be.true; expect(shiftEnterSpy.called).to.be.true;
expect(enterSpy.calledAfter(shiftEnterSpy)).to.be.true; expect(enterSpy.calledAfter(shiftEnterSpy)).to.be.true;
}); });
}); });
suite('alternative event keys', function() { 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" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/iron-behaviors", "homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.12", "_release": "1.0.12",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.12", "tag": "v1.0.12",
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3" "commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
}, },
"_source": "git://github.com/polymerelements/iron-behaviors.git", "_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0", "_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", "tag": "v1.1.4",
"commit": "8ca01ac3cafc61abd980d262875ffca0c79640fa" "commit": "8ca01ac3cafc61abd980d262875ffca0c79640fa"
}, },
"_source": "git://github.com/PolymerElements/paper-input.git", "_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.0", "_target": "^1.0.9",
"_originalSource": "PolymerElements/paper-input" "_originalSource": "polymerelements/paper-input"
} }

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

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

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

@ -1,9 +1,15 @@
language: node_js language: node_js
sudo: false sudo: false
matrix: before_script:
include: - npm install web-component-tester
- node_js: stable - npm install bower
script: xvfb-run wct - '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: addons:
firefox: latest firefox: latest
apt: apt:
@ -11,18 +17,6 @@ matrix:
- google-chrome - google-chrome
packages: packages:
- google-chrome-stable - google-chrome-stable
- node_js: node
script: script:
- | - xvfb-run wct
if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
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=

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

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