CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-05 15:14:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Only warn about bad-contrasat colors

Browse Source
This commit is contained in:
Raphael Michel
2018-11-13 15:53:18 +01:00
parent 7528bfb10b
commit 0734715bab
4 changed files with 49 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/pretix/static/pretixcontrol/js/ui/main.js
View File

@@ -157,6 +157,22 @@ var form_handlers = function (el) {
fill_field.on("dp.show", show);
});
function luminanace(r, g, b) {
var a = [r, g, b].map(function (v) {
v /= 255;
return v <= 0.03928
? v / 12.92
: Math.pow( (v + 0.055) / 1.055, 2.4 );
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
var l1 = luminanace(rgb1[0], rgb1[1], rgb1[2]) + 0.05,
l2 = luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05,
ratio = l1/l2
if (l2 > l1) {ratio = 1/ratio}
return ratio.toFixed(1)
}
el.find(".colorpickerfield").colorpicker({
format: 'hex',
align: 'left',
@@ -173,6 +189,32 @@ var form_handlers = function (el) {
maxTop: 200
}
}
}).on('changeColor create', function (e) {
var rgb = $(this).colorpicker('color').toRGB();
var c = contrast([255,255,255], [rgb.r, rgb.g, rgb.b]);
var mark = 'times';
if ($(this).parent().find(".contrast-state").length === 0) {
$(this).parent().append("<div class='help-block contrast-state'></div>");
}
var $note = $(this).parent().find(".contrast-state");
if ($(this).val() === "") {
$note.remove();
}
if (c > 7) {
$note.html("<span class='fa fa-fw fa-check-circle'></span>")
.append(gettext('Your color has great contrast and is very easy to read!'));
$note.addClass("text-success").removeClass("text-warning").removeClass("text-danger");
} else if (c > 2.5) {
$note.html("<span class='fa fa-fw fa-info-circle'></span>")
.append(gettext('Your color has decent contrast and is probably good-enough to read!'));
$note.removeClass("text-success").removeClass("text-warning").removeClass("text-danger");
} else {
$note.html("<span class='fa fa-fw fa-warning'></span>")
.append(gettext('Your color has bad contrast for text on white background, please choose a darker ' +
'shade.'));
$note.addClass("text-danger").removeClass("text-success").removeClass("text-warning");
}
console.log(c);
});
el.find("input[data-checkbox-dependency]").each(function () {