ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

calendar: upgrade color-slicer 

fixes CNVS-10351

test plan:
  * open calendar2
  * verify that calendar colors look more distinct than in
      http://screencast.com/t/PpKgnpPZ

Change-Id: I488acb1e16af4e51728aa11c3dd667025b11fbc4
Reviewed-on: https://gerrit.instructure.com/28261
Reviewed-by: Braden Anderson <banderson@instructure.com>
QA-Review: Braden Anderson <banderson@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
Product-Review: Braden Anderson <banderson@instructure.com>
This commit is contained in:
Braden Anderson 2014-01-08 17:51:42 -07:00
parent c639b1bea5
commit d55cfcb536
7 changed files with 159 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -8,6 +8,6 @@
"ic-ajax": "~0.2.0",
"ic-menu": "~0.1.0",
"ic-styled": "~1.1.3",
"color-slicer": "~0.3.0"
"color-slicer": "~0.4.0"
}
}

10
public/javascripts/bower/color-slicer/.bower.json
View File

@ -1,6 +1,6 @@
{
"name": "color-slicer",
"version": "0.3.0",
"version": "0.4.2",
"authors": [
"Braden Anderson <bluej100@gmail.com>"
],
@ -20,13 +20,13 @@
],
"devDependencies": {},
"homepage": "https://github.com/instructure/color-slicer",
"_release": "0.3.0",
"_release": "0.4.2",
"_resolution": {
"type": "version",
"tag": "v0.3.0",
"commit": "afa120a795fb96f8687c6bb7211c3d2c2a813854"
"tag": "v0.4.2",
"commit": "46182677ffae2f1854782e732f7dea31a41c0778"
},
"_source": "git://github.com/instructure/color-slicer.git",
"_target": "~0.3.0",
"_target": "~0.4.0",
"_originalSource": "color-slicer"
}

2
public/javascripts/bower/color-slicer/bower.json
View File

@ -1,6 +1,6 @@
{
"name": "color-slicer",
"version": "0.3.0",
"version": "0.4.2",
"authors": [
"Braden Anderson <bluej100@gmail.com>"
],

67
public/javascripts/bower/color-slicer/dist/color-slicer.js vendored
View File

@ -9,13 +9,38 @@ var fairSlicer = require('./lib/fair-slicer');
var converter = require("color-convert");
module.exports = {
hueToRgb: function(h) {
h = h / 360 * 2 * Math.PI;
// legible lightness for small text on a white background
var l = 40;
// chroma
var c = 80;
var lab = [l, c * Math.cos(h), c * Math.sin(h)];
lchToLab: function(lch) {
var l = lch[0];
var c = lch[1];
var h = lch[2] / 360 * 2 * Math.PI;
return [l, c * Math.cos(h), c * Math.sin(h)];
},
hueToLch: function(options, h) {
var l, c;
if (options.l) {
l = options.l;
c = options.c;
} else if (options.bright) {
l = 73;
c = 42;
} else {
l = 50;
c = 32;
// vary chroma to roughly match boundary of RGB-expressible colors
var delta = 18;
var most_constrained_hue = 210;
var hr = (h - most_constrained_hue) / 360 * 2 * Math.PI;
c += delta - Math.round(delta * Math.cos(hr));
}
return [l, c, h]
},
lchToCss: function(lch) {
return this.rgbToCss(this.labToRgb(this.lchToLab(lch)));
},
labToRgb: function(lab) {
var xyz = converter.lab2xyz.apply(converter, lab);
var rgb = converter.xyz2rgb.apply(converter, xyz);
return rgb;
@ -25,17 +50,35 @@ module.exports = {
return "rgb("+rgb.join(',')+")";
},
getRawColors: function(limit, startX) {
getLchColors: function(limit, startX, options) {
if (startX === undefined) {
startX = 330;
}
if (!options) {
options = {};
}
var hueToLch = function(h) {
return this.hueToLch(options, h);
}.bind(this);
var slices = fairSlicer(limit, 0, 360, startX);
return slices.map(this.hueToRgb.bind(this));
return slices.map(hueToLch);
},
getColors: function(limit, startX) {
var rawColors = this.getRawColors(limit, startX);
return rawColors.map(this.rgbToCss);
getLabColors: function(limit, startX, options) {
var lchColors = this.getLchColors(limit, startX, options);
return lchColors.map(this.lchToLab);
},
getRgbColors: function(limit, startX, options) {
var labColors = this.getLabColors(limit, startX, options);
return labColors.map(this.labToRgb);
},
getColors: function(limit, startX, options) {
var rgbColors = this.getRgbColors(limit, startX, options);
return rgbColors.map(this.rgbToCss);
}
};

52
public/javascripts/bower/color-slicer/dist/example.html vendored
View File

@ -2,36 +2,66 @@
<html>
<head>
<title>color-slicer example</title>
<style>
li {
margin-top: 0.5em;
}
span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
}
</style>
<script src="color-slicer.js"></script>
<script>
var generate = function(e) {
if (e) {e.preventDefault();}
var generate = function() {
var count = parseInt(document.getElementById('count').value, 10);
var start = parseInt(document.getElementById('start').value, 10);
var colors = colorSlicer.getColors(count, start);
var lightness = parseInt(document.getElementById('lightness').value, 10);
var chroma = parseInt(document.getElementById('chroma').value, 10);
var bright = document.getElementById('bright').checked;
document.body.style.color = bright ? '#fff' : '#000';
document.body.style.backgroundColor = bright ? '#000' : '#fff';
var colors = colorSlicer.getLchColors(count, start, {l: lightness, c: chroma, bright: bright});
var output = document.getElementById('output');
output.innerHTML = '';
for (var i = 0; i < colors.length; i++) {
var color = colors[i];
var node = document.createElement('p');
var lch = colors[i];
var color = colorSlicer.lchToCss(lch);
var node = document.createElement('li');
node.style.color = color;
node.appendChild(document.createTextNode(i+1+': '+color));
var blob = document.createElement('span');
blob.style.backgroundColor = color;
node.appendChild(blob);
node.appendChild(document.createTextNode(' lch('+lch.join(', ')+') = '+color));
output.appendChild(node);
}
};
window.addEventListener('load', function() {
inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', generate);
input.addEventListener('click', generate);
}
generate();
document.getElementById('params').addEventListener('submit', generate);
});
</script>
</head>
<body>
<form id="params" action="#">
<form action="#">
<fieldset>
<label>Count <input id="count" value="5" /></label> <label>Start <input id="start" value="330" /></label> <input type="submit" value="Generate" />
<div><label>Count <input id="count" value="10" /></label></div>
<div><label>Start <input id="start" value="330" /></label></div>
<div><label>Lightness <input id="lightness" /></label></div>
<div><label>Chroma <input id="chroma" /></label></div>
<div><label><input id="bright" type="checkbox" /> Bright</label></div>
</fieldset>
</form>
<div id="output">
</div>
<ol id="output">
</ol>
</body>
</html>

67
public/javascripts/bower/color-slicer/index.js
View File

@ -8,13 +8,38 @@ var fairSlicer = require('./lib/fair-slicer');
var converter = require("color-convert");
module.exports = {
hueToRgb: function(h) {
h = h / 360 * 2 * Math.PI;
// legible lightness for small text on a white background
var l = 40;
// chroma
var c = 80;
var lab = [l, c * Math.cos(h), c * Math.sin(h)];
lchToLab: function(lch) {
var l = lch[0];
var c = lch[1];
var h = lch[2] / 360 * 2 * Math.PI;
return [l, c * Math.cos(h), c * Math.sin(h)];
},
hueToLch: function(options, h) {
var l, c;
if (options.l) {
l = options.l;
c = options.c;
} else if (options.bright) {
l = 73;
c = 42;
} else {
l = 50;
c = 32;
// vary chroma to roughly match boundary of RGB-expressible colors
var delta = 18;
var most_constrained_hue = 210;
var hr = (h - most_constrained_hue) / 360 * 2 * Math.PI;
c += delta - Math.round(delta * Math.cos(hr));
}
return [l, c, h]
},
lchToCss: function(lch) {
return this.rgbToCss(this.labToRgb(this.lchToLab(lch)));
},
labToRgb: function(lab) {
var xyz = converter.lab2xyz.apply(converter, lab);
var rgb = converter.xyz2rgb.apply(converter, xyz);
return rgb;
@ -24,16 +49,34 @@ module.exports = {
return "rgb("+rgb.join(',')+")";
},
getRawColors: function(limit, startX) {
getLchColors: function(limit, startX, options) {
if (startX === undefined) {
startX = 330;
}
if (!options) {
options = {};
}
var hueToLch = function(h) {
return this.hueToLch(options, h);
}.bind(this);
var slices = fairSlicer(limit, 0, 360, startX);
return slices.map(this.hueToRgb.bind(this));
return slices.map(hueToLch);
},
getColors: function(limit, startX) {
var rawColors = this.getRawColors(limit, startX);
return rawColors.map(this.rgbToCss);
getLabColors: function(limit, startX, options) {
var lchColors = this.getLchColors(limit, startX, options);
return lchColors.map(this.lchToLab);
},
getRgbColors: function(limit, startX, options) {
var labColors = this.getLabColors(limit, startX, options);
return labColors.map(this.labToRgb);
},
getColors: function(limit, startX, options) {
var rgbColors = this.getRgbColors(limit, startX, options);
return rgbColors.map(this.rgbToCss);
}
};

2
public/javascripts/bower/color-slicer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "color-slicer",
"version": "0.3.0",
"version": "0.4.2",
"description": "Generate lists of readable text colors.",
"main": "index.js",
"scripts": {