From d9f3bb0e3952f126a4140082da221adb1d5354f5 Mon Sep 17 00:00:00 2001 From: John McLear Date: Tue, 22 Dec 2020 15:07:17 +0000 Subject: [PATCH] lint: colorutils.js --- src/static/js/colorutils.js | 100 ++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 55 deletions(-) diff --git a/src/static/js/colorutils.js b/src/static/js/colorutils.js index 6feba3a75..9688b8e59 100644 --- a/src/static/js/colorutils.js +++ b/src/static/js/colorutils.js @@ -1,3 +1,5 @@ +'use strict'; + /** * This code is mostly from the old Etherpad. Please help us to comment this code. * This helps other people to understand this code better and helps them to improve it. @@ -26,24 +28,24 @@ const colorutils = {}; // Check that a given value is a css hex color value, e.g. // "#ffffff" or "#fff" -colorutils.isCssHex = function (cssColor) { - return /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(cssColor); -}; +colorutils.isCssHex = (cssColor) => /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(cssColor); // "#ffffff" or "#fff" or "ffffff" or "fff" to [1.0, 1.0, 1.0] -colorutils.css2triple = function (cssColor) { +colorutils.css2triple = (cssColor) => { const sixHex = colorutils.css2sixhex(cssColor); - function hexToFloat(hh) { - return Number(`0x${hh}`) / 255; - } - return [hexToFloat(sixHex.substr(0, 2)), hexToFloat(sixHex.substr(2, 2)), hexToFloat(sixHex.substr(4, 2))]; + const hexToFloat = (hh) => Number(`0x${hh}`) / 255; + return [ + hexToFloat(sixHex.substr(0, 2)), + hexToFloat(sixHex.substr(2, 2)), + hexToFloat(sixHex.substr(4, 2)), + ]; }; // "#ffffff" or "#fff" or "ffffff" or "fff" to "ffffff" -colorutils.css2sixhex = function (cssColor) { +colorutils.css2sixhex = (cssColor) => { let h = /[0-9a-fA-F]+/.exec(cssColor)[0]; - if (h.length != 6) { + if (h.length !== 6) { const a = h.charAt(0); const b = h.charAt(1); const c = h.charAt(2); @@ -53,66 +55,54 @@ colorutils.css2sixhex = function (cssColor) { }; // [1.0, 1.0, 1.0] -> "#ffffff" -colorutils.triple2css = function (triple) { - function floatToHex(n) { +colorutils.triple2css = (triple) => { + const floatToHex = (n) => { const n2 = colorutils.clamp(Math.round(n * 255), 0, 255); return (`0${n2.toString(16)}`).slice(-2); - } + }; return `#${floatToHex(triple[0])}${floatToHex(triple[1])}${floatToHex(triple[2])}`; }; -colorutils.clamp = function (v, bot, top) { - return v < bot ? bot : (v > top ? top : v); -}; -colorutils.min3 = function (a, b, c) { - return (a < b) ? (a < c ? a : c) : (b < c ? b : c); -}; -colorutils.max3 = function (a, b, c) { - return (a > b) ? (a > c ? a : c) : (b > c ? b : c); -}; -colorutils.colorMin = function (c) { - return colorutils.min3(c[0], c[1], c[2]); -}; -colorutils.colorMax = function (c) { - return colorutils.max3(c[0], c[1], c[2]); -}; -colorutils.scale = function (v, bot, top) { - return colorutils.clamp(bot + v * (top - bot), 0, 1); -}; -colorutils.unscale = function (v, bot, top) { - return colorutils.clamp((v - bot) / (top - bot), 0, 1); -}; +colorutils.clamp = (v, bot, top) => v < bot ? bot : (v > top ? top : v); +colorutils.min3 = (a, b, c) => (a < b) ? (a < c ? a : c) : (b < c ? b : c); +colorutils.max3 = (a, b, c) => (a > b) ? (a > c ? a : c) : (b > c ? b : c); +colorutils.colorMin = (c) => colorutils.min3(c[0], c[1], c[2]); +colorutils.colorMax = (c) => colorutils.max3(c[0], c[1], c[2]); +colorutils.scale = (v, bot, top) => colorutils.clamp(bot + v * (top - bot), 0, 1); +colorutils.unscale = (v, bot, top) => colorutils.clamp((v - bot) / (top - bot), 0, 1); -colorutils.scaleColor = function (c, bot, top) { - return [colorutils.scale(c[0], bot, top), colorutils.scale(c[1], bot, top), colorutils.scale(c[2], bot, top)]; -}; +colorutils.scaleColor = (c, bot, top) => [ + colorutils.scale(c[0], bot, top), + colorutils.scale(c[1], bot, top), + colorutils.scale(c[2], bot, top), +]; -colorutils.unscaleColor = function (c, bot, top) { - return [colorutils.unscale(c[0], bot, top), colorutils.unscale(c[1], bot, top), colorutils.unscale(c[2], bot, top)]; -}; +colorutils.unscaleColor = (c, bot, top) => [ + colorutils.unscale(c[0], bot, top), + colorutils.unscale(c[1], bot, top), + colorutils.unscale(c[2], bot, top), +]; -colorutils.luminosity = function (c) { - // rule of thumb for RGB brightness; 1.0 is white - return c[0] * 0.30 + c[1] * 0.59 + c[2] * 0.11; -}; +// rule of thumb for RGB brightness; 1.0 is white +colorutils.luminosity = (c) => c[0] * 0.30 + c[1] * 0.59 + c[2] * 0.11; -colorutils.saturate = function (c) { +colorutils.saturate = (c) => { const min = colorutils.colorMin(c); const max = colorutils.colorMax(c); if (max - min <= 0) return [1.0, 1.0, 1.0]; return colorutils.unscaleColor(c, min, max); }; -colorutils.blend = function (c1, c2, t) { - return [colorutils.scale(t, c1[0], c2[0]), colorutils.scale(t, c1[1], c2[1]), colorutils.scale(t, c1[2], c2[2])]; -}; +colorutils.blend = (c1, c2, t) => [ + colorutils.scale(t, c1[0], c2[0]), + colorutils.scale(t, c1[1], c2[1]), + colorutils.scale(t, c1[2], c2[2]), +]; -colorutils.invert = function (c) { - return [1 - c[0], 1 - c[1], 1 - c[2]]; -}; +colorutils.invert = (c) => [1 - c[0], 1 - c[1], 1 - c[2]]; -colorutils.complementary = function (c) { +colorutils.complementary = (c) => { const inv = colorutils.invert(c); return [ (inv[0] >= c[0]) ? Math.min(inv[0] * 1.30, 1) : (c[0] * 0.30), @@ -121,9 +111,9 @@ colorutils.complementary = function (c) { ]; }; -colorutils.textColorFromBackgroundColor = function (bgcolor, skinName) { - const white = skinName == 'colibris' ? 'var(--super-light-color)' : '#fff'; - const black = skinName == 'colibris' ? 'var(--super-dark-color)' : '#222'; +colorutils.textColorFromBackgroundColor = (bgcolor, skinName) => { + const white = skinName === 'colibris' ? 'var(--super-light-color)' : '#fff'; + const black = skinName === 'colibris' ? 'var(--super-dark-color)' : '#222'; return colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5 ? white : black; };