User highlight color (#1)

* different color highlight ability. need to make per user next

* make colors more vibrant

* fixed pull review actions

* made pretty

* updating highlightRange test

* made pretty again

* fixing bracket it didnt like

* pretty

* fixed equal format

Author: Sydney Jaques

src/annotator/guest.js

@@ -454,7 +454,8 @@ export default class Guest extends Delegator {
       }
 
       const highlights = /** @type {AnnotationHighlight[]} */ (highlightRange(
-        range
+        range,
+        Math.random() * (6 - 1) + 1
       ));
       highlights.forEach(h => {
         h._annotation = anchor.annotation;

src/annotator/highlighter.js

@@ -212,10 +212,15 @@ function wholeTextNodesInRange(range) {
  * element of the specified class and returns the highlight Elements.
  *
  * @param {Range} range - Range to be highlighted
+ * @param {Number} colorNum - number to index color list
  * @param {string} cssClass - A CSS class to use for the highlight
  * @return {HighlightElement[]} - Elements wrapping text in `normedRange` to add a highlight effect
  */
-export function highlightRange(range, cssClass = 'hypothesis-highlight') {
+export function highlightRange(
+  range,
+  colorNum,
+  cssClass = 'hypothesis-highlight'
+) {
   const textNodes = wholeTextNodesInRange(range);
 
   // Check if this range refers to a placeholder for not-yet-rendered text in
@@ -260,6 +265,11 @@ export function highlightRange(range, cssClass = 'hypothesis-highlight') {
     /** @type {HighlightElement} */
     const highlightEl = document.createElement('hypothesis-highlight');
     highlightEl.className = cssClass;
+    //here is where we can call another function to get the color for the user
+    //color-->index number in the 'user-color' class
+    if (colorNum !== -1) {
+      highlightEl.classList.toggle('user-color' + Math.round(colorNum), true);
+    }
 
     nodes[0].parentNode.replaceChild(highlightEl, nodes[0]);
     nodes.forEach(node => highlightEl.appendChild(node));

src/annotator/test/highlighter-test.js

@@ -141,7 +141,7 @@ describe('annotator/highlighter', () => {
       const range = new Range();
       range.setStart(el.firstChild, 4);
       range.setEnd(el, 1);
-      highlightRange(range, '' /* cssClass */);
+      highlightRange(range, -1, '' /* cssClass */);
 
       assert.equal(
         el.innerHTML,

src/styles/annotator/highlights.scss

@@ -18,7 +18,7 @@
   }
 
   .hypothesis-highlight {
-    background-color: var.$color-highlight;
+    background-color: var.$user-colors;
 
     // For PDFs, we still create highlight elements to wrap the text but the
     // highlight effect is created by another element.
@@ -72,5 +72,23 @@
         background-color: transparent !important;
       }
     }
+    &.user-color1 {
+      background-color: nth(var.$user-colors, 1);
+    }
+    &.user-color2 {
+      background-color: nth(var.$user-colors, 2);
+    }
+    &.user-color3 {
+      background-color: nth(var.$user-colors, 3);
+    }
+    &.user-color4 {
+      background-color: nth(var.$user-colors, 4);
+    }
+    &.user-color5 {
+      background-color: nth(var.$user-colors, 5);
+    }
+    &.user-color6 {
+      background-color: nth(var.$user-colors, 6);
+    }
   }
 }

src/styles/variables.scss

@@ -136,3 +136,6 @@ $annotator-border-radius: 4px;
 
 $annotator-shadow--sidebar: 0px 1px 4px color.scale($color-shadow, $alpha: -50%);
 $annotator-timing--sidebar-collapse-transition: 150ms;
+
+//test for highlight colors per user
+$user-colors: #ff0a0a, #20e9ff, #447fff, #fff400, #8335ff, #2fffa2;