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;">↑ 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;">↓ 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 handleMouseDown(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)) return; 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; }
Create a new entry at this position: