msc-any-pip
Version:
Imaging what if we can let anything Picture-in-Picture (not only <video />) ?! Here comes <msc-any-pip /> to let it dream comes true. <msc-any-pip /> apply Document Picture-in-Picture API to given elements have Picture-in-Picture feature.
299 lines (263 loc) • 12.9 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Component: <msc-any-pip /> - web components based Picture-in-Picture feature</title>
<meta name="description" content="Imaging what if we can let anything Picture-in-Picture (not only <video />) ?! Here comes <msc-any-pip /> to let it dream comes true. <msc-any-pip /> apply Document Picture-in-Picture API to given elements have Picture-in-Picture feature." />
<script type="module" src="mjs/wc-msc-any-pip.js"></script>
<style>
/* reset */
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,article,aside,figcaption,figure,nav,section,mark,audio,video,main{margin:0;padding:0}
article,aside,figcaption,figure,nav,section,main{display:block}
fieldset,img{border:0}
address,caption,cite,em,strong{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
abbr{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
body{-webkit-text-size-adjust:none}
select,input,button,textarea{font:100% arial,helvetica,clean,sans-serif;}
del{font-style:normal;text-decoration:none}
pre{font-family:monospace;line-height:100%}
progress{-webkit-appearance:none;appearance:none;overflow:hidden;border:0 none;}
/* page */
:root {
--bd-bg: #fff;
--subject-text: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--bd-bg: #121212;
--subject-text: #e8eaed;
}
}
/* defaults */
:root {
--ON: initial;
--OFF: ;
/* fuji */
--white: 255 255 255;
--marshmallow: 245 248 250;
--grey-hair: 240 243 245;
--dirty-seagull: 224 228 233;
--pebble: 199 205 210;
--bob: 176 185 193;
--gandalf: 151 158 168;
--shark: 130 138 147;
--dolphin: 110 119 128;
--battleship: 91 99 106;
--charcoal: 70 78 86;
--ramones: 44 54 63;
--batcave: 35 42 49;
--inkwell: 29 34 40;
--midnight: 16 21 24;
--black: 0 0 0;
--watermelon: 255 82 87;
--solo-cup: 235 15 41;
--malibu: 255 0 128;
--barney: 204 0 140;
--mimosa: 255 211 51;
--turmeric: 255 167 0;
--masala: 255 139 18;
--cheetos: 253 97 0;
--carrot-juice: 255 82 13;
--mulah: 26 197 103;
--bonsai: 0 135 81;
--spirulina: 0 160 160;
--sea-foam: 17 211 205;
--peeps: 125 203 255;
--sky: 18 169 255;
--dory: 15 105 255;
--scooter: 0 99 235;
--cobalt: 0 58 188;
--denim: 26 13 171;
--blurple: 93 94 255;
--hendrix: 248 244 255;
--thanos: 144 124 255;
--starfish: 119 89 255;
--hulk-pants: 126 31 255;
--grape-jelly: 96 1 210;
--mulberry: 80 21 176;
--malbec: 57 0 125;
/* property */
--theme-gradient-start: 255 231 98;
--theme-gradient-end: 252 218 25;
--anchor-green: 58 191 186;
--mark-buynow: 0 120 255;
--mark-bidding: 255 139 18;
--mark-metro-express: 255 77 82;
--heart-red: 253 79 87;
/* shadow */
--shadow-elevations-1: 0 1px 0 rgba(var(--dirty-seagull)), 0 0 1px rgba(var(--black)/0);
--shadow-elevations-2: 0 0 1px rgba(var(--black)/.1), 0 2px 4px rgba(var(--black)/.08);
--shadow-elevations-3: 0 0 1px rgba(var(--black)/.08), 0 4px 8px rgba(var(--black)/.1);
--shadow-elevations-4: 0 0 2px rgba(var(--black)/.05), 0 4px 16px rgba(var(--black)/.2);
--shadow-elevations-5: 0 0 16px rgba(var(--black)/.05), 0 32px 32px 20px rgba(var(--black)/.4);
/* safe-area */
--el:0;
--et:0;
--eb:0;
--basis-padding: 1em;
--spl: calc(var(--el) + var(--basis-padding));
--spb: calc(var(--eb) + var(--basis-padding));
/* icons */
--icon-home: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNMTYuMTUzIDMuMjI0TDAgMTYuOTYyaDQuMzE0djExLjgxNGg5Ljg3di04LjAwM2gzLjkzNHY4LjAwM2g5Ljg0VjE2Ljk2MkgzMicvPjwvc3ZnPg==) no-repeat 50% 50%/16px 16px;
--icon-cart: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTkuNSAxMC41SDE2Yy41NTIgMCAxIC40NDQgMSAxIDAgLjU1Mi0uNDQ1IDEtMSAxSDkuNWMtLjU1MiAwLTEtLjQ0NC0xLTEgMC0uNTUyLjQ0NS0xIDEtMXpNMTAgMjFhMiAyIDAgMTAtMy45OTktLjAwMUEyIDIgMCAwMDEwIDIxem05LjUgMGEyIDIgMCAxMC0zLjk5OS0uMDAxQTIgMiAwIDAwMTkuNSAyMXpNNC40OTYgMkg0LjVjLjU1Mi4wMDUuOTk4LjQ0NSAxIC45OTZMNyAxNWgxMS41TDIwIDQuOTk2UzIwLjA4MiA0IDIxIDRjLjkxNSAwIDEgLjc2MiAxIDFsLTEuNSAxMS4wMDRjMCAuNTUtLjQ0OC45OTYtMSAuOTk2SDZhMSAxIDAgMDEtMS0uOTk2TDMuNjE2IDRIMS4wMUMuNDUgNCAwIDMuNTU2IDAgM2MwLS41NTIuNDUtMSAxLjAxLTFoMy40ODV6TTkuNSA1LjVIMTZjLjU1MiAwIDEgLjQ0NCAxIDEgMCAuNTUyLS40NDUgMS0xIDFIOS41Yy0uNTUyIDAtMS0uNDQ0LTEtMSAwLS41NTIuNDQ1LTEgMS0xeicvPjwvc3ZnPg==) no-repeat 0% 50%/contain;
--icon-order: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTE4LjYxIDE5LjI1NmwtLjY0Mi0uNDYtMS4yMTgtLjg3Ny0xLjE0My45NjctMS4xNi45ODQtMS4yMzMtMS4wMDMtMS4yMTQtLjk5LTEuMjE0Ljk5LTEuMjMgMS4wMDQtMS4xNjUtLjk4NC0xLjE0My0uOTY3LTEuMjE4Ljg3NS0uNjQuNDZWMy44MzZoMTMuMjJ2MTUuNDJ6TTQuNDQ1IDJhLjk0Ni45NDYgMCAwMC0uOTQ0Ljk0djE4LjEzNmMwIC41NC40NTYuOTIuOTQ4LjkyLjE3IDAgLjM0OC0uMDQ2LjUxLS4xNDhsMi4xOTMtMS41NzZMOC45NyAyMS44MWEuOTc0Ljk3NCAwIDAwMS4xMjcuMDJMMTIgMjAuMjczbDEuOTA2IDEuNTU1YS45NzIuOTcyIDAgMDAxLjEyNy0uMDJsMS44MTQtMS41MzggMi4xOTYgMS41NzZjLjE2My4xMDIuMzQuMTQ4LjUxLjE0OC40OTIgMCAuOTQ3LS4zOC45NDctLjkyVjIuOTRhLjk0NS45NDUgMCAwMC0uOTQ0LS45NEg0LjQ0NHptMTEuMzMzIDEwLjExM2MuNTIyIDAgLjk0NS0uNDEuOTQ1LS45MThzLS40MjMtLjkyLS45NDUtLjkySDguMjIzYS45MzIuOTMyIDAgMDAtLjk0NC45MmMwIC41MDcuNDIuOTE4Ljk0My45MThoNy41NTR6TTExLjA1NSA4LjQ0Yy4yNjIgMCAuOTQ1LS4yMjQuOTQ1LS45MiAwLS41MDctLjQyMy0uOTE3LS45NDUtLjkxN0g4LjIyM2MtLjUyMiAwLS45NDQuNDEtLjk0NC45MThzLjQyLjkyLjk0My45MmgyLjgzMnptNC43MjIgNy4zNDdjLjUyMiAwIC45NDUtLjQxLjk0NS0uOTE4IDAtLjUxLS40MjMtLjkyLS45NDUtLjkySDguMjIzYS45My45MyAwIDAwLS45NDQuOTJjMCAuNTA2LjQyLjkxNy45NDMuOTE3aDcuNTU0eicvPjwvc3ZnPg==) no-repeat 0% 50%/contain;
--icon-close: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCc+PHBhdGggZmlsbD0nIzk3OWVhOCcgZD0nTTEyIDEwLjU4OEw2LjcwMiA1LjI5YTEgMSAwIDAwLTEuNDA4LjAwNC45OTMuOTkzIDAgMDAtLjAwMyAxLjQwOEwxMC41ODggMTJsLTUuMjk3IDUuMjk3YTEgMSAwIDAwLjAwMyAxLjQwOC45OTMuOTkzIDAgMDAxLjQwOC4wMDRMMTIgMTMuNDExbDUuMjk4IDUuMjk4YS45OTkuOTk5IDAgMDAxLjQxMS0xLjQxMkwxMy40MTIgMTJsNS4yOTctNS4yOThhMSAxIDAgMDAtLjAwMy0xLjQwOC45OTUuOTk1IDAgMDAtMS40MDgtLjAwNEwxMiAxMC41ODh6Jy8+PC9zdmc+) no-repeat 50% 50%/24px 24px;
--icon-arrow-left: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCc+PHBhdGggZD0nTTEwLjgwMiAxMmw0LjkwNi00LjgzNGEuOTczLjk3MyAwIDAwLS4wMDMtMS4zNzguOTk0Ljk5NCAwIDAwLTEuMzk3LS4wMDNMOCAxMi4wMDFsNi4zMSA2LjIxN2MuMzc4LjM3MyAxLjAxLjM4IDEuMzk3LS4wMDJhLjk2Mi45NjIgMCAwMC4wMDMtMS4zNzhsLTQuOTA4LTQuODM3eicgZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJy8+PC9zdmc+) no-repeat 50% 50%/24px 24px;
--icon-arrow-right: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCc+PHBhdGggZD0nTTEzLjE5NyAxMkw4LjI5MSA3LjE2NmEuOTczLjk3MyAwIDAxLjAwMy0xLjM3OC45OTQuOTk0IDAgMDExLjM5Ny0uMDAzbDYuMzA4IDYuMjE2LTYuMzEgNi4yMTdjLS4zNzguMzczLTEuMDEuMzgtMS4zOTctLjAwMmEuOTYyLjk2MiAwIDAxLS4wMDMtMS4zNzhsNC45MDgtNC44Mzd6JyBmaWxsPScjZmZmJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4=) no-repeat 50% 50%/24px 24px;
/* mask */
--mask-chevron-next: path('M13.197 12 8.29 7.167a.971.971 0 0 1 .003-1.378.995.995 0 0 1 1.397-.003L16 12.001l-6.31 6.217a1.004 1.004 0 0 1-1.397-.002.962.962 0 0 1-.003-1.378l4.908-4.837Z');
/* animation */
--transition-timing-function: cubic-bezier(.4,0,.2,1);
/* pages */
--view: '';
--max-width: 100%;
/*--section-padding: 0 1em;*/
--section-padding: 0 calc(1em + var(--el));
--border-radius: .5em;
--direction-factor: 1;
--margin-block-gap: 1.25em;
--main-bgc: #f1f1f5;
--module-bgc: rgba(var(--white));
--text-color: #232a31;
/* modules */
--nav-inline-size: 13em;
--intro-text: #5f6368;
}
@supports (bottom:env(safe-area-inset-top)) {
:root {
--el: env(safe-area-inset-left);
--et: env(safe-area-inset-top);
--eb: env(safe-area-inset-bottom);
}
@supports (bottom:max(.75em,1px)) {
:root {
--spl: max(var(--basis-padding), var(--el));
--spb: max(var(--basis-padding), var(--eb));
}
}
}
@media (prefers-color-scheme: dark) {
:root {
--intro-text: #9aa0a6;
}
}
/* page */
html{font-family:system-ui,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:16px;background-color:var(--main-bgc);scroll-behavior:smooth;}
html[dir='rtl']{--direction-factor:-1;}
#bd{margin:0 auto;}
a,a:hover{text-decoration:none;}
a{color:rgba(var(--anchor-green));}
.center-module{max-inline-size:var(--max-width);margin:0 auto;box-sizing:border-box;padding:var(--section-padding);}
.center-module--main>*{margin-block-start:var(--margin-block-gap);}
.absolute-center{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}
.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.text-overflow--ltr-start{direction:rtl;text-align:start;}
.text-overflow--rtl{direction:rtl;text-align:end;}
.line-fadeout{position:relative;}
.line-fadeout:after{position:absolute;content:'';text-align:right;bottom:0;right:0;width:70%;height:var(--fadeout-h, 1.2em);background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));}
.line-clampin{display:-webkit-box;-webkit-line-clamp:var(--line-clamp,2);-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}
.stuff{text-indent:100%;white-space:nowrap;overflow:hidden;}
.aspect-ratio{position:relative;width:100%;--w:4;--h:3;}
.aspect-ratio:before{content:'';width:100%;padding-top:calc(var(--h) * 100% / var(--w));display:block;}
.aspect-ratio .content{position:absolute;top:0;left:0;right:0;bottom:0;}
.force-radius{overflow:hidden;transform:translate3d(0,0,0);border-radius:var(--r,8px);}
.contain{object-fit:contain;}
.cover{object-fit:cover;}
.overscrolling{-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:scroll;overscroll-behavior:contain;}
.vanquish{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;}
.flex-center{display:flex;justify-content:center;align-items:center;}
/* media query */
@media screen and (max-width: 767px) {
:root {
--view: 'mobile';
--section-padding: 0;
--border-radius: 0;
}
}
@media screen and (min-width: 768px) {
:root {
--view: 'tablet';
--max-width: 1023px;
}
}
@media screen and (min-width: 1024px) {
:root {
--view: 'desktop';
--max-width: 1279px;
}
}
@media screen and (min-width: 1280px) {
:root {
--view: 'desktop max';
--max-width: 1280px;
--section-padding: 0 1.5em;
}
}
html,body{font-family:system-ui,sans-serif;text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:16px;}
#hd,#ft{display:none;}
body{position:relative;inline-size:100vw;block-size:100vh;margin:0;background:var(--bd-bg);}
.wrap{--background-color:#dce2f0;background-color:var(--background-color);inline-size:100%;max-inline-size:min(800px, calc(100% - 2em));box-sizing:border-box;}
.scroll-driven-animations{inline-size:100%;aspect-ratio:1.24/1;display:block;box-sizing:border-box;border:1px solid #333;}
@media (prefers-color-scheme: dark) {
.wrap {
--background-color: rgba(29 34 40);
}
}
msc-any-pip:not(:defined){visibility:hidden;}
iframe {
@media (display-mode: picture-in-picture) {
inline-size: 100%;
block-size: 100%;
}
}
</style>
</head>
<body class="flex-center">
<div class="wrap">
<msc-any-pip>
<iframe class="scroll-driven-animations" src="https://scroll-driven-animations.style/demos/cover-flow/css/?embed" sandbox="allow-forms allow-scripts" frameborder="0"></iframe>
</msc-any-pip>
</div>
<script type="module">
customElements.whenDefined('msc-any-pip').then(() => {
const wrap = document.querySelector('.wrap');
const events = [
'msc-any-pip-piping',
'msc-any-pip-pip-end'
];
const handler = (evt) => {
const { type, target } = evt;
const child = target.dataset.child;
switch (type) {
case 'msc-any-pip-piping': {
console.log(
`%c${type}%c`,
'font-size:12px;line-height:1.3;background:#3a99d8;color:#fff;border-radius:3px;padding:0 4px;',
'font-size:12px;line-height:1.3;'
);
break;
}
case 'msc-any-pip-pip-end': {
console.log(
`%c${type}%c`,
'font-size:12px;line-height:1.3;background:#3a99d8;color:#fff;border-radius:3px;padding:0 4px;',
'font-size:12px;line-height:1.3;'
);
break;
}
};
};
// events
events.map(
(event) => {
wrap.addEventListener(event, handler);
}
);
});
</script>
</body>
</html>