Merge pull request #12 from stark-contrast/v1.4

v1.4
stark-contrast · Jun 19, 2017 · ba3c428 · ba3c428
2 parents 6f264ea + 3ddb923
commit ba3c428
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 2 deletions.
diff --git 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/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
@@ -133,6 +133,10 @@
               <option value="cbid_Achromatopsia">Achromatopsia</option>
               <option value="cbid_Achromatomaly">Achromatomaly</option>
             </select>
+            <div id="HelpContainer" class="simulation__help-container" tabindex="1">
+              <a id="HelpLink" class="simulation__help-link">Show me more</a>
+              <div id="HelpText" class="simulation__help-text">Here's some info.</div>
+            </div>
           </div>
           <div class="step">
             <div class="step__number">3</div>
@@ -159,7 +163,7 @@
               <path d="M40.7336683,63.0677383 C46.5489201,63.4151463 52.480536,61.3671875 56.9238617,56.9238617 C65.1660829,48.6816405 65.1660829,35.3183595 56.9238617,27.0761383 C56.1630282,26.3153048 55.3585582,25.6247033 54.5185077,25.0043338 L51.580306,27.9425354 L29.5551257,49.9677158 C25.8860767,44.2491125 26.5521337,36.5544599 31.5532968,31.5532968 C34.7604518,28.3461418 39.0752839,26.9217661 43.2663317,27.2801698 L43.2663317,20.9322617 C37.4510799,20.5848537 31.519464,22.6328125 27.0761383,27.0761383 C18.8339171,35.3183595 18.8339171,48.6816405 27.0761383,56.9238617 C27.8369718,57.6846952 28.6414418,58.3752967 29.4814923,58.9956662 L32.4943133,55.9828452 L54.4448743,34.0322842 C58.1139233,39.7508875 57.4478663,47.4455401 52.4467032,52.4467032 C49.2395482,55.6538582 44.9247161,57.0782339 40.7336683,56.7198302 L40.7336683,63.0677383 Z"></path>
             </svg>
           </div>
-          <div class="info__version">Stark v1.3</div>
+          <div class="info__version">Stark v1.4</div>
         </div>
       </div>
     </div>

diff --git 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, 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.';
+      break;
+    case 'Tritanomaly':
+      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.';
+      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
@@ -113,9 +113,10 @@
     ]
   },
   "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" : "[email protected]",
+  "appcast" : "https://raw.githubusercontent.com/stark-contrast/stark-sketch-plugin/master/appcast.xml",
   "name" : "Stark"
 }
diff --git a/appcast.xml b/appcast.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<rss version="2.0" xmlns:sparkle="http://www.andymatuschak.org/xml-namespaces/sparkle"  xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <channel>
+    <title>Stark</title>
+    <link>https://raw.githubusercontent.com/stark-contrast/stark-sketch-plugin/master/appcast.xml</link>
+    <description>Easily check your designs against the 8 different types of colorblindness. In addition, run a pair of colors against WCAG 2.0 standards.</description>
+    <language>en</language>
+      <item>
+        <title>Version 1.4</title>
+        <description>
+          <![CDATA[
+            <ul>
+              <li>Added info on the different types of colorblindness.</li>
+            </ul>
+          ]]>
+        </description>
+        <pubDate>Fri, 16 Jun 2017 12:58:00 +0000</pubDate>
+        <enclosure url="https://github.com/stark-contrast/stark-sketch-plugin/archive/v1.4.zip" sparkle:version="1.4" type="application/octet-stream" />
+      </item>
+      <item>
+        <title>Version 1.3</title>
+        <description>
+          <![CDATA[
+            <ul>
+              <li>Add hotkeys for zooming in and out, cycling through the different colorblind options, and cycling through the artobards in the document.</li>
+              <li>Fixed the treshold for each of the WCAG 2.0 contrast standards.</li>
+            </ul>
+          ]]>
+        </description>
+        <pubDate>Fri, 5 May 2017 12:58:00 +0000</pubDate>
+        <enclosure url="https://github.com/stark-contrast/stark-sketch-plugin/archive/v1.3.zip" sparkle:version="1.3" type="application/octet-stream" />
+      </item>
+      <item>
+        <title>Version 1.2</title>
+        <description>
+          <![CDATA[
+            <ul>
+              <li>Zoom in and zoom out buttons when viewing an artboard.</li>
+              <li>Problem with contrast checker not working if you closed and reopened the window.</li>
+            </ul>
+          ]]>
+        </description>
+        <pubDate>Thu, 20 Apr 2017 12:58:00 +0000</pubDate>
+        <enclosure url="https://github.com/stark-contrast/stark-sketch-plugin/archive/v1.2.zip" sparkle:version="1.2" type="application/octet-stream" />
+      </item>
+  </channel>
+</rss>