commit 9a9a55a0d2753d7cb239120945ed86c151baf43c Author: Ryan McGrath Date: Thu Jun 23 02:45:57 2011 +0900 initial diff --git a/css/gitstat.css b/css/gitstat.css new file mode 100644 index 0000000..9968f65 --- /dev/null +++ b/css/gitstat.css @@ -0,0 +1,54 @@ +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, kbd, q, s, samp, +small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { +margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } +:focus { outline: 0; } +body { line-height: 1; } +ol, ul { list-style: none; } +table { border-collapse: separate; border-spacing: 0; } +caption, th, td { text-align: left; font-weight: normal; } +blockquote:before, blockquote:after, q:before, q:after { content: ""; } +blockquote, q { quotes: "" ""; } + +html { + color: #333; + font: normal 62.5%/1 helvetica, arial, sans-serif; + padding: 0px; + text-align: center; + background: #f8f8f8; + -webkit-box-shadow: inset -2px 1px 88px #c9c9c9; + -moz-box-shadow: inset -2px 1px 88px #c9c9c9; + box-shadow: inset -2px 1px 88px #c9c9c9; + min-height: 100%; +} + +body { + text-align: left; + width: 800px; + margin: 50px auto 20px; + font-size: 1.2em; + line-height: 1.5em; + background-color: #fff; + -webkit-box-shadow: inset -2px 1px 88px #f9f9f9; + -moz-box-shadow: inset -2px 1px 88px #f9f9f9; + box-shadow: inset -2px 1px 88px #f9f9f9; + position: relative; + border: 1px solid #c8c8c8; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; +} + +input { padding: 10px; font-size: 14px; width: 400px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 1px 1px 10px #f7f7f7; -moz-box-shadow: inset 1px 1px 10px #f7f7f7; box-shadow: inset 1px 1px 10px #f7f7f7; border: 1px solid #c9c9c9; } +h1 { font: bold 24px/24px helvetica, arial, sans-serif; position: absolute; top: -35px; } +#left p { margin-bottom: 16px; } +button { padding: 10px; text-shadow: 1px 1px 1px #2262ab; font-size: 14px; width: 200px; margin: 0 auto 10px; background-color: #307ace; color: #f9f9f9; border: 1px solid #2568b4; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: inset 1px 1px 10px #2262ab; -moz-box-shadow: inset 1px 1px 10px #2262ab; box-shadow: inset 1px 1px 10px #2262ab;} +button:hover { cursor: pointer; } +a, a:visited { color: #307ace; text-decoration: none; border-bottom: 1px dotted #307ace; } +#code { padding: 10px; font-size: 14px; line-height: 18px; font: normal 12px/15px monospace, fixed-width; height: 200px; width: 400px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 1px 1px 10px #f7f7f7; -moz-box-shadow: inset 1px 1px 10px #f7f7f7; box-shadow: inset 1px 1px 10px #f7f7f7; border: 1px solid #c9c9c9; } + +label { font-weight: bold; display: block; } +#code { display: none; } + +#left { width: 440px; float: left; padding: 10px 10px; } +#right { width: 330px; float: right; padding: 10px 10px 10px 0; } +#footer { clear: both; background-color: #010101; color: #f9f9f9; padding: 8px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7518e64 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + Gitstatus + + + +

Gitstatus

+ + +
+ + +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ +

+ + +
+ + + + + + + + \ No newline at end of file diff --git a/js/gitstatus.js b/js/gitstatus.js new file mode 100644 index 0000000..e4658b0 --- /dev/null +++ b/js/gitstatus.js @@ -0,0 +1,387 @@ +/** + * Gitstat.js + * + * A freely available library/widget/script/whatever + * that pulls down data from Github about a repository and + * displays the latest commits, along with a few other nice stats. + * + * This script is needlessly documented; if you're a veteran JS developer a lot + * of the comments in here will seem useless to you, but to people who are still trying + * to learn the language some of this stuff isn't easy to figure out, so I prefer to try + * and let them have ample documentation to learn from. ;) + * + * @Author: Ryan McGrath | http://twitter.com/ryanmcgrath + * @Requires: Nothing, completely stand-alone (because, y'know, nobody NEEDS jQuery ;P) + */ + +;(function(existing_gitstatus) { + /** + * If this script hasn't already been run once, we're fine to create this object and so forth; we only + * want this to happen once to avoid potential overhead (however minimal). + */ + if(existing_gitstatus !== 'undefined') return; + + /** + * new GitStatus(opts); + * + * The main object that we'll instantiate for each badge. Every instance of this will have its own routines + * that run for it. We accept the "opts" as an object (or hash), and just store it for later use. Opts can have + * a few parameters, take note. + * + * @param opts - An object/hash with various settings that get thrown onto the widget at render time. + * :id - String (required). The id of the HTML node to inject this widget into. + * :disable_tyles - Boolean (optional). Disables all attempts at CSS styling by this widget and leaves it up to the user. + * :github_username - String (required). The username of the person who owns the repository we're going to pull down data about. + * :github_repository - String (required). The name of the repository to pull down data about. + * + * @returns object (instantiated GitStatus) + */ + var GitStatus = window.GitStatus = function GitStatus(opts) { + this.opts = opts; + if(typeof this.opts.no_of_commits === 'undefined') this.opts.no_of_commits = 5; + }; + + /** + * GitStatus.util + * + * A general purpose dumping ground for utility functions (function-scope binding, JSON-P, etc). + */ + GitStatus.util = { + /** + * Some flags for debugging that we might consider wanting down the road. Nothing too fancy, but worth + * having (should make life a wee bit easier down the road). + */ + DEBUG: false, + + /** + * GitStatus.util.bind(bindReference, fn) + * + * Takes a reference (an object to scope to "this" at a later runtime) and binds it to a function (fn). + * + * @param bindReference - An object to set as the "this" reference for a later function call. + * @param fn - A function to bind the "this" object for. + * @returns fn - A new function to pass around, wherein it's all scoped as you want it. + */ + bind: function(bindReference, fn) { + return function() { + return fn.apply(bindReference, arguments); + }; + }, + + /** + * GitStatus.util.loadScript(src, optional_callbackfn) + * + * Handles pulling down script tags, accepts an optional callback function that will + * fire when the script fires its ready event (Note: this is NOT a JSON-P callback, see the next function for that). + * + * @param src - Required, the source URI for the script we're gonna toss onto the page. + * @param optional_callbackfn - Optional, a callback function that will execute once this script is done. + * @returns - void (nothing) + */ + loadScript: function(src, optional_callbackfn) { + var newScript = document.createElement("script"); + newScript.type = "text/javascript"; + newScript.setAttribute("src", src); + + /** + * For newer browsers that support this, we're fine to set this - it's basically stating + * that we don't have any dependencies here to worry about and we're fine to let this go + * out on its own and report back when done. + * + * If you were to have a dependency situation, you'd probably end up chaining loadScript callbacks to + * achieve your desired order. + */ + newScript.setAttribute("async", "true"); + + /** + * Automagically handle cleanup of injected script tags, so we don't litter someone's DOM + * with our stuff. This branches for obvious reasons - i.e, IE. + */ + if(newScript.readyState) { + newScript.onreadystatechange = function() { + if(/loaded|complete/.test(newScript.readyState)) { + newScript.onreadystatechange = null; + if(typeof optional_callbackfn !== "undefined") optional_callbackfn(); + !GitStatus.util.DEBUG && newScript && document.documentElement.firstChild.removeChild(newScript); + } + } + } else { + newScript.addEventListener("load", function() { + if(typeof optional_callbackfn !== "undefined") optional_callbackfn(); + !GitStatus.util.DEBUG && newScript && document.documentElement.firstChild.removeChild(newScript); + }, false); + } + + /** + * Install it in an easy to retrieve place (that's also consistent - god forbid, someone might be using frames somewhere...?). + */ + document.documentElement.firstChild.appendChild(newScript); + }, + + /** + * GitStatus.util.jsonp(src, callbackfn, optional_scope, optional_fn_name) + * + * JSON-P function; fetches an external resource via a dynamically injected