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-01-23 14:03:59 -05:00
parent 6ea653d815
commit 97286bc27a
33 changed files with 361 additions and 258 deletions

View file

@ -15,12 +15,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.0.23", "version": "1.0.24",
"_release": "1.0.23", "_release": "1.0.24",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.0.23", "tag": "1.0.24",
"commit": "1e7c56cf54a657d72d35d36f37937231942a2685" "commit": "ab1c97700a5059e3522a8ec5c43fa33ee36d6e20"
}, },
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git", "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.0.0", "_target": "~1.0.0",

View file

@ -5,53 +5,6 @@ define(['browser'], function (browser) {
return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
} }
var supportedFormats;
function getSupportedFormats() {
if (supportedFormats) {
return supportedFormats;
}
var list = [];
var elem = document.createElement('video');
if (elem.canPlayType('video/webm').replace(/no/, '')) {
list.push('webm');
}
if (elem.canPlayType('audio/mp4; codecs="ac-3"').replace(/no/, '')) {
list.push('ac3');
}
if (browser.chrome) {
list.push('mkv');
}
if (canPlayH264()) {
list.push('h264');
}
if (document.createElement('audio').canPlayType('audio/aac').replace(/no/, '') || browser.firefox) {
list.push('aac');
}
if (document.createElement('audio').canPlayType('audio/mp3').replace(/no/, '')) {
list.push('mp3');
}
if (document.createElement('audio').canPlayType('audio/ogg; codecs="opus"').replace(/no/, '')) {
list.push('opus');
}
if (document.createElement('audio').canPlayType('audio/webm').replace(/no/, '')) {
list.push('webma');
}
if (document.createElement('audio').canPlayType('audio/flac').replace(/no/, '')) {
list.push('flac');
}
supportedFormats = list;
return list;
}
var _supportsTextTracks; var _supportsTextTracks;
function supportsTextTracks() { function supportsTextTracks() {
@ -85,9 +38,28 @@ define(['browser'], function (browser) {
function canPlayHlsWithMSE() { function canPlayHlsWithMSE() {
if (window.MediaSource != null) { if (window.MediaSource != null) {
// text tracks dont work with this in firefox // text tracks dont work with this in firefox
return !browser.firefox; return !browser.firefox;
} }
return false;
}
function canPlayAudioFormat(format) {
var typeString;
if (format == 'opus') {
typeString = 'audio/ogg; codecs="opus"';
} else if (format == 'webma') {
typeString = 'audio/webm';
} else {
typeString = 'audio/' + format;
}
if (document.createElement('audio').canPlayType(typeString).replace(/no/, '')) {
return true;
}
return false; return false;
} }
@ -96,13 +68,11 @@ define(['browser'], function (browser) {
var bitrateSetting = 100000000; var bitrateSetting = 100000000;
var supportedFormats = getSupportedFormats(); var videoTestElement = document.createElement('video');
var canPlayWebm = supportedFormats.indexOf('webm') != -1; var canPlayWebm = videoTestElement.canPlayType('video/webm').replace(/no/, '');
var canPlayAc3 = supportedFormats.indexOf('ac3') != -1; // No real way to detect this, but it's too good to pass up
var canPlayMp3 = supportedFormats.indexOf('mp3') != -1; var canPlayMkv = browser.chrome;
var canPlayAac = supportedFormats.indexOf('aac') != -1;
var canPlayMkv = supportedFormats.indexOf('mkv') != -1;
var profile = {}; var profile = {};
@ -117,23 +87,23 @@ define(['browser'], function (browser) {
// Only put mp3 first if mkv support is there // Only put mp3 first if mkv support is there
// Otherwise with HLS and mp3 audio we're seeing some browsers // Otherwise with HLS and mp3 audio we're seeing some browsers
if (canPlayMkv) { if (canPlayMkv) {
if (canPlayMp3) { if (canPlayAudioFormat('mp3')) {
videoAudioCodecs.push('mp3'); videoAudioCodecs.push('mp3');
} }
} }
if (canPlayAac) { if (canPlayAudioFormat('aac')) {
videoAudioCodecs.push('aac'); videoAudioCodecs.push('aac');
} }
if (!canPlayMkv) { if (!canPlayMkv) {
if (canPlayMp3) { if (canPlayAudioFormat('mp3')) {
videoAudioCodecs.push('mp3'); videoAudioCodecs.push('mp3');
} }
} }
if (canPlayAc3) { if (videoTestElement.canPlayType('audio/mp4; codecs="ac-3"').replace(/no/, '')) {
videoAudioCodecs.push('ac3'); videoAudioCodecs.push('ac3');
} }
if (supportedFormats.indexOf('h264') != -1) { if (canPlayH264()) {
profile.DirectPlayProfiles.push({ profile.DirectPlayProfiles.push({
Container: 'mp4,m4v', Container: 'mp4,m4v',
Type: 'Video', Type: 'Video',
@ -151,14 +121,12 @@ define(['browser'], function (browser) {
}); });
} }
['opus', 'mp3', 'aac', 'flac', 'webma'].forEach(function (audioFormat) { ['opus', 'mp3', 'aac', 'flac', 'webma'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
if (supportedFormats.indexOf(audioFormat) != -1) { profile.DirectPlayProfiles.push({
profile.DirectPlayProfiles.push({ Container: audioFormat == 'webma' ? 'webma,webm' : audioFormat,
Container: audioFormat == 'webma' ? 'webma,webm' : audioFormat, Type: 'Audio'
Type: 'Audio' });
});
}
}); });
if (canPlayWebm) { if (canPlayWebm) {
@ -170,24 +138,22 @@ define(['browser'], function (browser) {
profile.TranscodingProfiles = []; profile.TranscodingProfiles = [];
['opus', 'mp3', 'aac'].forEach(function (audioFormat) { ['opus', 'mp3', 'aac'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
if (supportedFormats.indexOf(audioFormat) != -1) { profile.TranscodingProfiles.push({
profile.TranscodingProfiles.push({ Container: audioFormat,
Container: audioFormat, Type: 'Audio',
Type: 'Audio', AudioCodec: audioFormat,
AudioCodec: audioFormat, Context: 'Streaming',
Context: 'Streaming', Protocol: 'http'
Protocol: 'http' });
}); profile.TranscodingProfiles.push({
profile.TranscodingProfiles.push({ Container: audioFormat,
Container: audioFormat, Type: 'Audio',
Type: 'Audio', AudioCodec: audioFormat,
AudioCodec: audioFormat, Context: 'Static',
Context: 'Static', Protocol: 'http'
Protocol: 'http' });
});
}
}); });
// Can't use mkv on mobile because we have to use the native player controls and they won't be able to seek it // Can't use mkv on mobile because we have to use the native player controls and they won't be able to seek it

View file

@ -1,14 +1,14 @@
{ {
"name": "howler.js", "name": "howler.js",
"version": "1.1.28",
"description": "Javascript audio library for the modern web.", "description": "Javascript audio library for the modern web.",
"main": "howler.js", "main": "howler.js",
"homepage": "https://github.com/goldfire/howler.js", "homepage": "https://github.com/goldfire/howler.js",
"_release": "1.1.28", "version": "1.1.29",
"_release": "1.1.29",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.28", "tag": "v1.1.29",
"commit": "34c22ab507f847bba7bd2eb2b003197cfc54f274" "commit": "169feb2702632459cb0eb37bf24a20e1d840f78c"
}, },
"_source": "git://github.com/goldfire/howler.js.git", "_source": "git://github.com/goldfire/howler.js.git",
"_target": "~1.1.27", "_target": "~1.1.27",

View file

@ -1,3 +1,9 @@
## 1.1.29 (January 22, 2016)
- `ADDED`: Error messages added onto each `loaderror` event (thanks Philip Silva).
- `FIXED`: Fixed various edge-case bugs by no longer comparing functions by string in `.off()` (thanks richard-livingston).
- `FIXED`: Edge case where multiple overlapping instances of the same sound won't all fire `end` (thanks richard-livingston).
- `FIXED`: `end` event now fires correctly when changing the `rate` of a sound.
## 1.1.28 (October 22, 2015) ## 1.1.28 (October 22, 2015)
- `FIXED`: Fixed typo with iOS enabler that was preventing it from working. - `FIXED`: Fixed typo with iOS enabler that was preventing it from working.

View file

@ -1,6 +1,5 @@
{ {
"name": "howler.js", "name": "howler.js",
"version": "1.1.27",
"description": "Javascript audio library for the modern web.", "description": "Javascript audio library for the modern web.",
"main": "howler.js" "main": "howler.js"
} }

View file

@ -1,8 +1,8 @@
/*! /*!
* howler.js v1.1.28 * howler.js v1.1.29
* howlerjs.com * howlerjs.com
* *
* (c) 2013-2015, James Simpson of GoldFire Studios * (c) 2013-2016, James Simpson of GoldFire Studios
* goldfirestudios.com * goldfirestudios.com
* *
* MIT License * MIT License
@ -139,7 +139,7 @@
/** /**
* Check for codec support. * Check for codec support.
* @param {String} ext Audio file extention. * @param {String} ext Audio file extension.
* @return {Boolean} * @return {Boolean}
*/ */
codecs: function(ext) { codecs: function(ext) {
@ -284,7 +284,7 @@
// if no audio is available, quit immediately // if no audio is available, quit immediately
if (noAudio) { if (noAudio) {
self.on('loaderror'); self.on('loaderror', new Error('No audio support.'));
return; return;
} }
@ -306,7 +306,7 @@
if (ext) { if (ext) {
ext = ext[1].toLowerCase(); ext = ext[1].toLowerCase();
} else { } else {
self.on('loaderror'); self.on('loaderror', new Error('Could not extract format from passed URLs, please add format parameter.'));
return; return;
} }
} }
@ -318,7 +318,7 @@
} }
if (!url) { if (!url) {
self.on('loaderror'); self.on('loaderror', new Error('No codec support for selected audio sources.'));
return; return;
} }
@ -483,7 +483,7 @@
// fire ended event // fire ended event
self.on('end', soundId); self.on('end', soundId);
}, duration * 1000); }, (duration / self._rate) * 1000);
// store the reference to the timer // store the reference to the timer
self._onendTimer.push({timer: timerId, id: data.id}); self._onendTimer.push({timer: timerId, id: data.id});
@ -1060,7 +1060,7 @@
*/ */
_clearEndTimer: function(soundId) { _clearEndTimer: function(soundId) {
var self = this, var self = this,
index = 0; index = -1;
// loop through the timers to find the one associated with this sound // loop through the timers to find the one associated with this sound
for (var i=0; i<self._onendTimer.length; i++) { for (var i=0; i<self._onendTimer.length; i++) {
@ -1136,13 +1136,12 @@
*/ */
off: function(event, fn) { off: function(event, fn) {
var self = this, var self = this,
events = self['_on' + event], events = self['_on' + event];
fnString = fn ? fn.toString() : null;
if (fnString) { if (fn) {
// loop through functions in the event for comparison // loop through functions in the event for comparison
for (var i=0; i<events.length; i++) { for (var i=0; i<events.length; i++) {
if (fnString === events[i].toString()) { if (fn === events[i]) {
events.splice(i, 1); events.splice(i, 1);
break; break;
} }
@ -1269,7 +1268,7 @@
} }
}, },
function(err) { function(err) {
obj.on('loaderror'); obj.on('loaderror', err);
} }
); );
}; };

File diff suppressed because one or more lines are too long

View file

@ -16,7 +16,7 @@
"url": "git://github.com/goldfire/howler.js.git" "url": "git://github.com/goldfire/howler.js.git"
}, },
"main": "howler.js", "main": "howler.js",
"version": "1.1.27", "version": "1.1.29",
"license": { "license": {
"type": "MIT", "type": "MIT",
"url": "https://raw.githubusercontent.com/goldfire/howler.js/master/LICENSE.md" "url": "https://raw.githubusercontent.com/goldfire/howler.js/master/LICENSE.md"

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-icons", "name": "iron-icons",
"version": "1.1.1", "version": "1.1.2",
"description": "A set of icons for use with iron-icon", "description": "A set of icons for use with iron-icon",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -28,17 +28,18 @@
"iron-component-page": "polymerelements/iron-component-page#1.0.0", "iron-component-page": "polymerelements/iron-component-page#1.0.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0", "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0", "iron-meta": "polymerelements/iron-meta#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0"
}, },
"ignore": [ "ignore": [
"util", "util",
"update-icons.sh" "update-icons.sh"
], ],
"_release": "1.1.1", "_release": "1.1.2",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.1", "tag": "v1.1.2",
"commit": "77a8e0190d6c481d8b5df0495fa484928880ea53" "commit": "14a4138f7da753ee8bebeb9ed4abd6053b2496dd"
}, },
"_source": "git://github.com/PolymerElements/iron-icons.git", "_source": "git://github.com/PolymerElements/iron-icons.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,22 +1,25 @@
language: node_js language: node_js
sudo: false sudo: false
before_script: before_script:
- npm install web-component-tester - npm install -g bower polylint web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
env: env:
global: global:
- secure: itlu3qIX/3ggZQIuzTJc62A5MD2Rdms+zB1EvNEWFiQZQgNGu2+hhp72PcVB/urybOTFmMeq4W12RGr53KMvwj6mwNlXPhQxeP1oyR+icZZVbuLDfj5pF8OvNf4OXEkGv0yH+OTuNTB8CU4msJzgB2W8iuC+pFH/dIas6fQDTfE= - secure: itlu3qIX/3ggZQIuzTJc62A5MD2Rdms+zB1EvNEWFiQZQgNGu2+hhp72PcVB/urybOTFmMeq4W12RGr53KMvwj6mwNlXPhQxeP1oyR+icZZVbuLDfj5pF8OvNf4OXEkGv0yH+OTuNTB8CU4msJzgB2W8iuC+pFH/dIas6fQDTfE=
- secure: LBT0VumsEPWUYm0OLhqHU1XWmVY18QP64cMeqZAwASnYYyH/R5OGYAcI7aH8To29FWpkZSL85NPto37bN+f8DWRSULq4p+1wl2HviYHsam8x1NzN7hKq6nv+203qaT9SflheaNy6sSDfZJQ+36bRcGQ5khKkVeDpw7h8D/osSQ4= - secure: LBT0VumsEPWUYm0OLhqHU1XWmVY18QP64cMeqZAwASnYYyH/R5OGYAcI7aH8To29FWpkZSL85NPto37bN+f8DWRSULq4p+1wl2HviYHsam8x1NzN7hKq6nv+203qaT9SflheaNy6sSDfZJQ+36bRcGQ5khKkVeDpw7h8D/osSQ4=
node_js: 4 - CXX=g++-4.8
node_js: stable
addons: addons:
firefox: latest firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
script: script:
- xvfb-run wct - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -1,6 +1,6 @@
{ {
"name": "iron-icons", "name": "iron-icons",
"version": "1.1.1", "version": "1.1.2",
"description": "A set of icons for use with iron-icon", "description": "A set of icons for use with iron-icon",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -28,7 +28,8 @@
"iron-component-page": "polymerelements/iron-component-page#1.0.0", "iron-component-page": "polymerelements/iron-component-page#1.0.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0", "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-meta": "polymerelements/iron-meta#^1.0.0", "iron-meta": "polymerelements/iron-meta#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0"
}, },
"ignore": [ "ignore": [
"util", "util",

View file

@ -28,7 +28,7 @@ See [iron-icon](#iron-icon) for more information about working with icons.
See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset. See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset.
@group Polymer Core Elements @group Polymer Core Elements
@element iron-icons @pseudoElement iron-icons
@homepage polymer.github.io @homepage polymer.github.io
--> -->
<link rel="import" href="../iron-icon/iron-icon.html"> <link rel="import" href="../iron-icon/iron-icon.html">

View file

@ -1,7 +1,7 @@
{ {
"name": "neon-animation", "name": "neon-animation",
"description": "A system for animating Polymer-based web components", "description": "A system for animating Polymer-based web components",
"version": "1.0.9", "version": "1.1.0",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
], ],
@ -34,7 +34,6 @@
"iron-meta": "PolymerElements/iron-meta#^1.0.0", "iron-meta": "PolymerElements/iron-meta#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0", "iron-selector": "PolymerElements/iron-selector#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"web-animations-js": "web-animations/web-animations-js#2.1.3" "web-animations-js": "web-animations/web-animations-js#2.1.3"
}, },
"devDependencies": { "devDependencies": {
@ -42,18 +41,19 @@
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-item": "PolymerElements/paper-item#^1.0.0", "paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0", "iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0", "iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0" "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}, },
"_release": "1.0.9", "_release": "1.1.0",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.9", "tag": "v1.1.0",
"commit": "ab40f4e4a777153cb5c27c9b62ee82b94d53eb76" "commit": "564e0dc92724f2bc0bf0f76bf2ac392d4905b2ff"
}, },
"_source": "git://github.com/polymerelements/neon-animation.git", "_source": "git://github.com/polymerelements/neon-animation.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,18 +1,20 @@
language: node_js language: node_js
sudo: false sudo: false
node_js: 4 node_js: stable
addons: addons:
firefox: latest firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
before_script: before_script:
- npm install web-component-tester - npm install -g bower polylint web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
script: script:
- xvfb-run wct - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
@ -20,3 +22,4 @@ env:
global: global:
- secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0= - secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0=
- secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM= - secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM=
- CXX=g++-4.8

View file

@ -22,7 +22,7 @@ Configuration:
name: 'cascaded-animation', name: 'cascaded-animation',
animation: <animation-name>, animation: <animation-name>,
nodes: <array-of-nodes>, nodes: <array-of-nodes>,
nodedelay: <node-delay-in-ms>, nodeDelay: <node-delay-in-ms>,
timing: <animation-timing> timing: <animation-timing>
} }
``` ```

View file

@ -47,8 +47,8 @@ Configuration:
} }
this._effect = new KeyframeEffect(node, [ this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(-100%)'}, {'transform': 'translateY(0%)'},
{'transform': 'none'} {'transform': 'translateY(100%)'}
], this.timingFromConfig(config)); ], this.timingFromConfig(config));
return this._effect; return this._effect;

View file

@ -0,0 +1,59 @@
<!--
@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="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`.
The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-from-bottom-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-bottom-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(100%)'},
{'transform': 'translateY(0)'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>

View file

@ -0,0 +1,59 @@
<!--
@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="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to
`none`. The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-from-top-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-top-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(-100%)'},
{'transform': 'translateY(0%)'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>

View file

@ -1,7 +1,7 @@
{ {
"name": "neon-animation", "name": "neon-animation",
"description": "A system for animating Polymer-based web components", "description": "A system for animating Polymer-based web components",
"version": "1.0.9", "version": "1.1.0",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
], ],
@ -34,7 +34,6 @@
"iron-meta": "PolymerElements/iron-meta#^1.0.0", "iron-meta": "PolymerElements/iron-meta#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0", "iron-selector": "PolymerElements/iron-selector#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"web-animations-js": "web-animations/web-animations-js#2.1.3" "web-animations-js": "web-animations/web-animations-js#2.1.3"
}, },
"devDependencies": { "devDependencies": {
@ -42,9 +41,10 @@
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0", "test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-item": "PolymerElements/paper-item#^1.0.0", "paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0", "iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0", "iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0" "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"

View file

@ -32,7 +32,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
} }
.toolbar { .toolbar {
position: relative;
padding: 8px; padding: 8px;
background-color: white;
z-index: 12;
} }
neon-animated-pages { neon-animated-pages {
@ -74,8 +80,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<template is="dom-bind"> <template is="dom-bind">
<div class="toolbar"> <div class="toolbar">
<button on-click="_onPrevClick">&lt;&lt;</button> <button on-click="_onPrevClick">&#8678;</button>
<button on-click="_onNextClick">&gt;&gt;</button> <button on-click="_onNextClick">&#8680;</button>
<button on-click="_onUpClick">&#8679;</button>
<button on-click="_onDownClick">&#8681;</button>
</div> </div>
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
@ -105,6 +113,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this.selected = this.selected === 4 ? 0 : (this.selected + 1); this.selected = this.selected === 4 ? 0 : (this.selected + 1);
} }
scope._onUpClick = function() {
this.entryAnimation = 'slide-from-top-animation';
this.exitAnimation = 'slide-down-animation';
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
scope._onDownClick = function() {
this.entryAnimation = 'slide-from-bottom-animation';
this.exitAnimation = 'slide-up-animation';
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
}
</script> </script>
</body> </body>

View file

@ -39,7 +39,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<template is="dom-bind"> <template is="dom-bind">
<neon-animated-pages id="pages" selected="0"> <neon-animated-pages id="pages" selected="0">
<animated-grid on-tile-click="_onTileClick"></animated-grid> <animated-grid on-tile-click="_onTileClick"></animated-grid>
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick"> <fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick">
</fullsize-page-with-card> </fullsize-page-with-card>
</neon-animated-pages> </neon-animated-pages>
</template> </template>

View file

@ -280,12 +280,14 @@ The new page will slide in from the right, and the old page slide away to the le
Single element animations: Single element animations:
* `fade-in-animation` Animates opacity from `0` to `1`. * `fade-in-animation` Animates opacity from `0` to `1`;
* `fade-out-animation` Animates opacity from `1` to `0`. * `fade-out-animation` Animates opacity from `1` to `0`;
* `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`. * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
* `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`. * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
* `slide-down-animation` Animates transform from `translateY(-100%)` to `none`. * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;
* `slide-up-animation` Animates transform from `none` to `translateY(-100%)`. * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
* `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
* `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;
* `slide-left-animation` Animates transform from `none` to `translateX(-100%)`; * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
* `slide-right-animation` Animates transform from `none` to `translateX(100%)`; * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
* `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`; * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;

View file

@ -95,6 +95,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return; return;
} }
if(this.animationConfig.value && typeof this.animationConfig.value === 'function') {
this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
return;
}
// type is optional // type is optional
var thisConfig; var thisConfig;
if (type) { if (type) {

View file

@ -8,6 +8,7 @@ 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-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="neon-animatable-behavior.html"> <link rel="import" href="neon-animatable-behavior.html">
<!-- <!--

View file

@ -213,7 +213,7 @@ animations to be run when switching to or switching out of the page.
}, },
_notifyPageResize: function() { _notifyPageResize: function() {
var selectedPage = this.selectedItem; var selectedPage = this.selectedItem || this._valueToItem(this.selected);
this.resizerShouldNotify = function(element) { this.resizerShouldNotify = function(element) {
return element == selectedPage; return element == selectedPage;
} }

View file

@ -18,6 +18,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="animations/scale-up-animation.html"> <link rel="import" href="animations/scale-up-animation.html">
<link rel="import" href="animations/slide-from-left-animation.html"> <link rel="import" href="animations/slide-from-left-animation.html">
<link rel="import" href="animations/slide-from-right-animation.html"> <link rel="import" href="animations/slide-from-right-animation.html">
<link rel="import" href="animations/slide-from-top-animation.html">
<link rel="import" href="animations/slide-from-bottom-animation.html">
<link rel="import" href="animations/slide-left-animation.html"> <link rel="import" href="animations/slide-left-animation.html">
<link rel="import" href="animations/slide-right-animation.html"> <link rel="import" href="animations/slide-right-animation.html">
<link rel="import" href="animations/slide-up-animation.html"> <link rel="import" href="animations/slide-up-animation.html">

View file

@ -1,14 +1,11 @@
<!doctype html> <!DOCTYPE html><!--
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> --><html><head>
<html>
<head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>neon-animation tests</title> <title>neon-animation tests</title>
@ -17,8 +14,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body> <body>
<script> <script>
WCT.loadSuites([ WCT.loadSuites([
'neon-animated-pages.html' 'neon-animated-pages.html',
'neon-animated-pages.html?dom=shadow'
]); ]);
</script> </script>
</body>
</html>
</body></html>

View file

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

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-material", "name": "paper-material",
"version": "1.0.5", "version": "1.0.6",
"description": "A material design container that looks like a lifted sheet of paper", "description": "A material design container that looks like a lifted sheet of paper",
"private": true, "private": true,
"authors": [ "authors": [
@ -27,15 +27,16 @@
}, },
"devDependencies": { "devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0", "test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0" "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
}, },
"_release": "1.0.5", "_release": "1.0.6",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.5", "tag": "v1.0.6",
"commit": "8a906004d8d0071004aafcd4bc4536ed2cf14bde" "commit": "6aef0896fcbc25f9f5bd1dd55f7679e6ab7f92ad"
}, },
"_source": "git://github.com/polymerelements/paper-material.git", "_source": "git://github.com/polymerelements/paper-material.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,22 +1,25 @@
language: node_js language: node_js
sudo: false sudo: false
before_script: before_script:
- npm install web-component-tester - npm install -g bower polylint web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install - bower install
- polylint
env: env:
global: global:
- secure: PEaqY+YpV0ZhnQbJlNQbmfIFLqy7UvvCtii0sPoGKT5/P7ulMqMOPQV9l/zLAtYi14HEz63FKLqDrpnGaVe7Cz7jtt2WRWrWqTBdarqwSHs73Z2XqztD1+2wW6vgz/lfK00B8UplAk28B7d5dbWzwUF6Kg02zOfQMsawMpulFjo= - secure: PEaqY+YpV0ZhnQbJlNQbmfIFLqy7UvvCtii0sPoGKT5/P7ulMqMOPQV9l/zLAtYi14HEz63FKLqDrpnGaVe7Cz7jtt2WRWrWqTBdarqwSHs73Z2XqztD1+2wW6vgz/lfK00B8UplAk28B7d5dbWzwUF6Kg02zOfQMsawMpulFjo=
- secure: f/3XYrYjM8aXLe9kqM/MjHQ6IEsDRuoxDqM+l2JiR3v2Nw7lP6ZyXSNvKm8bN+VNU7ubSzAmRbUGnRU7e61BhnGzuLXjOqxYeJLWZaqoSm9TDz3re3rd7wB2ddAhRokeSSPO2KeAgr6C02P9M3Au1DiO1G66fuWVH62WtzW4+qY= - secure: f/3XYrYjM8aXLe9kqM/MjHQ6IEsDRuoxDqM+l2JiR3v2Nw7lP6ZyXSNvKm8bN+VNU7ubSzAmRbUGnRU7e61BhnGzuLXjOqxYeJLWZaqoSm9TDz3re3rd7wB2ddAhRokeSSPO2KeAgr6C02P9M3Au1DiO1G66fuWVH62WtzW4+qY=
node_js: 4 - CXX=g++-4.8
node_js: stable
addons: addons:
firefox: latest firefox: latest
apt: apt:
sources: sources:
- google-chrome - google-chrome
- ubuntu-toolchain-r-test
packages: packages:
- google-chrome-stable - google-chrome-stable
- g++-4.8
sauce_connect: true
script: script:
- xvfb-run wct - xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-material", "name": "paper-material",
"version": "1.0.5", "version": "1.0.6",
"description": "A material design container that looks like a lifted sheet of paper", "description": "A material design container that looks like a lifted sheet of paper",
"private": true, "private": true,
"authors": [ "authors": [
@ -27,7 +27,8 @@
}, },
"devDependencies": { "devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0", "test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0" "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
} }

View file

@ -17,97 +17,68 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script> <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../paper-styles/typography.html"> <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../paper-material.html"> <link rel="import" href="../paper-material.html">
<link rel="stylesheet" href="../../paper-styles/demo.css">
<style is="custom-style" include="demo-pages-shared-styles">
paper-material {
display: inline-block;
background: white;
box-sizing: border-box;
margin: 8px;
padding: 16px;
border-radius: 2px;
}
</style>
</head> </head>
<body unresolved> <body unresolved>
<template is="dom-bind" id="demo"> <div class="vertical-section-container centered">
<style is="custom-style"> <h3>Paper-materials can have different elevations</h3>
paper-material { <demo-snippet class="centered-demo">
display: inline-block; <template>
background: white; <paper-material elevation="0">0</paper-material>
box-sizing: border-box; <paper-material elevation="1">1</paper-material>
margin: 16px; <paper-material elevation="2">2</paper-material>
padding: 16px; <paper-material elevation="3">3</paper-material>
border-radius: 2px; <paper-material elevation="4">4</paper-material>
} <paper-material elevation="5">5</paper-material>
</template>
.fab { </demo-snippet>
display: inline-block;
background: white;
box-sizing: border-box;
width: 56px;
height: 56px;
margin: 16px;
padding: 16px;
border-radius: 50%;
text-align: center;
cursor: pointer;
@apply(--layout-center-center);
}
</style>
<section>
<div>Paper Elevations</div>
<paper-material elevation="0">
elevation = 0
</paper-material>
<paper-material elevation="1">
elevation = 1
</paper-material>
<paper-material elevation="2">
elevation = 2
</paper-material>
<paper-material elevation="3">
elevation = 3
</paper-material>
<paper-material elevation="4">
elevation = 4
</paper-material>
<paper-material elevation="5">
elevation = 5
</paper-material>
</section>
<section on-click="tapAction">
<div>Animated</div>
<paper-material elevation="0" animated>
tap
</paper-material>
<paper-material class="fab" elevation="0" animated>
tap
</paper-material>
</section>
</template>
<script>
demo.tapAction = function(e) {
var target = e.target;
if (!target.down) {
target.elevation += 1;
if (target.elevation === 5) {
target.down = true;
}
} else {
target.elevation -= 1;
if (target.elevation === 0) {
target.down = false;
}
}
};
</script>
<h3>Changes in elevation can be animated</h3>
<demo-snippet class="centered-demo">
<template>
<style>
#a1, #a2 { cursor: pointer; }
</style>
Tap each of these boxes!
<div>
<paper-material elevation="0" animated id="a1">animated</paper-material>
<paper-material elevation="3" id="a2">not animated</paper-material>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
a1.addEventListener('click', _onTap);
a2.addEventListener('click', _onTap);
});
function _onTap(e) {
var target = e.target;
if (!target.down) {
target.elevation += 1;
if (target.elevation === 5) {
target.down = true;
}
} else {
target.elevation -= 1;
if (target.elevation === 0) {
target.down = false;
}
}
};
</script>
</template>
</demo-snippet>
</div>
</body> </body>
</html> </html>

View file

@ -8,6 +8,8 @@ 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 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--> -->
<link rel="import" href="../paper-styles/shadow.html">
<dom-module id="paper-material-shared-styles"> <dom-module id="paper-material-shared-styles">
<template> <template>
<style> <style>