Permalink
Browse files

updates to the cpan badge code

  • Loading branch information...
1 parent bcef132 commit ce59672e96fc1d05c8061f70f8f64d1c92022756 @ioncache ioncache committed Dec 2, 2011
Showing with 125 additions and 105 deletions.
  1. +52 −48 cpan_badge.css
  2. +72 −56 cpan_badge.js
  3. +1 −1 index.html
View
@@ -1,72 +1,76 @@
.cpan-badge {
- width: 300px;
- height: 100px;
+ width: 280px;
+ height: auto;
border: 2px solid #62AEF0;
background-color: #E0FFEE;
- border-radius: 15px;
+ -webkit-border-radius: 15px;
-moz-border-radius: 15px;
+ border-radius: 15px;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 12px;
+ padding: 5px 10px;
}
-.cpan-badge-name {
- font-family: "Century Gothic", sans-serif;
- font-size: 20px;
- font-weight: bold;
+.cpan-badge a {
+ color: #2C90F5;
text-decoration: none;
- margin-left: 10px;
- margin-top: 10px;
- display: inline;
+}
+.cpan-badge a:visited {
color: #2C90F5;
}
+.cpan-badge a:hover {
+ color: #F09462;
+}
-.cpan-badge-name:visited {
- color: #2C90F5;
+.cpan-badge .cpan-badge-name {
+ width: 100%;
+ height: auto;
+ font-size: 1.6em;
+ font-weight: bold;
+ margin-bottom: 3px;
}
-.cpan-badge-name:hover {
- color: #F09462;
+.cpan-badge .cpan-meta-container {
+ width: 100%;
+ min-height: 20px;
+ margin-bottom: 5px;
+}
+.cpan-badge .cpan-version {
+ float: left;
+ width: 50%;
+ height: auto;
+ color: #9B9899;
+ font-size: .8em;
+ text-align: left;
+ vertical-align: top;
+ padding-top: 2px;
}
-.cpan-credits {
- font-family: "Century Gothic", sans-serif;
- font-size: 14px;
- text-decoration: none;
- margin-left: 14px;
- display: inline-block;
+.cpan-badge .cpan-credits {
+ float: right;
+ width: 50%;
+ height: auto;
+ font-size: 1em;
+ text-align: right;
+ vertical-align: top;
}
-.cpan-abstract {
- font-family: "Century Gothic", sans-serif;
- font-size: 12px;
- text-decoration: none;
- margin-left: 10px;
- margin-top: 0px;
- display: block;
+.cpan-badge .cpan-abstract {
+ width: 100%;
+ height: auto;
+ font-size: 1em;
+ margin-bottom: 5px;
}
-.cpan-home {
- font-family: "Century Gothic", sans-serif;
- color: #006AFF;
- font-size: 13px;
- text-decoration: none;
+.cpan-badge .cpan-home {
+ width: 100%;
+ height: auto;
+ font-size: .9em;
font-weight: bold;
text-align: center;
- display: inline;
}
-.cpan-nav {
- display: block;
+.cpan-badge .cpan-nav {
text-align: center;
+ color: #2C90F5;
}
-
-.cpan-home:visited {
- color: #006AFF;
-}
-.cpan-home:hover {
- color: #F09462;
-}
-.cpan-version {
- color: #BAB6B7;
- font-size: 11px;
- font-family: "Century Gothic", sans-serif;
- text-align: center;
-}
View
@@ -1,66 +1,82 @@
-//The badge should include: author, date, distribution name, version, a link to the direct download URL as well as a link to the MetaCPAN release page.
+// The badge should include: author, date, distribution name, version,
+// a link to the direct download URL as well as a link to the
+// MetaCPAN release page.
var badge;
var URL;
-if (typeof jQuery == "undefined")
-{
- var docHead = document.getElementsByTagName("head")[0];
- var jqScript = document.createElement("script");
- jqScript.type = "application/javascript";
- jqScript.onreadystatechange = function () {
- if (this.readyState == 'complete') initLoadBadge();
- }
- jqScript.onload = initLoadBadge;
- jqScript.src = "http://code.jquery.com/jquery-latest.min.js";
- docHead.appendChild(jqScript);
-}
-else
-{
- initLoadBadge();
-}
-function formatName(name) {
- return name.replace("-", "::");
-}
+function handleResponse(response) {
+ var json = typeof(response) != "string" ? response : eval('(' + response + ')');
+ var name = json.distribution.replace("-", "::");
+
+ // module name
+ $('<div />')
+ .addClass('cpan-badge-name')
+ .append('<a href="https://metacpan.org/module/' + name + '">' + name + '</a>')
+ .appendTo(badge);
+
+ var meta_container = $('<div />').addClass('cpan-meta-container');
+
+ // version/date info
+ var curDate = new Date(json.date);
+ var date = curDate.toDateString();
+ $('<div />')
+ .addClass('cpan-version')
+ .append('v' + json.version + ' (' + date + ')')
+ .appendTo(meta_container);
+ // module author
+ $('<div />')
+ .addClass('cpan-credits')
+ .append('<a href="https://metacpan.org/author/"' + json.author + '">by ' + json.author + '</a>')
+ .appendTo(meta_container);
-function handleResponse(response)
-{
- var json;
- if (typeof response != "string") json = response;
- else json = eval('(' + response + ')');
- var name = formatName(json['distribution']);
- var nameElem = $("<a href='" + "https://metacpan.org/module/" + name + "' class='cpan-badge-name'>" + name + "</a>");
- var credits = $("<a class='cpan-credits'>"+ 'by ' + json['author'] + "</a>")
- //nameElem.hover()
- badge.append(nameElem);
- badge.append(credits);
- var abstractText = (typeof json['abstract'] == "undefined") ? "" : json['abstract'];
- var abstract = $("<a class='cpan-abstract'>" + abstractText + "</a>");
- badge.append(abstract);
- badge.append($("<div class='cpan-nav'><a class='cpan-home' href='" + "https://metacpan.org/module/" + name + "'>Project Home</a> • <a class='cpan-home' href='" + json['download_url'] + "'>Download</a></div>"));
- var curDate = new Date(json['date']);
- date = curDate.toDateString();
- var version = $("<div style='text-align:center;'><a class='cpan-version'>v"+json['version']+ " (" + date + ")</a></div>");
- badge.append(version);
+ meta_container.appendTo(badge);
+
+ // module abstract
+ var abstractText = (typeof json.abstract == "undefined") ? "" : json.abstract;
+ $('<div />')
+ .addClass('cpan-abstract')
+ .append(abstractText)
+ .appendTo(badge);
+
+ // Home/Download links
+ $('<div />')
+ .addClass('cpan-nav')
+ .append('<a class="cpan-home" href="https://metacpan.org/module/' + name + '">Project Home</a> &bull; <a class="cpan-home" href="' + json.download_url + '">Download</a>')
+ .appendTo(badge);
}
+function initLoadBadge() {
+ badge = $(".cpan-badge");
+ URL = $(".cpan-badge").attr("proj-url");
+ $.support.cors = true;
-function initLoadBadge()
-{
- badge = $(".cpan-badge");
- URL = $(".cpan-badge").attr("proj-url");
- $.support.cors = true;
- //Load badge stylesheet
- if (document.createStyleSheet)
- {
- document.createStyleSheet('http://intmax.org/projects/badge/cpan_badge.css');
- }
- else
- {
- $("head").append($("<link rel='stylesheet' href='http://intmax.org/projects/badge/cpan_badge.css' type='text/css' media='screen' />"));
+ //Load badge stylesheet
+ if (document.createStyleSheet) {
+ document.createStyleSheet('cpan_badge.css');
+ } else {
+ $("head").append($("<link rel='stylesheet' href='cpan_badge.css' type='text/css' media='screen' />"));
}
- //Format the badge
- $.get(URL, function(response) {
- handleResponse(response);
- });
+
+ //Format the badge
+ $.get(URL, function(response) {
+ handleResponse(response);
+ });
+}
+
+// adds jQuery to the page if not already loaded
+if (typeof jQuery == "undefined") {
+ var docHead = document.getElementsByTagName("head")[0];
+ var jqScript = document.createElement("script");
+ jqScript.type = "application/javascript";
+ jqScript.onreadystatechange = function() {
+ if (this.readyState === 'complete') {
+ initLoadBadge();
+ }
+ };
+ jqScript.onload = initLoadBadge;
+ jqScript.src = "http://code.jquery.com/jquery-latest.min.js";
+ docHead.appendChild(jqScript);
+} else {
+ initLoadBadge();
}
View
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <script type="application/javascript" src="http://intmax.org/projects/badge/cpan_badge.js"></script>
+ <script type="application/javascript" src="cpan_badge.js"></script>
</head>
<body>
<div class="cpan-badge" proj-url="http://api.beta.metacpan.org/v0/release/App-cpanminus"></div>

0 comments on commit ce59672

Please sign in to comment.