Greasy Fork is available in English.

atcoder-sidemenu

AtCoderページの横に要素を乗せられるSidemenuを追加します。

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://greasyfork.org/scripts/386715-atcoder-sidemenu/code/atcoder-sidemenu.js?version=715444

Penulis
keymoon
Nilai
0 0 0
Versi
0.0.1.20190627175831
Dibuat
Diperbarui
Lisensi
N/A
Berlaku untuk
Semua situs

Deskripsi Penulis

概要

AtCoderページ上にsidemenuを表示し、その上に要素を載せることを可能にするライブラリです。

ソースについて

このライブラリは複数ファイルを1つにまとめたものです。ソースの詳細はGitHubを参照してください。一行目以外同一のものをビルド可能なソースコードを公開しています。(一行目はグローバルへエクスポートするために改変を行っています。)

使い方

まず、UserScriptのHeaderに以下のような行を追加してください。

// @require https://greasyfork.org/scripts/386715-atcoder-sidemenu/code/atcoder-sidemenu.js?version=715439

素のJavaScriptで開発する場合

ツールなどを用いずにこのライブラリを使用する場合は、グローバルに存在しているsidemenuオブジェクトの中に格納されているオブジェクトやクラスを用いることになります。
例えば、以下のようなスクリプトを実行するとSideMenuに「hello,world!」とalertを出すボタンの乗った要素を追加します。

sidemenu.sidemenu.addElement(new sidemenu.SideMenuElement("id","Title",/.*/,"<button id='button1'>button</button>",() => $('#button1').click(() => alert("hello,world!"))));

モジュールバンドラを用いる場合

WebPack等のモジュールバンドラを用いる場合は、公開しているパッケージをプロジェクトにインストールすることをお勧めします。
インストールした後、webpack.config.jsでexternalの記述を以下のようにしてください。:

externals: {
    "atcoder-sidemenu": "sidemenu",
}

そうすることで依存関係の中にSideMenuを取り込め、

import { sidemenu, SideMenuElement } from "atcoder-sidemenu";
sidemenu.addElement(new SideMenuElement("id","Title",/.*/,"<button id='button1'>button</button>",() => $('#button1').click(() => alert("hello,world!"))));

と書くことができるようになります。