Skip to content

Instantly share code, notes, and snippets.

@khsk
Last active September 26, 2017 01:30
Show Gist options
  • Save khsk/cd2b86fc0c629a0569ea to your computer and use it in GitHub Desktop.
Save khsk/cd2b86fc0c629a0569ea to your computer and use it in GitHub Desktop.
Qiitaのフィードのコメント数ごとに背景色を追加するユーザースクリプト ref: http://qiita.com/khsk/items/ddec9a9eed62bebec67e
// ==UserScript==
// @name Qiita add background color to comment
// @namespace khsk
// @description フィードの投稿にコメントが付いているならば、背景色を追加する
// @include http://qiita.com/
// @include https://qiita.com/
// @include http://qiita.com/items
// @include https://qiita.com/items
// @include http://qiita.com/stock
// @include https://qiita.com/stock
// @include http://qiita.com/mine
// @include https://qiita.com/mine
// @version 1
// @grant none
// ==/UserScript==
console.time('commentcolor')
// bootstrap3からやらわかめの色を
var HEAT_MAP = {
NO_COMMENT : '',
COMMENT : '#d9edf7', // 青
DIALOGUE : '#dff0d8', // 緑
CONVERSASTION : '#fcf8e3', // 黄色
DISCUSSION : '#f2dede' // 赤
}
// コメント数(テキスト)によって背景色を追加する
var changeCommentsBackGround = node => {
var commentsNum = parseInt(node.text.trim())
var bgcolor
switch (true) {
case commentsNum == 0:
bgcolor = HEAT_MAP.NO_COMMENT
break;
case commentsNum == 1:
bgcolor = HEAT_MAP.COMMENT
break;
case 2 <= commentsNum && commentsNum <= 5:
bgcolor = HEAT_MAP.DIALOGUE
break;
case 6 <= commentsNum && commentsNum <= 9:
bgcolor = HEAT_MAP.CONVERSASTION
break;
case 10 <= commentsNum:
bgcolor = HEAT_MAP.DISCUSSION
break;
default:
alert("想定外のコメント数です:" + commentsNum)
break;
}
node.style.backgroundColor = bgcolor
}
// 変更を監視する。追加分だけには対応しておらず、毎回全チェック。
var mo = new MutationObserver((data1, data2) => {
// フィードは.unstyled、すべての投稿は.list-unstyled。ただし、タグリストも.list-unstyledなので、notで弾かないと2個めのタグも変わってしまう
var comments = document.querySelectorAll('ul.unstyled > li:nth-child(2) > a:nth-child(1), ul.list-unstyled:not(.item-box_tagList) > li:nth-child(2) > a:nth-child(1)')
Array.prototype.forEach.call(comments, comment => {
changeCommentsBackGround(comment)
})
})
var items = document.getElementsByClassName('col-sm-9')[0]
var options = {childList: true, subtree:true}
mo.observe(items, options)
console.timeEnd('commentcolor')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment