Merge pull request #41 from nickdesaulniers/glow2

glow Fixes #16
nickdesaulniers · Oct 10, 2013 · 9e6365e · 9e6365e
2 parents 2eda132 + d50579a
commit 9e6365e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/my.css b/my.css
@@ -8,6 +8,12 @@
   src: url('OpenSans-Light.ttf');
 }
 
+@keyframes glow {
+  to {
+    background-color: black;
+  }
+}
+
 h1 {
   margin: 0;
   font-weight: normal;
@@ -55,6 +61,14 @@ html, body {
   transition: all linear .25s;
 }
 
+.glow {
+  animation-name: glow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+}
+
 .moz-button:active {
   box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2),inset 0 12px 24px 6px rgba(0,0,0,0.2),inset 0 0 2px 2px rgba(0,0,0,0.2);
   color: #fff;

diff --git a/my.js b/my.js
@@ -154,20 +154,24 @@ document.addEventListener("DOMContentLoaded", function () {
       });
 
       client.addListener("pm", function (from, text, message) {
-        if (!(from in privMSG)) {
-          privMSG[from] = new Tab({
+        var msg = privMSG[from];
+        if (!msg) {
+          msg = privMSG[from] = new Tab({
             chan: from,
             client: client,
             nick: username,
             host: host,
           });
         }
-        privMSG[from].addText(from, text);
+        msg.addText(from, text);
 
         var img = "https://raw.github.com/nickdesaulniers/fxos-irc/master/128.png";
-        if ($("container").selectedCard.id !== privMSG[from].card.id) {
+        if ($("container").selectedCard.id !== msg.card.id) {
           // This hack is because origin is not supported in manifests for < 1.1.
           sendNotification(from, { body: text, icon: img });
+          if (!msg.tab.classList.contains("glow")) {
+            msg.tab.classList.add("glow");
+          }
         }
       });
     }

diff --git a/tab.js b/tab.js
@@ -21,15 +21,19 @@ var FlatUIColors = [
 function Tab (opts) {
   var $ = document.getElementById.bind(document);
   var host = opts.host.replace(/\./g, "-");
+  var color = FlatUIColors[FlatUIColors.length * Math.random() | 0];
 
   this.card = document.createElement("x-card");
   this.card.id = "__" + tabCounter++;
-  this.card.className = host;
-
-  var color = FlatUIColors[FlatUIColors.length * Math.random() | 0];
+  this.card.classList.add(host);
   this.card.style.backgroundColor = color;
-  this.tab = document.createElement("x-tabbar-tab");
+  this.card.addEventListener("show", function () {
+    if (this.tab.classList.contains("glow")) {
+      this.tab.classList.remove("glow");
+    }
+  }.bind(this));
 
+  this.tab = document.createElement("x-tabbar-tab");
   this.tab.setAttribute("target-selector", "x-deck x-card#" + this.card.id);
   this.tab.textContent = opts.chan;
   this.tab.style.backgroundColor = color;
@@ -70,6 +74,10 @@ function Tab (opts) {
 
 Tab.prototype = {
   onMessage: function (from, data) {
+    if ($("container").selectedCard.id !== this.card.id &&
+        !this.tab.classList.contains("glow")) {
+      this.tab.classList.add("glow");
+    }
     this.addText(from, data);
   },