- commit
- ef0e957527400163b0ca706f993011977368d4e9
- parent
- 0baa93b4a2be342c55f4ee2309a1e5edeacb4d77
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2022-07-14 08:06
render examples
Diffstat
| A | examples/examples.js | 64 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | examples/index.html | 30 | ++++++++++++++++++++++++++++++ |
| A | examples/style.css | 62 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 156 insertions, 0 deletions
diff --git a/examples/examples.js b/examples/examples.js
@@ -0,0 +1,64 @@
-1 1 import * as wcag from '../wcag2.js';
-1 2 import * as apca from '../apca.js';
-1 3
-1 4 const LEVEL_LABELS = ['×', 'A', 'AA', 'AAA'];
-1 5
-1 6 const COLORS = [
-1 7 ['#44bb44', '#000000', '#ffffff'],
-1 8 ['#dd44ee', '#000000', '#ffffff'],
-1 9 ['#ff4422', '#000000', '#ffffff'],
-1 10 ['#11bbff', '#220044', '#440022'],
-1 11 ];
-1 12
-1 13 var parseColor = function(c) {
-1 14 return [
-1 15 parseInt(c.substr(1, 2), 16),
-1 16 parseInt(c.substr(3, 2), 16),
-1 17 parseInt(c.substr(5, 2), 16),
-1 18 ];
-1 19 };
-1 20
-1 21 var getLevel = function(c, module) {
-1 22 var a = module.abs(c);
-1 23 for (let i = 0; i < module.levels.length; i++) {
-1 24 if (a < module.levels[i]) {
-1 25 return i;
-1 26 }
-1 27 }
-1 28 return module.levels.length;
-1 29 };
-1 30
-1 31 var template = document.querySelector('template');
-1 32
-1 33 var addExample = function(fg, bg) {
-1 34 var cfg = parseColor(fg);
-1 35 var cbg = parseColor(bg);
-1 36
-1 37 var clone = template.content.cloneNode(true);
-1 38
-1 39 var display = clone.querySelector('.display');
-1 40 display.textContent = `${fg} on ${bg}`;
-1 41 display.style.color = fg;
-1 42 display.style.backgroundColor = bg;
-1 43
-1 44 var wcag_contrast = wcag.contrast(cfg, cbg);
-1 45 var wcag_level = getLevel(wcag_contrast, wcag);
-1 46 clone.querySelector('.wcag output').textContent = wcag.abs(wcag_contrast).toFixed(1);
-1 47 clone.querySelector('.wcag .badge').textContent = LEVEL_LABELS[wcag_level];
-1 48 clone.querySelector('.wcag .badge').classList.add(`badge-${wcag_level}`);
-1 49
-1 50 var apca_contrast = apca.contrast(cfg, cbg);
-1 51 var apca_level = getLevel(apca_contrast, apca);
-1 52 clone.querySelector('.apca output').textContent = apca_contrast.toFixed(0);
-1 53 clone.querySelector('.apca .badge').textContent = LEVEL_LABELS[apca_level];
-1 54 clone.querySelector('.apca .badge').classList.add(`badge-${apca_level}`);
-1 55
-1 56 document.body.append(clone);
-1 57 };
-1 58
-1 59 COLORS.forEach(([c1, c2, c3]) => {
-1 60 addExample(c1, c2);
-1 61 addExample(c2, c1);
-1 62 addExample(c1, c3);
-1 63 addExample(c3, c1);
-1 64 });
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,30 @@ -1 1 <!DOCTYPE html> -1 2 <html> -1 3 <head> -1 4 <meta charset="utf-8" /> -1 5 <title>APCA examples</title> -1 6 <link rel="stylesheet" href="style.css"> -1 7 <template> -1 8 <div class="example"> -1 9 <div class="display"></div> -1 10 <div class="output"> -1 11 <div> -1 12 <label class="wcag"> -1 13 <span class="label">WCAG2</span> -1 14 <output></output> -1 15 <span class="badge"></span> -1 16 </label> -1 17 <label class="apca"> -1 18 <span class="label">APCA</span> -1 19 <output></output> -1 20 <span class="badge"></span> -1 21 </label> -1 22 </div> -1 23 </div> -1 24 </div> -1 25 </template> -1 26 </head> -1 27 <body> -1 28 <script src="examples.js" type="module"></script> -1 29 </body> -1 30 </html>
diff --git a/examples/style.css b/examples/style.css
@@ -0,0 +1,62 @@
-1 1 body {
-1 2 display: grid;
-1 3 grid-template-columns: repeat(4, min-content);
-1 4 grid-gap: 1rem;
-1 5 }
-1 6 .example {
-1 7 width: 16rem;
-1 8 background: #eee;
-1 9 font-weight: bold;
-1 10 line-height: 1.4;
-1 11 }
-1 12
-1 13 .display {
-1 14 padding: 2rem;
-1 15 font-size: 120%;
-1 16 text-align: center;
-1 17 }
-1 18
-1 19 .output {
-1 20 padding: 1.5rem 2rem 2rem;
-1 21 display: flex;
-1 22 flex-direction: column;
-1 23 align-items: center;
-1 24 }
-1 25
-1 26 label {
-1 27 display: block;
-1 28 }
-1 29
-1 30 .label {
-1 31 display: inline-block;
-1 32 width: 4.2em;
-1 33 color: #555;
-1 34 }
-1 35
-1 36 output {
-1 37 display: inline-block;
-1 38 width: 2.2em;
-1 39 }
-1 40
-1 41 .badge {
-1 42 border-radius: 1em;
-1 43 font-size: 90%;
-1 44 vertical-align: 0.1em;
-1 45 padding: 0 0.6em;
-1 46 }
-1 47 .badge-0 {
-1 48 background-color: hsl(0, 100%, 40%);
-1 49 color: #fff;
-1 50 }
-1 51 .badge-1 {
-1 52 background-color: hsl(40, 100%, 45%);
-1 53 color: #000;
-1 54 }
-1 55 .badge-2 {
-1 56 background-color: hsl(80, 60%, 45%);
-1 57 color: #000;
-1 58 }
-1 59 .badge-3 {
-1 60 background-color: hsl(95, 60%, 41%);
-1 61 color: #fff;
-1 62 }