123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- 'use strict';
- var attrs = ['top', 'left', 'right', 'bottom'];
- var inited;
- var elementComputedStyle = {};
- var support;
- function getSupport() {
- if (!('CSS' in window) || typeof CSS.supports != 'function') {
- support = '';
- }
- else if (CSS.supports('top: env(safe-area-inset-top)')) {
- support = 'env';
- }
- else if (CSS.supports('top: constant(safe-area-inset-top)')) {
- support = 'constant';
- }
- else {
- support = '';
- }
- return support;
- }
- function init() {
- support = typeof support === 'string' ? support : getSupport();
- if (!support) {
- attrs.forEach(function (attr) {
- elementComputedStyle[attr] = 0;
- });
- return;
- }
- function setStyle(el, style) {
- var elStyle = el.style;
- Object.keys(style).forEach(function (key) {
- var val = style[key];
- elStyle[key] = val;
- });
- }
- var cbs = [];
- function parentReady(callback) {
- if (callback) {
- cbs.push(callback);
- }
- else {
- cbs.forEach(function (cb) {
- cb();
- });
- }
- }
- var passiveEvents = false;
- try {
- var opts = Object.defineProperty({}, 'passive', {
- get: function () {
- passiveEvents = { passive: true };
- }
- });
- window.addEventListener('test', null, opts);
- }
- catch (e) {
- }
- function addChild(parent, attr) {
- var a1 = document.createElement('div');
- var a2 = document.createElement('div');
- var a1Children = document.createElement('div');
- var a2Children = document.createElement('div');
- var W = 100;
- var MAX = 10000;
- var aStyle = {
- position: 'absolute',
- width: W + 'px',
- height: '200px',
- boxSizing: 'border-box',
- overflow: 'hidden',
- paddingBottom: support + "(safe-area-inset-" + attr + ")"
- };
- setStyle(a1, aStyle);
- setStyle(a2, aStyle);
- setStyle(a1Children, {
- transition: '0s',
- animation: 'none',
- width: '400px',
- height: '400px'
- });
- setStyle(a2Children, {
- transition: '0s',
- animation: 'none',
- width: '250%',
- height: '250%'
- });
- a1.appendChild(a1Children);
- a2.appendChild(a2Children);
- parent.appendChild(a1);
- parent.appendChild(a2);
- parentReady(function () {
- a1.scrollTop = a2.scrollTop = MAX;
- var a1LastScrollTop = a1.scrollTop;
- var a2LastScrollTop = a2.scrollTop;
- function onScroll() {
- if (this.scrollTop === (this === a1 ? a1LastScrollTop : a2LastScrollTop)) {
- return;
- }
- a1.scrollTop = a2.scrollTop = MAX;
- a1LastScrollTop = a1.scrollTop;
- a2LastScrollTop = a2.scrollTop;
- attrChange(attr);
- }
- a1.addEventListener('scroll', onScroll, passiveEvents);
- a2.addEventListener('scroll', onScroll, passiveEvents);
- });
- var computedStyle = getComputedStyle(a1);
- Object.defineProperty(elementComputedStyle, attr, {
- configurable: true,
- get: function () {
- return parseFloat(computedStyle.paddingBottom);
- }
- });
- }
- var parentDiv = document.createElement('div');
- setStyle(parentDiv, {
- position: 'absolute',
- left: '0',
- top: '0',
- width: '0',
- height: '0',
- zIndex: '-1',
- overflow: 'hidden',
- visibility: 'hidden',
- });
- attrs.forEach(function (key) {
- addChild(parentDiv, key);
- });
- document.body.appendChild(parentDiv);
- parentReady();
- inited = true;
- }
- function getAttr(attr) {
- if (!inited) {
- init();
- }
- return elementComputedStyle[attr];
- }
- var changeAttrs = [];
- function attrChange(attr) {
- if (!changeAttrs.length) {
- setTimeout(function () {
- var style = {};
- changeAttrs.forEach(function (attr) {
- style[attr] = elementComputedStyle[attr];
- });
- changeAttrs.length = 0;
- callbacks.forEach(function (callback) {
- callback(style);
- });
- }, 0);
- }
- changeAttrs.push(attr);
- }
- var callbacks = [];
- function onChange(callback) {
- if (!getSupport()) {
- return;
- }
- if (!inited) {
- init();
- }
- if (typeof callback === 'function') {
- callbacks.push(callback);
- }
- }
- function offChange(callback) {
- var index = callbacks.indexOf(callback);
- if (index >= 0) {
- callbacks.splice(index, 1);
- }
- }
- var safeAreaInsets = {
- get support() {
- return (typeof support === 'string' ? support : getSupport()).length != 0;
- },
- get top() {
- return getAttr('top');
- },
- get left() {
- return getAttr('left');
- },
- get right() {
- return getAttr('right');
- },
- get bottom() {
- return getAttr('bottom');
- },
- onChange: onChange,
- offChange: offChange
- };
- module.exports = safeAreaInsets;
- //# sourceMappingURL=index.js.map
|