[[Rejoice!]] [[Clippings]] [[BUGS]] [[Acknowledgements]]
version.extensions.listOpen = {major: 0, minor: 1, revision: 0};
config.macros.listOpen = { text: "Hello" };
config.macros.listOpen.handler = function(place,macroName,params)
{
var tiddlerDisplay = document.getElementById("tiddlerDisplay");
for(var t=0;t<tiddlerDisplay.childNodes.length;t++)
{
if( tiddlerDisplay.childNodes[t].id )
{
var tiddlerName = tiddlerDisplay.childNodes[t].id.substr(7);
createTiddlyLink(place,tiddlerName,true);
createTiddlyElement(place,"br",null,null,"");
//refreshEditor(tiddlerName);
}
}
}
version.extensions.listTags = {major: 0, minor: 1, revision: 0};
config.macros.listTags = {
text: "Hello"
};
config.macros.listTags.handler = function(place,macroName,params)
{
var tagged = store.getTaggedTiddlers(params[0]);
for(var r=0;r<tagged.length;r++)
{
if( tagged[r].title.toLowerCase() != params[0].toLowerCase() )
{
createTiddlyLink(place,tagged[r].title,true);
createTiddlyElement(place,"br",null,null,"");
}
}
}
<<newTiddler>>
These interface options are saved in your browser
username : <<option txtUserName>>
password : <<option pasPassword>>
<<option chkSaveBackups>> Save Backups
<<option chkAutoSave>> Auto Save
<<option chkGenerateAnRssFeed>> Generate an RSS Feed
<<option chkRegExpSearch>> Reg Exp Search
<<option chkCaseSensitiveSearch>> Case-sensitive Search
<<option chkAnimate>> Enable Animations
See AdvancedOptions
<<search>><<closeAll>><<permaview>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel options 'Change TiddlyWiki advanced options'>>
http://www.cs.utexas.edu/~joeraii/datagarden
<<tabs txtMoreTab
All "All tiddlers" TabMoreAll
Missing "Missing tiddlers" TabMoreMissing
Orphans "Orphaned tiddlers" TabMoreOrphans
>>
<<list all>>
<<list missing>>
<<list orphans>>
<<allTags>>
<<timeline>>
!!Some kind of Header
!Header?
''Bold''
==Strike==
__Underline__
//Italic//
2^^3^^=8
a~~ij~~ = -a~~ji~~
@@highlight@@
@@color(green):green colored@@
@@bgcolor(#ff0000):color(#ffffff):red colored@@
*Legende zum Vorlesungsverzeichnis
**@@bgcolor(#a0ffa0):color(black): bedeutet hier@@
**@@bgcolor(#ffdead):color(black): etwas anderes@@
**@@bgcolor(#ffbfff):color(black): Lanthanides@@
**@@bgcolor(#ff99cc):color(black): Actinides@@
**@@bgcolor(#ffc0c0):color(black): Transition metals@@
**@@bgcolor(#cccccc):color(black): Poor metals@@
**@@bgcolor(#cccc99):color(black): Metalloids@@
**@@bgcolor(#a0ffa0):color(black): Nonmetals@@
**@@bgcolor(#ffff99):color(black): Halogens@@
**@@bgcolor(#c0ffff):color(black): Noble gases@@
*** @@color(#a0ffa0):TODO@@
*** @@color(#ffdead):IBM@@
*** @@color(#ffbfff):Research@@
*** @@color(#ff99cc):Japan@@
*** @@color(#ffc0c0):Culture@@
version.extensions.tagCloud = {major: 0, minor: 1, revision: 0, date: new Date(2005,7,31)};
config.macros.tagCloud = {
noTags: "No tag cloud created because there are no tags."
};
config.macros.tagCloud.handler = function(place,macroName,params)
{
var tagCloudWrapper = createTiddlyElement(place,"ul",null,"tagCloud",null);
var tags = store.getTags();
if(tags.length == 0) createTiddlyElement(tagCloudWrapper,"li",null,null,this.noTags);
//Findout the maximum number of tags
var mostTags = 0;
for (t=0; t<tags.length; t++) {
if (tags[t][1] > mostTags) mostTags = tags[t][1];
}
//divide the mostTags into 6 segments for the 6 different tagCloud sizes
var tagSegment = mostTags / 4;
for (t=0; t<tags.length; t++) {
var tagCloudElement =createTiddlyElement(tagCloudWrapper,"li",null,null,null);
var theTag = createTiddlyButton(tagCloudElement,tags[t][0],this.tooltip + tags[t][0],onClickTag,"tagCloud"+(Math.round(tags[t][1]/tagSegment)+1));
theTag.setAttribute("tag",tags[t][0]);
}
createTiddlyElement(place,"p",null,"clearer",null);
};
Me too.
* Speed issue: dragged tiddler gets out of sync with the cursor.
This code is an amalgamation of several different projects, and would not have been possible without:
* Jeremy Ruston for [[TiddlyWiki|http://www.tiddlywiki.com]]
* Youngpup for [[DOM-Drag|http://www.youngpup.net/2001/domdrag]], vehemently simplified.
Also, [[pytw|http://www.cs.utexas.edu/~joeraii/pytw/]] was useful for doing the initial construction.
drag-n-drop reorderings
Type the text for 'New Tiddler'
function createTiddler(place,before,title,state,highlightText,highlightCaseSensitive)
{
var theTiddler = createTiddlerSkeleton(place,before,title);
createTiddlerTitle(title,highlightText,highlightCaseSensitive);
var theViewer = document.getElementById("viewer" + title);
var theEditor = document.getElementById("editorWrapper" + title);
switch(state)
{
case 0:
if(!theViewer && !theEditor)
{
createTiddlerToolbar(title,false);
createTiddlerViewer(title,highlightText,highlightCaseSensitive);
createTiddlerFooter(title,false);
}
break;
case 1: // Viewer
if(theViewer)
theViewer.parentNode.removeChild(theViewer);
if(theEditor)
theEditor.parentNode.removeChild(theEditor);
createTiddlerToolbar(title,false);
createTiddlerViewer(title,highlightText,highlightCaseSensitive);
createTiddlerFooter(title,false);
break;
case 2: // Editor
if(!theEditor)
{
var height = 0;
if(theViewer)
{
height = theViewer.offsetHeight;
theViewer.parentNode.removeChild(theViewer);
}
createTiddlerToolbar(title,true);
createTiddlerEditor(title, height);
createTiddlerFooter(title,true);
}
break;
}
// NOTE: ADDED THIS
var theHandle = document.getElementById("title"+title);
Drag.init(theHandle, theTiddler, 0, 0, null, null);
theTiddler.onDrag = function(x,y,myElem) {
y = myElem.offsetTop;
var next = myElem.nextSibling;
var prev = myElem.previousSibling;
if (next && y + myElem.offsetHeight > next.offsetTop + next.offsetHeight/2) {
myElem.parentNode.removeChild(myElem);
next.parentNode.insertBefore(myElem, next.nextSibling);//elems[pos+1]);
myElem.style["top"] = -next.offsetHeight/2+"px";
}
if (prev && y < prev.offsetTop + prev.offsetHeight/2) {
myElem.parentNode.removeChild(myElem);
prev.parentNode.insertBefore(myElem, prev);
myElem.style["top"] = prev.offsetHeight/2+"px";
}
};
theTiddler.onDragEnd = function(x,y,myElem) {
myElem.style["top"] = "0px";
}
return(theTiddler);
}
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY)
{
o.onmousedown = Drag.start;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.root.style.top);
var x = parseInt(o.root.style.left);
o.root.onDragStart(x, y, Drag.obj.root);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
Drag.obj.root.style["z-index"] = "10";
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.root.style.top);
var x = parseInt(o.root.style.left);
var nx, ny;
if (o.minX != null) ex = Math.max(ex, o.minMouseX);
if (o.maxX != null) ex = Math.min(ex, o.maxMouseX);
if (o.minY != null) ey = Math.max(ey, o.minMouseY);
if (o.maxY != null) ey = Math.min(ey, o.maxMouseY);
nx = x + (ex - o.lastMouseX);
ny = y + (ey - o.lastMouseY);
Drag.obj.root.style["left"] = nx + "px";
Drag.obj.root.style["top"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny, Drag.obj.root);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.style["z-index"] = "0";
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style["left"]),
parseInt(Drag.obj.root.style["top"]), Drag.obj.root);
Drag.obj = null;
},
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;
}
};
You can grab me by the title, and drag me around. Baby.
Alternatively, dragn can be used as a plugin. Just copy the [[Draggable]] tiddler, and tag it with systemConfig. Then add the [[StyleSheet]] entries to your style sheet. Not pretty yet, but easy to install. Does not work in Safari.
A pretty implementation, with folding, can be seen here: [[siglet|http://www.cs.utexas.edu/~joeraii/siglet]]
dragn
drag-n-drop reordering
.title { position: relative; cursor:move;}
.tiddler { position: relative; }
.viewer { background:white; }