mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
4f48507a2d
commit
4a87b99666
16 changed files with 428 additions and 50 deletions
|
@ -16,12 +16,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.1.30",
|
"version": "1.1.31",
|
||||||
"_release": "1.1.30",
|
"_release": "1.1.31",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.1.30",
|
"tag": "1.1.31",
|
||||||
"commit": "25a55da9b6507b8e0b81dbde2c69f21af98abce8"
|
"commit": "23e283143ce4f084d28a5af10048d53caa23e9be"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "~1.1.5",
|
"_target": "~1.1.5",
|
||||||
|
|
|
@ -84,6 +84,62 @@ define(['browser'], function (browser) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function testCanPlayMkv() {
|
||||||
|
|
||||||
|
// Unfortunately there's no real way to detect mkv support
|
||||||
|
if (browser.chrome) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var userAgent = navigator.userAgent.toLowerCase();
|
||||||
|
|
||||||
|
if (userAgent.indexOf('samsungbrowser') != -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function testCanPlayTs() {
|
||||||
|
|
||||||
|
// Unfortunately there's no real way to detect mkv support
|
||||||
|
var userAgent = navigator.userAgent.toLowerCase();
|
||||||
|
|
||||||
|
if (userAgent.indexOf('webos') != -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userAgent.indexOf('samsungbrowser') != -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function testCanPlayWmv() {
|
||||||
|
|
||||||
|
// Unfortunately there's no real way to detect mkv support
|
||||||
|
var userAgent = navigator.userAgent.toLowerCase();
|
||||||
|
|
||||||
|
if (userAgent.indexOf('webos') != -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function testCanPlayM2ts() {
|
||||||
|
|
||||||
|
// Unfortunately there's no real way to detect mkv support
|
||||||
|
var userAgent = navigator.userAgent.toLowerCase();
|
||||||
|
|
||||||
|
if (userAgent.indexOf('webos') != -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
return function () {
|
return function () {
|
||||||
|
|
||||||
var bitrateSetting = 100000000;
|
var bitrateSetting = 100000000;
|
||||||
|
@ -91,8 +147,9 @@ define(['browser'], function (browser) {
|
||||||
var videoTestElement = document.createElement('video');
|
var videoTestElement = document.createElement('video');
|
||||||
|
|
||||||
var canPlayWebm = videoTestElement.canPlayType('video/webm').replace(/no/, '');
|
var canPlayWebm = videoTestElement.canPlayType('video/webm').replace(/no/, '');
|
||||||
// No real way to detect this, but it's too good to pass up
|
|
||||||
var canPlayMkv = browser.chrome;
|
var canPlayMkv = testCanPlayMkv();
|
||||||
|
var canPlayTs = testCanPlayTs();
|
||||||
|
|
||||||
var profile = {};
|
var profile = {};
|
||||||
|
|
||||||
|
@ -121,8 +178,11 @@ define(['browser'], function (browser) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (canPlayMkv) {
|
|
||||||
|
var mp3Added = false;
|
||||||
|
if (canPlayMkv || canPlayTs) {
|
||||||
if (supportsMp3VideoAudio) {
|
if (supportsMp3VideoAudio) {
|
||||||
|
mp3Added = true;
|
||||||
videoAudioCodecs.push('mp3');
|
videoAudioCodecs.push('mp3');
|
||||||
hlsVideoAudioCodecs.push('mp3');
|
hlsVideoAudioCodecs.push('mp3');
|
||||||
}
|
}
|
||||||
|
@ -131,11 +191,9 @@ define(['browser'], function (browser) {
|
||||||
videoAudioCodecs.push('aac');
|
videoAudioCodecs.push('aac');
|
||||||
hlsVideoAudioCodecs.push('aac');
|
hlsVideoAudioCodecs.push('aac');
|
||||||
}
|
}
|
||||||
if (!canPlayMkv) {
|
if (!mp3Added && supportsMp3VideoAudio) {
|
||||||
if (supportsMp3VideoAudio) {
|
videoAudioCodecs.push('mp3');
|
||||||
videoAudioCodecs.push('mp3');
|
hlsVideoAudioCodecs.push('mp3');
|
||||||
hlsVideoAudioCodecs.push('mp3');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (canPlayH264()) {
|
if (canPlayH264()) {
|
||||||
|
@ -156,6 +214,32 @@ define(['browser'], function (browser) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (canPlayTs) {
|
||||||
|
profile.DirectPlayProfiles.push({
|
||||||
|
Container: 'ts,mpegts',
|
||||||
|
Type: 'Video',
|
||||||
|
VideoCodec: 'h264',
|
||||||
|
AudioCodec: videoAudioCodecs.join(',')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (testCanPlayWmv()) {
|
||||||
|
profile.DirectPlayProfiles.push({
|
||||||
|
Container: 'wmv',
|
||||||
|
Type: 'Video',
|
||||||
|
VideoCodec: 'h264'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (testCanPlayM2ts()) {
|
||||||
|
profile.DirectPlayProfiles.push({
|
||||||
|
Container: 'm2ts',
|
||||||
|
Type: 'Video',
|
||||||
|
VideoCodec: 'h264',
|
||||||
|
AudioCodec: videoAudioCodecs.join(',')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
['opus', 'mp3', 'aac', 'flac', 'webma'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
|
['opus', 'mp3', 'aac', 'flac', 'webma'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
|
||||||
|
|
||||||
profile.DirectPlayProfiles.push({
|
profile.DirectPlayProfiles.push({
|
||||||
|
@ -212,6 +296,17 @@ define(['browser'], function (browser) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (canPlayTs) {
|
||||||
|
profile.TranscodingProfiles.push({
|
||||||
|
Container: 'ts',
|
||||||
|
Type: 'Video',
|
||||||
|
AudioCodec: videoAudioCodecs.join(','),
|
||||||
|
VideoCodec: 'h264',
|
||||||
|
Context: 'Streaming',
|
||||||
|
CopyTimestamps: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (canPlayHls()) {
|
if (canPlayHls()) {
|
||||||
profile.TranscodingProfiles.push({
|
profile.TranscodingProfiles.push({
|
||||||
Container: 'ts',
|
Container: 'ts',
|
||||||
|
|
|
@ -264,7 +264,6 @@ define(['paperdialoghelper', 'inputManager', 'connectionManager', 'browser', 'cs
|
||||||
// If not resizing, get the original image
|
// If not resizing, get the original image
|
||||||
if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
|
if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
|
||||||
options.quality = 100;
|
options.quality = 100;
|
||||||
options.format = 'jpg';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hls.js",
|
"name": "hls.js",
|
||||||
"version": "0.5.9",
|
"version": "0.5.10",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
||||||
"homepage": "https://github.com/dailymotion/hls.js",
|
"homepage": "https://github.com/dailymotion/hls.js",
|
||||||
|
@ -16,11 +16,11 @@
|
||||||
"test",
|
"test",
|
||||||
"tests"
|
"tests"
|
||||||
],
|
],
|
||||||
"_release": "0.5.9",
|
"_release": "0.5.10",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v0.5.9",
|
"tag": "v0.5.10",
|
||||||
"commit": "b1579c58d1893c0b64ec7cd59973fea0581c3256"
|
"commit": "ec25b37b27690ccdf0c515f9c992fa9e06f48988"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/dailymotion/hls.js.git",
|
"_source": "git://github.com/dailymotion/hls.js.git",
|
||||||
"_target": "~0.5.7",
|
"_target": "~0.5.7",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hls.js",
|
"name": "hls.js",
|
||||||
"version": "0.5.9",
|
"version": "0.5.10",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
||||||
"homepage": "https://github.com/dailymotion/hls.js",
|
"homepage": "https://github.com/dailymotion/hls.js",
|
||||||
|
|
13
dashboard-ui/bower_components/hls.js/dist/hls.js
vendored
13
dashboard-ui/bower_components/hls.js/dist/hls.js
vendored
|
@ -2076,7 +2076,8 @@ var StreamController = function (_EventHandler) {
|
||||||
// include levelCodec in audio and video tracks
|
// include levelCodec in audio and video tracks
|
||||||
track = tracks.audio;
|
track = tracks.audio;
|
||||||
if (track) {
|
if (track) {
|
||||||
var audioCodec = this.levels[this.level].audioCodec;
|
var audioCodec = this.levels[this.level].audioCodec,
|
||||||
|
ua = navigator.userAgent.toLowerCase();
|
||||||
if (audioCodec && this.audioCodecSwap) {
|
if (audioCodec && this.audioCodecSwap) {
|
||||||
_logger.logger.log('swapping playlist audio codec');
|
_logger.logger.log('swapping playlist audio codec');
|
||||||
if (audioCodec.indexOf('mp4a.40.5') !== -1) {
|
if (audioCodec.indexOf('mp4a.40.5') !== -1) {
|
||||||
|
@ -2087,19 +2088,21 @@ var StreamController = function (_EventHandler) {
|
||||||
}
|
}
|
||||||
// in case AAC and HE-AAC audio codecs are signalled in manifest
|
// in case AAC and HE-AAC audio codecs are signalled in manifest
|
||||||
// force HE-AAC , as it seems that most browsers prefers that way,
|
// force HE-AAC , as it seems that most browsers prefers that way,
|
||||||
// except for mono streams OR on Android OR on FF
|
// except for mono streams OR on FF
|
||||||
// these conditions might need to be reviewed ...
|
// these conditions might need to be reviewed ...
|
||||||
if (this.audioCodecSwitch) {
|
if (this.audioCodecSwitch) {
|
||||||
var ua = navigator.userAgent.toLowerCase();
|
|
||||||
// don't force HE-AAC if mono stream
|
// don't force HE-AAC if mono stream
|
||||||
if (track.metadata.channelCount !== 1 &&
|
if (track.metadata.channelCount !== 1 &&
|
||||||
// don't force HE-AAC if android
|
|
||||||
ua.indexOf('android') === -1 &&
|
|
||||||
// don't force HE-AAC if firefox
|
// don't force HE-AAC if firefox
|
||||||
ua.indexOf('firefox') === -1) {
|
ua.indexOf('firefox') === -1) {
|
||||||
audioCodec = 'mp4a.40.5';
|
audioCodec = 'mp4a.40.5';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// HE-AAC is broken on Android, always signal audio codec as AAC even if variant manifest states otherwise
|
||||||
|
if (ua.indexOf('android') !== -1) {
|
||||||
|
audioCodec = 'mp4a.40.2';
|
||||||
|
_logger.logger.log('Android: force audio codec to' + audioCodec);
|
||||||
|
}
|
||||||
track.levelCodec = audioCodec;
|
track.levelCodec = audioCodec;
|
||||||
}
|
}
|
||||||
track = tracks.video;
|
track = tracks.video;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hls.js",
|
"name": "hls.js",
|
||||||
"version": "0.5.9",
|
"version": "0.5.10",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
"description": "Media Source Extension - HLS library, by/for Dailymotion",
|
||||||
"homepage": "https://github.com/dailymotion/hls.js",
|
"homepage": "https://github.com/dailymotion/hls.js",
|
||||||
|
|
|
@ -847,7 +847,8 @@ class StreamController extends EventHandler {
|
||||||
// include levelCodec in audio and video tracks
|
// include levelCodec in audio and video tracks
|
||||||
track = tracks.audio;
|
track = tracks.audio;
|
||||||
if(track) {
|
if(track) {
|
||||||
var audioCodec = this.levels[this.level].audioCodec;
|
var audioCodec = this.levels[this.level].audioCodec,
|
||||||
|
ua = navigator.userAgent.toLowerCase();
|
||||||
if(audioCodec && this.audioCodecSwap) {
|
if(audioCodec && this.audioCodecSwap) {
|
||||||
logger.log('swapping playlist audio codec');
|
logger.log('swapping playlist audio codec');
|
||||||
if(audioCodec.indexOf('mp4a.40.5') !==-1) {
|
if(audioCodec.indexOf('mp4a.40.5') !==-1) {
|
||||||
|
@ -858,19 +859,21 @@ class StreamController extends EventHandler {
|
||||||
}
|
}
|
||||||
// in case AAC and HE-AAC audio codecs are signalled in manifest
|
// in case AAC and HE-AAC audio codecs are signalled in manifest
|
||||||
// force HE-AAC , as it seems that most browsers prefers that way,
|
// force HE-AAC , as it seems that most browsers prefers that way,
|
||||||
// except for mono streams OR on Android OR on FF
|
// except for mono streams OR on FF
|
||||||
// these conditions might need to be reviewed ...
|
// these conditions might need to be reviewed ...
|
||||||
if (this.audioCodecSwitch) {
|
if (this.audioCodecSwitch) {
|
||||||
var ua = navigator.userAgent.toLowerCase();
|
|
||||||
// don't force HE-AAC if mono stream
|
// don't force HE-AAC if mono stream
|
||||||
if(track.metadata.channelCount !== 1 &&
|
if(track.metadata.channelCount !== 1 &&
|
||||||
// don't force HE-AAC if android
|
|
||||||
ua.indexOf('android') === -1 &&
|
|
||||||
// don't force HE-AAC if firefox
|
// don't force HE-AAC if firefox
|
||||||
ua.indexOf('firefox') === -1) {
|
ua.indexOf('firefox') === -1) {
|
||||||
audioCodec = 'mp4a.40.5';
|
audioCodec = 'mp4a.40.5';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// HE-AAC is broken on Android, always signal audio codec as AAC even if variant manifest states otherwise
|
||||||
|
if(ua.indexOf('android') !== -1) {
|
||||||
|
audioCodec = 'mp4a.40.2';
|
||||||
|
logger.log(`Android: force audio codec to` + audioCodec);
|
||||||
|
}
|
||||||
track.levelCodec = audioCodec;
|
track.levelCodec = audioCodec;
|
||||||
}
|
}
|
||||||
track = tracks.video;
|
track = tracks.video;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-flex-layout",
|
"name": "iron-flex-layout",
|
||||||
"version": "1.3.0",
|
"version": "1.3.1",
|
||||||
"description": "Provide flexbox-based layouts",
|
"description": "Provide flexbox-based layouts",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"web-components",
|
"web-components",
|
||||||
|
@ -29,11 +29,11 @@
|
||||||
},
|
},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||||
"_release": "1.3.0",
|
"_release": "1.3.1",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.3.0",
|
"tag": "v1.3.1",
|
||||||
"commit": "434224c8cf63cb4bb1b66edb0dc58e4484f7c5b2"
|
"commit": "6d88f29f3a7181daa2a5c7f678de44f0a0e6a717"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-flex-layout",
|
"name": "iron-flex-layout",
|
||||||
"version": "1.3.0",
|
"version": "1.3.1",
|
||||||
"description": "Provide flexbox-based layouts",
|
"description": "Provide flexbox-based layouts",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"web-components",
|
"web-components",
|
||||||
|
|
|
@ -15,7 +15,7 @@ You must include this file in every element that needs to use them.
|
||||||
Sample use:
|
Sample use:
|
||||||
|
|
||||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment">
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
|
||||||
<div class="layout horizontal layout-start">
|
<div class="layout horizontal layout-start">
|
||||||
<div>cross axis start alignment</div>
|
<div>cross axis start alignment</div>
|
||||||
|
@ -161,6 +161,12 @@ The following imports are available:
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout.baseline {
|
||||||
|
-ms-flex-align: baseline;
|
||||||
|
-webkit-align-items: baseline;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Alignment in main axis.
|
* Alignment in main axis.
|
||||||
*/
|
*/
|
||||||
|
@ -221,6 +227,50 @@ The following imports are available:
|
||||||
-webkit-align-self: stretch;
|
-webkit-align-self: stretch;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.self-baseline {
|
||||||
|
-ms-align-self: baseline;
|
||||||
|
-webkit-align-self: baseline;
|
||||||
|
align-self: baseline;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* multi-line alignment in main axis.
|
||||||
|
*/
|
||||||
|
.layout.start-aligned {
|
||||||
|
-ms-flex-line-pack: start; /* IE10 */
|
||||||
|
-ms-align-content: flex-start;
|
||||||
|
-webkit-align-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout.end-aligned {
|
||||||
|
-ms-flex-line-pack: end; /* IE10 */
|
||||||
|
-ms-align-content: flex-end;
|
||||||
|
-webkit-align-content: flex-end;
|
||||||
|
align-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout.center-aligned {
|
||||||
|
-ms-flex-line-pack: center; /* IE10 */
|
||||||
|
-ms-align-content: center;
|
||||||
|
-webkit-align-content: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout.between-aligned {
|
||||||
|
-ms-flex-line-pack: justify; /* IE10 */
|
||||||
|
-ms-align-content: space-between;
|
||||||
|
-webkit-align-content: space-between;
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout.around-aligned {
|
||||||
|
-ms-flex-line-pack: distribute; /* IE10 */
|
||||||
|
-ms-align-content: space-around;
|
||||||
|
-webkit-align-content: space-around;
|
||||||
|
align-content: space-around;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
|
@ -20,14 +20,14 @@ The layout class stylesheet provides a simple set of class-based flexbox rules,
|
||||||
let you specify layout properties directly in markup. You must include this file
|
let you specify layout properties directly in markup. You must include this file
|
||||||
in every element that needs to use them.
|
in every element that needs to use them.
|
||||||
|
|
||||||
Sample use:
|
Sample use:
|
||||||
|
|
||||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment">
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
|
||||||
<div class="layout horizontal layout-start">
|
<div class="layout horizontal layout-start">
|
||||||
<div>cross axis start alignment</div>
|
<div>cross axis start alignment</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
|
2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
|
||||||
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
|
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
|
||||||
|
@ -218,6 +218,12 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
--layout-baseline: {
|
||||||
|
-ms-flex-align: baseline;
|
||||||
|
-webkit-align-items: baseline;
|
||||||
|
align-items: baseline;
|
||||||
|
};
|
||||||
|
|
||||||
/* alignment in main axis */
|
/* alignment in main axis */
|
||||||
|
|
||||||
--layout-start-justified: {
|
--layout-start-justified: {
|
||||||
|
@ -281,6 +287,49 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
--layout-self-baseline: {
|
||||||
|
-ms-align-self: baseline;
|
||||||
|
-webkit-align-self: baseline;
|
||||||
|
align-self: baseline;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* multi-line alignment in main axis */
|
||||||
|
|
||||||
|
--layout-start-aligned: {
|
||||||
|
-ms-flex-line-pack: start; /* IE10 */
|
||||||
|
-ms-align-content: flex-start;
|
||||||
|
-webkit-align-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
};
|
||||||
|
|
||||||
|
--layout-end-aligned: {
|
||||||
|
-ms-flex-line-pack: end; /* IE10 */
|
||||||
|
-ms-align-content: flex-end;
|
||||||
|
-webkit-align-content: flex-end;
|
||||||
|
align-content: flex-end;
|
||||||
|
};
|
||||||
|
|
||||||
|
--layout-center-aligned: {
|
||||||
|
-ms-flex-line-pack: center; /* IE10 */
|
||||||
|
-ms-align-content: center;
|
||||||
|
-webkit-align-content: center;
|
||||||
|
align-content: center;
|
||||||
|
};
|
||||||
|
|
||||||
|
--layout-between-aligned: {
|
||||||
|
-ms-flex-line-pack: justify; /* IE10 */
|
||||||
|
-ms-align-content: space-between;
|
||||||
|
-webkit-align-content: space-between;
|
||||||
|
align-content: space-between;
|
||||||
|
};
|
||||||
|
|
||||||
|
--layout-around-aligned: {
|
||||||
|
-ms-flex-line-pack: distribute; /* IE10 */
|
||||||
|
-ms-align-content: space-around;
|
||||||
|
-webkit-align-content: space-around;
|
||||||
|
align-content: space-around;
|
||||||
|
};
|
||||||
|
|
||||||
/*******************************
|
/*******************************
|
||||||
Other Layout
|
Other Layout
|
||||||
*******************************/
|
*******************************/
|
||||||
|
|
|
@ -52,6 +52,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
#c1 { background-color: #E91E63; }
|
#c1 { background-color: #E91E63; }
|
||||||
#c2 { background-color: #03A9F4; }
|
#c2 { background-color: #03A9F4; }
|
||||||
#c3 { background-color: #CDDC39; }
|
#c3 { background-color: #CDDC39; }
|
||||||
|
#c4 { background-color: #03A9F4; }
|
||||||
|
#c5 { background-color: #E91E63; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -90,11 +92,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</test-fixture>
|
</test-fixture>
|
||||||
|
|
||||||
|
<test-fixture id="align-content">
|
||||||
|
<template>
|
||||||
|
<div class="container layout">
|
||||||
|
<div id="c1"></div>
|
||||||
|
<div id="c2"></div>
|
||||||
|
<div id="c3"></div>
|
||||||
|
<div id="c4"></div>
|
||||||
|
<div id="c5"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
<script>
|
<script>
|
||||||
function positionEquals(node, top, bottom, left, right) {
|
function positionEquals(node, top, bottom, left, right) {
|
||||||
var rect = node.getBoundingClientRect();
|
var rect = node.getBoundingClientRect();
|
||||||
return rect.top === top && rect.bottom === bottom
|
return rect.top === top && rect.bottom === bottom &&
|
||||||
&& rect.left === left && rect.right === right;
|
rect.left === left && rect.right === right;
|
||||||
}
|
}
|
||||||
suite('basic layout', function() {
|
suite('basic layout', function() {
|
||||||
var container;
|
var container;
|
||||||
|
@ -304,6 +318,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
suite('align-content', function() {
|
||||||
|
var container;
|
||||||
|
|
||||||
|
setup(function() {
|
||||||
|
container = fixture('align-content');
|
||||||
|
container.classList.add('small');
|
||||||
|
container.classList.add('tall');
|
||||||
|
container.classList.add('horizontal');
|
||||||
|
container.classList.add('flex');
|
||||||
|
container.classList.add('wrap');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('default is stretch', function() {
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('layout-start-aligned', function() {
|
||||||
|
container.classList.add('start-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('layout-end-aligned', function() {
|
||||||
|
container.classList.add('end-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('layout-center-aligned', function() {
|
||||||
|
container.classList.add('center-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
var center = (300 - 50) / 2;
|
||||||
|
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('layout-between-aligned', function() {
|
||||||
|
container.classList.add('between-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
var center = (300 - 50) / 2;
|
||||||
|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('layout-around-aligned', function() {
|
||||||
|
container.classList.add('around-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
var center = (300 - 50) / 2;
|
||||||
|
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
suite('positioning', function() {
|
suite('positioning', function() {
|
||||||
var container;
|
var container;
|
||||||
|
|
||||||
|
|
|
@ -53,6 +53,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
#c1 { background-color: #E91E63; }
|
#c1 { background-color: #E91E63; }
|
||||||
#c2 { background-color: #03A9F4; }
|
#c2 { background-color: #03A9F4; }
|
||||||
#c3 { background-color: #CDDC39; }
|
#c3 { background-color: #CDDC39; }
|
||||||
|
#c4 { background-color: #03A9F4; }
|
||||||
|
#c5 { background-color: #E91E63; }
|
||||||
|
|
||||||
.horizontal { @apply(--layout-horizontal); }
|
.horizontal { @apply(--layout-horizontal); }
|
||||||
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
|
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
|
||||||
|
@ -72,6 +74,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
.justified { @apply(--layout-justified); }
|
.justified { @apply(--layout-justified); }
|
||||||
.around-justified { @apply(--layout-around-justified); }
|
.around-justified { @apply(--layout-around-justified); }
|
||||||
.fit { @apply(--layout-fit); }
|
.fit { @apply(--layout-fit); }
|
||||||
|
.start-aligned { @apply(--layout-start-aligned); }
|
||||||
|
.end-aligned { @apply(--layout-end-aligned); }
|
||||||
|
.center-aligned { @apply(--layout-center-aligned); }
|
||||||
|
.between-aligned { @apply(--layout-between-aligned); }
|
||||||
|
.around-aligned { @apply(--layout-around-aligned); }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -110,11 +118,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</test-fixture>
|
</test-fixture>
|
||||||
|
|
||||||
|
<test-fixture id="align-content">
|
||||||
|
<template>
|
||||||
|
<div class="container small tall horizontal flex wrap">
|
||||||
|
<div id="c1"></div>
|
||||||
|
<div id="c2"></div>
|
||||||
|
<div id="c3"></div>
|
||||||
|
<div id="c4"></div>
|
||||||
|
<div id="c5"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
<script>
|
<script>
|
||||||
function positionEquals(node, top, bottom, left, right) {
|
function positionEquals(node, top, bottom, left, right) {
|
||||||
var rect = node.getBoundingClientRect();
|
var rect = node.getBoundingClientRect();
|
||||||
return rect.top === top && rect.bottom === bottom
|
return rect.top === top && rect.bottom === bottom &&
|
||||||
&& rect.left === left && rect.right === right;
|
rect.left === left && rect.right === right;
|
||||||
}
|
}
|
||||||
suite('basic layout', function() {
|
suite('basic layout', function() {
|
||||||
var container;
|
var container;
|
||||||
|
@ -324,6 +344,76 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
suite('align-content', function() {
|
||||||
|
var container;
|
||||||
|
|
||||||
|
setup(function() {
|
||||||
|
container = fixture('align-content');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('default is stretch', function() {
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('--layout-start-aligned', function() {
|
||||||
|
container.classList.add('start-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('--layout-end-aligned', function() {
|
||||||
|
container.classList.add('end-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('--layout-center-aligned', function() {
|
||||||
|
container.classList.add('center-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
var center = (300 - 50) / 2;
|
||||||
|
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('--layout-between-aligned', function() {
|
||||||
|
container.classList.add('between-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
var center = (300 - 50) / 2;
|
||||||
|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
|
||||||
|
test('--layout-around-aligned', function() {
|
||||||
|
container.classList.add('around-aligned');
|
||||||
|
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||||
|
var center = (300 - 50) / 2;
|
||||||
|
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
|
||||||
|
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
|
||||||
|
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||||
|
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||||
|
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
suite('positioning', function() {
|
suite('positioning', function() {
|
||||||
var container;
|
var container;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue