js/identica-badge.js

   1 // identica badge -- updated to work with the native API, 12-4-2008
   2 // Modified to point to Identi.ca, 2-20-2009 by Zach
   3 // Modified for XHTML, 27-9-2009 by Will Daniels
   4 // (see http://willdaniels.co.uk/blog/tech-stuff/26-identica-badge-xhtml)
   5 // copyright Kent Brewster 2008
   6 // see http://kentbrewster.com/identica-badge for info
   7
   8 function createHTMLElement(tagName) {
   9    if(document.createElementNS)
  10       var elem = document.createElementNS("http://www.w3.org/1999/xhtml", tagName);
  11    else
  12       var elem = document.createElement(tagName);
  13
  14    return elem;
  15 }
  16
  17 function isNumeric(value) {
  18   if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
  19   return true;
  20 }
  21
  22 function markupPost(raw, server) {
  23   var start = 0; var p = createHTMLElement('p');
  24
  25   raw.replace(/((http|https):\/\/|\!|@|#)(([\w_]+)?[^\s]*)/g,
  26     function(sub, type, scheme, url, word, offset, full)
  27     {
  28       if(!scheme && !word) return; // just punctuation
  29       var label = ''; var href = '';
  30       var pretext = full.substr(start, offset - start);
  31
  32       moniker = word.split('_'); // behaviour with underscores differs
  33       if(type == '#') moniker = moniker.join('');
  34       else word = moniker = moniker[0].toLowerCase();
  35
  36       switch(type) {
  37         case 'http://': case 'https://': // html links
  38           href = scheme + '://' + url; break;
  39         case '@': // link users
  40           href = 'http://' + server + '/' + moniker; break;
  41         case '!': // link groups
  42           href = 'http://' + server + '/group/' + moniker; break;
  43         case '#': // link tags
  44           href = 'http://' + server + '/tag/' + moniker; break;
  45         default: // bad call (just reset position for text)
  46           start = offset;
  47       }
  48       if(scheme) { // only urls will have scheme
  49         label = sub; start = offset + sub.length;
  50       } else {
  51         label = word; pretext += type;
  52         start = offset + word.length + type.length;
  53       }
  54       p.appendChild(document.createTextNode(pretext));
  55
  56       var link = createHTMLElement('a');
  57       link.appendChild(document.createTextNode(label));
  58       link.href = href; link.target = '_statusnet';
  59       p.appendChild(link);
  60     });
  61
  62   if(start != raw.length) {
  63     endtext = raw.substr(start);
  64     p.appendChild(document.createTextNode(endtext));
  65   }
  66   return p;
  67 }
  68 (function() {
  69    var trueName = '';
  70    for (var i = 0; i < 16; i++) {
  71       trueName += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
  72    }
  73    window[trueName] = {};
  74    var $ = window[trueName];
  75    $.f = function() {
  76       return {
  77          runFunction : [],
  78          init : function(target) {
  79             var theScripts = document.getElementsByTagName('script');
  80             for (var i = 0; i < theScripts.length; i++) {
  81                if (theScripts[i].src.match(target)) {
  82                   $.a = {};
  83                   if (theScripts[i].innerHTML) {
  84                      $.a = $.f.parseJson(theScripts[i].innerHTML);
  85                   }
  86                   if ($.a.err) {
  87                      alert('bad json!');
  88                   }
  89                   $.f.loadDefaults();
  90                   $.f.buildStructure();
  91                   $.f.buildPresentation();
  92                   theScripts[i].parentNode.insertBefore($.s, theScripts[i]);
  93                   theScripts[i].parentNode.removeChild(theScripts[i]);
  94                   break;
  95                }
  96             }
  97          },
  98          parseJson : function(json) {
  99             this.parseJson.data = json;
 100             if ( typeof json !== 'string') {
 101                return {"err":"trying to parse a non-string JSON object"};
 102             }
 103             try {
 104                var f = Function(['var document,top,self,window,parent,Number,Date,Object,Function,',
 105                   'Array,String,Math,RegExp,Image,ActiveXObject;',
 106                   'return (' , json.replace(/<\!--.+-->/gim,'').replace(/\bfunction\b/g,'function&shy;') , ');'].join(''));
 107                return f();
 108             } catch (e) {
 109                return {"err":"trouble parsing JSON object"};
 110             }
 111          },
 112          loadDefaults : function() {
 113             $.d = {
 114                "user":"7000",
 115                "headerText" : "",
 116                "height" : 350,
 117                "width" : 300,
 118                "background" : "#193441",
 119                "border" : "1px solid black",
 120                "userFontSize" : "inherit",
 121                "userColor" : "inherit",
 122                "headerBackground" : "transparent",
 123                "headerColor" : "white",
 124                "evenBackground" : "#fff",
 125                "oddBackground" : "#eee",
 126                "thumbnailBorder" : "1px solid black",
 127                "thumbnailSize" : 24,
 128                "padding" : 3,
 129                "server" : "identi.ca"
 130             };
 131             for (var k in $.d) { if ($.a[k] === undefined) { $.a[k] = $.d[k]; } }
 132             // fix inout units
 133             if(isNumeric($.a.width)) {
 134                $.a.innerWidth = ($.a.width - 22) + 'px'; $.a.width += 'px';
 135             } else {
 136                $.a.innerWidth = 'auto';
 137             }
 138             if(isNumeric($.a.height)) $.a.height += 'px';
 139          },
 140          buildPresentation : function () {
 141             var setZoom = ''; if(navigator.appName == 'Microsoft Internet Explorer') setZoom = 'zoom:1;';
 142             var ns = createHTMLElement('style');
 143             document.getElementsByTagName('head')[0].appendChild(ns);
 144             if (!window.createPopup) {
 145                ns.appendChild(document.createTextNode(''));
 146                ns.setAttribute("type", "text/css");
 147             }
 148             var s = document.styleSheets[document.styleSheets.length - 1];
 149             var rules = {
 150                "" : "{margin:0px;padding:0px;width:" + $.a.width + ";background:" + $.a.background + ";border:" + $.a.border + ";font:87%/1.2em tahoma, veranda, arial, helvetica, clean, sans-serif;}",
 151                "a" : "{cursor:pointer;text-decoration:none;}",
 152                "a:hover" : "{text-decoration:underline;}",
 153                ".cite" : "{" + setZoom + "font-weight:bold;margin:0px 0px 0px 4px;padding:0px;display:block;font-style:normal;line-height:" + ($.a.thumbnailSize/2) + "px;vertical-align:middle;}",
 154                ".cite a" : "{color:#C15D42;}",
 155                ".date":"{margin:0px 0px 0px 4px;padding:0px;display:block;font-style:normal;line-height:" + ($.a.thumbnailSize/2) + "px;vertical-align:middle;}",
 156                ".date:after" : "{clear:both;content:\".\"; display:block;height:0px;visibility:hidden;}",
 157                ".date a" : "{color:#676;}",
 158                "h3" : "{margin:0px;padding:" + $.a.padding + "px;font-weight:bold;background:" + $.a.headerBackground + " url('http://" + $.a.server + "/favicon.ico') " + $.a.padding + "px 50% no-repeat;padding-left:" + ($.a.padding + 20) + "px;}",
 159                "h3.loading" : "{background-image:url('http://l.yimg.com/us.yimg.com/i/us/my/mw/anim_loading_sm.gif');}",
 160                "h3 a" : "{font-size:92%; color:" + $.a.headerColor + ";}",
 161                "h4" : "{font-weight:normal;background:" + $.a.headerBackground + ";text-align:right;margin:0px;padding:" + $.a.padding + "px;}",
 162                "h4 a" : "{font-size:92%; color:" + $.a.headerColor + ";}",
 163                "img":"{float:left;height:" + $.a.thumbnailSize + "px;width:" + $.a.thumbnailSize + "px;border:" + $.a.thumbnailBorder + ";margin-right:" + $.a.padding + "px;}",
 164                "p" : "{margin:2px 0px 0px 0px;padding:0px;width:" + $.a.innerWidth + ";overflow:hidden;line-height:normal;}",
 165                "p a" : "{color:#C15D42;}",
 166                "ul":"{margin:0px; padding:0px; height:" + $.a.height + ";width:" + $.a.innerWidth + ";overflow:auto;}",
 167                "ul li":"{background:" + $.a.evenBackground + ";margin:0px;padding:" + $.a.padding + "px;list-style:none;width:auto;overflow:hidden;border-bottom:1px solid #D8E2D7;}",
 168                "ul li:hover":"{background:#f3f8ea;}"
 169             };
 170             var ieRules = "";
 171             // brute-force each and every style rule here to !important
 172             // sometimes you have to take off and nuke the site from orbit; it's the only way to be sure
 173             for (var z in rules) {
 174                if(z.charAt(0)=='.') var selector = '.' + trueName + '-' + z.substring(1);
 175                else var selector = '.' + trueName + ' ' + z;
 176                var rule = rules[z];
 177                if (typeof rule === 'string') {
 178                   var important = rule.replace(/;/gi, '!important;');
 179                   if (!window.createPopup) {
 180                      var theRule = document.createTextNode(selector + important + '\n');
 181                      ns.appendChild(theRule);
 182                   } else {
 183                      ieRules += selector + important;
 184                   }
 185                }
 186             }
 187             if (window.createPopup) { s.cssText = ieRules; }
 188          },
 189          buildStructure : function() {
 190             $.s = createHTMLElement('div');
 191             $.s.className = trueName;
 192             $.s.h = createHTMLElement('h3');
 193             $.s.h.a = createHTMLElement('a');
 194             $.s.h.a.target = '_statusnet';
 195             $.s.h.appendChild($.s.h.a);
 196             $.s.appendChild($.s.h);
 197             $.s.r = createHTMLElement('ul');
 198             $.s.appendChild($.s.r);
 199             $.s.f = createHTMLElement('h4');
 200             var a = createHTMLElement('a');
 201             a.innerHTML = 'get this';
 202             a.target = '_blank';
 203             a.href = 'http://identi.ca/doc/badge';
 204             $.s.f.appendChild(a);
 205             $.s.appendChild($.s.f);
 206             $.f.getUser();
 207          },
 208          getUser : function() {
 209             if (!$.f.runFunction) { $.f.runFunction = []; }
 210             var n = $.f.runFunction.length;
 211             var id = trueName + '.f.runFunction[' + n + ']';
 212             $.f.runFunction[n] = function(r) {
 213                delete($.f.runFunction[n]);
 214                var a = createHTMLElement('a');
 215                a.rel = $.a.user;
 216                a.rev = r.name;
 217                a.id = r.screen_name;
 218                $.f.removeScript(id);
 219                $.f.changeUserTo(a);
 220             };
 221             var url = 'http://' + $.a.server + '/api/users/show/' + $.a.user + '.json?callback=' + id;
 222             $.f.runScript(url, id);
 223          },
 224          changeUserTo : function(el) {
 225             $.a.user = el.rel;
 226             $.s.h.a.innerHTML = el.rev + $.a.headerText;
 227             $.s.h.a.href = 'http://' + $.a.server + '/' + el.id;
 228             $.f.runSearch();
 229          },
 230          runSearch : function() {
 231             $.s.h.className = 'loading';
 232             $.s.r.innerHTML = '';
 233             if (!$.f.runFunction) { $.f.runFunction = []; }
 234             var n = $.f.runFunction.length;
 235             var id = trueName + '.f.runFunction[' + n + ']';
 236             $.f.runFunction[n] = function(r) {
 237                delete($.f.runFunction[n]);
 238                $.f.removeScript(id);
 239                $.f.renderResult(r);
 240             };
 241             var url = 'http://' + $.a.server + '/api/statuses/friends/' + $.a.user + '.json?callback=' + id;
 242             $.f.runScript(url, id);
 243          },
 244          renderResult: function(r) {
 245             for (var i = 0; i < r.length; i++) {
 246                if (!r[i].status) {
 247                   r.splice(i, 1);
 248                } else {
 249                   r[i].status_id = parseInt(r[i].status.id);
 250                }
 251             }
 252             r = $.f.sortArray(r, "status_id", true);
 253             $.s.h.className = ''; // for IE6
 254             $.s.h.removeAttribute('class');
 255             for (var i = 0; i < r.length; i++) {
 256                var li = createHTMLElement('li');
 257                var icon = createHTMLElement('a');
 258                if (r[i] && r[i].url) {
 259                   icon.href = r[i].url;
 260                   icon.target = '_statusnet';
 261                   icon.title = 'Visit ' + r[i].screen_name + ' at ' + r[i].url;
 262                } else {
 263                   icon.href = 'http://' + $.a.server + '/' + r[i].screen_name;
 264                   icon.target = '_statusnet';
 265                   icon.title = 'Visit ' + r[i].screen_name + ' at http://' + $.a.server + '/' + r[i].screen_name;
 266                }
 267
 268                var img = createHTMLElement('img');
 269                img.alt = 'profile image for ' + r[i].screen_name;
 270                img.src = r[i].profile_image_url;
 271                icon.appendChild(img);
 272                li.appendChild(icon);
 273
 274                var user = createHTMLElement('span');
 275                user.className = trueName + '-cite';
 276                var a = createHTMLElement('a');
 277                a.rel = r[i].id;
 278                a.rev = r[i].name;
 279                a.id = r[i].screen_name;
 280                a.innerHTML = r[i].name;
 281                a.href = 'http://' + $.a.server + '/' + r[i].screen_name;
 282                a.onclick = function() {
 283                   $.f.changeUserTo(this);
 284                   return false;
 285                };
 286                user.appendChild(a);
 287                li.appendChild(user);
 288                var updated = createHTMLElement('span');
 289                updated.className = trueName + '-date';
 290                if (r[i].status && r[i].status.created_at) {
 291                   var date_link = createHTMLElement('a');
 292                   date_link.innerHTML = r[i].status.created_at.split(/\+/)[0];
 293                   date_link.href = 'http://' + $.a.server + '/notice/' + r[i].status.id;
 294                   date_link.target = '_statusnet';
 295                   updated.appendChild(date_link);
 296                   if (r[i].status.in_reply_to_status_id) {
 297                      updated.appendChild(document.createTextNode(' in reply to '));
 298                      var in_reply_to = createHTMLElement('a');
 299                      in_reply_to.innerHTML = r[i].status.in_reply_to_status_id;
 300                      in_reply_to.href = 'http://' + $.a.server + '/notice/' + r[i].status.in_reply_to_status_id;
 301                      in_reply_to.target = '_statusnet';
 302                      updated.appendChild(in_reply_to);
 303                   }
 304                } else {
 305                   updated.innerHTML = 'has not updated yet';
 306                }
 307                li.appendChild(updated);
 308                var p = createHTMLElement('p');
 309                if (r[i].status && r[i].status.text) {
 310                   var raw = r[i].status.text;
 311                   p = markupPost(raw, $.a.server);
 312                }
 313                li.appendChild(p);
 314                var a = p.getElementsByTagName('a');
 315                for (var j = 0; j < a.length; j++) {
 316                   if (a[j].className == 'changeUserTo') {
 317                      a[j].removeAttribute('class');
 318                      a[j].href = 'http://' + $.a.server + '/' + a[j].innerHTML;
 319                      a[j].rel = a[j].innerHTML;
 320                      a[j].onclick = function() {
 321                         $.f.changeUserTo(this);
 322                         return false;
 323                      }
 324                   }
 325                }
 326                $.s.r.appendChild(li);
 327             }
 328          },
 329          sortArray : function(r, k, x) {
 330             if (window.createPopup) {
 331                return r;
 332             }
 333             function s(a, b) {
 334                if (x === true) {
 335                    return b[k] - a[k];
 336                } else {
 337                    return a[k] - b[k];
 338                }
 339             }
 340             r = r.sort(s);
 341             return r;
 342          },
 343          runScript : function(url, id) {
 344             var s = createHTMLElement('script');
 345             s.id = id;
 346             s.type ='text/javascript';
 347             s.src = url;
 348             document.getElementsByTagName('body')[0].appendChild(s);
 349          },
 350          removeScript : function(id) {
 351             if (document.getElementById(id)) {
 352                var s = document.getElementById(id);
 353                s.parentNode.removeChild(s);
 354             }
 355          }
 356       };
 357    }();
 358 //   var thisScript = /^https?:\/\/[^\/]*r8ar.com\/identica-badge.js$/;
 359    var thisScript = /identica-badge.js$/;
 360    if(typeof window.addEventListener !== 'undefined') {
 361       window.addEventListener('load', function() { $.f.init(thisScript); }, false);
 362    } else if(typeof window.attachEvent !== 'undefined') {
 363       window.attachEvent('onload', function() { $.f.init(thisScript); });
 364    }
 365 } )();
 366
 367