From d7cabb7500d2c4c235326f3c33ade28fdf3a3ab5 Mon Sep 17 00:00:00 2001 From: Michael Fouquet Date: Fri, 16 Jun 2017 13:39:28 -0500 Subject: [PATCH 1/3] Add in info for the colorblind type. Fixes #7 --- .../Contents/Resources/Web/css/style.css | 60 +++++++++++++++++++ .../Contents/Resources/Web/index.html | 6 +- .../Contents/Resources/Web/js/main.js | 51 ++++++++++++++++ .../Contents/Sketch/manifest.json | 2 +- 4 files changed, 117 insertions(+), 2 deletions(-) diff --git a/Stark.sketchplugin/Contents/Resources/Web/css/style.css b/Stark.sketchplugin/Contents/Resources/Web/css/style.css index 79d358a..e98117c 100644 --- a/Stark.sketchplugin/Contents/Resources/Web/css/style.css +++ b/Stark.sketchplugin/Contents/Resources/Web/css/style.css @@ -306,6 +306,66 @@ select::after { font-weight: 600; } +.simulation__help-container { + margin-top: 0.25rem; + position: relative; + width: 100%; + text-align: center; + visibility: hidden; +} + +.simulation__help-container--show { + visibility: visible; +} + +.simulation__help-container:focus, +.simulation__help-text:focus { + outline: 0; +} + +.simulation__help-container:focus .simulation__help-text { + visibility: visible; + opacity: 1; +} + +.simulation__help-link:hover { + cursor: default; +} + +.simulation__help-text { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: 1rem; + left: -0.5rem; + background: rgba(0,0,0,.9); + color: white; + width: 100%; + text-align: left; + font-size: 12px; + padding: 0.5rem; + border-radius: 4px; + box-shadow: 0px 2px 8px #888888; + transition: all 0.25s ease-in-out; +} + +.simulation__help-text::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: rgba(0,0,0,.9) transparent transparent transparent; +} + +.simulation__help-link { + font-size: 12px; + color: black; + border-bottom: 1px dotted rgba(0, 0, 0, 0.2); +} + .button__export { background-color: white; color: black; diff --git a/Stark.sketchplugin/Contents/Resources/Web/index.html b/Stark.sketchplugin/Contents/Resources/Web/index.html index 04ba349..1b67bfe 100644 --- a/Stark.sketchplugin/Contents/Resources/Web/index.html +++ b/Stark.sketchplugin/Contents/Resources/Web/index.html @@ -133,6 +133,10 @@ +
+ Show me more +
Here's some info.
+
3
@@ -159,7 +163,7 @@
-
Stark v1.3
+
Stark v1.4
diff --git a/Stark.sketchplugin/Contents/Resources/Web/js/main.js b/Stark.sketchplugin/Contents/Resources/Web/js/main.js index 45aba9c..d5a2a3d 100644 --- a/Stark.sketchplugin/Contents/Resources/Web/js/main.js +++ b/Stark.sketchplugin/Contents/Resources/Web/js/main.js @@ -27,6 +27,12 @@ var zoomOutButton = document.getElementById('ZoomOutButton'); var zoomInButton = document.getElementById('ZoomInButton'); +// +// Help Elements +var helpContainer = document.getElementById('HelpContainer'); +var helpLink = document.getElementById('HelpLink'); +var helpText = document.getElementById('HelpText'); + // Defaults var canvasScale = 1; @@ -35,6 +41,14 @@ var canvasScale = 1; // Select Events simulationSelect.focus(); simulationSelect.addEventListener("change", function(event) { + if (simulationSelect.value === 'cbid_NoSim') { + helpContainer.classList.remove('simulation__help-container--show'); + } + else { + updateHelpLinkAndText(simulationSelect.value.replace('cbid_', '')) + helpContainer.classList.add('simulation__help-container--show'); + } + window.status = simulationSelect.value; runSimulation(); }); @@ -52,6 +66,13 @@ artboardSelect.addEventListener("change", function(event) { }); +// +// Help Events +helpContainer.addEventListener("click", function(event) { + helpContainer.focus(); +}); + + // // Navigation Events colorNav.addEventListener("click", function(event) { @@ -229,6 +250,36 @@ function removeCanvasOpacity() { canvasContainer.classList.add('canvas--hidden'); } +function updateHelpLinkAndText(simType) { + helpLink.innerHTML = 'Show more on it'; + switch (simType) { + case 'Protanopia': + helpText.innerHTML = 'Affects 1% of males. No working red cone cells meaning reds can appear as black.'; + break; + case 'Protanomaly': + helpText.innerHTML = 'Affects 1% of males. Abnormal red cone photopigment. Colors not as bright with some actually showing greener.'; + break; + case 'Deuteranopia': + helpText.innerHTML = 'Affects 1% of males. No working green cone cells meaning greens can appear beige.'; + break; + case 'Deuteranomaly': + helpText.innerHTML = 'Affects 5% of males. Abnormal green cone photopigment. Yellow and green appear redder and difficulty telling violet from blue.'; + break; + case 'Tritanopia': + helpText.innerHTML = 'Extremely rare - affects genders equally. No blue cone cells meaning blues can appear green.'; + break; + case 'Tritanomaly': + helpText.innerHTML = 'Extremely rare - affects genders equally. Limited blue cone cells meaning blues appear greener and difficulty telling yellow and red from pink.'; + break; + case 'Achromatopsia': + helpText.innerHTML = 'Extremely Rare - affects genders equally. No working cone cells meaning an inability to distinguish between colors.'; + break; + case 'Achromatomaly': + helpText.innerHTML = 'Extremely Rare - affects genders equally. Limited working cone cells meaning almost no color is visible.'; + break; + } +} + function simulateContrastClick() { contrastNav.click(); } diff --git a/Stark.sketchplugin/Contents/Sketch/manifest.json b/Stark.sketchplugin/Contents/Sketch/manifest.json index 7076cdd..abe72a3 100755 --- a/Stark.sketchplugin/Contents/Sketch/manifest.json +++ b/Stark.sketchplugin/Contents/Sketch/manifest.json @@ -113,7 +113,7 @@ ] }, "identifier" : "com.mfouquet.sketch.stark", - "version" : "1.3", + "version" : "1.4", "description" : "Ensure your design is accessible and high contrast for every type of color blindness.", "author" : "Michael Fouquet, Cat Noone, Benedikt Lehnert", "authorEmail" : "michael.fouquet@me.com", From af78b23ad53f333ec14f90abc5491c5a5a21b8e6 Mon Sep 17 00:00:00 2001 From: Michael Fouquet Date: Fri, 16 Jun 2017 15:07:17 -0500 Subject: [PATCH 2/3] Adds sketch update info. Fixes #11 --- CHANGELOG.md | 4 ++ .../Contents/Sketch/manifest.json | 1 + appcast.xml | 47 +++++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 appcast.xml diff --git a/CHANGELOG.md b/CHANGELOG.md index 22f1dce..fbb2e0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # Change Log All notable changes to this project will be documented in this file. +## [1.4] - 2017-16-06 +### Added +- Added info for the 8 different types of colorblindness. + ## [1.3] - 2017-05-05 ### Added - Add hotkeys for zooming in and out, cycling through the different colorblind options, and cycling through the artobards in the document. diff --git a/Stark.sketchplugin/Contents/Sketch/manifest.json b/Stark.sketchplugin/Contents/Sketch/manifest.json index abe72a3..0daf54a 100755 --- a/Stark.sketchplugin/Contents/Sketch/manifest.json +++ b/Stark.sketchplugin/Contents/Sketch/manifest.json @@ -117,5 +117,6 @@ "description" : "Ensure your design is accessible and high contrast for every type of color blindness.", "author" : "Michael Fouquet, Cat Noone, Benedikt Lehnert", "authorEmail" : "michael.fouquet@me.com", + "appcast" : "https://raw.githubusercontent.com/stark-contrast/stark-sketch-plugin/master/appcast.xml", "name" : "Stark" } diff --git a/appcast.xml b/appcast.xml new file mode 100644 index 0000000..6355dc1 --- /dev/null +++ b/appcast.xml @@ -0,0 +1,47 @@ + + + + Stark + https://raw.githubusercontent.com/stark-contrast/stark-sketch-plugin/master/appcast.xml + Easily check your designs against the 8 different types of colorblindness. In addition, run a pair of colors against WCAG 2.0 standards. + en + + Version 1.4 + + +
  • Added info on the different types of colorblindness.
    • + + ]]> +     + Fri, 16 Jun 2017 12:58:00 +0000 + +     + + Version 1.3 + + +
  • Add hotkeys for zooming in and out, cycling through the different colorblind options, and cycling through the artobards in the document.
    • +
  • Fixed the treshold for each of the WCAG 2.0 contrast standards.
    • + + ]]> +     + Fri, 5 May 2017 12:58:00 +0000 + +     + + Version 1.2 + + +
  • Zoom in and zoom out buttons when viewing an artboard.
    • +
  • Problem with contrast checker not working if you closed and reopened the window.
    • + + ]]> +     + Thu, 20 Apr 2017 12:58:00 +0000 + +     +     +     From 3ddb923b73a40884c125cb6c89b4e00554408a6a Mon Sep 17 00:00:00 2001 From: Michael Fouquet Date: Fri, 16 Jun 2017 15:18:35 -0500 Subject: [PATCH 3/3] Fix some of the helper text. --- .../Contents/Resources/Web/js/main.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Stark.sketchplugin/Contents/Resources/Web/js/main.js b/Stark.sketchplugin/Contents/Resources/Web/js/main.js index d5a2a3d..20ac5e0 100644 --- a/Stark.sketchplugin/Contents/Resources/Web/js/main.js +++ b/Stark.sketchplugin/Contents/Resources/Web/js/main.js @@ -254,28 +254,28 @@ function updateHelpLinkAndText(simType) { helpLink.innerHTML = 'Show more on it'; switch (simType) { case 'Protanopia': - helpText.innerHTML = 'Affects 1% of males. No working red cone cells meaning reds can appear as black.'; + helpText.innerHTML = 'Affects 1% of males. No working red cone cells, meaning reds can appear as black.'; break; case 'Protanomaly': helpText.innerHTML = 'Affects 1% of males. Abnormal red cone photopigment. Colors not as bright with some actually showing greener.'; break; case 'Deuteranopia': - helpText.innerHTML = 'Affects 1% of males. No working green cone cells meaning greens can appear beige.'; + helpText.innerHTML = 'Affects 1% of males. No working green cone cells, meaning greens can appear beige.'; break; case 'Deuteranomaly': - helpText.innerHTML = 'Affects 5% of males. Abnormal green cone photopigment. Yellow and green appear redder and difficulty telling violet from blue.'; + helpText.innerHTML = 'Affects 5% of males. Abnormal green cone photopigment. Yellow and green appear redder, plus difficulty telling violet from blue.'; break; case 'Tritanopia': - helpText.innerHTML = 'Extremely rare - affects genders equally. No blue cone cells meaning blues can appear green.'; + helpText.innerHTML = 'Extremely rare - affects genders equally. No blue cone cells, meaning blues can appear green.'; break; case 'Tritanomaly': - helpText.innerHTML = 'Extremely rare - affects genders equally. Limited blue cone cells meaning blues appear greener and difficulty telling yellow and red from pink.'; + helpText.innerHTML = 'Extremely rare - affects genders equally. Limited blue cone cells, meaning blues appear greener, plus difficulty telling yellow and red from pink.'; break; case 'Achromatopsia': - helpText.innerHTML = 'Extremely Rare - affects genders equally. No working cone cells meaning an inability to distinguish between colors.'; + helpText.innerHTML = 'Extremely Rare - affects genders equally. No working cone cells, meaning an inability to distinguish between colors.'; break; case 'Achromatomaly': - helpText.innerHTML = 'Extremely Rare - affects genders equally. Limited working cone cells meaning almost no color is visible.'; + helpText.innerHTML = 'Extremely Rare - affects genders equally. Limited working cone cells, meaning almost no color is visible.'; break; } }