Last active
February 1, 2020 17:30
-
-
Save hyuki/af8a80fb45d99fa463e249ac51aa3ece to your computer and use it in GitHub Desktop.
dustlink.js - The longer you do not click, the darker the background-color will be.
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
// dustlink.js | |
// Example HTML: <a class="DUSTLINK" href="https://example.com">example</a> | |
$(function() { | |
var ds = localStorage.getItem('dusthash'); | |
if (!ds) { | |
ds = '{}'; | |
} | |
var dusthash = JSON.parse(ds); | |
$(".DUSTLINK").on('click', function() { | |
var key = $(this).attr('href'); | |
dusthash[key] = Date.now(); | |
ds = JSON.stringify(dusthash); | |
localStorage.setItem('dusthash', ds); | |
}); | |
$(".DUSTLINK").each(function() { | |
var key = $(this).attr('href'); | |
var when = dusthash[key]; | |
var days = (Date.now() - when) / (24 * 60 * 60 * 1000); | |
var full_days = 7; // 7 days = 50% darkness | |
var light = 50 + (1.0 - days / full_days) * 50; | |
var background_color = 'hsl(0, 0%, ' + light + '%)'; | |
var color = light < 75 ? 'white' : 'black'; | |
if (when) { | |
$(this).css('color', color); | |
$(this).css('background-color', background_color); | |
} else { | |
// Never clicked yet. | |
$(this).css('color', '#800'); | |
$(this).css('background-color', 'hsl(0, 0%, 75%)'); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
cf. https://snap.textfile.org/20190115114836/