43sites

By Johan Sundström Last update Jul 10, 2006 — Installed 317 times.
/*

 (C) 2005 Johan Sundström (0.13 .. 0.18)
 License: Creative Commons "Attribution-ShareAlike 2.0"
 http://creativecommons.org/licenses/by-sa/2.0/

 Skeletal parts of DOM-Drag by Aaron Boodman, 2001
 http://www.youngpup.net/2001/domdrag
 License: Creative Commons "Attribution-ShareAlike 2.0"
 http://creativecommons.org/licenses/by-sa/2.0/

 (C) 2005 Jesse Andrews, Britt Selvitelle under cc-by-sa
 License: Creative Commons "Attribution-ShareAlike 1.0"
 http://creativecommons.org/licenses/by-sa/1.0/

 Snipits used from RSS Reader for GreaseMonkey
 http://www.xs4all.nl/~jlpoutre/BoT/Javascript/RSSpanel/
 Version: 1.03 (C) 2005 Johannes la Poutre
 THANKS!

 Changelog:

  *  2006-07-10  *

 0.2 - Adopted into a tiny user script for cross-browsing the 43* sites.

  *  2006-06-02  *

 0.1 - Refactored BookBurro 0.18 into a generic *-burro UI component
     / Johan Sundström, oyasumi+43sites@gmail.com

*/

// ==UserScript==
// @name          43sites
// @namespace     http://www.lysator.liu.se/~jhs/userscript
// @description   Adds a crosslinking panel between the various 43* sites.
// @include       http://*.43people.com/*
// @include       http://*.43places.com/*
// @include       http://*.43things.com/*
// @include       http://*.allconsuming.net/*
// @include       http://*.listsofbests.com/*

// ==/UserScript==

var debug = 0;

var Icons =
{
  carrotRight: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QQYCR020Q08hgAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAAAiklEQVQY07XPIQoCURSF4e8NAzYxGicNuAa1WlyCO3AlZnfiNgwahQFxikkcBIsGfaZpzgODJ/4c/nMvPyR8g7EsephgH6q6aXnWIelhjkUsi0EL88TqFUfMYlnscMoS5wUccMYS4yxhfuGNPho88oQ5xxQjrHHpKkcMccMqVPU99eATG2zb4n/zAS4OHrV1hIB/AAAAAElFTkSuQmCC',
  carrotDown: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QQYCRoeq/kCuwAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAAAmElEQVQY083QMUoDARSE4W92U2xhkxSpAgY0AXMQ29zCM3iSXEXQTrCws44Im85CkO1jnq2KKQWnGxiY+Yd/oXw1tTrr7D86CYdD5Xk3HA8vTi8la7xW1T5Jg8IEN6PvPXnEAkOa5l5Viwuc4yk/d9VyfoLrqnpIMmCGu2z79/wGUsv5FFcYY5Nt/wKjI+BvuEWnbfu///kTargo75QVC5oAAAAASUVORK5CYII=',
  close: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAuJAAALiQE3ycutAAAAB3RJTUUH1QQYCDcSg6d+SAAAAPBJREFUKM+Fkr1qAkEURs9dnWBrJT5IHkEw4gtEsBQs/AlpkiKlJGnEJlqIjRbrPoAQYhPio1hGsPAHFoW5KSIxo7J7qvlgDty534j6Rolgt987OQnA7XuEsTuegwIeMYiIkx2hVnsjCL7+su9/0mz2Lox0oNOpUiw+kc2mUVWGww8mkxYiYK09F4xJMho9kMs9IiJMpy8Y83vFWkUTCVcAWCxWLJcrRIT1OiSTOczuCXieK2y3IeXyK4PBPZtNSKn0zGzWJpW6uvyGer1LpVIgn78GYD7/ptHo0e/fHbemvtHIHv4zvonv4ayXuK9xyg8qt0tfe9qKPAAAAABJRU5ErkJggg==',
};


// document.getElementById, but ask for several ids for an array of those nodes
function $( ids, /* optional: */ doc )
{
  if( typeof ids == 'string' )
    return (doc || document).getElementById( ids );
  for( var i=0; i<ids.length; i++ )
    ids[i] = (doc || document).getElementById( ids[i] );
  return ids;
}

function maketag( name, attr, content, styles )
{
  var tag = document.createElement( name ), child;
  if( attr )
    for( name in attr )
      tag.setAttribute( name, attr[name] );
  if( !(content instanceof Array ) )
    content = [ content ];
  while( child = content.shift() )
  {
    if( typeof child == 'string' )
      child = document.createTextNode( child );
try{
    tag.appendChild( child );
}catch(e){prompt(e,(child?child.nodeName||'child was a '+(typeof child)+'='+child.toSource():'no child')+" in "+tag.nodeName);}
  }
  if( styles )
    for( name in styles )
      tag.style[name] = styles[name];
  return tag;
}

function A( a, c, s ) { return maketag( 'a', a, c, s ); }
function DIV( a, c, s ) { return maketag( 'div', a, c, s ); }
function SPAN( a, c, s ) { return maketag( 'span', a, c, s ); }
function IMG( a, s ) { return maketag( 'img', a, null, s ); }

function link( url, txt, id, title )
{
  var a = { target:'_top', href:url };
  if( id ) a.id = id;
  if( title ) a.title = title;
  return A( a, txt, {color:'#00A', textDecoration:'none', fontWeight:'bold'} );
}

function tableRow( url, title, loc_id )
{
  var tr_style = {}, id = 'burro-'+ loc_id;
  var tl_style = { paddingLeft:'3px' };
  var tr_style = { paddingRight:'5px' };
  if( document.all ) // IE only
  {
    tr_style.position = 'relative';
    tr_style.textAlign = 'right';
    tr_style.position = 'absolute';
    tr_style.left = '10em';
    tr_style.width = '4em';
  }
  else // other browsers
  {
    tr_style.display = 'table-row';
    tl_style.display = 'table-cell';
    tr_style.display = 'table-cell';
  }
  var a = link( url, title, id+ '-toggle' );
  var td_left = SPAN( {}, a, tl_style );
  var td_right = SPAN( { id:id }, '', tr_style );
  return DIV( {}, [td_left, td_right] );
}

function randomPick( what )
{
  if( typeof what == 'number' )
    return Math.round( Math.random() * what );
  if( !(what instanceof Array ) )
    throw( 'Can only randomize numbers and arrays.' );
  return what[randomPick( what.length-1 )];
}

function removeEventHandler( target, eventName, eventHandler )
{
  if( target.addEventListener )
    target.removeEventListener( eventName, eventHandler, true );
  else if( target.attachEvent )
    target.detachEvent( 'on' + eventName, eventHandler );}


function addEventHandler( target, eventName, eventHandler, scope )
{
  var f = scope ? function(){ eventHandler.apply( scope, arguments ); }
		: eventHandler;
  if( target.addEventListener )
    target.addEventListener( eventName, f, true );
  else if( target.attachEvent )
    target.attachEvent( 'on' + eventName, f );
  return f;
}


var Drag = function(){ this.init.apply( this, arguments ); };

Drag.fixE = function( e )
{
  if( typeof e == 'undefined' ) e = window.event;
  if( typeof e.layerX == 'undefined' ) e.layerX = e.offsetX;
  if( typeof e.layerY == 'undefined' ) e.layerY = e.offsetY;
  return e;
};

Drag.prototype.init = function( handle, dragdiv )
{
  this.div = dragdiv || handle;
  this.handle = handle;
  if( isNaN(parseInt(this.div.style.right )) ) this.div.style.right  = '0px';
  if( isNaN(parseInt(this.div.style.bottom)) ) this.div.style.bottom = '0px';
  this.onDragStart = function(){};
  this.onDragEnd = function(){};
  this.onDrag = function(){};
  this.onClick = function(){};
  this.mouseDown = addEventHandler( this.handle, 'mousedown', this.start, this );
};

Drag.prototype.start = function( e )
{
  // this.mouseUp = addEventHandler( this.handle, 'mouseup', this.end, this );
  e = Drag.fixE( e );
  this.started = new Date();
  var y = this.startY = parseInt(this.div.style.bottom);
  var x = this.startX = parseInt(this.div.style.right);
  this.onDragStart( x, y );
  this.lastMouseX = e.clientX;
  this.lastMouseY = e.clientY;
  this.documentMove = addEventHandler( document, 'mousemove', this.drag, this );
  this.documentStop = addEventHandler( document, 'mouseup', this.end, this );
  if( e.preventDefault ) e.preventDefault();
  return false;
};

Drag.prototype.drag = function( e )
{
  e = Drag.fixE( e );
  var ey = e.clientY;
  var ex = e.clientX;
  var y = parseInt(this.div.style.bottom);
  var x = parseInt(this.div.style.right );
  var nx = x - ex + this.lastMouseX;
  var ny = y - ey + this.lastMouseY;
  this.div.style.right	= nx + 'px';
  this.div.style.bottom	= ny + 'px';
  this.lastMouseX	= ex;
  this.lastMouseY	= ey;
  this.onDrag( nx, ny );
  if( e.preventDefault ) e.preventDefault();
  return false;}
;

Drag.prototype.end = function()
{
  removeEventHandler( document, 'mousemove', this.documentMove );
  removeEventHandler( document, 'mouseup', this.documentStop );
  var time = (new Date()) - this.started;
  var x = parseInt(this.div.style.right),  dx = this.startX - x;
  var y = parseInt(this.div.style.bottom), dy = this.startY - y;
  this.onDragEnd( x, y, dx, dy, time );
  if( (dx*dx + dy*dy) < (4*4) && time < 1e3 )
    this.onClick( x, y, dx, dy, time );
};


function burro( burro_contents )
{
  try{
  if( debug > 1 ) GM_log( 'adding burro' );
  var carrot = IMG( { src:Icons.carrotRight, id:'toggle-burro-carrot' },
		    { top:'-10px' } );
  var title = DIV( {}, '43 sites',
		   { top:'3px', left:'16px', position:'absolute' } );
  var close = IMG( { src:Icons.close, title:'Click to remove' },
		   { position: 'absolute',
		     right: '2px',
		     top: '2px',
		     margin: '2px',
		     width: '12px',
		     height: '12px',
		     backgroundColor: '#FFB',
		     border: 'none',
		     lineHeight: '8px',
		     textAlign: 'center'
		   } );
  var handle = DIV( { title:'Click title to expand, collapse or drag' },
		    [carrot, title, close],
		    { padding:'4px 1px', fontWeight:'bold', position:'relative' } );
  var table = DIV( { id:'burro-contents' }, burro_contents,
		   { marginTop: '1px',
		     marginBottom: '3px',
		     padding: '0',
		     width: '100%',
		     font: '10pt sans-serif',
		     display: 'none'} );
  var box = DIV( {}, [handle, table], {
    position: 'relative',
    zIndex: '1000',

    backgroundColor: '#FFC',
    border: '1px solid orange',
    padding: '0px',
    textAlign: 'left',
    font: '8pt sans-serif',
    width: '94px',
    marginBottom: '15px',

    opacity: '0.80',
    filter: 'alpha(opacity=80)'
  } );
  var root = DIV( {}, box, { position:'absolute', top:'15px', right:'15px' } );
  var kill = function(){ document.body.removeChild( root ); };
  var zip = function()
  {
    var list = $( 'burro-contents' );
    var carrot = $( 'toggle-burro-carrot' );
    if( box.opened = !box.opened )
    {
      list.style.display = document.all ? 'block' : 'table';
      carrot.src = Icons.carrotDown;
    }
    else
    {
      list.style.display = 'none';
      carrot.src = Icons.carrotRight;
    }
  };
  addEventHandler( close, 'click', kill );
  document.body.appendChild( root );
  handle.drag = new Drag( handle, box );
  handle.drag.onClick = zip;
  if( debug > 1 ) GM_log( 'added burro' );
}catch(e){prompt('burro error:',e)}
}

function init()
{
  var rows = [ { title:'43 people', url:'http://www.43people.com/' },
	       { title:'43 places', url:'http://www.43places.com/' },
	       { title:'43 things', url:'http://www.43things.com/' },
	       { title:'allconsuming', url:'http://www.allconsuming.net/' },
	       { title:'listsofbests', url:'http://www.listsofbests.com/' },
	       ];
  var row, url, title, id;
  for( var i = 0; i < rows.length; i++ )
  {
    row = rows[i];
    url = row.url;
    title = row.title;
    id = row.id;
    rows[i] = tableRow( url, title, id );
  }
  burro( rows );
}

// addEventHandler(document, 'load', init);
init();