Sorter

gibney.org : Technology : Javascript : Bookmarklets : Sorter

(Entry Nr. 212, by user 1 | edit) search

/*
Bookmarklet Skript by Gibney-Enterprises

This one allows you to sort a table by a column

Create a bookmarklet with an uri like this:
javascript:if (document.createElement){void(head=document.getElementsByTagName('head').item(0));void(script=document.createElement('script'));void(script.src='javascript:if (document.createElement){void(head=document.getElementsByTagName('head').item(0));void(script=document.createElement('script'));void(script.src='http://javascript.gibney.org/sorter.js');void(script.type='text/javascript');void(head.appendChild(script));}');void(script.type='text/javascript');void(head.appendChild(script));}

// Global Variables
var isDOM=document.getElementById&&!document.all;
var maxTableSortId=0;
var sortCell=0;          // The cell to sort on, global, so it can be accessed by compareRows

// Styles
buttonStyle="color:#000;text-decoration:none;cursor:pointer;display:block;background-color:#fff;border:1px solid #ddd;padding:0.2em;margin:0.1em;";

// Styling functions:

function buttonOver(obj)
{
 obj.style.color="#300";
 obj.style.backgroundColor="#eff6ef";
 obj.style.borderTop="1px solid #aba";
 obj.style.borderRight="1px solid #efe";
 obj.style.borderBottom="1px solid #efe";
 obj.style.borderLeft="1px solid #aba";
}

function buttonOut(obj)
{
 obj.style.color="#000";
 obj.style.backgroundColor="#fff";
 obj.style.border="1px solid #ddd";
}

// Position functions 
// functions used to retrive the position and dimension of different elements
function getMouseX(e)
{
 var r=0;

if (isDOM) r = e.pageX;
    else       r = event.clientX + document.body.scrollLeft;
 
 if (r < 0) r=0;

return r;
}

function getMouseY(e)
{
 var r=0;
 
 if (isDOM) r = e.pageY;
    else       r = event.clientY + document.body.scrollTop;
 
 if (r < 0) r=0;

return r;
}

function getTop(Element)
{ 
 if (Element.offsetParent) return Element.offsetTop+getTop(Element.offsetParent);
 else return Element.offsetTop;
}

function getLeft(Element)
{ 
 if (Element.offsetParent) return Element.offsetLeft+getLeft(Element.offsetParent)
 else return Element.offsetLeft;
}

function getWidth(Element)
{ 
 return Element.offsetWidth;
}

function getHeight(Element)
{ 
 return Element.offsetHeight;
}

// functions for the dynamic creation and deletion of divs
function removeElementById(id)
{
 if (!document.getElementById(id)) return;
 
 element=document.getElementById(id);
 element.parentNode.removeChild(element);
}

function removeDiv(id)
{
 removeElementById(id);
}

function createDiv(id,posX,posY,content)
{
 var menuDiv=document.createElement("div");

menuDiv.id=id;
 menuDiv.style.position='absolute';
 menuDiv.style.top =posY+'px';
 menuDiv.style.left=posX+'px';
 menuDiv.innerHTML=content;
 document.getElementsByTagName('body').item(0).appendChild(menuDiv);
 return menuDiv;
}

/* currently unused
// highlight table produces a div with the position and dimension of the given table
// showing a dotted border around the table
function highlightTable(table)
{
 var tableX  = getLeft(table);
 var tableY  = getTop(table);
 var id      = 'highlight_cm1';
 var tableWidth =getWidth(table);
 var tableHeight=getHeight(table);
 
 var content ='<div style="border:3px dotted #ff0033;width:'+tableWidth+'px;height:'+tableHeight+'px;">';
 content+='</div>';
 
 createDiv(id,tableX,tableY,content);
}
*/

// show a contextmenu for tablesorting

function contextmenu(e)
{
 var id      = 'cm1';

var tempObj = isDOM ? e.target : event.srcElement;

if (!e) e = window.event;
 if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3))
 {
  hideContextmenu(id);

var mouseX  = getMouseX(e);
  var mouseY  = getMouseY(e);

var tableObj=false;
  var rowObj  =false;
  var cellObj =false;
  while(tempObj.parentNode)
  {
   if (tempObj.tagName=='TD' || tempObj.tagName=='TH') cellObj =tempObj;
   if (tempObj.tagName=='TR') rowObj  =tempObj;
   if (tempObj.tagName=='TABLE') 
   {
    tableObj=tempObj;
    break;
   }

tempObj=tempObj.parentNode;
  }

if (tableObj==false || rowObj==false || cellObj==false) return false;
  
  if (!cellObj.id)  cellObj.id ='ge_tablesorter_cell_'+maxTableSortId;
  if (!rowObj.id)   rowObj.id  ='ge_tablesorter_row_'+maxTableSortId;
  if (!tableObj.id) tableObj.id='ge_tablesorter_table_'+maxTableSortId;
  maxTableSortId++;

var content ='<div style="border:1px solid #000;">';
  content+='<div style="background-color:#fff;padding:0.1em;"><b> ';
  content+=getSortValue(cellObj.innerHTML);
  content+=' </b>';
  content+='<a href="#" style="'+buttonStyle+'" onmouseover="buttonOver(this)" onmouseout="buttonOut(this)" onclick="sortRow(';
  content+="'"+(cellObj.id)+"','"+(rowObj.id)+"','"+(tableObj.id)+"'";
  content+=',1);return false;">&uarr;&nbsp;sort ascending</a>';
  content+='<a href="#" style="'+buttonStyle+'" onmouseover="buttonOver(this)" onmouseout="buttonOut(this)" onclick="sortRow(';
  content+="'"+(cellObj.id)+"','"+(rowObj.id)+"','"+(tableObj.id)+"'";
  content+=',-1);return false;">&darr;&nbsp;sort descending</a>';
  content+='</div>';
  content+='</div>';

var  menu=createDiv(id,mouseX,mouseY,content);
  menu.style.zIndex=9999;

return false;
 }
 else
 {
  var menuClick=false;
  while(tempObj.parentNode)
  {
   if (tempObj.id==id) 
   {
    menuClick=true;
    break;
   }
   tempObj=tempObj.parentNode;
  }
  if (!menuClick) hideContextmenu();
 }
}

function hideContextmenu()
{
 var id='cm1';
 if (document.getElementById(id)) removeDiv(id);
 if (document.getElementById('highlight_'+id)) removeDiv('highlight_'+id);
}

function shaker_sort(list, comp_func) 
{
 // see: http://en.wikipedia.org/wiki/Cocktail_sort
 var b = 0;
 var t = list.length - 1;
 var swap = true;

while(swap)
 {
  swap = false;
  for(var i = b; i < t; ++i)
  {
   if ( comp_func(list[i], list[i+1]) > 0 ) 
   {
    var q = list[i]; list[i] = list[i+1]; list[i+1] = q;
    swap = true;
   }
  }
  t--;
  if (!swap) break;

for(var i = t; i > b; --i) 
  {
   if ( comp_func(list[i], list[i-1]) < 0 ) 
   {
    var q = list[i]; list[i] = list[i-1]; list[i-1] = q;
    swap = true;
   }
  }
  b++;
 }
}

function sortRow(cellId,rowId,tableId,direction)
{
 var rowData =new Array(); // Holds the table rows to sort...
 var cellData=new Array();
 
 var cellObj =document.getElementById(cellId);
 var rowObj  =document.getElementById(rowId);
 var tableObj=document.getElementById(tableId);
 
 var rowCount =tableObj.rows.length;
 var startRow =1+rowObj.rowIndex;
 var endRow   =rowCount;
 var cellCount=rowObj.cells.length;
 sortCell     =cellObj.cellIndex; // global, so it can be accessed by compareRows

for (var i=startRow; i<rowCount; i++)
 {
  // save sortValue to table
  temp=tableObj.rows[i].cells[sortCell].innerHTML;
  temp=getSortValue(temp);
  temp=temp.toLowerCase();
  temp=temp.replace(/,/g,'.');
  if (temp!='' && !isNaN(Number(temp))) temp=Number(temp);
  tableObj.rows[i].sortValue=temp;

if (cellCount!=tableObj.rows[i].cells.length)
  {
   endRow=i;
   break;
  }
  rowData.push(tableObj.rows[i]);
 }

// sort
 //rowData.sort(compareRows);
 shaker_sort(rowData,compareRows);
 if (direction<0) rowData.reverse();
 
 // get HTMLContent, needed because rowData contains only references
 for (var i=0; i<rowData.length; i++)
 {
  // Great, in IE tr.innerHTML is read only...
  //rowDataHTML[i]=rowData[i].innerHTML;
  cellData[i]=new Array();
  for (var j=0; j<rowData[i].cells.length; j++)
  {
   cellData[i][j]=rowData[i].cells[j].innerHTML;
  }
 }

// write back to table
 for (var i=0; i<cellData.length; i++)
 {
  // tableObj.rows[(startRow+i)].innerHTML=rowDataHTML[i];
  for (var j=0; j<cellData[i].length; j++)
  {
   tableObj.rows[(startRow+i)].cells[j].innerHTML=cellData[i][j];
  }
 }
 
 hideContextmenu('cm1');
}

function natcomp(a,b)
{
 for (var i=0;a[i] && b[i];i++)
 {
  if (parseInt(a.substr(i))>parseInt(b.substr(i))) return 1;
  if (parseInt(b.substr(i))>parseInt(a.substr(i))) return -1;
  if (a[i]>b[i]) return 1;
  if (b[i]>a[i]) return -1;
 }
 return 0;
}

/*
function compareRows(rowA,rowB)
{
 if (rowA.sortValue<rowB.sortValue) return -1;
 if (rowA.sortValue==rowB.sortValue) return 0;
 return 1;
}
*/

function compareRows(rowA,rowB)
{
 return natcomp(rowA.sortValue,rowB.sortValue);
}

function getSortValue(str)
{
 // Get Value of an input field
 if (str.search(/<input[^>]*value=/i)>-1)
 {
  var temp=str.match(/<input[^>]*value=[\"\']([^\"\']*)/i);
  return temp[1];
 }
 
 // get rid of html tags
 str=str.replace(/<[^>]*>/ig,'');
 
 return str;
}

// ----------------------------------------------------------------------------------
// Main
// ----------------------------------------------------------------------------------

if (typeof(ge_bookmarklet_sorter_noninteractive)=="undefined")
{
 if (document.layers) document.captureEvents(Event.MOUSEDOWN);
 document.onmousedown   =handleMouseDown;
 document.oncontextmenu =contextmenu;

message=createDiv('cm1',10,10,'<table style="background-color:#ffffff;border:1px solid #000000;color:#000000;"><tr><td style="padding: 0.5em;"><a href="http://en.gibney.org/sorter_info/" target=_blank><img src="http://en.gibney.org/elements/images/mg-sign.gif" style="border: 0;"></a></td><td style="padding: 0.5em;"><b style="color: #008000;">The Sorter</b> is active.<br>Right-click on the header of a column to use it.</td></tr></table>');
message.style.zIndex=9999;
}