// ==UserScript==
// @name Add Nicopedia Menu
// @namespace Add Nicopedia Menu
// @description ニコニコ大百科の記事右側にメニューを追加します
// @author sotoba
// @match https://dic.nicovideo.jp/*
// @version 1.0.1-20181103
// @homepageURL https://github.com/SotobatoNihu/AddNicopediaMenu
// @license MIT License
// @grant GM.getResourceUrl
// @resource nicoIcon https://dic.nicovideo.jp/oekaki/22690.png
// @resource googleIcon https://dic.nicovideo.jp/oekaki/15633.png
// @resource wikiIcon https://dic.nicovideo.jp/oekaki/17668.png
// @resource yahooIcon https://dic.nicovideo.jp/oekaki/17680.png
// @resource seigaIcon https://dic.nicovideo.jp/oekaki/122809.png
// @resource ch2Icon https://dic.nicovideo.jp/oekaki/167179.png
// @resource pixivIcon https://dic.nicovideo.jp/oekaki/109891.png
// @resource ichibaIcon https://dic.nicovideo.jp/oekaki/30296.png
// @resource communityIcon https://dic.nicovideo.jp/oekaki/9203.png
// @resource commonsIcon https://dic.nicovideo.jp/oekaki/16255.png
// @downloadURL none
// ==/UserScript==
const MENUID = 'nicopedia-menu'
const drowMenu = async (word, width) => {
const menuElem = document.getElementById(MENUID)
//単語の空白をアンダーバーに
const modifyWord = word.replace(' ', '_')
//アイコンの描画に Greasemonkeyのキャッシュ機能を使用
Promise.all([
await GM.getResourceUrl("nicoIcon"),
await GM.getResourceUrl("googleIcon"),
await GM.getResourceUrl("wikiIcon"),
await GM.getResourceUrl("yahooIcon"),
await GM.getResourceUrl("seigaIcon"),
await GM.getResourceUrl("ch2Icon"),
await GM.getResourceUrl("pixivIcon"),
await GM.getResourceUrl("ichibaIcon"),
await GM.getResourceUrl("communityIcon"),
await GM.getResourceUrl("commonsIcon")
]).then(Icons => {
const nicoIcon = Icons[0]
const googleIcon = Icons[1]
const wikiIcon = Icons[2]
const yahooIcon = Icons[3]
const seigaIcon = Icons[4]
const ch2Icon = Icons[5]
const pixivIcon = Icons[6]
const ichibaIcon = Icons[7]
const communityIcon = Icons[8]
const commonsIcon = Icons[9]
// HTMLをベタ書き（アイコンデータは埋め込み）
menuElem.innerHTML = `
`
/**
* pikoplayerIsは大百科で通常読み込まれる関数
* pikoplayerIsを元に「ピコカキコ××を使う」の最初の表示を切り替える
*/
if (pikoplayerIs('flash')) {
document.getElementById('use_flashpico').style.display = 'none'
document.getElementById('use_htmlpico').style.display = 'block'
} else {
document.getElementById('use_flashpico').style.display = 'block'
document.getElementById('use_htmlpico').style.display = 'none'
}
/**
* 現在のレイアウトを元に「背景を××にする」の最初の表示を切り替える
*/
if (document.getElementById('header').style.backgroundRepeat === null) {
document.getElementById('backgroud_mokume').style.display = 'none'
document.getElementById('backgroud_default').style.display = 'block'
} else {
document.getElementById('backgroud_mokume').style.display = 'block'
document.getElementById('backgroud_default').style.display = 'none'
}
/**
* CSSの変更を監視し
* ヘッダーのメニューにある「背景を××にする」の表示と連動する
*/
const target = document.getElementById("maincss_ndx");
const observeOption = {
attributes: true,
attributeFilter: ['style']
};
const observer = new MutationObserver(mutations => {
if (mutations[0].target.style.cssText.length > 0) {
document.getElementById('backgroud_mokume').style.display = 'none'
document.getElementById('backgroud_default').style.display = 'block'
} else {
document.getElementById('backgroud_mokume').style.display = 'block'
document.getElementById('backgroud_default').style.display = 'none'
}
});
observer.observe(target, observeOption);
})
}
// document.addEventListener('DOMContentLoaded', function () {
window.onload = function () {
//もしメニューがない場合は作成
if (document.getElementById(MENUID) === null) {
const elm = document.createElement('div')
elm.id = MENUID
//右ペインの他メニューにクラスを合わせる
elm.className = 'box'
elm.style.height = 'auto'
//空の要素を挿入
document.getElementById('right-column').insertAdjacentElement('afterbegin', elm)
}
//記事名を取得
const word = document.getElementById('search-box').value
//横幅を取得
const width = document.getElementById('right-column').offsetWidth
//メニューを表示
drowMenu(word, width)
}
// })
`
/**
* pikoplayerIsは大百科で通常読み込まれる関数
* pikoplayerIsを元に「ピコカキコ××を使う」の最初の表示を切り替える
*/
if (pikoplayerIs('flash')) {
document.getElementById('use_flashpico').style.display = 'none'
document.getElementById('use_htmlpico').style.display = 'block'
} else {
document.getElementById('use_flashpico').style.display = 'block'
document.getElementById('use_htmlpico').style.display = 'none'
}
/**
* 現在のレイアウトを元に「背景を××にする」の最初の表示を切り替える
*/
if (document.getElementById('header').style.backgroundRepeat === null) {
document.getElementById('backgroud_mokume').style.display = 'none'
document.getElementById('backgroud_default').style.display = 'block'
} else {
document.getElementById('backgroud_mokume').style.display = 'block'
document.getElementById('backgroud_default').style.display = 'none'
}
/**
* CSSの変更を監視し
* ヘッダーのメニューにある「背景を××にする」の表示と連動する
*/
const target = document.getElementById("maincss_ndx");
const observeOption = {
attributes: true,
attributeFilter: ['style']
};
const observer = new MutationObserver(mutations => {
if (mutations[0].target.style.cssText.length > 0) {
document.getElementById('backgroud_mokume').style.display = 'none'
document.getElementById('backgroud_default').style.display = 'block'
} else {
document.getElementById('backgroud_mokume').style.display = 'block'
document.getElementById('backgroud_default').style.display = 'none'
}
});
observer.observe(target, observeOption);
})
}
// document.addEventListener('DOMContentLoaded', function () {
window.onload = function () {
//もしメニューがない場合は作成
if (document.getElementById(MENUID) === null) {
const elm = document.createElement('div')
elm.id = MENUID
//右ペインの他メニューにクラスを合わせる
elm.className = 'box'
elm.style.height = 'auto'
//空の要素を挿入
document.getElementById('right-column').insertAdjacentElement('afterbegin', elm)
}
//記事名を取得
const word = document.getElementById('search-box').value
//横幅を取得
const width = document.getElementById('right-column').offsetWidth
//メニューを表示
drowMenu(word, width)
}
// })