takker/アナログ時計を表示するUserScript

https://gyazo.com/6174e65ace9c7a014f8aa2426521f9bb

インポート

code:js

import { clock_setup } from "/api/code/Mijinko/takker%2Fアナログ時計を表示するUserScript/script.js";

clock_setup(true)

code:css

@import "/api/code/Mijinko/takker%2Fアナログ時計を表示するUserScript/style.css";

ソース

単体のボタンとして追加されないようにした

自分で使う場合は、ボタンを追加する処理を自分で書く必要がある

clock_setupを使って時計の表示・非表示を変更できるようにした

その代わり、1つの画面に何個も時計を表示することはできなくなった

スタイル関連を全てstyle.cssに移した

code:script.js

import "/api/code/Mijinko/github.com%2Fmatthewp%2Fanalog-clock%2Fclock.js/clock.js";

export let isClockHidden = false

export function clock_setup(hidden = isClockHidden) {

if (typeof hidden != "boolean")

throw new TypeError("setHidden must be boolean!")

if (document.getElementsByTagName("analog-clock").length == 0)

generateClock() // analog-clockタグがなかったら生成する

clock.hidden = hidden

isClockHidden = clock.hidden

}

function generateClock(hidden = isClockHidden) {

const clock = document.createElement("analog-clock")

clock.dark = true

clock.offset = 9

clock.hidden = hidden

isClockHidden = clock.hidden

document.body.append(clock)

}

普通の人用のCSS

code:style.css

analog\-clock {

position: fixed;

top: 45px;

right: 103px;

width: 20rem;

height: 20rem;

}

code:style_mijinko.css

analog\-clock {

position: fixed;

top: 45px;

right: 284px;/*103px;*/

width: 20rem;

height: 20rem;

z-index: 2000;

}

filter: invert(0.8);

}