136 lines
3.0 KiB
TypeScript
136 lines
3.0 KiB
TypeScript
import { DOMOrientation, DOMOrientationType } from "../dom/DOMOrientation";
|
|
import { EventSlot } from "../events/EventSlot";
|
|
import { ElementType } from "./ElementType";
|
|
import { UserAgentInfo } from "./UserAgentInfo";
|
|
|
|
|
|
|
|
export class LandscapeScale
|
|
{
|
|
_styleElement:Element;
|
|
_lastWidth:number;
|
|
_lastHeight:number;
|
|
_lastOrientation:DOMOrientationType;
|
|
_ultraWideRatio:number = 2.2;
|
|
_sw:number;
|
|
_sh:number;
|
|
_swidth:number;
|
|
_sheight:number;
|
|
_sx:number;
|
|
_sy:number;
|
|
_spx:number;
|
|
_fs:number;
|
|
|
|
|
|
get sw()
|
|
{
|
|
return this._sw;
|
|
}
|
|
|
|
onScreenSizeChange = new EventSlot<LandscapeScale>();
|
|
onOrientationChange = new EventSlot<LandscapeScale>();
|
|
|
|
alerted = false;
|
|
|
|
update()
|
|
{
|
|
let newWidth = window.innerWidth;
|
|
let newHeight = window.innerHeight;
|
|
let newOrientation = DOMOrientation.type;
|
|
|
|
if ( newWidth === this._lastWidth && newHeight === this._lastHeight )
|
|
{
|
|
return;
|
|
}
|
|
|
|
|
|
this.onScreenSizeChange.dispatch( this );
|
|
|
|
if ( this._lastOrientation != newOrientation )
|
|
{
|
|
this._lastOrientation = newOrientation;
|
|
this.onOrientationChange.dispatch( this );
|
|
}
|
|
|
|
if ( this._styleElement == null )
|
|
{
|
|
this._styleElement = ElementType.style.create();
|
|
document.body.appendChild( this._styleElement );
|
|
}
|
|
|
|
let ratio = newWidth / newHeight;
|
|
this._lastWidth = newWidth;
|
|
this._lastHeight = newHeight;
|
|
|
|
console.log( "Updating size:", this._lastWidth, this._lastHeight );
|
|
this._sw = newWidth / 100;
|
|
this._sh = newHeight / 100;
|
|
|
|
if ( ratio > this._ultraWideRatio )
|
|
{
|
|
this._sw *= ( this._ultraWideRatio / ratio );
|
|
this._sh = this._sw / 16 * 9;
|
|
|
|
this._sx = ( newWidth - ( this._sw * 100 ) ) / 2;
|
|
this._sy = 0;
|
|
|
|
this._spx = ratio / this._ultraWideRatio;
|
|
|
|
}
|
|
else
|
|
{
|
|
this._spx = 1;
|
|
this._sx = 0;
|
|
this._sy = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._swidth = this._sw * 100;
|
|
this._sheight = this._sh * 100;
|
|
|
|
this._fs = this._sw / 10;
|
|
|
|
let isChrome = window.innerWidth != window.visualViewport.width;
|
|
|
|
let fsValue = this._fs + "px";
|
|
let ffOffset = "0px";
|
|
|
|
console.log( "is chrome:", isChrome, window.innerWidth, window.visualViewport.width );
|
|
|
|
if ( ! isChrome )
|
|
{
|
|
fsValue = `calc( ${this._fs}px * var(--firefoxScale ) * 0.01 )`;
|
|
ffOffset = "19px";
|
|
}
|
|
|
|
// if ( ! this.alerted )
|
|
// {
|
|
// this.alerted = true;
|
|
// // alert( "is chrome:" + isChrome );
|
|
// }
|
|
|
|
|
|
|
|
|
|
this._styleElement.innerHTML =
|
|
`
|
|
:root
|
|
{
|
|
--sw:${this._sw}px;
|
|
--sh:${this._sh}px;
|
|
--sx:${this._sx}px;
|
|
--sy:${this._sy}px;
|
|
--swidth:${this._swidth}px;
|
|
--sheight:${this._sheight}px;
|
|
--spx:${this._spx}px;
|
|
--spx-raw:${this._spx};
|
|
--spx-inv:${1/this._spx}px;
|
|
--fs:${fsValue};
|
|
--firefoxOffset:${ffOffset};
|
|
}
|
|
`
|
|
|
|
}
|
|
} |