· 5 years ago · Feb 25, 2020, 01:58 PM
1<!-- view-source:https://web.archive.org/web/20041001040926/http://www.tiddlywiki.com/ -->
2<!-- TiddlyWiki 1.0 copyright by Jeremy Ruston, 20 September 2004 -->
3<!-- jeremy (at) osmosoft (dot) com -->
4<!-- This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike License.
5 To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/2.0/ or send
6 a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. -->
7<html>
8<head><script src="//archive.org/includes/analytics.js?v=cf34f82" type="text/javascript"></script>
9<script type="text/javascript">window.addEventListener('DOMContentLoaded',function(){var v=archive_analytics.values;v.service='wb';v.server_name='wwwb-app100.us.archive.org';v.server_ms=523;archive_analytics.send_pageview({});});</script><script type="text/javascript" src="/_static/js/ait-client-rewrite.js" charset="utf-8"></script>
10<script type="text/javascript">
11WB_wombat_Init("https://web.archive.org/web/", "20041001040926", "www.tiddlywiki.com:80");
12</script>
13<script type="text/javascript" src="/_static/js/wbhack.js" charset="utf-8"></script>
14<script type="text/javascript">
15__wbhack.init('https://web.archive.org/web');
16</script>
17<link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css" />
18<link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css" />
19<!-- End Wayback Rewrite JS Include -->
20
21<title>TiddlyWiki</title>
22<script type="text/javascript">
23
24// ---------------------------------------------------------------------------------
25// Main
26// ---------------------------------------------------------------------------------
27
28function main()
29{
30 // Do the header, menu and sidebar
31 refreshAll();
32 // Display the StartHere tiddler
33 displayTiddler(null,'StartHere',1);
34}
35
36// ---------------------------------------------------------------------------------
37// Tiddler functions
38// ---------------------------------------------------------------------------------
39
40// Display a tiddler with animation and scrolling, as though a link to it has been clicked on
41// src = source element object (eg link) for animation effects and positioning
42// title = title of tiddler to display
43// state = 0 is default or current state, 1 is read only and 2 is edittable
44function displayTiddler(src,title,state)
45{
46 // Figure out the tiddler this one must go after
47 var after = findContainingTiddler(src);
48 //alert(after);
49 // Create the tiddler if needed
50 var theTiddler = createTiddler(title,state,after);
51 // Make it invisible if we got here on an event
52 if(src != null)
53 theTiddler.style.opacity = 0;
54 // Ensure the new tiddler is visible
55 ensureVisible(theTiddler);
56 // Animate from the target of the event that followed the link
57 if(src)
58 {
59 // Set the text of the floater to match the title
60 var floater = document.getElementById("floater");
61 var floaterTitle = document.createTextNode(title);
62 floater.replaceChild(floaterTitle,floater.firstChild);
63 // Animate the floater from the link location to the location of the new tiddler
64 startZoomer(floater,src,theTiddler);
65 }
66}
67
68// Create a tiddler if it doesn't exist (with no fancy animating). The tiddler is invisible unless it was already visible
69// title = title of tiddler to display
70// state = 0 is default or current state, 1 is read only and 2 is edittable
71// after = optional existing tiddler element to put the new one after
72function createTiddler(title,state,after)
73{
74 // See if the tiddler div is already there
75 var theTiddler = document.getElementById("tiddler" + title);
76 if(!theTiddler)
77 {
78 // If it's not there, create the tiddler header
79 theTiddler = createTiddlerHeader(title,after);
80 // Create the tiddler body appropriately
81 if(state != 2)
82 createTiddlerBody(theTiddler,title);
83 else
84 createTiddlerEditor(theTiddler,title);
85 }
86 else
87 {
88 // If the tiddler does exist, make sure that it's in the right state
89 var theBody = document.getElementById("body" + title);
90 var theEditor = document.getElementById("editor" + title);
91 // Create and delete as appropriate
92 switch (state)
93 {
94 case 0: // For default state, leave everything alone
95 break;
96 case 1: // For read-only state, delete any editor
97 if(!theBody)
98 {
99 if(theEditor)
100 theEditor.parentNode.removeChild(theEditor);
101 createTiddlerBody(theTiddler,title);
102 }
103 break;
104 case 2: // For editor state, delete any read-only body
105 if(!theEditor)
106 {
107 if(theBody)
108 theBody.parentNode.removeChild(theBody);
109 createTiddlerEditor(theTiddler,title);
110 }
111 break;
112 }
113 }
114 // Return the completed tiddler
115 return(theTiddler);
116}
117
118// Create an invisible common header section of a tiddler
119// title = title of tiddler to display
120// after = optional existing tiddler element to put the new one after
121function createTiddlerHeader(title,after)
122{
123 // Create the tiddler div
124 theTiddler = createTiddlyElement(null,"div","tiddler",null);
125 theTiddler.setAttribute("id","tiddler" + title);
126 theTiddler.onmouseover = onMouseOverTiddler;
127 theTiddler.onmouseout = onMouseOutTiddler;
128 theTiddler.ondblclick = onDblClickTiddler;
129 // Get the subtitle
130 var subtitle = getTiddlerSubtitle(title);
131 theTiddler.title = subtitle;
132 // Link it in
133 var place = document.getElementById("tiddlerDisplay");
134 if(after)
135 {
136 if(after.nextSibling)
137 place.insertBefore(theTiddler,after.nextSibling);
138 else
139 place.appendChild(theTiddler);
140 }
141 else
142 {
143 if(place.firstChild)
144 place.insertBefore(theTiddler,place.firstChild);
145 else
146 place.appendChild(theTiddler);
147 }
148 // Create the anchor
149 var theAnchor = createTiddlyElement(theTiddler,"a",null,null);
150 theAnchor.setAttribute("name","link" + title);
151 // Create the title
152 var theTitle = createTiddlyElement(theTiddler,"div","title",title);
153 theTitle.setAttribute("id","title" + title);
154 // Return the created tiddler
155 return(theTiddler);
156}
157
158// Create a tiddler toolbar according to whether it's an editor or not
159function createTiddlerToolbar(title,editor)
160{
161 // Delete any existing toolbar
162 var theToolbar = document.getElementById("toolbar" + title);
163 if(theToolbar)
164 theToolbar.parentNode.removeChild(theToolbar);
165 // Create the toolbar
166 var theTitle = document.getElementById("title" + title);
167 var theToolbar = createTiddlyElement(theTitle,"div","toolbar", String.fromCharCode(160));
168 theToolbar.setAttribute("id","toolbar" + title);
169 // Create each button in turn
170 if(!editor)
171 {
172 // Non-editor toolbar
173 createTiddlyButton(theToolbar,
174 "close",
175 "Close this tiddler",
176 onClickToolbarClose);
177 theToolbar.appendChild(document.createTextNode(String.fromCharCode(160)));
178 createTiddlyButton(theToolbar,
179 "link",
180 "Permalink for this tiddler",
181 onClickToolbarLink);
182 theToolbar.appendChild(document.createTextNode(String.fromCharCode(160)));
183 createTiddlyButton(theToolbar,
184 "edit",
185 "Edit this tiddler",
186 onClickToolbarEdit);
187 }
188 else
189 {
190 // Editor toolbar
191 createTiddlyButton(theToolbar,
192 "done",
193 "Finish changing this tiddler",
194 onClickToolbarSave);
195 theToolbar.appendChild(document.createTextNode(String.fromCharCode(160)));
196 createTiddlyButton(theToolbar,
197 "undo",
198 "Undo changes to this tiddler",
199 onClickToolbarUndo);
200 theToolbar.appendChild(document.createTextNode(String.fromCharCode(160)));
201 createTiddlyButton(theToolbar,
202 "delete",
203 "Delete this tiddler",
204 onClickToolbarDelete);
205 }
206}
207
208// Create the body section of a read-only tiddler
209function createTiddlerBody(place,title)
210{
211 // Create the toolbar
212 createTiddlerToolbar(title,false);
213 // Get the body of the tiddler
214 var tiddlerText = getTiddlerText(title);
215 var tiddlerExists = (tiddlerText != null);
216 if(!tiddlerExists)
217 tiddlerText = "[This tiddler doesn't yet exist. Double-click to create it]";
218 // Create the body
219 var theBody = createTiddlyElement(place,"div","body",null);
220 theBody.setAttribute("id","body" + title);
221 if(!tiddlerExists)
222 theBody.style.fontStyle = "italic";
223 // Add the body text wikifing the links
224 wikify(tiddlerText,theBody);
225}
226
227// Create the body section of a read-only tiddler
228function createTiddlerEditor(place,title)
229{
230 // Create the toolbar
231 createTiddlerToolbar(title,true);
232 // Get the body of the tiddler
233 var tiddlerText = getTiddlerText(title);
234 var tiddlerExists = (tiddlerText != null);
235 if(!tiddlerExists)
236 tiddlerText = "Type the text for '" + title + "' here.";
237 // Create the editor div
238 var theEditor = createTiddlyElement(place,"div","editor",null);
239 theEditor.setAttribute("id","editor" + title);
240 // Create the title editor
241 var theTitle = createTiddlyElement(theEditor,"div",null,null);
242 var theTitleBox = createTiddlyElement(theTitle,"input",null,null);
243 theTitleBox.setAttribute("id","editorTitle" + title);
244 theTitleBox.setAttribute("type","text");
245 theTitleBox.value = title;
246 theTitleBox.setAttribute("size","40");
247 // Do the body
248 var theBody = createTiddlyElement(theEditor,"div",null,null);
249 var theBodyBox = createTiddlyElement(theBody,"textarea",null,null);
250 theBodyBox.value = tiddlerText;
251 theBodyBox.setAttribute("id","editorBody" + title);
252 theBodyBox.setAttribute("rows","10");
253 theBodyBox.setAttribute("cols","50");
254}
255
256// Create child text nodes and link elements to represent a wiki-fied version of some text
257function wikify(text,parent)
258{
259 // Link patterns
260 var upperLetter = "[A-Z]";
261 var lowerLetter = "[a-z]";
262 var anyLetter = "[A-Za-z_0-9]";
263 var linkPattern = upperLetter + "+" + lowerLetter + "+" + upperLetter + anyLetter + "*";
264 var urlPattern = "(?:http|https|mailto|ftp):\\S*";
265 var breakPattern = "\\n";
266 // Create the RegExp object
267 var theRegExp = new RegExp("(" + linkPattern + ")|(" + urlPattern + ")|(" + breakPattern + ")","mg");
268 // Set the position after the last match
269 var lastMatch = 0;
270 // Loop through the bits of the body text
271 do {
272 // Get the next match
273 var theMatch = theRegExp.exec(text);
274 if(theMatch)
275 {
276 // If so, dump out any text before the link
277 if(theMatch.index > lastMatch)
278 parent.appendChild(document.createTextNode(text.substring(lastMatch,theMatch.index)));
279 lastMatch = theRegExp.lastIndex;
280 // Dump out the link itself in the appropriate format
281 if(theMatch[1])
282 createTiddlyLink(parent,theMatch[0],true);
283 else if(theMatch[2])
284 createExternalLink(parent,theMatch[0]);
285 else if(theMatch[3])
286 parent.appendChild(document.createElement("br")); }
287 else
288 {
289 // If no match, just dump out the remaining text
290 parent.appendChild(document.createTextNode(text.substring(lastMatch)));
291 }
292 } while(theMatch != null);
293}
294
295function saveTiddler(title)
296{
297 // Get the title and body text
298 var theNewTitle = document.getElementById("editorTitle" + title).value;
299 var theNewBody = document.getElementById("editorBody" + title).value;
300 // Remove any existing entry from the store
301 var theExisting = document.getElementById("store" + title);
302 if(theExisting)
303 theExisting.parentNode.removeChild(theExisting);
304 // Create the new entry in the store
305 var place = document.getElementById("storeArea");
306 var storeItem = createTiddlyElement(place,"div",null,theNewBody);
307 storeItem.setAttribute("id","store" + theNewTitle);
308 var now = new Date();
309 storeItem.setAttribute("modified",ConvertToYYYYMMDDHHMM(now));
310 storeItem.setAttribute("modifier","JeremyRuston");
311 // Display the new tiddler read-only
312 displayTiddler(null,theNewTitle,1,null);
313 // Refresh the menu and sidebars to take it into account
314 refreshAll();
315}
316
317function selectTiddler(title)
318{
319 // Change the background colour
320 var e = document.getElementById("tiddler" + title);
321 if(e != null)
322 e.className = "tiddlerSelected";
323 // Make the toolbar visible
324 e = document.getElementById("toolbar" + title);
325 if(e != null)
326 e.style.visibility = "visible";
327}
328
329function deselectTiddler(title)
330{
331 // Change the background colour
332 var e = document.getElementById("tiddler" + title);
333 if(e != null)
334 e.className = "tiddler";
335 // Make the toolbar invisible
336 e = document.getElementById("toolbar" + title);
337 if(e != null)
338 e.style.visibility = "hidden";
339}
340
341function deleteTiddler(title)
342{
343 // Remove the tiddler from the display
344 closeTiddler(title);
345 // Delete it from the store
346 var tiddler = document.getElementById("store" + title);
347 if(tiddler)
348 tiddler.parentNode.removeChild(tiddler);
349 // Refresh the menu and sidebars to take it into account
350 refreshAll();
351}
352
353function closeTiddler(title)
354{
355 var tiddler = document.getElementById("tiddler" + title);
356 if(tiddler != null)
357 tiddler.parentNode.removeChild(tiddler);
358}
359
360function closeAllTiddlers()
361{
362 // Delete all the elements in the displayArea
363 var e = document.getElementById("tiddlerDisplay");
364 while(e.firstChild != null)
365 e.removeChild(e.firstChild);
366}
367
368// ---------------------------------------------------------------------------------
369// Tiddler-related utility functions
370// ---------------------------------------------------------------------------------
371
372function getTiddlerText(title)
373{
374 // Attempt to retrieve it from the store
375 var tiddlerStore = document.getElementById("store" + title);
376 if(tiddlerStore != null)
377 return(tiddlerStore.firstChild.nodeValue);
378 else
379 return(null);
380}
381
382function getTiddlerSubtitle(title)
383{
384 var tiddlerStore = document.getElementById("store" + title);
385 if(tiddlerStore != null)
386 {
387 var theModifier = tiddlerStore.getAttribute("modifier");
388 if(!theModifier)
389 theModifier = "(unknown)";
390 var theModified = tiddlerStore.getAttribute("modified");
391 if(theModified)
392 theModified = ConvertFromYYYYMMDDHHMM(theModified);
393 else
394 theModified = "(unknown)";
395 return("Modified by " + theModifier + " on " + theModified);
396 }
397 else
398 return(null);
399}
400
401function createTiddlyElement(theParent,theElement,theClass,theText)
402{
403 var e = document.createElement(theElement);
404 if(theClass != null)
405 e.className = theClass;
406 if(theText != null)
407 e.appendChild(document.createTextNode(theText));
408 if(theParent != null)
409 theParent.appendChild(e);
410 return(e);
411}
412
413function createTiddlyButton(theParent,theText,theTooltip,theAction)
414{
415 var theButton = document.createElement("a");
416 theButton.onclick = theAction;
417 theButton.setAttribute("href","JavaScript:;");
418 theButton.setAttribute("title",theTooltip);
419 theButton.appendChild(document.createTextNode(theText));
420 theParent.appendChild(theButton);
421 return(theButton);
422}
423
424// Create a link to a tiddler
425function createTiddlyLink(place,title,styleIt)
426{
427 // Figure out if the wiki word exists
428 var btn;
429 if(getTiddlerText(title) == null)
430 {
431 // If it does not exist
432 btn = createTiddlyButton(place,title,
433 title + " doesn't yet exist",
434 onClickTiddlerLink);
435 if(styleIt)
436 btn.style.fontStyle = "italic";
437 }
438 else
439 {
440 // If it does exist
441 btn = createTiddlyButton(place,title,
442 getTiddlerSubtitle(title),
443 onClickTiddlerLink);
444 if(styleIt)
445 btn.style.fontWeight = "bold";
446 }
447}
448
449// Create an external link
450function createExternalLink(place,url)
451{
452 var theLink = document.createElement("a");
453 theLink.setAttribute("href",url);
454 theLink.setAttribute("title","External link to " + url);
455 theLink.setAttribute("target","_blank");
456 theLink.appendChild(document.createTextNode(url));
457 place.appendChild(theLink);
458}
459
460// Find the tiddler instance (if any) containing a specified element
461function findContainingTiddler(e)
462{
463 if(e == null)
464 return(null);
465 do {
466 if(e != document)
467 {
468 if(e.id)
469 if(e.id.substr(0,7) == "tiddler")
470 return(e);
471 }
472 e = e.parentNode;
473 } while(e != document);
474 return(null);
475}
476
477// ---------------------------------------------------------------------------------
478// Menu and sidebar functions
479// ---------------------------------------------------------------------------------
480
481// Refresh everything
482function refreshAll()
483{
484 refreshHeader();
485 refreshMenu();
486 refreshSidebar();
487}
488
489// Refresh all parts of the header
490function refreshHeader()
491{
492 // Get the site title and subtitle
493 var theTitle = getTiddlerText("SiteTitle");
494 var theSubtitle = getTiddlerText("SiteSubtitle");
495 // Set the page title
496 document.title = theTitle + " - " + theSubtitle;
497 // Do the title
498 var place = document.getElementById("headerTitle");
499 while(place.firstChild != null)
500 place.removeChild(place.firstChild);
501 wikify(theTitle,place);
502 // Do the subtitle
503 var place = document.getElementById("headerSubtitle");
504 while(place.firstChild != null)
505 place.removeChild(place.firstChild);
506 wikify(theSubtitle,place);
507}
508
509// Refresh all parts of the main menu
510function refreshMenu()
511{
512 var place = document.getElementById("leftMenuMain");
513 while(place.firstChild != null)
514 place.removeChild(place.firstChild);
515 var theMenu = document.createElement("div");
516 place.appendChild(theMenu);
517 wikify(getTiddlerText("MainMenu"),theMenu);
518}
519
520// Refresh all parts of the sidebar
521function refreshSidebar()
522{
523 // Get names and dates of all tiddlers from the store
524 var allTiddlers = new Array(); // Will be an array of 2-entry arrays, where entry 0 = name, 1 = date
525 var storeNodes = document.getElementById("storeArea").childNodes;
526 for (var t = 0; t < storeNodes.length; t++)
527 {
528 var n = storeNodes[t];
529 if(n.id)
530 if(n.id.substr(0,5) == "store")
531 allTiddlers.push(new Array(n.id.substr(5),n.getAttribute("modified")));
532 }
533 // Sort the tiddlers by name
534 allTiddlers.sort(function (a,b) { if(a[0] == b[0]) return(0); else return (a[0] > b[0]) ? +1 : -1; });
535 // Delete any existing entries in the 'all' list
536 var place = document.getElementById("sidebarAllTiddlers");
537 while(place.firstChild != null)
538 place.removeChild(place.firstChild);
539 // Output the links
540 var separator = false;
541 for (t = 0; t < allTiddlers.length; t++)
542 {
543 if(separator)
544 place.appendChild(document.createElement("br"));
545 createTiddlyLink(place,allTiddlers[t][0],false)
546 separator = true;
547 }
548 // Sort the tiddlers by date
549 allTiddlers.sort(function (a,b) { if(a[1] == b[1]) return(1); else return (a[1] < b[1]) ? +1 : -1; });
550 // Delete any existing entries in the 'recent' list
551 var place = document.getElementById("sidebarRecentTiddlers");
552 while(place.firstChild != null)
553 place.removeChild(place.firstChild);
554 // Output the most recent few as links
555 var separator = false;
556 var inList = 5;
557 if (allTiddlers.length < inList)
558 inList = allTiddlers.length;
559 for (t = 0; t < inList; t++)
560 {
561 if(separator)
562 place.appendChild(document.createElement("br"));
563 createTiddlyLink(place,allTiddlers[t][0],false)
564 separator = true;
565 }
566}
567
568// ---------------------------------------------------------------------------------
569// Quine (http://www.google.com/search?q=quine&ie=UTF-8&oe=UTF-8)
570// ---------------------------------------------------------------------------------
571
572// Get the text of the TiddlyWiki HTML file itself, incorporating new edits
573function ShowSource()
574{
575 // Create the popup window
576 var srcWindow = window.open("","sourceWindow","width=700,height=600");
577 var srcDocument = srcWindow.document;
578 // Jam in the text template
579 srcDocument.write("<html><head></head><body>" +
580 window.document.getElementById("saveMessage").innerHTML +
581 "</body></html>");
582 srcDocument.close();
583 // Get a reference to the text area
584 var theTextBox = srcDocument.getElementById("source");
585 // Jam in the current source
586 //theTextBox.value = "<html>\n" + window.document.getElementsByTagName("html")[0].innerHTML + "\n</html>";
587 theTextBox.value = window.document.getElementById("storeArea").innerHTML; // Optionally, add .replace(/\n+/g, "\n");
588 // Select the text in the textbox
589 theTextBox.focus();
590 theTextBox.select();
591;
592}
593
594// ---------------------------------------------------------------------------------
595// Event handlers
596// ---------------------------------------------------------------------------------
597
598// Event handler for clicking on the logo
599function onClickLogo(e)
600{
601 closeAllTiddlers();
602 displayTiddler(document.getElementById("headerTitle"),"StartHere",1);
603}
604
605// Event handler for clicking on a tiddly link
606function onClickTiddlerLink(e)
607{
608 // Get the text of the link
609 var title;
610 if(this.firstChild)
611 title = this.firstChild.nodeValue;
612 else if (this.nodeValue)
613 title = this.nodeValue;
614 // Display that tiddler
615 if(title)
616 displayTiddler(this,title,0);
617}
618
619// Event handler for mouse over a tiddler
620function onMouseOverTiddler(e)
621{
622 // Get the name of this tiddler
623 var tiddler;
624 if(this.id.substr(0,7) == "tiddler")
625 tiddler = this.id.substr(7);
626 // Select that tiddler
627 if(tiddler)
628 selectTiddler(tiddler);
629}
630
631// Event handler for mouse out of a tiddler
632function onMouseOutTiddler(e)
633{
634 // Get the name of this tiddler
635 var tiddler;
636 if(this.id.substr(0,7) == "tiddler")
637 tiddler = this.id.substr(7);
638 // Deselect that tiddler
639 if(tiddler)
640 deselectTiddler(tiddler);
641}
642
643// Event handler for double click on a tiddler
644function onDblClickTiddler(e)
645{
646 // Empty the current selection
647 if(document.selection)
648 document.selection.empty();
649 // Get the name of this tiddler
650 var tiddler;
651 if(this.id.substr(0,7) == "tiddler")
652 tiddler = this.id.substr(7);
653 // Deselect that tiddler
654 if(tiddler)
655 displayTiddler(null,tiddler,2);
656}
657
658// Event handler for clicking on toolbar close
659function onClickToolbarClose(e)
660{
661 // Close that tiddler
662 if(this.parentNode.id)
663 closeTiddler(this.parentNode.id.substr(7));
664}
665
666// Event handler for clicking on toolbar close
667function onClickToolbarDelete(e)
668{
669 // Close that tiddler
670 if(this.parentNode.id)
671 deleteTiddler(this.parentNode.id.substr(7));
672}
673
674// Event handler for clicking on toolbar link
675function onClickToolbarLink(e)
676{
677 // Close all other tiddlers
678 if(this.parentNode.id)
679 {
680 closeAllTiddlers();
681 displayTiddler(null,this.parentNode.id.substr(7),1);
682 }
683}
684
685// Event handler for clicking on toolbar close
686function onClickToolbarEdit(e)
687{
688 // Edit that tiddler
689 if(this.parentNode.id)
690 displayTiddler(null,this.parentNode.id.substr(7),2);
691}
692
693// Event handler for clicking on toolbar save
694function onClickToolbarSave(e)
695{
696 // Save that tiddler
697 if(this.parentNode.id)
698 saveTiddler(this.parentNode.id.substr(7));
699}
700
701// Event handler for clicking on toolbar save
702function onClickToolbarUndo(e)
703{
704 // Redisplay that tiddler in read-only mode
705 if(this.parentNode.id)
706 displayTiddler(null,this.parentNode.id.substr(7),1);
707}
708
709// ---------------------------------------------------------------------------------
710// Animation engine
711// ---------------------------------------------------------------------------------
712
713// Animation housekeeping
714var animating = 0; // Incremented at start of each animation, decremented afterwards. If zero, the interval timer is disabled
715var animaterID; // ID of the timer used for animating
716// 'zoomer' module of the animation engine that smoothly moves an element from the position/size of the start element to th etarget element
717var zoomerElement = null; // Element being shifted; null if none
718var zoomerStart; // Where we're shifting to
719var zoomerTarget; // Where we're shifting to
720var zoomerProgress; // 0..1 of how far we are
721var zoomerStep; // 0..1 of how much to shift each step
722
723// Start animation engine
724function startAnimating()
725{
726 if(animating++ == 0)
727 animaterID = window.setInterval("doAnimate();",25);
728}
729
730// Stop animation engine
731function stopAnimating()
732{
733 if(--animating == 0)
734 window.clearInterval(animaterID)
735}
736
737// Perform an animation engine tick, calling each of the known animation modules
738function doAnimate()
739{
740 if(zoomerElement != null)
741 doZoomer();
742}
743
744// Start moving the element 'e' from the position of the element 'start' to the position of the element 'target'
745function startZoomer(e,start,target)
746{
747 stopZoomer();
748 zoomerElement = e;
749 zoomerStart = start;
750 zoomerTarget = target;
751 zoomerProgress = 0;
752 zoomerStep = 0.08;
753 startAnimating();
754}
755
756// Stop any ongoing zoomer animation
757function stopZoomer()
758{
759 if(zoomerElement != null)
760 {
761 stopAnimating();
762 zoomerElement.style.visibility = "hidden";
763 zoomerElement = null;
764 }
765}
766
767// Perform a tick of the zoomer animation
768function doZoomer()
769{
770 zoomerProgress += zoomerStep;
771 if(zoomerProgress > 1.0)
772 stopZoomer();
773 else
774 {
775 zoomerTarget.style.opacity = zoomerProgress;
776 var f = slowInSlowOut(zoomerProgress);
777 var zoomerStartLeft = findPosX(zoomerStart);
778 var zoomerStartTop = findPosY(zoomerStart);
779 var zoomerStartWidth = zoomerStart.offsetWidth;
780 var zoomerStartHeight = zoomerStart.offsetHeight;
781 var zoomerTargetLeft = findPosX(zoomerTarget);
782 var zoomerTargetTop = findPosY(zoomerTarget);
783 var zoomerTargetWidth = zoomerTarget.offsetWidth;
784 var zoomerTargetHeight = zoomerTarget.offsetHeight;
785 zoomerElement.style.left = zoomerStartLeft + (zoomerTargetLeft-zoomerStartLeft) * f;
786 zoomerElement.style.top = zoomerStartTop + (zoomerTargetTop-zoomerStartTop) * f;
787 zoomerElement.style.width = zoomerStartWidth + (zoomerTargetWidth-zoomerStartWidth) * f;
788 zoomerElement.style.height = zoomerStartHeight + (zoomerTargetHeight-zoomerStartHeight) * f;
789 zoomerElement.style.visibility = "visible";
790 }
791}
792
793// ---------------------------------------------------------------------------------
794// Standalone utility functions
795// ---------------------------------------------------------------------------------
796
797// Return a date in UTC YYYYMMDDHHMM format
798function ConvertToYYYYMMDDHHMM(d)
799{
800 return(d.getFullYear() + '' + (d.getMonth() <= 9 ? '0' : '') + (d.getMonth() + 1) + '' + (d.getDate() <= 9 ? '0' : '') + d.getDate() + (d.getHours() <= 9 ? '0' : '') + d.getHours() + (d.getMinutes() <= 9 ? '0' : '') + d.getMinutes());
801}
802
803// Convert a date in UTC YYYYMMDDHHMM format to printable local time
804function ConvertFromYYYYMMDDHHMM(d)
805{
806 var theDate = new Date(parseInt(d.substr(0,4),10),
807 parseInt(d.substr(4,2),10)-1,
808 parseInt(d.substr(6,2),10),
809 parseInt(d.substr(8,2),10),
810 parseInt(d.substr(10,2),10),0,0);
811 return(theDate.toLocaleString());
812}
813
814// Map a 0..1 value to 0..1, but slow down at the start and end
815function slowInSlowOut(progress)
816{
817 return(1-((Math.cos(progress * Math.PI)+1)/2));
818}
819
820// Scroll if necessary to ensure that a given element is visible
821function ensureVisible(e)
822{
823 // The position we're trying to scroll into view; the top of it...
824 var posY = findPosY(e);
825 // ...or, if the element will fit on the screen, the bottom of it
826 if(e.offsetHeight < window.innerHeight)
827 posY += e.offsetHeight;
828 // Make sure the chosen position is visible
829 if ((posY < window.scrollY) || (posY > (window.scrollY + window.innerHeight)))
830 window.scrollTo(0,posY);
831}
832
833// From QuirksMode.com
834function findPosX(obj)
835{
836 var curleft = 0;
837 if (obj.offsetParent)
838 {
839 while (obj.offsetParent)
840 {
841 curleft += obj.offsetLeft
842 obj = obj.offsetParent;
843 }
844 }
845 else if (obj.x)
846 curleft += obj.x;
847 return curleft;
848}
849
850// From QuirksMode.com
851function findPosY(obj)
852{
853 var curtop = 0;
854 if (obj.offsetParent)
855 {
856 while (obj.offsetParent)
857 {
858 curtop += obj.offsetTop
859 obj = obj.offsetParent;
860 }
861 }
862 else if (obj.y)
863 curtop += obj.y;
864 return curtop;
865}
866
867// ---------------------------------------------------------------------------------
868// End of scripts
869// ---------------------------------------------------------------------------------
870
871</script>
872<style type="text/css">
873
874body {
875 background-color: #ffffff;
876 font-size: 9pt;
877 font-family: tahoma,arial,helvetica;
878 margin: 0px 0px 0px 0px;
879}
880
881img {
882 border: none;
883}
884
885#header {
886 width: 789px;
887 margin: 0px 16px 16px 16px;
888 padding: 6px 6px 6px 6px;
889 border-bottom: 2px solid #4d5577;
890 background-color: #a2b3f9;
891 font-size: 16pt;
892 text-shadow: #4d5577 3px 3px 8px;
893}
894
895#headerTitle {
896 font-size: 30pt;
897 font-weight: bold;
898}
899
900#headerSubtitle {
901 font-family: georgia,times;
902 font-style: italic;
903 color: #4d5577;
904}
905
906#header a:link, #header a:visited {
907 text-decoration: none;
908 color: #000000;
909}
910
911#leftMenu {
912 float: left;
913 width: 127px;
914 background: #fbe9a2;
915 color: black;
916 text-align: right;
917 border: 1px dotted #46412d;
918 margin: 0px 6px 16px 16px;
919}
920
921#leftMenu div {
922 font-size: 10pt;
923 padding: 6px 6px 6px 6px;
924 overflow: hidden;
925 line-height: 140%;
926}
927
928#leftMenu a:link, #leftMenu a:visited {
929 text-decoration: none;
930 color: #46412d;
931}
932
933#leftMenu a:hover {
934 color: #fbe9a2;
935 background-color: #46412d;
936}
937
938#sidebar {
939 float: left;
940 width: 145px;
941 margin: 0px 0px 0px 6px;
942 padding: 6px 6px 6px 6px;
943 color: #777777;
944 font-size: 8pt;
945 background-color: #ffffff;
946 border-left: 1px solid #777777;
947}
948
949#sidebar a:link, #sidebar a:visited {
950 color: #777777;
951 text-decoration: none;
952}
953
954#sidebar a:hover {
955 color: blue;
956 text-decoration: underline;
957}
958
959#displayArea {
960 float: left;
961 width: 511px;
962}
963
964.tiddler {
965 font-family: georgia,times;
966 padding: 8px 8px 8px 8px;
967 background-color: #ffffff;
968}
969
970.tiddlerSelected {
971 font-family: georgia,times;
972 padding: 8px 8px 8px 8px;
973 background-color: #d5e7ff;
974}
975
976.title {
977 font-family: tahoma,arial,helvetica;
978 font-size: 10pt;
979 color: #5d1914;
980 font-weight: bold;
981 display: inline;
982 text-shadow: #AAAAAA 3px 3px 3px;
983}
984
985.body {
986 padding-top: 2px;
987 font-size: 10pt;
988}
989
990.body a:link, .body a:visited {
991 color: #482d94;
992 text-decoration: underline;
993}
994
995.body a:hover {
996 color: white;
997 background-color: #482d94;
998 text-decoration: none;
999}
1000
1001.editor {
1002 font-size: 8pt;
1003 color: #402C74;
1004 font-weight: normal;
1005 padding-bottom: 0px;
1006 border-bottom: 0px solid #999999;
1007 margin-bottom: 0px;
1008}
1009
1010.toolbar {
1011 text-shadow: none;
1012 font-weight: normal;
1013 font-size: 8pt;
1014 margin-left: 6px;
1015 padding: 0px 0px 0px 0px;
1016 color: #aaaaaa;
1017 display: inline;
1018 visibility: hidden;
1019}
1020
1021.toolbar A {
1022 color: #888888;
1023 text-decoration: none;
1024}
1025
1026.toolbar A:hover {
1027 color: #000000;
1028}
1029
1030.toolbar A:active {
1031 color: #666666;
1032}
1033
1034#saveMessage, #storeArea, #copyright {
1035 display: none;
1036}
1037
1038#storeArea {
1039 display: none;
1040}
1041
1042#floater {
1043 font-size: 10pt;
1044 visibility: hidden;
1045 color: white;
1046 background-color: #b8b896;
1047 position: absolute;
1048 padding: 8px 8px 8px 8px;
1049 opacity: 0.5;
1050 filter: alpha(opacity=50);
1051}
1052
1053</style>
1054</head>
1055<body onload="main()"><!-- BEGIN WAYBACK TOOLBAR INSERT -->
1056<script type="text/javascript" src="/_static/js/timestamp.js" charset="utf-8"></script>
1057<script type="text/javascript" src="/_static/js/graph-calc.js" charset="utf-8"></script>
1058<script type="text/javascript" src="/_static/js/auto-complete.js" charset="utf-8"></script>
1059<script type="text/javascript" src="/_static/js/toolbar.js" charset="utf-8"></script>
1060<style type="text/css">
1061body {
1062 margin-top:0 !important;
1063 padding-top:0 !important;
1064 /*min-width:800px !important;*/
1065}
1066.wb-autocomplete-suggestions {
1067 text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
1068 position: absolute; display: none; z-index: 2147483647; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
1069}
1070.wb-autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
1071.wb-autocomplete-suggestion b { font-weight: bold; }
1072.wb-autocomplete-suggestion.selected { background: #f0f0f0; }
1073</style>
1074<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;">
1075<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
1076<div id="wm-ipp-inside">
1077 <div style="position:relative;">
1078 <div id="wm-logo" style="float:left;width:130px;padding-top:10px;">
1079 <a href="/web/" title="Wayback Machine home page"><img src="/_static/images/toolbar/wayback-toolbar-logo.png" alt="Wayback Machine" width="110" height="39" border="0" /></a>
1080 </div>
1081 <div class="r" style="float:right;">
1082 <div id="wm-btns" style="text-align:right;height:25px;">
1083 <div id="wm-save-snapshot-success">success</div>
1084 <div id="wm-save-snapshot-fail">fail</div>
1085 <a href="#"
1086 onclick="__wm.saveSnapshot('http://www.tiddlywiki.com/', '20041001040926')"
1087 title="Share via My Web Archive"
1088 id="wm-save-snapshot-open"
1089 >
1090 <span class="iconochive-web"></span>
1091 </a>
1092 <a href="https://archive.org/account/login.php"
1093 title="Sign In"
1094 id="wm-sign-in"
1095 >
1096 <span class="iconochive-person"></span>
1097 </a>
1098 <span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
1099 <a href="http://faq.web.archive.org/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
1100 <a id="wm-tb-close" href="#close" onclick="__wm.h(event);return false;" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
1101 </div>
1102 <div id="wm-share">
1103 <a href="/web/20041001040926/http://web.archive.org/screenshot/http://www.tiddlywiki.com/"
1104 id="wm-screenshot"
1105 title="screenshot">
1106 <span class="wm-icon-screen-shot"></span>
1107 </a>
1108 <a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://web.archive.org/web/20041001040926/http://www.tiddlywiki.com:80/', '', 'height=400,width=600'); return false;" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
1109 <a href="#" onclick="window.open('https://twitter.com/intent/tweet?text=https://web.archive.org/web/20041001040926/http://www.tiddlywiki.com:80/&via=internetarchive', '', 'height=400,width=600'); return false;" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
1110 </div>
1111 </div>
1112 <table class="c" style="">
1113 <tbody>
1114 <tr>
1115 <td class="u" colspan="2">
1116 <form target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="http://www.tiddlywiki.com/" onfocus="this.focus();this.select();" /><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20041001040926" /><input type="submit" value="Go" /></form>
1117 </td>
1118 <td class="n" rowspan="2" style="width:110px;">
1119 <table>
1120 <tbody>
1121 <!-- NEXT/PREV MONTH NAV AND MONTH INDICATOR -->
1122 <tr class="m">
1123 <td class="b" nowrap="nowrap">Sep</td>
1124 <td class="c" id="displayMonthEl" title="You are here: 04:09:26 Oct 01, 2004">OCT</td>
1125 <td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20041105024753/http://www.tiddlywiki.com:80/" title="05 Nov 2004"><strong>Nov</strong></a></td>
1126 </tr>
1127 <!-- NEXT/PREV CAPTURE NAV AND DAY OF MONTH INDICATOR -->
1128 <tr class="d">
1129 <td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20040929121620/http://www.tiddlywiki.com:80/" title="12:16:20 Sep 29, 2004"><img src="/_static/images/toolbar/wm_tb_prv_on.png" alt="Previous capture" width="14" height="16" border="0" /></a></td>
1130 <td class="c" id="displayDayEl" style="width:34px;font-size:24px;white-space:nowrap;" title="You are here: 04:09:26 Oct 01, 2004">01</td>
1131 <td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20041009062148/http://www.tiddlywiki.com:80/" title="06:21:48 Oct 09, 2004"><img src="/_static/images/toolbar/wm_tb_nxt_on.png" alt="Next capture" width="14" height="16" border="0" /></a></td>
1132 </tr>
1133 <!-- NEXT/PREV YEAR NAV AND YEAR INDICATOR -->
1134 <tr class="y">
1135 <td class="b" nowrap="nowrap">2003</td>
1136 <td class="c" id="displayYearEl" title="You are here: 04:09:26 Oct 01, 2004">2004</td>
1137 <td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20051001060358/http://www.tiddlywiki.com:80/" title="01 Oct 2005"><strong>2005</strong></a></td>
1138 </tr>
1139 </tbody>
1140 </table>
1141 </td>
1142 </tr>
1143 <tr>
1144 <td class="s">
1145 <div id="wm-nav-captures">
1146 <a class="t" href="/web/20041001040926*/http://www.tiddlywiki.com/" title="See a list of every capture for this URL">2,914 captures</a>
1147 <div class="r" title="Timespan for captures of this URL">23 Sep 2004 - 17 Feb 2020</div>
1148 </div>
1149 </td>
1150 <td class="k">
1151 <a href="" id="wm-graph-anchor">
1152 <div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
1153 <canvas id="wm-sparkline-canvas" width="625" height="27" border="0"></canvas>
1154 </div>
1155 </a>
1156 </td>
1157 </tr>
1158 </tbody>
1159 </table>
1160 <div style="position:absolute;bottom:0;right:2px;text-align:right;">
1161 <a id="wm-expand" class="wm-btn wm-closed" href="#expand" onclick="__wm.ex(event);return false;"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span style="font-size:80%">About this capture</span></a>
1162 </div>
1163 </div>
1164 <div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
1165 <div style="background-color:#666;color:#fff;font-weight:bold;text-align:center">COLLECTED BY</div>
1166 <div style="padding:3px;position:relative" id="wm-collected-by-content">
1167 <div style="display:inline-block;vertical-align:top;width:50%;">
1168 <span class="c-logo" style="background-image:url(https://archive.org/services/img/alexacrawls);"></span>
1169 Organization: <a style="color:#33f;" href="https://archive.org/details/alexacrawls" target="_new"><span class="wm-title">Alexa Crawls</span></a>
1170 <div style="max-height:75px;overflow:hidden;position:relative;">
1171 <div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
1172 Starting in 1996, <a href="http://www.alexa.com/">Alexa Internet</a> has been donating their crawl data to the Internet Archive. Flowing in every day, these data are added to the <a href="http://web.archive.org/">Wayback Machine</a> after an embargo period.
1173 </div>
1174 </div>
1175 <div style="display:inline-block;vertical-align:top;width:49%;">
1176 <span class="c-logo" style="background-image:url(https://archive.org/services/img/alexa_dy)"></span>
1177 <div>Collection: <a style="color:#33f;" href="https://archive.org/details/alexa_dy" target="_new"><span class="wm-title">Alexa Crawls DY</span></a></div>
1178 <div style="max-height:75px;overflow:hidden;position:relative;">
1179 <div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
1180 Crawl data donated by Alexa Internet. This data is currently not publicly accessible
1181 </div>
1182 </div>
1183 </div>
1184 <div style="background-color:#666;color:#fff;font-weight:bold;text-align:center" title="Timestamps for the elements of this page">TIMESTAMPS</div>
1185 <div>
1186 <div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
1187 <div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="/_static/images/loading.gif" alt="loading" /></div>
1188 </div>
1189 </div></div></div></div><div id="donato" style="position:relative;width:100%;">
1190 <div id="donato-base">
1191 <iframe id="donato-if" src="https://archive.org/includes/donate.php?as_page=1&transpiled=0&referer=https%3A//web.archive.org/web/20041001040926/http%3A//www.tiddlywiki.com/"
1192 scrolling="no" frameborder="0" style="width:100%; height:100%">
1193 </iframe>
1194 </div>
1195</div><script type="text/javascript">
1196__wm.bt(625,27,25,2,"web","http://www.tiddlywiki.com/","2004-10-01",1996,"/_static/",['css/banner-styles.css','css/iconochive.css']);
1197__wm.checkScreenShot("http://www.tiddlywiki.com/", '20041001040926');
1198</script>
1199<!-- END WAYBACK TOOLBAR INSERT -->
1200 <div id="copyright">
1201 Welcome to TiddlyWiki, Copyright © 2004 Jeremy Ruston
1202 </div>
1203 <div id="header">
1204 <a id="headerTitle" href="https://web.archive.org/web/20041001040926/JavaScript:;" onclick="onClickLogo()"></a> <span id="headerSubtitle"></span>
1205 </div>
1206 <div id="leftMenu">
1207 <span id="leftMenuMain"></span>
1208 </div>
1209 <div id="displayArea">
1210 <div id="tiddlerDisplay"></div>
1211
1212 </div>
1213 <div id="floater"> </div>
1214 <div id="sidebar">
1215 <a href="javascript:ShowSource()"><strong>Save all</strong></a>
1216 <br> <br>
1217 <strong>Recent tiddlers:</strong> <br>
1218 <span id="sidebarRecentTiddlers"></span>
1219 <br> <br>
1220 <strong>All tiddlers:</strong> <br>
1221 <span id="sidebarAllTiddlers"></span>
1222 <br> <br>
1223 <strong>License:</strong> <br>
1224 <a rel="license" href="https://web.archive.org/web/20041001040926/http://creativecommons.org/licenses/by-nc-sa/2.0/">
1225 <!-- <img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights20.gif" /></a><br /> -->
1226This work is licensed under a <br> Creative Commons License</a>
1227 </div>
1228 <div id="saveMessage">
1229 <span style="font-size: 10pt; font-family: tahoma,arial,helvetica;">
1230 <p style="font-size: 18pt;">Ouch.</p>
1231 This is a bit of a hack. In an ideal world, clicking the save button should just give you
1232 a file save dialogue box and let you choose where to save your spanking new personal TiddlyWiki. Unfortunately
1233 doing stuff in web browsers is never that easy, and there's a couple of hoops to be jumped through. See below
1234 for a quick guide. <br> <br>
1235 <textarea id="source" rows="20" cols="80">(source code goes here)</textarea><br><br>
1236 The steps to save your changes as a new, standalone TiddlyWiki are simple, but can be error prone. <br> <br>
1237 1. Make sure that all the text is selected in the edit box above. Copy it to the clipboard.<br>
1238 2. Go back to the browser window showing your editted TiddlyWiki and save the HTML as a new file. <br>
1239 3. Open the HTML file in a text editor like Notepad. Scroll to the bottom and locate the marker lines picked out with a row of asterisks.<br>
1240 4. Select the text from just above that marker back up to the previous marker.<br>
1241 5. Paste the new text in.<br>
1242 6. Save the HTML file.<br>
1243 Suggestions or improvements welcome.
1244 <br> <br>
1245
1246
1247 </span>
1248 </div>
1249 <div id="storeArea">
1250<!-- ********************************************************************* -->
1251<!-- Paste your TiddlyWiki content between this marker and the one below -->
1252<!-- ********************************************************************* -->
1253
1254
1255
1256
1257
1258 <div id="storeWikiWord" modified="200409072350" modifier="JeremyRuston">A WikiWord is a word composed of a bunch of other words slammed together with each of their first letters capitalised. WikiWord notation in a WikiWikiWeb is used to name individual pages. Furthermore, referring to a page automatically creates a link to it. Clicking on a link jumps to that page or, if it doesn't exist, to an editor to create it. TiddlyWiki uses WikiWord titles for smaller chunks of MicroContent.</div>
1259
1260
1261 <div id="storeEmailMe" modified="200409072350" modifier="JeremyRuston">My email address is jeremy (at) osmosoft (dot) com</div>
1262
1263
1264 <div id="storeSiteTitle" modified="200409161548" modifier="JeremyRuston">TiddlyWiki</div>
1265
1266
1267 <div id="storeSiteSubtitle" modified="200409171651" modifier="JeremyRuston">a reusable non-linear personal web notebook</div>
1268
1269
1270 <div id="storeWishList" modified="200409181508" modifier="JeremyRuston">If you enjoy using TiddlyWiki, and are feel like being generous, it would be churlish of me to refuse anything that you might buy me from my Amazon wishlist http://www.amazon.co.uk/exec/obidos/registry/4PC7T6O1UEX0/ref=wl_em_to</div>
1271
1272
1273
1274 <div id="storeSkeletonInTheCloset" modified="200409201254" modifier="JeremyRuston">The embarrassing secret of TiddlyWiki is that although creating, editing and deleting content is very easy, saving a TiddlyWiki is annoyingly fiddly and complex. It's a consequence of the intentional limitations that browsers place on JavaScript code. Once TiddlyWiki has a ServerSide, it'll be fairly easy to implement painless saving. But, that will lose the considerable advantages of TiddlyWiki being a SelfContained HTML file.</div>
1275
1276
1277 <div id="storeWikiWikiWeb" modified="200409201307" modifier="JeremyRuston">A Wiki is a widely-used, mature way of building collaborative websites. It's based on the ideas of easy editting of pages and the use of special WikiWord notation to automagically create links between pages. See Wikipedia for more details: http://en.wikipedia.org/wiki/Wiki . TiddlyWiki is different from a conventional Wiki because it is not based on entire pages of content, but rather items of MicroContent that are referred to as 'tiddlers'.</div>
1278
1279
1280 <div id="storeTiddlyWikiDev" modified="200409201308" modifier="JeremyRuston">TiddlyWiki is my first serious piece of web client-side development. It makes extensive use of DynamicHTML, CascadingStyleSheets and JavaScript. I first developed it for Safari on Mac OS X, using SubEthaEdit as my text editor, and then tweaked it a bit to work in IE6 on Windows. It's not finished, and has many important MissingFeatures. I don't mind people ReusingThisSite, but do please EmailMe and let me know how you get on.</div>
1281
1282
1283 <div id="storeSubEthaEdit" modified="200409201316" modifier="JeremyRuston">SubEthaEdit at http://www.codingmonkeys.de/subethaedit/ is an amazing piece of software for Mac OS X. It's a neat little basic text editor with a few nicities such as colour-coding, but it's main reason for existence is the brilliantly implemented network-based collaborative editing features.</div>
1284
1285
1286 <div id="storeNoWarranty" modified="200409201438" modifier="JeremyRuston">TiddlyWiki is a spare time project that I'm making available under a Creative Commons License that allows you to do whatever you want with it, as long as you credit my original contribution. Accordingly, there's no warranty on it and you must use it at your own risk. I am interested in hearing about new bugs to add to the rather rapidly growing pile; just EmailMe.</div>
1287
1288
1289 <div id="storeUsingThisSite" modified="200409201442" modifier="JeremyRuston">Hopefully, reading a TiddlyWiki is fairly self explanatory. Within the main story column, click on bold links to read a linked tiddler. Click on italic links to create a new tiddler. When you hover the mouse over a tiddler it's highlighted and some extra options appear by the title: 'close' just closes the tiddler in question, 'link' does the opposite by closing all other tiddlers. Finally, 'edit' allows you to edit the text of any tiddler; changes are not reflected back to the server, though. See SavingStuff for more details.</div>
1290
1291
1292 <div id="storeSavingStuff" modified="200409201443" modifier="JeremyRuston">There's no funky ServerSide to TiddlyWiki yet; I'm just posting up a single, static HTML file. As a consequence it is impossible to permanently save changes to a TiddlyWiki back to the web server. Instead, you have to manually save changes using the 'Save all' link at the top right.</div>
1293
1294
1295 <div id="storeIncrementalSearch" modified="200409201445" modifier="JeremyRuston">One of the MissingFeatures I'm planning to add will be a text box in the right hand menu that allows you to type an incremental search phrase. The idea is that as you type a phrase, any tiddlers including the phrase will be automatically displayed with the phrase highlighted.</div>
1296
1297
1298 <div id="storeSelfContained" modified="200409201452" modifier="JeremyRuston">One of the neatest features of TiddlyWiki is that it is entirely self-contained in a single HTML file. It contains the actual hypertext document, and the JavaScript, CascadingStyleSheets and HTML necessary to both view and edit the document. This means that it is trivial to host a TiddlyWiki on a website, or to distribute one by email. And anyone with a reasonably recent web browser will be able to read and edit it.</div>
1299
1300
1301 <div id="storeCascadingStyleSheets" modified="200409201453" modifier="JeremyRuston">I'm no expert on CascadingStyleSheets so I suspect that much of my code could be improved in terms of correctness, compatibility and aesthetics. I'd love any feedback on making it work better across different browsers, and generally making it a little bit more elegant.</div>
1302
1303
1304 <div id="storeInterruptedEdits" modified="200409201456" modifier="JeremyRuston">TiddlyWiki is great at throwing away the content of outstanding, unsaved, edits. You can do it by clicking on the top-left logo, or by using 'refresh' in the browser. Ideally, I'd be trapping various events to save all edits as soon as they are made, and maintain older versions for undo purposes.</div>
1305
1306
1307 <div id="storeJavaScript" modified="200409201457" modifier="JeremyRuston">Before TiddlyWiki I hadn't really done any serious development in JavaScript. After all the horror stories that I've read, I was very pleasantly surprised by how straightforward it is to use JavaScript. Using it rather reminds me of BBC Basic on the TheBBCMicro; it exploits it's interpreted nature beautifully. The most useful resource I've found is this article: http://www.crockford.com/javascript/survey.html</div>
1308
1309
1310 <div id="storeLinkDifferentiation" modified="200409201458" modifier="JeremyRuston">It'd be great if links that you had already visited looked different, particularly in the right hand menu.</div>
1311
1312
1313 <div id="storeLinkRefreshing" modified="200409201458" modifier="JeremyRuston">When you create a new tiddler, references to it in the menus automatically change from italic to bold, but references in other open tiddlers do not.</div>
1314
1315
1316 <div id="storeMissingFeatures" modified="200409201459" modifier="JeremyRuston">New features that I'm thinking about for TiddlyWiki include LinkDifferentiation, SpecialLinkNames, SavingStuff, IncrementalSearch and implementing a ServerSide. I haven't really begun to think about VersionTracking or DifferencingDisplay. There's also some bugs like InterruptedEdits, CrazyScrolling, LinkRefreshing.</div>
1317
1318
1319 <div id="storeSpecialLinkNames" modified="200409201500" modifier="JeremyRuston">The idea with special link names is that a link in a certain format to a nonexistent tiddler, will create a page that's named with a variant of the link name. For example, a link to JournalEntry#now would create a journal entry with todays date appended. Other keywords could include #next (uses lowest available integer appendage), #me (uses username of logged in user). They'd appear as the name of the tiddler they would create if they were clicked (eg JournalEntry20040615 or ResumeJeremyRuston). These are not to be confused with SpecialTiddlers which are used to let you edit the menus and titles of a TiddlyWiki.</div>
1320
1321
1322 <div id="storeSpecialTiddlers" modified="200409201501" modifier="JeremyRuston">TiddlyWiki uses several special tiddlers to hold the text used for the MainMenu, the SiteTitle and the SiteSubtitle. Go ahead and edit them and see the results.</div>
1323
1324
1325 <div id="storeWritingStyle" modified="200409211824" modifier="JeremyRuston">I'm expecting that after using TiddlyWiki for a while a new WritingStyle will emerge that is appropriate for this medium. Jakob Neilsen wrote an article about writing styles for MicroContent back in 1998 that seems surprisingly relevant: http://www.useit.com/alertbox/980906.html</div>
1326
1327
1328 <div id="storeEasierReading" modified="200409211832" modifier="JeremyRuston">To make it easier to read a TiddlyWiki that you're interested in as it evolves, I plan to keep track of which tiddlers you've already read in a client-side cookie. Then, on the first visit when it creates the cookie, TiddlyWiki would open with WelcomeNewcomer. On subsequent visits, it would display the changed tiddlers in reverse date order, just like a blog.</div>
1329
1330
1331 <div id="storeDesignGoals" modified="200409211832" modifier="JeremyRuston">I want to make it as easy to read a TiddlyWiki as a blog: 'push' notification of changes in an RSS reader, and EasierReading that lets you sort through the stuff you've already read from the stuff you haven't. It won't be possible to do all of that without some ServerSide logic.</div>
1332
1333
1334
1335
1336 <div id="storeReusingThisSite" modified="200409240013" modifier="JeremyRuston">You can fairly easily take this TiddlyWiki, put in your own content and distribute it by email or by posting it on a web site. Anyway, to get your own content together all you need to do is CreateTiddlers, EditTiddlers and DeleteTiddlers. Then click the 'Save all' link at the top right of the page, and follow the instructions (glossing over the SkeletonInTheCloset). And, hey presto, you've got your own self contained TiddlyWiki. I'll try to collect OtherTiddlyWikis here, so do please EmailMe and let me know if you use it.</div>
1337
1338
1339
1340 <div id="storeMainMenu" modified="200409241925" modifier="JeremyRuston">StartHere UsingThisSite ReusingThisSite AdaptingThisSite TiddlyWiki TiddlyWikiDev
1341
1342
1343Copyright 2004 JeremyRuston</div>
1344
1345
1346
1347
1348 <div id="storeServerSide" modified="200409241930" modifier="JeremyRuston">TiddlyWiki doesn't have a server-side component at the moment. That means, amongst other things, that SavingStuff is hard. When I do implement a ServerSide, TiddlyWiki will lose the rather nice quality of being a SelfContained HTML file. Instead, though, I'll be able to add features like TrackBacks, RssFeeds, PublicEditting, IncomingHyperlinks, making TiddlyWiki a first-class citizen of the blogosphere. Actually, PatrickCurry and GabrielJeffrey have beaten me to it by AdaptingThisSite to incorporate a ServerSide already. Wow.</div>
1349
1350
1351
1352
1353
1354
1355 <div id="storeStartHere" modified="200409251840" modifier="JeremyRuston">Welcome to TiddlyWiki, an experimental MicroContent WikiWikiWeb built by JeremyRuston. It's written in HTML and JavaScript to run on any browser without needing any ServerSide logic. It allows anyone to create SelfContained hypertext documents that can be posted to any web server, or sent by email. If you like it, do please EmailMe and let me know. If you're interested in FuturePlans for TiddlyWiki, keep an eye on this site.</div>
1356
1357 <div id="storeFuturePlans" modified="200409251840" modifier="JeremyRuston">I hope to make a biggish update to the content over this weekend, and release a new version of the software in the middle of next week.</div>
1358
1359 <div id="storeMicroContent" modified="200409251844" modifier="JeremyRuston">MicroContent being a fashionable word for self-contained fragments of content that are typically smaller than entire pages. Often MicroContent is presented via some kind of aggregation that reduces the perceptual shock and resource cost of context switching (eg Blogs aggregating several entries onto a page or Flickr presenting photos in an album). This TiddlyWiki aggregates MicroContent items that I call 'tiddlers' into pages that are loaded in one gulp and progressively displayed as the user clicks hypertext links to read them.</div>
1360
1361 <div id="storeTiddlyWiki" modified="200409251845" modifier="JeremyRuston">A TiddlyWiki is like a blog because it's divided up into neat little chunks, but it encourages you to read it by hyperlinking rather than sequentially: if you like, a non-linear blog analogue that binds the individual microcontent items into a cohesive whole. I think that TiddlyWiki represents a novel medium for writing, and will promote it's own distinctive WritingStyle. This is the first version of TiddlyWiki and so, as discussed in TiddlyWikiDev, it's bound to be FullOfBugs, have many MissingFeatures and fail to meet all of the DesignGoals. And of course there's NoWarranty, and it might be judged a StupidName.</div>
1362
1363 <div id="storeStupidName" modified="200409251849" modifier="JeremyRuston">In the UK at least, a 'tiddler' would be understood to be a small fish that wasn't really worth catching. By extension, something 'tiddly' is just something diminuitive. So hopefully, TiddlyWiki isn't such a stupid name - I thought it had a bit of a ring to it, and might be memorable as well as apt.</div>
1364
1365 <div id="storeJeremyRuston" modified="200409251849" modifier="JeremyRuston">I'm Jeremy Ruston, a ChiefTechnologyOfficer based in London. I currently work for a small self-funded startup doing cool stuff for big financial institutions. Previously, I've worked for two VentureCapital backed startups as CTO, Interactive1 and Infuzer. Before that I did a stint in the City of London as Global Head of E-Commerce for a big european investment bank. Long, long ago I used to write computer books and do some computer animation for BBC Television. If you've got any comments or suggestions on this site, do please EmailMe.</div>
1366
1367
1368
1369 <div id="storeOtherTiddlyWikis" modified="200409301726" modifier="JeremyRuston">
1370I know of a couple of people ReusingThisSite: GinaTrapani has very coolly used TiddlyWiki to write a piece of non-linear fiction at http://scribbling.net/tiddlywiki-and-non-linear-fiction . Astonishingly, there's also a Japanese TiddlyWiki at http://www.100shiki.com/tw.html although I found that in Safari I had to manually set the text encoding to 'Japanese Shift JIS' before it displays properly. Not that I have any idea what it's saying, of course. It's since been joined by another very slick adaptation from Japan where IsaoSonobe is using as the documentation for OgreKit.</div>
1371 <div id="storeAdaptingThisSite" modified="200409301726" modifier="JeremyRuston">
1372I've published TiddlyWiki under a CreativeCommonsLicense, so anyone is free to adapt it, as long as you give me credit. PatrickCurry and GabrielJeffrey have done a storming job of adapting TiddlyWiki by adding a ServerSide in PHP: http://www.patrickcurry.com/tiddly/ Really nicely done, and they put it up within hours of my posting the original TiddlyWiki. Thanks guys. Also check out an elegant adaptation at OgreKit.</div>
1373 <div id="storeOgreKit" modified="200409301728" modifier="JeremyRuston">OgreKit is a regular expression framework created by IsaoSonobe. He's adapted TiddlyWiki for the documentation at http://www-gauge.scphys.kyoto-u.ac.jp/~sonobe/OgreKit/OgreKitWiki.html Using his regular expression wizardry he's also made several very interesting improvements to the rather primitive markup that TiddlyWiki uses.</div>
1374
1375<!-- ********************************************************************* -->
1376<!-- Paste your TiddlyWiki content between this marker and the one above -->
1377<!-- ********************************************************************* -->
1378 </div>
1379 </body>
1380</html>
1381<!--
1382 FILE ARCHIVED ON 04:09:26 Oct 01, 2004 AND RETRIEVED FROM THE
1383 INTERNET ARCHIVE ON 13:51:20 Feb 25, 2020.
1384 JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
1385
1386 ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
1387 SECTION 108(a)(3)).
1388-->
1389<!--
1390playback timings (ms):
1391 PetaboxLoader3.resolve: 73.074
1392 exclusion.robots.policy: 0.375
1393 esindex: 0.022
1394 captures_list: 380.238
1395 exclusion.robots: 0.386
1396 PetaboxLoader3.datanode: 245.006 (4)
1397 RedisCDXSource: 2.904
1398 LoadShardBlock: 262.044 (3)
1399 load_resource: 121.809
1400 CDXLines.iter: 29.942 (3)
1401-->