Skip to content

Instantly share code, notes, and snippets.

@elzup elzup/qiita-strong-warn.js
Last active Nov 30, 2017

Embed
What would you like to do?
Qiita の「1年以上経過しています」を刺激的にする。
// ==UserScript==
// @name Powerup Qiita warning
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://qiita.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const alertElem = document.querySelector('.alert-warning > .fa-warning').parentElement;
const timeElem = document.querySelector('time');
const articleTime = Date.parse(timeElem.getAttribute('datetime'));
const overDay = (Date.now() - articleTime) / (1000 * 60 * 60 * 24);
let penaltyDay = overDay - 365;
if (penaltyDay <= 0) {
return;
}
// penaltyDay = 365 * 2;
// Penalty Scale
// 1 year ago <= => 5 year ago
const PENALTY_MAX = 4 * 365;
const penalty = Math.min(penaltyDay, 4 * 365);
const pr = penalty / PENALTY_MAX; // penalty raito
console.log(pr);
// BG Color
// yellow red
// hsla(50, 81%, 94%, 1) => hsla(0, 81%, 50%, 1)
alertElem.style.background = `hsla(${50 * (1 - pr)}, 81%, ${94 - 44 * pr}%, 1)`;
// hsl(38, 40%, 39%) => white
if (pr >= 0.5) {
alertElem.style.color = 'white';
}
// Box height
// 15+0 => 15+100
alertElem.style.paddingTop = `${15 + pr * 100}px`;
alertElem.style.paddingBottom = `${15 + pr * 100}px`;
// Flashing
// 5020 => 400
alertElem.style.opacity = 0.9;
setInterval(() => {
alertElem.style.opacity = 1 - alertElem.style.opacity;
}, 400 + 5020 * (1 - pr));
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.