apca-introduction

commit

0baa93b4a2be342c55f4ee2309a1e5edeacb4d77

parent

350711d47bee9f386945831b2c50f8b39ee6d51f

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-07-13 12:47

add favicon

Diffstat

2 files changed, 24 insertions, 0 deletions

diff --git a/tool/style.css b/tool/style.css

@@ -109,6 +109,10 @@ body {
  109   109 	background-color: #ccc;
  110   110 }
  111   111 
   -1   112 canvas {
   -1   113 	display: none;
   -1   114 }
   -1   115 
  112   116 @media (min-width: 70em) {
  113   117 	#form {
  114   118 		flex-direction: row;

diff --git a/tool/tool.js b/tool/tool.js

@@ -8,6 +8,21 @@ var apcaGradient = document.querySelector('#apcaGradient');
    8     8 var apcaOutput = document.querySelector('#apcaOutput');
    9     9 var wcag2Gradient = document.querySelector('#wcag2Gradient');
   10    10 var wcag2Output = document.querySelector('#wcag2Output');
   -1    11 var canvas = document.createElement('canvas');
   -1    12 var ctx = canvas.getContext('2d');
   -1    13 var favicon = document.querySelector('link[rel="shortcut icon"]');
   -1    14 
   -1    15 var setFavicon = function(bg, fg) {
   -1    16   ctx.clearRect(0, 0, 16, 16);
   -1    17 
   -1    18   ctx.fillStyle = bg;
   -1    19   ctx.fillRect(0, 0, 8, 16);
   -1    20 
   -1    21   ctx.fillStyle = fg;
   -1    22   ctx.fillRect(8, 0, 8, 16);
   -1    23 
   -1    24   favicon.href = canvas.toDataURL();
   -1    25 };
   11    26 
   12    27 var alphaBlend = function(fg, bg) {
   13    28   return [
@@ -115,6 +130,8 @@ var oninput = function() {
  115   130     var bgUrl = encodeURIComponent(bgInput.value);
  116   131     location.hash = `${fgUrl}-on-${bgUrl}`;
  117   132 
   -1   133     setFavicon(bgInput.value, fgInput.value);
   -1   134 
  118   135     var bg = parseColor(getComputedStyle(document.body).backgroundColor);
  119   136     var fg = parseColor(getComputedStyle(document.body).color);
  120   137 
@@ -142,6 +159,9 @@ var onswap = function() {
  142   159   oninput();
  143   160 };
  144   161 
   -1   162 canvas.width = canvas.height = 16;
   -1   163 document.body.appendChild(canvas);
   -1   164 
  145   165 fgInput.addEventListener('input', oninput);
  146   166 bgInput.addEventListener('input', oninput);
  147   167 swapButton.addEventListener('click', onswap);