JavaScript(ES6) Layer

ES6 Web TestPage にレイヤーを追加。
それにしても web 用 javascript は日本語情報ありすぎで笑える!
gjs や jxa だと英語でしかまともなページが無いのに。

問題はまたしても mobile Safari だ。
iOSのSafariで画面のサイズを取得する | chocolateorange.github.io

document.documentElement.clientHeight は
スクロールでアドレスバーやツールバーが出るのを引いた値に固定のようだ。
どちらも出ていない時だと隙間ができる、うーん。

var ES6Test = class {
    newLayer(text) {
        let element = document.createElement("div");
        element.appendChild(document.createTextNode(text));
        // style
        element.style.backgroundColor = "#000";
        element.style.position = "absolute";
        element.style.display = "block";
        element.style.opacity = "0.7";
        element.style.zIndex = "100";
        element.style.margin = "auto";
        element.style.top = `${window.pageYOffset}px`;
        element.style.width = `${document.documentElement.clientWidth}px`;
        //element.style.height = `${document.documentElement.clientHeight}px`;
        element.style.height = `${window.innerHeight}px`;
        // tap or click
        element.addEventListener("click", ()=> {
            element.parentNode.removeChild(element);
        });
        // add
        document.body.appendChild(element);
    }
}

とりあえず。

ところで Safari は普通に更新するだけで外部リンクの js を更新するみたい。
Ctrl+F5 すればいいだけだがチョロメや狐もそうなってほしいよ。

ついでに、前回のインデントはタブとスペースが混じっていたのでモードラインを付けた。
Python だと実行時に怒られるのですぐ気が付くのにね。

コメントを残す

メールアドレスが公開されることはありません。