Last active
September 26, 2017 01:30
-
-
Save khsk/cd2b86fc0c629a0569ea to your computer and use it in GitHub Desktop.
Qiitaのフィードのコメント数ごとに背景色を追加するユーザースクリプト ref: http://qiita.com/khsk/items/ddec9a9eed62bebec67e
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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