musicgrid: title hover, set font color dependent on background

2 files changed, 38 insertions, 4 deletions

diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index 695bca4..70722d0 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -63,13 +63,18 @@ Musicgrid.prototype.fetch = function() {
 
 Musicgrid.prototype.updateTable = function() {
   var $table = $('#app-musicgrid table');
+  $('tr td', $table).html('').css('background-color', '').css('color', '').attr('title', null);
   $(this.clocks).each(function(index, clock) {
     var $td = $('tr[data-dow="' + clock.dow + '"] td[data-hour="' + clock.hour +'"]', $table);
-    var $div = $('<div>' + clock.name + '<br />' + clock.title + '</div>');
-    $div.css('background-color', clock.color);
+    $td.html(clock.name);
+    $td.attr('title', clock.title);
+    $td.css('background-color', clock.color);
+    if($td.isBackgroundDark()) {
+      $td.css('color', '#ffffff');
+    }
+
     // todo: move this css to stylesheet
-    $div.css('text-align', 'center');
-    $td.html($div);
+    $td.css('text-align', 'center');
   });
 };
 
diff --git a/www/js/utils.js b/www/js/utils.js
index 8331ea1..470b3b5 100644
--- a/www/js/utils.js
+++ b/www/js/utils.js
@@ -101,3 +101,32 @@ function locationHrefValue() {
   var value = window.location.href.match(/import.helsinki.at\/([a-z]+)\/?.*/);
   return value ? value[1] : '';
 }
+
+/*
+ see: https://gist.github.com/kozo002/6806421
+ */
+jQuery.fn.isBackgroundDark = function() {
+  return this.brightness() === 'dark';
+};
+
+jQuery.fn.brightness = function() {
+  var bg_color, rgba, y;
+  bg_color = this.css('background-color');
+  if ((bg_color != null) && bg_color.length) {
+    rgba = bg_color.match(/^rgb(?:a)?\(([0-9]{1,3}),\s([0-9]{1,3}),\s([0-9]{1,3})(?:,\s)?([0-9]{1,3})?\)$/);
+    if (rgba != null) {
+      if (rgba[4] === '0') {
+        if (this.parent().length) return this.parent().brightness();
+      } else {
+        y = 2.99 * rgba[1] + 5.87 * rgba[2] + 1.14 * rgba[3];
+        if (y >= 1275) {
+          return 'light';
+        } else {
+          return 'dark';
+        }
+      }
+    }
+  } else {
+    if (this.parent().length) return this.parent().brightness();
+  }
+};