BookMarks.xml

<?xml version="1.0" encoding="utf-8" ?>
<Module>
<ModulePrefs title="__UP_title__" directory_title="Table Styled Bookmarks V9" title_url="http://myweb.caece.net/maybe/iGoogle/guide/TableStyledBookmarks.html" description="A table styled bookmarks. Put your links concentrated !" author="Sheng-Chin Chuang" author_email="maybe1218@gmail.com" author_location="Taipei, ROC" screenshot="http://maybegadgets.googlecode.com/files/tsb_screenshot_2.png" thumbnail="http://maybegadgets.googlecode.com/files/tsb.png">
<Require feature="setprefs"/>
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref name="title" display_name="Title" datatype="string" default_value="Table Styled Bookmarks"/>
<UserPref name="cols" display_name="Table Columns" datatype="string" default_value="2"/>
<UserPref name="rows" display_name="Table Rows" datatype="string" default_value="6"/>
<UserPref name="bookmarks" display_name="Bookmarks" datatype="string" default_value="Google：http://www.google.com"/>
<UserPref name="editButtonType" display_name="Type Of Edit Button" datatype="enum" default_value="0">
<EnumValue value="0" display_value="Button"/>
<EnumValue value="1" display_value="Link"/>
<EnumValue value="2" display_value="Icon Left"/>
<EnumValue value="3" display_value="Icon Right"/>
</UserPref>
<UserPref name="openLinkInNewWindow" display_name="Open Link In New Window" datatype="bool" default_value="false"/>
<Content type="html">
<![CDATA[

<DIV ID="BookmarksTable">Bookmarks Table</DIV>

<Script type="text/javascript">

// Constants.

var textAreaStyle = "width:100%; height:16; border-style:none; overflow:hidden; padding-right:2px; padding-left:2px; background-color:#FFFFCC; color:black; font-size:12px; line-height:12px; letter-spacing:0;";
var editButtonElementCode = "<Input type='button' value='Edit' style='font-size:10px' onClick='ToEditMode();'/>";
var moveButtonElementCode = "<Input type='button' value='Move' style='font-size:10px' onClick='ToMoveMode();'/>";
var okButtonElementCode = "<Input type='button' value='OK' style='font-size:10px' onClick='ToBookmarksMode();'/>";
var guideLinkElementCode = "<A href='http://myweb.caece.net/maybe/iGoogle/guide/TableStyledBookmarks.html' target='_blank' style='font-size:10px'>guide</A>";

// User prefs.

var prefs = new _IG_Prefs(__MODULE_ID__);

var cols = prefs.getInt("cols");
var rows = prefs.getInt("rows");

var bookmarksStr = prefs.getString("bookmarks");
var bookmarksList = bookmarksStr.split("｜");
       
var editButtonType = prefs.getInt("editButtonType");
var openLinkInNewWindow = prefs.getBool("openLinkInNewWindow");

// Variables.

var linkCount = cols * rows;

var linkNames = new Array(linkCount);
var linkURLs = new Array(linkCount);
for(var i=0; i<linkCount; ++i)
{
if( i < bookmarksList.length )
{
var linkPair = bookmarksList[i].split("：");
linkNames[i] = linkPair[0];
if( linkPair.length > 1 )
{
linkURLs[i] = linkPair[1];
}
else
{
linkURLs[i] = "http://";
}
}
else
{
linkNames[i] = "";
linkURLs[i] = "http://";
}
}

var editedURL = -1;
var movingStartLinkIndex = -1;
var isEdited = false;

// Functions.

function GenerateBookmarksTable()
{
var lastLinkIndex = 0;
for(var i=linkCount-1; i>=0; --i)
{
if( linkNames[i] != "" )
{
lastLinkIndex = i;
break;
}
}
var editButtonIndex = lastLinkIndex + 1;
         
var openTarget = "_top";
if( openLinkInNewWindow )
{
openTarget = "_blank";
}
       
var tableCode = "<Table border='0' style='font-size:12px'>";

var linkIndex = 0;

for(var r=0; r<rows; ++r)
{
tableCode += "<TR>";

for(var c=0; c<cols; ++c)
{
tableCode += "<TD>";
                 
if( linkIndex != editButtonIndex )
{
tableCode += "<A href='" + linkURLs[linkIndex] + "' target='" + openTarget + "' style='padding-right:8px; padding-left:0px'>" + linkNames[linkIndex] + "</A>";
}
else if( editButtonType == 1 )
{
tableCode += "<A href='javascript:ToEditMode();' style='padding-right:8px; padding-left:0px'>&laquo;edit</A>";
}
                 
tableCode += "</TD>";

++ linkIndex;
}

tableCode += "</TR>";
}

tableCode += "</Table>";

if( editButtonType == 0 )
{
tableCode += "<Input type='button' value='Edit' style='font-size:9px' onClick='ToEditMode();'/>";
}
else if( editButtonType == 1 )
{
if( editButtonIndex >= linkCount )
{
tableCode += "<A href='javascript:ToEditMode();' style='font-size:12px'>&laquo;edit</A>";
}
}
else if( editButtonType == 2 )
{
tableCode += "<A href='javascript:ToEditMode();'><Image src='http://myweb.caece.net/maybe/iGoogle/tsb_edit.gif' border='0'/></A>";
}
else
{
tableCode += "<DIV align='right'/><A href='javascript:ToEditMode();'><Image src='http://myweb.caece.net/maybe/iGoogle/tsb_edit.gif' border='0'/></A></DIV>";
}
         
if( isEdited )
{
tableCode += "<DIV style='font-size:12px; color:red'>To avoid data losing of current editing, refreshing this page (press F5) is recommended, especially before setting the 'Edit settings' !</DIV>";
}
         
_gel("BookmarksTable").innerHTML = tableCode;

_IG_AdjustIFrameHeight();
}

function GenerateEditingTable()
{
var tableCode = "<Div style='font-size:12px'>Rows:<Input id='RowsCount' type='text' style='width:32; height:20' value='" + rows + "'/> Cols:<Input id='ColsCount' type='text' style='width:32; height:20' value='" + cols  + "'/>　<Input type='button' value='Resize' style='font-size:12px; height:20' onclick='javascript:ResizeRowsCols();'/></Div><BR/>";

tableCode += "<Table border='1' width='100%' style='table-layout:fixed'>";

var linkIndex = 0;

for(var r=0; r<rows; ++r)
{
tableCode += "<TR>";

for(var c=0; c<cols; ++c)
{
tableCode += "<TD><TextArea ID='TA_" + linkIndex + "' style='" + textAreaStyle + "' onfocus='EditURL(" + linkIndex + ");' onblur='SaveLinkName(this," + linkIndex + ");'>" + linkNames[linkIndex] + "</TextArea></TD>";

++ linkIndex;
}

tableCode += "</TR>";
}

tableCode += "</Table>";

tableCode += "<Input ID='URLInput' type='text' style='width:200' value='http://' onblur='SaveLinkURL();'/><BR/><BR/>";
         
tableCode += moveButtonElementCode;
tableCode += okButtonElementCode;
tableCode += "　　" + guideLinkElementCode;

_gel("BookmarksTable").innerHTML = tableCode;

_IG_AdjustIFrameHeight();
}

function GenerateMovingTable()
{
var tableCode = "<Table border='1' style='table-layout:fixed;font-size:12px'>";

var linkIndex = 0;

for(var r=0; r<rows; ++r)
{
tableCode += "<TR>";

for(var c=0; c<cols; ++c)
{
tableCode += "<TD><Input ID='ME_" + linkIndex + "' type='button' value='" + linkNames[linkIndex] + "' style='width:100%;font-size:12px' onmousedown='DragStart(" + linkIndex + ");' onmouseup='DragEnd(" + linkIndex + ");'/></TD>";

++ linkIndex;
}

tableCode += "</TR>";
}

tableCode += "</Table>";

tableCode += "<Div style='font-size:12px'>Drag the buttons between the table cells..</Div><BR/>";
         
tableCode += editButtonElementCode;
tableCode += okButtonElementCode;
tableCode += "　　" + guideLinkElementCode;        

_gel("BookmarksTable").innerHTML = tableCode;

_IG_AdjustIFrameHeight();
}

function ToEditMode()
{
GenerateEditingTable();

editedURL = -1;
}

function ToMoveMode()
{
GenerateMovingTable();

movingStartLinkIndex = -1;
}

function ToBookmarksMode()
{
isEdited = true;

GenerateBookmarksTable();
}

function EditURL(linkIndex)
{
if( editedURL >= 0 )
{
_gel("TA_"+editedURL).style.backgroundColor = "#FFFFCC";
}

_gel("URLInput").value = linkURLs[linkIndex];
editedURL = linkIndex;

_gel("TA_"+editedURL).style.backgroundColor = "#FFFF88";
}

function SaveBookmarks()
{
var value = "";

if( linkCount >= 1 )
{
value += linkNames[0];
value += "：";
value += linkURLs[0];
}

for(var i=1; i<linkCount; ++i)
{
value += "｜";
value += linkNames[i];
value += "：";
value += linkURLs[i];
}

prefs.set("bookmarks",value);
}

function SaveLinkName(textArea, linkIndex)
{
linkNames[linkIndex] = textArea.value;

SaveBookmarks();
}

function SaveLinkURL()
{
if( editedURL >= 0 )
{
linkURLs[editedURL] = _gel("URLInput").value;
}

SaveBookmarks();
}

function DragStart(startIndex)
{
movingStartLinkIndex = startIndex;
}

function DragEnd(targetIndex)
{
if( movingStartLinkIndex >= 0 )
{
var temp;

temp = linkNames[movingStartLinkIndex];
linkNames[movingStartLinkIndex] = linkNames[targetIndex];
linkNames[targetIndex] = temp;

temp = linkURLs[movingStartLinkIndex];
linkURLs[movingStartLinkIndex] = linkURLs[targetIndex];
linkURLs[targetIndex] = temp;

_gel("ME_"+movingStartLinkIndex).value = linkNames[movingStartLinkIndex];
_gel("ME_"+targetIndex).value = linkNames[targetIndex];

movingStartLinkIndex = -1;

SaveBookmarks();
}
}

function ResizeRowsCols()
{
var newRows = parseInt(_gel("RowsCount").value);
var newCols = parseInt(_gel("ColsCount").value);
var newLinkCount = newRows * newCols;

if( newLinkCount < linkCount )
{
var lastLinkIndex = 0;

for(var i=linkCount-1; i>=0; --i)
{
if( linkNames[i] != "" )
{
lastLinkIndex = i;
break;
}
}

var neededRows = parseInt(lastLinkIndex/newCols) + 1;

if( newRows < neededRows )
{
newRows = neededRows;
newLinkCount = newRows * newCols;
}
}

rows = newRows;
cols = newCols;
linkCount = newLinkCount;

var newLinkNames = new Array(linkCount);
var newLinkURLs = new Array(linkCount);
for(var i=0; i<linkCount; ++i)
{
if( i < linkNames.length )
{
newLinkNames[i] = linkNames[i];
newLinkURLs[i] = linkURLs[i];
}
else
{
newLinkNames[i] = "";
newLinkURLs[i] = "http://";
}
}
linkNames = newLinkNames;
linkURLs = newLinkURLs;

prefs.set("rows", rows);
prefs.set("cols", cols);
SaveBookmarks();

ToEditMode();
}

// Program init.

GenerateBookmarksTable();

</Script>

]]>
</Content>
</Module>