black badge css is loaded if background of badge is black

drnic · May 6, 2008 · fb9e630 · fb9e630
1 parent 035f7bc
commit fb9e630
Show file tree

Hide file tree

Showing 10 changed files with 246 additions and 23 deletions.
diff --git a/src/ext/stylesheets/badge.css b/src/ext/stylesheets/badge.css
@@ -1,13 +1,12 @@
 #github-badge {
   padding: .2em;
+  color: black;
   background-color: white;
   font: 12px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
-  color: black;
 }
 
 #github-badge a {
   color: #4183c4; /* blue */
-  background-color: white;
   text-decoration: none;
 }
 
@@ -59,10 +58,6 @@
   background-color: #f0f0f0;
 }
 
-#github-badge .repos .public a {
-  background-color: #f0f0f0;
-}
-
 #github-badge .repos .public .description {
   margin-left: 18px;
 }

diff --git a/src/ext/stylesheets/black_badge.css b/src/ext/stylesheets/black_badge.css
@@ -0,0 +1,68 @@
+#github-badge {
+  padding: .2em;
+  color: white;
+  background-color: black;
+  font: 12px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
+}
+
+#github-badge a {
+  color: #4183c4; /* blue */
+  text-decoration: none;
+}
+
+#github-badge a:hover {
+  color: #4183c4; /* blue */
+  text-decoration: underline;
+}
+
+#github-badge a:visited {
+  color: #4183c4; /* blue */
+}
+
+#github-badge div.header {
+  font: 16px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
+}
+
+#github-badge .header span {
+  font: 15px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
+}
+
+#github-badge .footer {
+  font: 10px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
+}
+
+#github-badge .repos ul#repo_listing {
+  padding: .2em;
+  margin: 0px;
+}
+
+#github-badge .repos li {
+  list-style: none;
+  margin-bottom: 0.25em;
+  padding: .1em;
+  font-size: 110%;
+  background: transparent none repeat scroll 0%;
+}
+
+#github-badge .watching li {
+  font-size: 110%;
+}
+
+#github-badge .repos img {
+  padding-right: .2em;
+  vertical-align: middle;
+}
+
+#github-badge .repos .public {
+  border: 1px solid rgb(50,50,50);
+  background-color: rgb(20,20,20);
+}
+
+#github-badge .repos .public .description {
+  margin-left: 18px;
+}
+
+#github-badge .clickable {
+	cursor:	pointer; 
+	cursor:	hand;
+}
diff --git a/src/github-badge-launcher.js b/src/github-badge-launcher.js
@@ -1,8 +1,16 @@
 var GitHubBadge = GitHubBadge || {};
 
 GitHubBadge.Launcher = new function() {
-  function requestStylesheet( url ) {
-    document.write('<link rel="stylesheet" href="'+url+'" type="text/css"></link>');
+  function requestStylesheet( url, style_id ) {
+    if ("jQuery" in window) {
+      jQuery('head').append(
+        jQuery('<style rel="stylesheet" type="text/css"></style>')
+        .attr('href', url)
+        .attr('id', style_id)
+      )
+    } else {
+      document.write('<link rel="stylesheet" href="'+url+'" type="text/css"' + id_attr + '></link>');
+    }
   }
 
   function basePath() {
@@ -20,14 +28,13 @@ GitHubBadge.Launcher = new function() {
         [typeof jQuery != "undefined" && typeof jQuery.template, "ext/jquery.template"],
         [false, "github-badge"]
       ];
-    var stylesheets = ['ext/stylesheets/badge'];
     var scripts = document.getElementsByTagName("script");
     for (var i=0; i < scripts.length; i++) {
       if (scripts[i].src && scripts[i].src.match(/github-badge-launcher\.js(\?.*)?/)) {
-        var path = scripts[i].src.replace(/github-badge-launcher\.js(\?.*)?/, '');
+        this.path = scripts[i].src.replace(/github-badge-launcher\.js(\?.*)?/, '');
         for (var i=0; i < libraries.length; i++) {
           if (libraries[i][0] == "undefined" || !libraries[i][0]) {
-            var url = path + libraries[i][1] + ".js";
+            var url = this.path + libraries[i][1] + ".js";
             if (i == libraries.length - 1) {
               this.requestContent(url, "GitHubBadge.Launcher.loadedLibraries");
             } else {
@@ -38,15 +45,18 @@ GitHubBadge.Launcher = new function() {
         break;
       }
     }
-    for (var i=0; i < stylesheets.length; i++) {
-      requestStylesheet(basePath() + stylesheets[i] + ".css");
-    };
   }
 
   this.loadedLibraries = function() {
     if(typeof jQuery == 'undefined' || typeof jQuery.template == 'undefined')
       throw("GitHub Badge requires jQuery and jQuery.template");
 
+    if (jQuery('#github-badge').parent().css('background-color') == 'rgb(0, 0, 0)') {
+      requestStylesheet(this.path + 'ext/stylesheets/black_badge.css', 'black_badge');
+    } else {
+      requestStylesheet(this.path + 'ext/stylesheets/badge.css', 'badge');
+    }
+
     GitHubBadge.buildUserBadge(GITHUB_USERNAME);
   }
 };

diff --git a/src/user_badge.js b/src/user_badge.js
@@ -11,7 +11,7 @@ GitHubBadge.buildUserBadge = function(username) {
 };
 
 GitHubBadge.loadUserInfo = function(data) {
-  (function($){ 
+  (function($){
     var template = $.template(
       "<li class='public clickable'>"
       +  "<img src='http://github.com/images/icons/public.png' alt='public'>"
@@ -54,6 +54,7 @@ GitHubBadge.loadUserInfo = function(data) {
     .filter(':gt(' + (showLimit - 1) + ')').hide() // hide extras
     if ($('#github-badge .body li').is(':hidden'))
       $('#github-badge .body').append(showMore); 
+
   })(jQuery); 
 };
 

diff --git a/test/unit/black_background_test.html b/test/unit/black_background_test.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>JavaScript unit test file</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <script src="../assets/jsunittest.js" type="text/javascript"></script>
+  <script src="../../src/ext/jquery.js"></script>
+  <script src="../../src/ext/jquery.template.js"></script>
+  <script src="../../src/github-badge-launcher.js"></script>
+  <script src="../../src/user_badge.js" type="text/javascript"></script>
+  <script src="../fixtures/mocked_user_data.js"></script>
+
+  <link rel="stylesheet" href="../../src/ext/stylesheets/black_badge.css" type="text/css" media="screen" title="no title" charset="utf-8">
+  <link rel="stylesheet" href="../assets/unittest.css" type="text/css" />
+  <style type="text/css" media="screen">
+    div#sample {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+
+<div id="content">
+
+  <div id="header">
+    <h1>JavaScript unit test file</h1>
+    <p>
+      This file tests <strong>user_badge.js</strong>.
+    </p>
+  </div>
+
+  <!-- Log output (one per Runner, via {testLog: "testlog"} option)-->
+  <div id="testlog"></div>
+
+  <!-- Put sample/test html here -->
+  <div id="sample">
+    <div id="github-badge">
+
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+// <![CDATA[
+  new Test.Unit.Runner({
+    setup: function() {
+      GitHubBadge.buildUserBadge("drnic");
+      this.badge = $('div#github-badge');
+      GitHubBadge.loadUserInfo(GitHubBadge.mockedUserData);
+      this.black = "rgb(0, 0, 0)";
+    },
+
+    "test that background behind badge is black": function() { with(this) {
+      assertEqual(black, badge.parent().css('background-color'));
+    }},
+
+    "test that background of badge is black": function() { with(this) {
+      assertEqual(black, badge.css('background-color'));
+    }},
+  }, {testLog: "testlog"}); 
+// ]]>
+</script>
+</body>
+</html>
diff --git a/test/unit/github-badge-launcher_test.html b/test/unit/github-badge-launcher_test.html
@@ -54,6 +54,10 @@ <h1>JavaScript unit test file</h1>
       assert(GitHubBadge.buildUserBadgeExecuted, 'Badge code was not executed');
     }},
 
+    "test that badge.css loaded": function() { with(this) {
+      var css = $('style#badge');
+      assertEqual(1, css.size(), 'No style#badge added');
+    }},
 
   }, {testLog: "testlog"}); 
   // For each Test.UnitRunner instance, specify the element id where results will be

diff --git a/test/unit/github_badge_launcher_black_test.html b/test/unit/github_badge_launcher_black_test.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>JavaScript unit test file</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <script src="../assets/jsunittest.js" type="text/javascript"></script>
+
+  <link rel="stylesheet" href="../assets/unittest.css" type="text/css" />
+  <style type="text/css" media="screen">
+    div#sample {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+
+<div id="content">
+
+  <div id="header">
+    <h1>JavaScript unit test file</h1>
+    <p>
+      This file tests <strong>launcher.js</strong>.
+    </p>
+  </div>
+
+  <!-- Log output (one per Runner, via {testLog: "testlog"} option)-->
+  <div id="testlog"></div>
+
+  <script type="text/javascript" charset="utf-8">
+    GITHUB_USERNAME = 'drnic';
+    GITHUB_LIST_LENGTH = 5;
+    var GitHubBadge = GitHubBadge || {};
+    GitHubBadge.buildUserBadgeExecuted = false;
+    GitHubBadge.buildUserBadge = function() {
+      GitHubBadge.buildUserBadgeExecuted = true;
+    };
+  </script>
+  <!-- Put sample/test html here -->
+  <div id="sample">
+    <div id="github-badge" width="150px"></div>
+    <script src="../../src/github-badge-launcher.js" type="text/javascript"></script>
+    <script type="text/javascript" charset="utf-8">
+      GitHubBadge.Launcher.init();
+    </script>
+  </div>
+</div>
+
+<script type="text/javascript">
+// <![CDATA[
+
+  new Test.Unit.Runner({
+    setup: function() {
+      this.badge = $('#github-badge');
+      this.black = "rgb(0, 0, 0)";
+    },
+
+    "test that jQuery + jQuery.template loaded": function() { with(this) {
+      assert(jQuery, 'jQuery not loaded');
+      assert(jQuery.template, 'jQuery.template not loaded');
+    }},
+
+    "test that badge built": function() { with(this) {
+      assert(GitHubBadge.buildUserBadgeExecuted, 'Badge code was not executed');
+    }},
+
+    "test that background behind badge is black": function() { with(this) {
+      assertEqual(black, badge.parent().css('background-color'));
+    }},
+
+    "test that black_badge.css loaded": function() { with(this) {
+      var css = $('style#black_badge');
+      assertEqual(1, css.size(), 'No style#black_badge added');
+    }},
+
+  }, {testLog: "testlog"}); 
+  // For each Test.UnitRunner instance, specify the element id where results will be
+  // published; e.g. <div id="testlog"/> above.
+  // That is, you can have multiple "new Test.Unit.Runner() { ... }" on this page, just
+  // create more <div id="testlog2"></div> etc, and pass the element id to the hash above:
+  // e.g. {testLog: "testlog2"}
+// ]]>
+</script>
+</body>
+</html>
diff --git a/test/unit/user_badge_test.html b/test/unit/user_badge_test.html
@@ -4,18 +4,11 @@
 <head>
   <title>JavaScript unit test file</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-  <script type="text/javascript" charset="utf-8">
-    if ("loadFirebugConsole" in window) loadFirebugConsole();
-  </script>
-
   <script src="../assets/jsunittest.js" type="text/javascript"></script>
   <script src="../../src/ext/jquery.js"></script>
   <script src="../../src/ext/jquery.template.js"></script>
-
   <script src="../../src/github-badge-launcher.js"></script>
-
   <script src="../../src/user_badge.js" type="text/javascript"></script>
-
   <script src="../fixtures/mocked_user_data.js"></script>
 
   <link rel="stylesheet" href="../../src/ext/stylesheets/badge.css" type="text/css" media="screen" title="no title" charset="utf-8">

diff --git a/website/index.html b/website/index.html
@@ -73,6 +73,7 @@ <h2>Existing installations/demonstrations</h2>
 		<li><a href="http://100essays.blogspot.com/">James Rosen</a></li>
 		<li><a href="http://blog.mondragon.cc/">Mike Mondragon</a></li>
 		<li><a href="http://ihower.idv.tw/blog/">ihower</a></li>
+		<li><a href="http://www.simplisticcomplexity.com/">Jon Maddox</a></li>
 	</ul>
 
 
@@ -109,7 +110,7 @@ <h2>Contact</h2>
 
 	<p>Comments are welcome. Send an email to <a href="mailto:drnicwilliams@gmail.com">Dr Nic Williams</a> via the <a href="http://groups.google.com/group/github">github forum</a></p>
     <p class="coda">
-      <a href="mailto:drnicwilliams@gmail.com">Dr Nic Williams</a>, 4th May 2008<br>
+      <a href="mailto:drnicwilliams@gmail.com">Dr Nic Williams</a>, 6th May 2008<br>
       Theme extended from <a href="http://rb2js.rubyforge.org/">Paul Battley</a>
     </p>
 </div>

diff --git a/website/index.txt b/website/index.txt
@@ -26,6 +26,7 @@ h2. Existing installations/demonstrations
 * "James Rosen":http://100essays.blogspot.com/
 * "Mike Mondragon":http://blog.mondragon.cc/
 * "ihower":http://ihower.idv.tw/blog/
+* "Jon Maddox":http://www.simplisticcomplexity.com/
 
 h2. Forum