Welcome to TiddlyWiki created by Jeremy Ruston, Copyright © 2007 UnaMesa Association
To make quoted bits of text stand out, you can use BlockQuotes within your [[tiddler]]s, like this:
JeremyRuston said:
<<<
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.
<<<
Like BulletPoints and NumberedBulletPoints, you can have multiple levels of BlockQuotes. Just edit this tiddler to see how it's done.
>level 1
>level 1
>>level 2
>>level 2
>>>level 3
>>>level 3
>>level 2
>level 1
Creating BulletPoints is simple.
* Just add an asterisk
* at the beginning of a line.
** If you want to create sub-bullets
** start the line with two asterisks
*** And if you want yet another level
*** use three asterisks
* Edit this tiddler to see how it's done
* You can also do NumberedBulletPoints
You can wrap any text in an HTML {{{<span>}}} or {{{<div>}}} with a specified CSS class. This allows custom CSS styling in a nice, modular way. By placing a rule in your StyleSheet tiddler like {{{.wrappingClass{color: #666; background: #bbb} }}} you can markup a piece of text in the tiddler using this code:
{{{
{{wrappingClass{Text that is now accentuated}}}
}}}
{{wrappingClass{Text that is now accentuated}}}
By default, the text is placed in a {{{<span>}}}. To use a {{{<div>}}} instead, insert a line break before the text:
{{{
{{wrappingClass{
Text that is now accentuated}}}
}}}
{{wrappingClass{
Text that is now accentuated}}}
#Open up your own TiddlyWiki file
#In the top right, click on Backstage. If you don't have this, [[upgrade|http://www.tiddlywiki.com/#HowToUpgradeOlderTiddlyWikis]]. When done, bypass the next step and move onto step 4.
#If you do have Backstage, click on Upgrade and make sure you have the latest version of ~TiddlyWiki.
#Once upgraded, inside Backstage again, click on Import
#Inside the {{{Enter the URL or pathname here:}}} box, enter the URL of this ~TiddlyWiki, and hit enter
#Your ~TiddlyWiki will load all the Tiddlers it finds in this ~TiddlyWiki. Once done, go down the list and look at the tags (displayed in the far right column). Check all the tags with the 'systemConfig' tag, and tick the boxes of the plugins you want. Also note that the TagglyTaggingPlugin also has two other tiddlers you need to import.
#Once imported, click on the Plugins section (in Backstage)
#Click the checkboxes on the left hand side to activate the plugins (they will be activated on refresh)
#Save your ~TiddlyWiki and refresh the file
<div class='title' macro='view title'></div>
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='editor' macro='edit title'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
{{{
[img[title|filename]]
[img[filename]]
[img[title|filename][link]]
[img[filename][link]]
}}}
Images can be included by their filename or full URL. It's good practice to include a title to be shown as a tooltip, and when the image isn't available. An image can also link to another tiddler or or a URL
[img[Romanesque broccoli|fractalveg.jpg][http://www.flickr.com/photos/jermy/10134618/]]
{{{
[img[Fractal vegetable|fractalveg.jpg]]
[img[This is shown as a tooltip|http://example.com/image.jpg]]
[img[http://example.com/image.jpg]]
[img[http://example.com/image.jpg][ExampleDotCom]]
}}}
The tooltip is optional.
[<img[Forest|forest.jpg][http://www.flickr.com/photos/jermy/8749660/]][>img[Field|field.jpg][http://www.flickr.com/photos/jermy/8749285/]]You can also float images to the left or right: the forest is left aligned with {{{[<img[}}}, and the field is right aligned with {{{[>img[}}}.
@@clear(left):clear(right):display(block):You can use CSS to clear the floats@@
{{{
[<img[A woody bit of Hampstead Heath|forest.jpg]]
[>img[A field near Milton Keynes|field.jpg]]
}}}
Like most wikis, TiddlyWiki supports a range of simplified character formatting:
| !To get | !Type this |h
| ''Bold'' | {{{''Bold''}}} |
| --Strikethrough-- | {{{--Strikethrough--}}} |
| __Underline__ | {{{__Underline__}}} (that's two underline characters) |
| //Italic// | {{{//Italic//}}} |
| Superscript: 2^^3^^=8 | {{{2^^3^^=8}}} |
| Subscript: a~~ij~~ = -a~~ji~~ | {{{a~~ij~~ = -a~~ji~~}}} |
| @@highlight@@ | {{{@@highlight@@}}} |
<<<
The highlight can also accept CSS syntax to directly style the text:
@@color:green;green coloured@@
@@background-color:#ff0000;color:#ffffff;red coloured@@
@@text-shadow:black 3px 3px 8px;font-size:18pt;display:block;margin:1em 1em 1em 1em;border:1px solid black;Access any CSS style@@
<<<
//For backwards compatibility, the following highlight syntax is also accepted://
{{{
@@bgcolor(#ff0000):color(#ffffff):red coloured@@
}}}
@@bgcolor(#ff0000):color(#ffffff):red coloured@@
/***
|''Name:''|ForEachTiddlerPlugin|
|''Version:''|1.0.8 (2007-04-12)|
|''Source:''|http://tiddlywiki.abego-software.de/#ForEachTiddlerPlugin|
|''Author:''|UdoBorkowski (ub [at] abego-software [dot] de)|
|''Licence:''|[[BSD open source license (abego Software)|http://www.abego-software.de/legal/apl-v10.html]]|
|''Copyright:''|© 2005-2007 [[abego Software|http://www.abego-software.de]]|
|''TiddlyWiki:''|1.2.38+, 2.0|
|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|
!Description
Create customizable lists, tables etc. for your selections of tiddlers. Specify the tiddlers to include and their order through a powerful language.
''Syntax:''
|>|{{{<<}}}''forEachTiddler'' [''in'' //tiddlyWikiPath//] [''where'' //whereCondition//] [''sortBy'' //sortExpression// [''ascending'' //or// ''descending'']] [''script'' //scriptText//] [//action// [//actionParameters//]]{{{>>}}}|
|//tiddlyWikiPath//|The filepath to the TiddlyWiki the macro should work on. When missing the current TiddlyWiki is used.|
|//whereCondition//|(quoted) JavaScript boolean expression. May refer to the build-in variables {{{tiddler}}} and {{{context}}}.|
|//sortExpression//|(quoted) JavaScript expression returning "comparable" objects (using '{{{<}}}','{{{>}}}','{{{==}}}'. May refer to the build-in variables {{{tiddler}}} and {{{context}}}.|
|//scriptText//|(quoted) JavaScript text. Typically defines JavaScript functions that are called by the various JavaScript expressions (whereClause, sortClause, action arguments,...)|
|//action//|The action that should be performed on every selected tiddler, in the given order. By default the actions [[addToList|AddToListAction]] and [[write|WriteAction]] are supported. When no action is specified [[addToList|AddToListAction]] is used.|
|//actionParameters//|(action specific) parameters the action may refer while processing the tiddlers (see action descriptions for details). <<tiddler [[JavaScript in actionParameters]]>>|
|>|~~Syntax formatting: Keywords in ''bold'', optional parts in [...]. 'or' means that exactly one of the two alternatives must exist.~~|
See details see [[ForEachTiddlerMacro|http://tiddlywiki.abego-software.de/#ForEachTiddlerMacro]] and [[ForEachTiddlerExamples|http://tiddlywiki.abego-software.de/#ForEachTiddlerExamples]].
!Revision history
* v1.0.8 (2007-04-12)
** Adapted to latest TiddlyWiki 2.2 Beta importTiddlyWiki API (introduced with changeset 2004). TiddlyWiki 2.2 Beta builds prior to changeset 2004 are no longer supported (but TiddlyWiki 2.1 and earlier, of cause)
* v1.0.7 (2007-03-28)
** Also support "pre" formatted TiddlyWikis (introduced with TW 2.2) (when using "in" clause to work on external tiddlers)
* v1.0.6 (2006-09-16)
** Context provides "viewerTiddler", i.e. the tiddler used to view the macro. Most times this is equal to the "inTiddler", but when using the "tiddler" macro both may be different.
** Support "begin", "end" and "none" expressions in "write" action
* v1.0.5 (2006-02-05)
** Pass tiddler containing the macro with wikify, context object also holds reference to tiddler containing the macro ("inTiddler"). Thanks to SimonBaird.
** Support Firefox 1.5.0.1
** Internal
*** Make "JSLint" conform
*** "Only install once"
* v1.0.4 (2006-01-06)
** Support TiddlyWiki 2.0
* v1.0.3 (2005-12-22)
** Features:
*** Write output to a file supports multi-byte environments (Thanks to Bram Chen)
*** Provide API to access the forEachTiddler functionality directly through JavaScript (see getTiddlers and performMacro)
** Enhancements:
*** Improved error messages on InternetExplorer.
* v1.0.2 (2005-12-10)
** Features:
*** context object also holds reference to store (TiddlyWiki)
** Fixed Bugs:
*** ForEachTiddler 1.0.1 has broken support on win32 Opera 8.51 (Thanks to BrunoSabin for reporting)
* v1.0.1 (2005-12-08)
** Features:
*** Access tiddlers stored in separated TiddlyWikis through the "in" option. I.e. you are no longer limited to only work on the "current TiddlyWiki".
*** Write output to an external file using the "toFile" option of the "write" action. With this option you may write your customized tiddler exports.
*** Use the "script" section to define "helper" JavaScript functions etc. to be used in the various JavaScript expressions (whereClause, sortClause, action arguments,...).
*** Access and store context information for the current forEachTiddler invocation (through the build-in "context" object) .
*** Improved script evaluation (for where/sort clause and write scripts).
* v1.0.0 (2005-11-20)
** initial version
!Code
***/
//{{{
//============================================================================
//============================================================================
// ForEachTiddlerPlugin
//============================================================================
//============================================================================
// Only install once
if (!version.extensions.ForEachTiddlerPlugin) {
if (!window.abego) window.abego = {};
version.extensions.ForEachTiddlerPlugin = {
major: 1, minor: 0, revision: 8,
date: new Date(2007,3,12),
source: "http://tiddlywiki.abego-software.de/#ForEachTiddlerPlugin",
licence: "[[BSD open source license (abego Software)|http://www.abego-software.de/legal/apl-v10.html]]",
copyright: "Copyright (c) abego Software GmbH, 2005-2007 (www.abego-software.de)"
};
// For backward compatibility with TW 1.2.x
//
if (!TiddlyWiki.prototype.forEachTiddler) {
TiddlyWiki.prototype.forEachTiddler = function(callback) {
for(var t in this.tiddlers) {
callback.call(this,t,this.tiddlers[t]);
}
};
}
//============================================================================
// forEachTiddler Macro
//============================================================================
version.extensions.forEachTiddler = {
major: 1, minor: 0, revision: 8, date: new Date(2007,3,12), provider: "http://tiddlywiki.abego-software.de"};
// ---------------------------------------------------------------------------
// Configurations and constants
// ---------------------------------------------------------------------------
config.macros.forEachTiddler = {
// Standard Properties
label: "forEachTiddler",
prompt: "Perform actions on a (sorted) selection of tiddlers",
// actions
actions: {
addToList: {},
write: {}
}
};
// ---------------------------------------------------------------------------
// The forEachTiddler Macro Handler
// ---------------------------------------------------------------------------
config.macros.forEachTiddler.getContainingTiddler = function(e) {
while(e && !hasClass(e,"tiddler"))
e = e.parentNode;
var title = e ? e.getAttribute("tiddler") : null;
return title ? store.getTiddler(title) : null;
};
config.macros.forEachTiddler.handler = function(place,macroName,params,wikifier,paramString,tiddler) {
// config.macros.forEachTiddler.traceMacroCall(place,macroName,params,wikifier,paramString,tiddler);
if (!tiddler) tiddler = config.macros.forEachTiddler.getContainingTiddler(place);
// --- Parsing ------------------------------------------
var i = 0; // index running over the params
// Parse the "in" clause
var tiddlyWikiPath = undefined;
if ((i < params.length) && params[i] == "in") {
i++;
if (i >= params.length) {
this.handleError(place, "TiddlyWiki path expected behind 'in'.");
return;
}
tiddlyWikiPath = this.paramEncode((i < params.length) ? params[i] : "");
i++;
}
// Parse the where clause
var whereClause ="true";
if ((i < params.length) && params[i] == "where") {
i++;
whereClause = this.paramEncode((i < params.length) ? params[i] : "");
i++;
}
// Parse the sort stuff
var sortClause = null;
var sortAscending = true;
if ((i < params.length) && params[i] == "sortBy") {
i++;
if (i >= params.length) {
this.handleError(place, "sortClause missing behind 'sortBy'.");
return;
}
sortClause = this.paramEncode(params[i]);
i++;
if ((i < params.length) && (params[i] == "ascending" || params[i] == "descending")) {
sortAscending = params[i] == "ascending";
i++;
}
}
// Parse the script
var scriptText = null;
if ((i < params.length) && params[i] == "script") {
i++;
scriptText = this.paramEncode((i < params.length) ? params[i] : "");
i++;
}
// Parse the action.
// When we are already at the end use the default action
var actionName = "addToList";
if (i < params.length) {
if (!config.macros.forEachTiddler.actions[params[i]]) {
this.handleError(place, "Unknown action '"+params[i]+"'.");
return;
} else {
actionName = params[i];
i++;
}
}
// Get the action parameter
// (the parsing is done inside the individual action implementation.)
var actionParameter = params.slice(i);
// --- Processing ------------------------------------------
try {
this.performMacro({
place: place,
inTiddler: tiddler,
whereClause: whereClause,
sortClause: sortClause,
sortAscending: sortAscending,
actionName: actionName,
actionParameter: actionParameter,
scriptText: scriptText,
tiddlyWikiPath: tiddlyWikiPath});
} catch (e) {
this.handleError(place, e);
}
};
// Returns an object with properties "tiddlers" and "context".
// tiddlers holds the (sorted) tiddlers selected by the parameter,
// context the context of the execution of the macro.
//
// The action is not yet performed.
//
// @parameter see performMacro
//
config.macros.forEachTiddler.getTiddlersAndContext = function(parameter) {
var context = config.macros.forEachTiddler.createContext(parameter.place, parameter.whereClause, parameter.sortClause, parameter.sortAscending, parameter.actionName, parameter.actionParameter, parameter.scriptText, parameter.tiddlyWikiPath, parameter.inTiddler);
var tiddlyWiki = parameter.tiddlyWikiPath ? this.loadTiddlyWiki(parameter.tiddlyWikiPath) : store;
context["tiddlyWiki"] = tiddlyWiki;
// Get the tiddlers, as defined by the whereClause
var tiddlers = this.findTiddlers(parameter.whereClause, context, tiddlyWiki);
context["tiddlers"] = tiddlers;
// Sort the tiddlers, when sorting is required.
if (parameter.sortClause) {
this.sortTiddlers(tiddlers, parameter.sortClause, parameter.sortAscending, context);
}
return {tiddlers: tiddlers, context: context};
};
// Returns the (sorted) tiddlers selected by the parameter.
//
// The action is not yet performed.
//
// @parameter see performMacro
//
config.macros.forEachTiddler.getTiddlers = function(parameter) {
return this.getTiddlersAndContext(parameter).tiddlers;
};
// Performs the macros with the given parameter.
//
// @param parameter holds the parameter of the macro as separate properties.
// The following properties are supported:
//
// place
// whereClause
// sortClause
// sortAscending
// actionName
// actionParameter
// scriptText
// tiddlyWikiPath
//
// All properties are optional.
// For most actions the place property must be defined.
//
config.macros.forEachTiddler.performMacro = function(parameter) {
var tiddlersAndContext = this.getTiddlersAndContext(parameter);
// Perform the action
var actionName = parameter.actionName ? parameter.actionName : "addToList";
var action = config.macros.forEachTiddler.actions[actionName];
if (!action) {
this.handleError(parameter.place, "Unknown action '"+actionName+"'.");
return;
}
var actionHandler = action.handler;
actionHandler(parameter.place, tiddlersAndContext.tiddlers, parameter.actionParameter, tiddlersAndContext.context);
};
// ---------------------------------------------------------------------------
// The actions
// ---------------------------------------------------------------------------
// Internal.
//
// --- The addToList Action -----------------------------------------------
//
config.macros.forEachTiddler.actions.addToList.handler = function(place, tiddlers, parameter, context) {
// Parse the parameter
var p = 0;
// Check for extra parameters
if (parameter.length > p) {
config.macros.forEachTiddler.createExtraParameterErrorElement(place, "addToList", parameter, p);
return;
}
// Perform the action.
var list = document.createElement("ul");
place.appendChild(list);
for (var i = 0; i < tiddlers.length; i++) {
var tiddler = tiddlers[i];
var listItem = document.createElement("li");
list.appendChild(listItem);
createTiddlyLink(listItem, tiddler.title, true);
}
};
abego.parseNamedParameter = function(name, parameter, i) {
var beginExpression = null;
if ((i < parameter.length) && parameter[i] == name) {
i++;
if (i >= parameter.length) {
throw "Missing text behind '%0'".format([name]);
}
return config.macros.forEachTiddler.paramEncode(parameter[i]);
}
return null;
}
// Internal.
//
// --- The write Action ---------------------------------------------------
//
config.macros.forEachTiddler.actions.write.handler = function(place, tiddlers, parameter, context) {
// Parse the parameter
var p = 0;
if (p >= parameter.length) {
this.handleError(place, "Missing expression behind 'write'.");
return;
}
var textExpression = config.macros.forEachTiddler.paramEncode(parameter[p]);
p++;
// Parse the "begin" option
var beginExpression = abego.parseNamedParameter("begin", parameter, p);
if (beginExpression !== null)
p += 2;
var endExpression = abego.parseNamedParameter("end", parameter, p);
if (endExpression !== null)
p += 2;
var noneExpression = abego.parseNamedParameter("none", parameter, p);
if (noneExpression !== null)
p += 2;
// Parse the "toFile" option
var filename = null;
var lineSeparator = undefined;
if ((p < parameter.length) && parameter[p] == "toFile") {
p++;
if (p >= parameter.length) {
this.handleError(place, "Filename expected behind 'toFile' of 'write' action.");
return;
}
filename = config.macros.forEachTiddler.getLocalPath(config.macros.forEachTiddler.paramEncode(parameter[p]));
p++;
if ((p < parameter.length) && parameter[p] == "withLineSeparator") {
p++;
if (p >= parameter.length) {
this.handleError(place, "Line separator text expected behind 'withLineSeparator' of 'write' action.");
return;
}
lineSeparator = config.macros.forEachTiddler.paramEncode(parameter[p]);
p++;
}
}
// Check for extra parameters
if (parameter.length > p) {
config.macros.forEachTiddler.createExtraParameterErrorElement(place, "write", parameter, p);
return;
}
// Perform the action.
var func = config.macros.forEachTiddler.getEvalTiddlerFunction(textExpression, context);
var count = tiddlers.length;
var text = "";
if (count > 0 && beginExpression)
text += config.macros.forEachTiddler.getEvalTiddlerFunction(beginExpression, context)(undefined, context, count, undefined);
for (var i = 0; i < count; i++) {
var tiddler = tiddlers[i];
text += func(tiddler, context, count, i);
}
if (count > 0 && endExpression)
text += config.macros.forEachTiddler.getEvalTiddlerFunction(endExpression, context)(undefined, context, count, undefined);
if (count == 0 && noneExpression)
text += config.macros.forEachTiddler.getEvalTiddlerFunction(noneExpression, context)(undefined, context, count, undefined);
if (filename) {
if (lineSeparator !== undefined) {
lineSeparator = lineSeparator.replace(/\\n/mg, "\n").replace(/\\r/mg, "\r");
text = text.replace(/\n/mg,lineSeparator);
}
saveFile(filename, convertUnicodeToUTF8(text));
} else {
var wrapper = createTiddlyElement(place, "span");
wikify(text, wrapper, null/* highlightRegExp */, context.inTiddler);
}
};
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
// Internal.
//
config.macros.forEachTiddler.createContext = function(placeParam, whereClauseParam, sortClauseParam, sortAscendingParam, actionNameParam, actionParameterParam, scriptText, tiddlyWikiPathParam, inTiddlerParam) {
return {
place : placeParam,
whereClause : whereClauseParam,
sortClause : sortClauseParam,
sortAscending : sortAscendingParam,
script : scriptText,
actionName : actionNameParam,
actionParameter : actionParameterParam,
tiddlyWikiPath : tiddlyWikiPathParam,
inTiddler : inTiddlerParam, // the tiddler containing the <<forEachTiddler ...>> macro call.
viewerTiddler : config.macros.forEachTiddler.getContainingTiddler(placeParam) // the tiddler showing the forEachTiddler result
};
};
// Internal.
//
// Returns a TiddlyWiki with the tiddlers loaded from the TiddlyWiki of
// the given path.
//
config.macros.forEachTiddler.loadTiddlyWiki = function(path, idPrefix) {
if (!idPrefix) {
idPrefix = "store";
}
var lenPrefix = idPrefix.length;
// Read the content of the given file
var content = loadFile(this.getLocalPath(path));
if(content === null) {
throw "TiddlyWiki '"+path+"' not found.";
}
var tiddlyWiki = new TiddlyWiki();
// Starting with TW 2.2 there is a helper function to import the tiddlers
if (tiddlyWiki.importTiddlyWiki) {
if (!tiddlyWiki.importTiddlyWiki(content))
throw "File '"+path+"' is not a TiddlyWiki.";
tiddlyWiki.dirty = false;
return tiddlyWiki;
}
// The legacy code, for TW < 2.2
// Locate the storeArea div's
var posOpeningDiv = content.indexOf(startSaveArea);
var posClosingDiv = content.lastIndexOf(endSaveArea);
if((posOpeningDiv == -1) || (posClosingDiv == -1)) {
throw "File '"+path+"' is not a TiddlyWiki.";
}
var storageText = content.substr(posOpeningDiv + startSaveArea.length, posClosingDiv);
// Create a "div" element that contains the storage text
var myStorageDiv = document.createElement("div");
myStorageDiv.innerHTML = storageText;
myStorageDiv.normalize();
// Create all tiddlers in a new TiddlyWiki
// (following code is modified copy of TiddlyWiki.prototype.loadFromDiv)
var store = myStorageDiv.childNodes;
for(var t = 0; t < store.length; t++) {
var e = store[t];
var title = null;
if(e.getAttribute)
title = e.getAttribute("tiddler");
if(!title && e.id && e.id.substr(0,lenPrefix) == idPrefix)
title = e.id.substr(lenPrefix);
if(title && title !== "") {
var tiddler = tiddlyWiki.createTiddler(title);
tiddler.loadFromDiv(e,title);
}
}
tiddlyWiki.dirty = false;
return tiddlyWiki;
};
// Internal.
//
// Returns a function that has a function body returning the given javaScriptExpression.
// The function has the parameters:
//
// (tiddler, context, count, index)
//
config.macros.forEachTiddler.getEvalTiddlerFunction = function (javaScriptExpression, context) {
var script = context["script"];
var functionText = "var theFunction = function(tiddler, context, count, index) { return "+javaScriptExpression+"}";
var fullText = (script ? script+";" : "")+functionText+";theFunction;";
return eval(fullText);
};
// Internal.
//
config.macros.forEachTiddler.findTiddlers = function(whereClause, context, tiddlyWiki) {
var result = [];
var func = config.macros.forEachTiddler.getEvalTiddlerFunction(whereClause, context);
tiddlyWiki.forEachTiddler(function(title,tiddler) {
if (func(tiddler, context, undefined, undefined)) {
result.push(tiddler);
}
});
return result;
};
// Internal.
//
config.macros.forEachTiddler.createExtraParameterErrorElement = function(place, actionName, parameter, firstUnusedIndex) {
var message = "Extra parameter behind '"+actionName+"':";
for (var i = firstUnusedIndex; i < parameter.length; i++) {
message += " "+parameter[i];
}
this.handleError(place, message);
};
// Internal.
//
config.macros.forEachTiddler.sortAscending = function(tiddlerA, tiddlerB) {
var result =
(tiddlerA.forEachTiddlerSortValue == tiddlerB.forEachTiddlerSortValue)
? 0
: (tiddlerA.forEachTiddlerSortValue < tiddlerB.forEachTiddlerSortValue)
? -1
: +1;
return result;
};
// Internal.
//
config.macros.forEachTiddler.sortDescending = function(tiddlerA, tiddlerB) {
var result =
(tiddlerA.forEachTiddlerSortValue == tiddlerB.forEachTiddlerSortValue)
? 0
: (tiddlerA.forEachTiddlerSortValue < tiddlerB.forEachTiddlerSortValue)
? +1
: -1;
return result;
};
// Internal.
//
config.macros.forEachTiddler.sortTiddlers = function(tiddlers, sortClause, ascending, context) {
// To avoid evaluating the sortClause whenever two items are compared
// we pre-calculate the sortValue for every item in the array and store it in a
// temporary property ("forEachTiddlerSortValue") of the tiddlers.
var func = config.macros.forEachTiddler.getEvalTiddlerFunction(sortClause, context);
var count = tiddlers.length;
var i;
for (i = 0; i < count; i++) {
var tiddler = tiddlers[i];
tiddler.forEachTiddlerSortValue = func(tiddler,context, undefined, undefined);
}
// Do the sorting
tiddlers.sort(ascending ? this.sortAscending : this.sortDescending);
// Delete the temporary property that holds the sortValue.
for (i = 0; i < tiddlers.length; i++) {
delete tiddlers[i].forEachTiddlerSortValue;
}
};
// Internal.
//
config.macros.forEachTiddler.trace = function(message) {
displayMessage(message);
};
// Internal.
//
config.macros.forEachTiddler.traceMacroCall = function(place,macroName,params) {
var message ="<<"+macroName;
for (var i = 0; i < params.length; i++) {
message += " "+params[i];
}
message += ">>";
displayMessage(message);
};
// Internal.
//
// Creates an element that holds an error message
//
config.macros.forEachTiddler.createErrorElement = function(place, exception) {
var message = (exception.description) ? exception.description : exception.toString();
return createTiddlyElement(place,"span",null,"forEachTiddlerError","<<forEachTiddler ...>>: "+message);
};
// Internal.
//
// @param place [may be null]
//
config.macros.forEachTiddler.handleError = function(place, exception) {
if (place) {
this.createErrorElement(place, exception);
} else {
throw exception;
}
};
// Internal.
//
// Encodes the given string.
//
// Replaces
// "$))" to ">>"
// "$)" to ">"
//
config.macros.forEachTiddler.paramEncode = function(s) {
var reGTGT = new RegExp("\\$\\)\\)","mg");
var reGT = new RegExp("\\$\\)","mg");
return s.replace(reGTGT, ">>").replace(reGT, ">");
};
// Internal.
//
// Returns the given original path (that is a file path, starting with "file:")
// as a path to a local file, in the systems native file format.
//
// Location information in the originalPath (i.e. the "#" and stuff following)
// is stripped.
//
config.macros.forEachTiddler.getLocalPath = function(originalPath) {
// Remove any location part of the URL
var hashPos = originalPath.indexOf("#");
if(hashPos != -1)
originalPath = originalPath.substr(0,hashPos);
// Convert to a native file format assuming
// "file:///x:/path/path/path..." - pc local file --> "x:\path\path\path..."
// "file://///server/share/path/path/path..." - FireFox pc network file --> "\\server\share\path\path\path..."
// "file:///path/path/path..." - mac/unix local file --> "/path/path/path..."
// "file://server/share/path/path/path..." - pc network file --> "\\server\share\path\path\path..."
var localPath;
if(originalPath.charAt(9) == ":") // pc local file
localPath = unescape(originalPath.substr(8)).replace(new RegExp("/","g"),"\\");
else if(originalPath.indexOf("file://///") === 0) // FireFox pc network file
localPath = "\\\\" + unescape(originalPath.substr(10)).replace(new RegExp("/","g"),"\\");
else if(originalPath.indexOf("file:///") === 0) // mac/unix local file
localPath = unescape(originalPath.substr(7));
else if(originalPath.indexOf("file:/") === 0) // mac/unix local file
localPath = unescape(originalPath.substr(5));
else // pc network file
localPath = "\\\\" + unescape(originalPath.substr(7)).replace(new RegExp("/","g"),"\\");
return localPath;
};
// ---------------------------------------------------------------------------
// Stylesheet Extensions (may be overridden by local StyleSheet)
// ---------------------------------------------------------------------------
//
setStylesheet(
".forEachTiddlerError{color: #ffffff;background-color: #880000;}",
"forEachTiddler");
//============================================================================
// End of forEachTiddler Macro
//============================================================================
//============================================================================
// String.startsWith Function
//============================================================================
//
// Returns true if the string starts with the given prefix, false otherwise.
//
version.extensions["String.startsWith"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
String.prototype.startsWith = function(prefix) {
var n = prefix.length;
return (this.length >= n) && (this.slice(0, n) == prefix);
};
//============================================================================
// String.endsWith Function
//============================================================================
//
// Returns true if the string ends with the given suffix, false otherwise.
//
version.extensions["String.endsWith"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
String.prototype.endsWith = function(suffix) {
var n = suffix.length;
return (this.length >= n) && (this.right(n) == suffix);
};
//============================================================================
// String.contains Function
//============================================================================
//
// Returns true when the string contains the given substring, false otherwise.
//
version.extensions["String.contains"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
String.prototype.contains = function(substring) {
return this.indexOf(substring) >= 0;
};
//============================================================================
// Array.indexOf Function
//============================================================================
//
// Returns the index of the first occurance of the given item in the array or
// -1 when no such item exists.
//
// @param item [may be null]
//
version.extensions["Array.indexOf"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if (this[i] == item) {
return i;
}
}
return -1;
};
//============================================================================
// Array.contains Function
//============================================================================
//
// Returns true when the array contains the given item, otherwise false.
//
// @param item [may be null]
//
version.extensions["Array.contains"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.contains = function(item) {
return (this.indexOf(item) >= 0);
};
//============================================================================
// Array.containsAny Function
//============================================================================
//
// Returns true when the array contains at least one of the elements
// of the item. Otherwise (or when items contains no elements) false is returned.
//
version.extensions["Array.containsAny"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.containsAny = function(items) {
for(var i = 0; i < items.length; i++) {
if (this.contains(items[i])) {
return true;
}
}
return false;
};
//============================================================================
// Array.containsAll Function
//============================================================================
//
// Returns true when the array contains all the items, otherwise false.
//
// When items is null false is returned (even if the array contains a null).
//
// @param items [may be null]
//
version.extensions["Array.containsAll"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.containsAll = function(items) {
for(var i = 0; i < items.length; i++) {
if (!this.contains(items[i])) {
return false;
}
}
return true;
};
} // of "install only once"
// Used Globals (for JSLint) ==============
// ... DOM
/*global document */
// ... TiddlyWiki Core
/*global convertUnicodeToUTF8, createTiddlyElement, createTiddlyLink,
displayMessage, endSaveArea, hasClass, loadFile, saveFile,
startSaveArea, store, wikify */
//}}}
/***
!Licence and Copyright
Copyright (c) abego Software ~GmbH, 2005 ([[www.abego-software.de|http://www.abego-software.de]])
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this
list of conditions and the following disclaimer in the documentation and/or other
materials provided with the distribution.
Neither the name of abego Software nor the names of its contributors may be
used to endorse or promote products derived from this software without specific
prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
DAMAGE.
***/
The gradient macro allows you to use gradients in your TiddlyWikis without resorting to the use of images. You can pick any number of colors and also select whether the gradient will move vertically or horizontally.
!Code
The generic usage looks like:
{{{
<<gradient vert/horiz colors>>text>>
}}}
Two examples:
{{{
<<gradient vert #ffff00 #0000ff #000000 #00ffff>>color:white;text-align:center;four colors vertically>>
<<gradient horiz #0000ff #000000 #00ffff>>color:white;text-align:center;three colors horizontally>>
}}}
!Execution
<<gradient vert #ffff00 #0000ff #000000 #00ffff>>color:white;text-align:center;four colors vertically>>
<<gradient horiz #0000ff #000000 #00ffff>>color:white;text-align:center;three colors horizontally>>
You can divide a tiddler into
----
sections by typing four dashes on a line by themselves
Entities in HTML documents allow characters to be entered that can't easily be typed on an ordinary keyboard. They take the form of an ampersand (&), an identifying string, and a terminating semi-colon (;). There's a complete reference [[here|http://www.htmlhelp.com/reference/html40/entities/]]; some of the more common and useful ones are shown below. Also see [[Paul's Notepad|http://thepettersons.org/PaulsNotepad.html#GreekHtmlEntities%20HtmlEntitiesList%20LatinHtmlEntities%20MathHtmlEntities]] for a more complete list.
|>|>|>|>|>|>| !HTML Entities |
| &nbsp; | | no-break space | | &apos; | ' | single quote, apostrophe |
| &ndash; | – | en dash |~| &quot; | " | quotation mark |
| &mdash; | — | em dash |~| &prime; | ′ | prime; minutes; feet |
| &hellip; | … | horizontal ellipsis |~| &Prime; | ″ | double prime; seconds; inches |
| &copy; | © | Copyright symbol |~| &lsquo; | ‘ | left single quote |
| &reg; | ® | Registered symbol |~| &rsquo; | ’ | right single quote |
| &trade; | ™ | Trademark symbol |~| &ldquo; | “ | left double quote |
| &dagger; | † | dagger |~| &rdquo; | ” | right double quote |
| &Dagger; | ‡ | double dagger |~| &laquo; | « | left angle quote |
| &para; | ¶ | paragraph sign |~| &raquo; | » | right angle quote |
| &sect; | § | section sign |~| &times; | × | multiplication symbol |
| &uarr; | ↑ | up arrow |~| &darr; | ↓ | down arrow |
| &larr; | ← | left arrow |~| &rarr; | → | right arrow |
| &lArr; | ⇐ | double left arrow |~| &rArr; | ⇒ | double right arrow |
| &harr; | ↔ | left right arrow |~| &hArr; | ⇔ | double left right arrow |
The table below shows how accented characters can be built up by subsituting a base character into the various accent entities in place of the underscore ('_'):
|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>| !Accented Characters |
| grave accent | &_grave; | À | à | È | è | Ì | ì | Ò | ò | Ù | ù | | | | | | |
| acute accent | &_acute; | Á | á | É | é | Í | í | Ó | ó | Ú | ú | | | Ý | ý | | |
| circumflex accent | &_circ; | Â | â | Ê | ê | Î | î | Ô | ô | Û | û | | | | | | |
| umlaut mark | &_uml; | Ä | ä | Ë | ë | Ï | ï | Ö | ö | Ü | ü | | | Ÿ | ÿ | | |
| tilde | &_tilde; | Ã | ã | | | | | Õ | õ | | | Ñ | ñ | | | | |
| ring | &_ring; | Å | å | | | | | | | | | | | | | |
| slash | &_slash; | | | | | | | Ø | ø | | | | | | | |
| cedilla | &_cedil; | | | | | | | | | | | | | | | Ç | ç |
*[[Welcome]]
/% [[GettingStarted]] %/
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>Jarada's TiddlyWiki Plugin Repository</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>
{{{Monospaced text}}} is supported - edit this tiddler to see the syntax.
You can also have monospaced blocks (useful for source code):
{{{
var posTop = findPosY(e);
var posBot = posTop + e.offsetHeight;
var winTop = findScrollY();
var winHeight = findWindowHeight();
var winBot = winTop + winHeight;
if(posTop < winTop)
return(posTop);
else if(posBot > winBot)
{
if(e.offsetHeight < winHeight)
return(posTop - (winHeight - e.offsetHeight));
else
return(posTop);
}
else
return(winTop);
}}}
/***
|''Name:''|NestedSlidersPlugin|
|''Source:''|http://www.TiddlyTools.com/#NestedSlidersPlugin|
|''Author:''|Eric Shulman - ELS Design Studios|
|''License:''|[[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|''~CoreVersion:''|2.0.10|
Quickly make any tiddler content into an expandable 'slider' panel, without needing to create a separate tiddler to contain the slider content. Optional syntax allows ''default to open'', ''custom button label/tooltip'' and ''automatic blockquote formatting.''
You can also 'nest' these sliders as deep as you like (see complex nesting example below), so that expandable 'tree-like' hierarchical displays can be created. This is most useful when converting existing in-line text content to create in-line annotations, footnotes, context-sensitive help, or other subordinate information displays.
For more details, please click on a section headline below:
++++!!!!![Configuration]>
Debugging messages for 'lazy sliders' deferred rendering:
<<option chkDebugLazySliderDefer>> show debugging alert when deferring slider rendering
<<option chkDebugLazySliderRender>> show debugging alert when deferred slider is actually rendered
===
++++!!!!![Usage]>
When installed, this plugin adds new wiki syntax for embedding 'slider' panels directly into tiddler content. Use {{{+++}}} and {{{===}}} to delimit the slider content. Additional optional syntax elements let you specify
*default to open
*cookiename
*heading level
*floater (with optional CSS width value)
*mouse auto rollover
*custom class/label/tooltip/accesskey
*automatic blockquote
*deferred rendering
The complete syntax, using all options, is:
//{{{
++++(cookiename)!!!!!^width^*{{class{[label=key|tooltip]}}}>...
content goes here
===
//}}}
where:
* {{{+++}}} (or {{{++++}}}) and {{{===}}}^^
marks the start and end of the slider definition, respectively. When the extra {{{+}}} is used, the slider will be open when initially displayed.^^
* {{{(cookiename)}}}^^
saves the slider opened/closed state, and restores this state whenever the slider is re-rendered.^^
* {{{!}}} through {{{!!!!!}}}^^
displays the slider label using a formatted headline (Hn) style instead of a button/link style^^
* {{{^width^}}} (or just {{{^}}})^^
makes the slider 'float' on top of other content rather than shifting that content downward. 'width' must be a valid CSS value (e.g., "30em", "180px", "50%", etc.). If omitted, the default width is "auto" (i.e., fit to content)^^
* {{{*}}}^^
automatically opens/closes slider on "rollover" as well as when clicked^^
* {{{{{class{[label=key|tooltip]}}}}}}^^
uses custom label/tooltip/accesskey. {{{{{class{...}}}}}}, {{{=key}}} and {{{|tooltip}}} are optional. 'class' is any valid CSS class name, used to style the slider label text. 'key' must be a ''single letter only''. Default labels/tootips are: ">" (more) and "<" (less), with no default access key assignment.^^
* {{{">"}}} //(without the quotes)//^^
automatically adds blockquote formatting to slider content^^
* {{{"..."}}} //(without the quotes)//^^
defers rendering of closed sliders until the first time they are opened. //Note: deferred rendering may produce unexpected results in some cases. Use with care.//^^
//Note: to make slider definitions easier to read and recognize when editing a tiddler, newlines immediately following the {{{+++}}} 'start slider' or preceding the {{{===}}} 'end slider' sequence are automatically supressed so that excess whitespace is eliminated from the output.//
===
++++!!!!![Examples]>
simple in-line slider:
{{{
+++
content
===
}}}
+++
content
===
----
use a custom label and tooltip:
{{{
+++[label|tooltip]
content
===
}}}
+++[label|tooltip]
content
===
----
content automatically blockquoted:
{{{
+++>
content
===
}}}
+++>
content
===
----
all options combined //(default open, cookie, heading, sized floater, rollover, class, label/tooltip/key, blockquoted, deferred)//
{{{
++++(testcookie)!!!^30em^*{{big{[label=Z|click or press Alt-Z to open]}}}>...
content
===
}}}
++++(testcookie)!!!^30em^*{{big{[label=Z|click or press Alt-Z to open]}}}>...
content
===
----
complex nesting example:
{{{
+++^[get info...=I|click for information or press Alt-I]
put some general information here, plus a floating slider with more specific info:
+++^10em^[view details...|click for details]
put some detail here, which could include a rollover with a +++^25em^*[glossary definition]explaining technical terms===
===
===
}}}
+++^[get info...=I|click for information or press Alt-I]
put some general information here, plus a floating slider with more specific info:
+++^10em^[view details...|click for details]
put some detail here, which could include a rollover with a +++^25em^*[glossary definition]explaining technical terms===
===
===
===
!!!!!Installation
<<<
import (or copy/paste) the following tiddlers into your document:
''NestedSlidersPlugin'' (tagged with <<tag systemConfig>>)
<<<
!!!!!Revision History
<<<
''2006.07.28 - 2.0.0'' added custom class syntax around label/tip/key syntax: {{{{{classname{[label=key|tip]}}}}}}
''2006.07.25 - 1.9.3'' when parsing slider, save default open/closed state in button element, then in onClickNestedSlider(), if slider state matches saved default, instead of saving cookie, delete it. Significantly reduces the 'cookie overhead' when default slider states are used.
''2006.06.29 - 1.9.2'' in onClickNestedSlider(), when setting focus to first control, skip over type="hidden"
''2006.06.22 - 1.9.1'' added panel.defaultPanelWidth to save requested panel width, even after resizing has changed the style value
''2006.05.11 - 1.9.0'' added optional '^width^' syntax for floating sliders and '=key' syntax for setting an access key on a slider label
''2006.05.09 - 1.8.0'' in onClickNestedSlider(), when showing panel, set focus to first child input/textarea/select element
''2006.04.24 - 1.7.8'' in adjustSliderPos(), if floating panel is contained inside another floating panel, subtract offset of containing panel to find correct position
''2006.02.16 - 1.7.7'' corrected deferred rendering to account for use-case where show/hide state is tracked in a cookie
''2006.02.15 - 1.7.6'' in adjustSliderPos(), ensure that floating panel is positioned completely within the browser window (i.e., does not go beyond the right edge of the browser window)
''2006.02.04 - 1.7.5'' add 'var' to unintended global variable declarations to avoid FireFox 1.5.0.1 crash bug when assigning to globals
''2006.01.18 - 1.7.4'' only define adjustSliderPos() function if it has not already been provided by another plugin. This lets other plugins 'hijack' the function even when they are loaded first.
''2006.01.16 - 1.7.3'' added adjustSliderPos(place,btn,panel,panelClass) function to permit specialized logic for placement of floating panels. While it provides improved placement for many uses of floating panels, it exhibits a relative offset positioning error when used within *nested* floating panels. Short-term workaround is to only adjust the position for 'top-level' floaters.
''2006.01.16 - 1.7.2'' added button property to slider panel elements so that slider panel can tell which button it belongs to. Also, re-activated and corrected animation handling so that nested sliders aren't clipped by hijacking Slider.prototype.stop so that "overflow:hidden" can be reset to "overflow:visible" after animation ends
''2006.01.14 - 1.7.1'' added optional "^" syntax for floating panels. Defines new CSS class, ".floatingPanel", as an alternative for standard in-line ".sliderPanel" styles.
''2006.01.14 - 1.7.0'' added optional "*" syntax for rollover handling to show/hide slider without requiring a click (Based on a suggestion by tw4efl)
''2006.01.03 - 1.6.2'' When using optional "!" heading style, instead of creating a clickable "Hn" element, create an "A" element inside the "Hn" element. (allows click-through in SlideShowPlugin, which captures nearly all click events, except for hyperlinks)
''2005.12.15 - 1.6.1'' added optional "..." syntax to invoke deferred ('lazy') rendering for initially hidden sliders
removed checkbox option for 'global' application of lazy sliders
''2005.11.25 - 1.6.0'' added optional handling for 'lazy sliders' (deferred rendering for initially hidden sliders)
''2005.11.21 - 1.5.1'' revised regular expressions: if present, a single newline //preceding// and/or //following// a slider definition will be suppressed so start/end syntax can be place on separate lines in the tiddler 'source' for improved readability. Similarly, any whitespace (newlines, tabs, spaces, etc.) trailing the 'start slider' syntax or preceding the 'end slider' syntax is also suppressed.
''2005.11.20 - 1.5.0'' added (cookiename) syntax for optional tracking and restoring of slider open/close state
''2005.11.11 - 1.4.0'' added !!!!! syntax to render slider label as a header (Hn) style instead of a button/link style
''2005.11.07 - 1.3.0'' removed alternative syntax {{{(((}}} and {{{)))}}} (so they can be used by other
formatting extensions) and simplified/improved regular expressions to trim multiple excess newlines
''2005.11.05 - 1.2.1'' changed name to NestedSlidersPlugin
more documentation
''2005.11.04 - 1.2.0'' added alternative character-mode syntax {{{(((}}} and {{{)))}}}
tweaked "eat newlines" logic for line-mode {{{+++}}} and {{{===}}} syntax
''2005.11.03 - 1.1.1'' fixed toggling of default tooltips ("more..." and "less...") when a non-default button label is used
code cleanup, added documentation
''2005.11.03 - 1.1.0'' changed delimiter syntax from {{{(((}}} and {{{)))}}} to {{{+++}}} and {{{===}}}
changed name to EasySlidersPlugin
''2005.11.03 - 1.0.0'' initial public release
<<<
!!!!!Credits
<<<
This feature was implemented by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]] with initial research and suggestions from RodneyGomes, GeoffSlocock, and PaulPetterson.
<<<
!!!!!Code
***/
//{{{
version.extensions.nestedSliders = {major: 2, minor: 0, revision: 0, date: new Date(2006,7,28)};
//}}}
//{{{
// options for deferred rendering of sliders that are not initially displayed
if (config.options.chkDebugLazySliderDefer==undefined) config.options.chkDebugLazySliderDefer=false;
if (config.options.chkDebugLazySliderRender==undefined) config.options.chkDebugLazySliderRender=false;
// default styles for 'floating' class
setStylesheet(".floatingPanel { position:absolute; z-index:10; padding:0.5em; margin:0em; \
background-color:#eee; color:#000; border:1px solid #000; text-align:left; }","floatingPanelStylesheet");
//}}}
//{{{
config.formatters.push( {
name: "nestedSliders",
match: "\\n?\\+{3}",
terminator: "\\s*\\={3}\\n?",
lookahead: "\\n?\\+{3}(\\+)?(\\([^\\)]*\\))?(\\!*)?(\\^(?:[^\\^\\*\\[\\>]*\\^)?)?(\\*)?(?:\\{\\{([\\w]+[\\s\\w]*)\\{)?(\\[[^\\]]*\\])?(?:\\}{3})?(\\>)?(\\.\\.\\.)?\\s*",
handler: function(w)
{
// defopen=lookaheadMatch[1]
// cookiename=lookaheadMatch[2]
// header=lookaheadMatch[3]
// panelwidth=lookaheadMatch[4]
// rollover=lookaheadMatch[5]
// class=lookaheadMatch[6]
// label=lookaheadMatch[7]
// blockquote=lookaheadMatch[8]
// deferred=lookaheadMatch[9]
lookaheadRegExp = new RegExp(this.lookahead,"mg");
lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = lookaheadRegExp.exec(w.source)
if(lookaheadMatch && lookaheadMatch.index == w.matchStart)
{
// location for rendering button and panel
var place=w.output;
// default to closed, no cookie, no accesskey
var show="none"; var title="<"; var tooltip="show"; var cookie=""; var key="";
// extra "+", default to open
if (lookaheadMatch[1])
{ show="block"; title=">"; tooltip="hide"; }
// cookie, use saved open/closed state
if (lookaheadMatch[2]) {
cookie=lookaheadMatch[2].trim().slice(1,-1);
cookie="chkSlider"+cookie;
if (config.options[cookie]==undefined)
{ config.options[cookie] = (show=="block") }
if (config.options[cookie])
{ show="block"; title="<"; tooltip="hide"; }
else
{ show="none"; title=">"; tooltip="show"; }
}
// parse custom label/tooltip/accesskey: [label=X|tooltip]
if (lookaheadMatch[7]) {
title = lookaheadMatch[7].trim().slice(1,-1);
var pos=title.indexOf("|");
if (pos!=-1) { tooltip = title.substr(pos+1,title.length); title=title.substr(0,pos); }
if (title.substr(title.length-2,1)=="=") { key=title.substr(title.length-1,1); title=title.slice(0,-2); }
if (pos==-1) tooltip += " "+title; // default tooltip: "show/hide <title>"
}
// create the button
if (lookaheadMatch[3]) { // use "Hn" header format instead of button/link
var lvl=(lookaheadMatch[3].length>6)?6:lookaheadMatch[3].length;
var btn = createTiddlyElement(createTiddlyElement(place,"h"+lvl,null,null,null),"a",null,lookaheadMatch[6],title);
btn.onclick=onClickNestedSlider;
btn.setAttribute("href","javascript:;");
btn.setAttribute("title",tooltip);
}
else
var btn = createTiddlyButton(place,title,tooltip,onClickNestedSlider,lookaheadMatch[6]);
// set extra button attributes
btn.sliderCookie = cookie; // save the cookiename (if any) in the button object
btn.defOpen=lookaheadMatch[1]!=null; // save default open/closed state (boolean)
btn.keyparam=key; // save the access key letter ("" if none)
if (key.length) {
btn.setAttribute("accessKey",key); // init access key
btn.onfocus=function(){this.setAttribute("accessKey",this.keyparam);}; // **reclaim** access key on focus
}
// "non-click" MouseOver open/close slider
if (lookaheadMatch[5]) btn.onmouseover=onClickNestedSlider;
// create slider panel
var panelClass=lookaheadMatch[4]?"floatingPanel":"sliderPanel";
var panel=createTiddlyElement(place,"div",null,panelClass,null);
panel.button = btn; // so the slider panel know which button it belongs to
panel.defaultPanelWidth=(lookaheadMatch[4] && lookaheadMatch[4].length>2)?lookaheadMatch[4].slice(1,-1):""; // save requested panel size
btn.sliderPanel=panel;
panel.style.display = show;
panel.style.width=panel.defaultPanelWidth;
// render slider (or defer until shown)
w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
if ((show=="block")||!lookaheadMatch[9]) {
// render now if panel is supposed to be shown or NOT deferred rendering
w.subWikify(lookaheadMatch[8]?createTiddlyElement(panel,"blockquote"):panel,this.terminator);
// align slider/floater position with button
adjustSliderPos(place,btn,panel,panelClass);
}
else {
var src = w.source.substr(w.nextMatch);
var endpos=findMatchingDelimiter(src,"+++","===");
panel.setAttribute("raw",src.substr(0,endpos));
panel.setAttribute("blockquote",lookaheadMatch[8]?"true":"false");
panel.setAttribute("rendered","false");
w.nextMatch += endpos+3;
if (w.source.substr(w.nextMatch,1)=="\n") w.nextMatch++;
if (config.options.chkDebugLazySliderDefer) alert("deferred '"+title+"':\n\n"+panel.getAttribute("raw"));
}
}
}
}
)
// TBD: ignore 'quoted' delimiters (e.g., "{{{+++foo===}}}" isn't really a slider)
function findMatchingDelimiter(src,starttext,endtext) {
var startpos = 0;
var endpos = src.indexOf(endtext);
// check for nested delimiters
while (src.substring(startpos,endpos-1).indexOf(starttext)!=-1) {
// count number of nested 'starts'
var startcount=0;
var temp = src.substring(startpos,endpos-1);
var pos=temp.indexOf(starttext);
while (pos!=-1) { startcount++; pos=temp.indexOf(starttext,pos+starttext.length); }
// set up to check for additional 'starts' after adjusting endpos
startpos=endpos+endtext.length;
// find endpos for corresponding number of matching 'ends'
while (startcount && endpos!=-1) {
endpos = src.indexOf(endtext,endpos+endtext.length);
startcount--;
}
}
return (endpos==-1)?src.length:endpos;
}
//}}}
//{{{
window.onClickNestedSlider=function(e)
{
if (!e) var e = window.event;
var theTarget = resolveTarget(e);
var theLabel = theTarget.firstChild.data;
var theSlider = theTarget.sliderPanel
var isOpen = theSlider.style.display!="none";
// if using default button labels, toggle labels
if (theLabel==">") theTarget.firstChild.data = "<";
else if (theLabel=="<") theTarget.firstChild.data = ">";
// if using default tooltips, toggle tooltips
if (theTarget.getAttribute("title")=="show")
theTarget.setAttribute("title","hide");
else if (theTarget.getAttribute("title")=="hide")
theTarget.setAttribute("title","show");
if (theTarget.getAttribute("title")=="show "+theLabel)
theTarget.setAttribute("title","hide "+theLabel);
else if (theTarget.getAttribute("title")=="hide "+theLabel)
theTarget.setAttribute("title","show "+theLabel);
// deferred rendering (if needed)
if (theSlider.getAttribute("rendered")=="false") {
if (config.options.chkDebugLazySliderRender)
alert("rendering '"+theLabel+"':\n\n"+theSlider.getAttribute("raw"));
var place=theSlider;
if (theSlider.getAttribute("blockquote")=="true")
place=createTiddlyElement(place,"blockquote");
wikify(theSlider.getAttribute("raw"),place);
theSlider.setAttribute("rendered","true");
}
// show/hide the slider
if(config.options.chkAnimate)
anim.startAnimating(new Slider(theSlider,!isOpen,e.shiftKey || e.altKey,"none"));
else
theSlider.style.display = isOpen ? "none" : "block";
// reset to default width (might have been changed via plugin code)
theSlider.style.width=theSlider.defaultPanelWidth;
// align slider/floater position with target button
if (!isOpen) adjustSliderPos(theSlider.parentNode,theTarget,theSlider,theSlider.className);
// if showing panel, set focus to first 'focus-able' element in panel
if (theSlider.style.display!="none") {
var ctrls=theSlider.getElementsByTagName("*");
for (var c=0; c<ctrls.length; c++) {
var t=ctrls[c].tagName.toLowerCase();
if ((t=="input" && ctrls[c].type!="hidden") || t=="textarea" || t=="select")
{ ctrls[c].focus(); break; }
}
}
if (this.sliderCookie && this.sliderCookie.length) {
config.options[this.sliderCookie]=!isOpen;
if (config.options[this.sliderCookie]!=this.defOpen)
saveOptionCookie(this.sliderCookie);
else { // remove cookie if slider is in default display state
var ex=new Date(); ex.setTime(ex.getTime()-1000);
document.cookie = this.sliderCookie+"=novalue; path=/; expires="+ex.toGMTString();
}
}
return false;
}
// hijack animation handler 'stop' handler so overflow is visible after animation has completed
Slider.prototype.coreStop = Slider.prototype.stop;
Slider.prototype.stop = function() { this.coreStop(); this.element.style.overflow = "visible"; }
// adjust panel position based on button position
if (window.adjustSliderPos==undefined) window.adjustSliderPos=function(place,btn,panel,panelClass) {
if (panelClass=="floatingPanel") {
var left=0;
var top=btn.offsetHeight;
if (place.style.position!="relative") {
var left=findPosX(btn);
var top=findPosY(btn)+btn.offsetHeight;
var p=place; while (p && p.className!='floatingPanel') p=p.parentNode;
if (p) { left-=findPosX(p); top-=findPosY(p); }
}
if (left+panel.offsetWidth > getWindowWidth()) left=getWindowWidth()-panel.offsetWidth-10;
panel.style.left=left+"px"; panel.style.top=top+"px";
}
}
function getWindowWidth() {
if(document.width!=undefined)
return document.width; // moz (FF)
if(document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
return document.documentElement.clientWidth; // IE6
if(document.body && ( document.body.clientWidth || document.body.clientHeight ) )
return document.body.clientWidth; // IE4
if(window.innerWidth!=undefined)
return window.innerWidth; // IE - general
return 0; // unknown
}
//}}}
To make a tiddler that doesn't have a WikiWord as its name, you can enclose the name in [[double square brackets]] - edit this tiddler to see an example. After saving the tiddler you can then click on the link to create the new tiddler. NonWikiWordLinks permits tiddlers to be created with names that are made from character sets that don't have upper and lower case.
It's easy to create NumberedBulletPoints.
# Use a single '#' at the start of each line
# and the tiddler will automatically
# start numbering your list.
## If you want a sub-list
## within any bullets
## add two '#'s at the start of the lines.
# When you go back to a single '#'
# the main numbered list will start up
# where it left off.
It's just as simple to do normal BulletPoints.
<!--{{{-->
<div id='header'>
</div>
<div id='sidebar'>
<div id='titleLine'></div>
<span id='siteTitle' refresh='content' tiddler='SiteTitle'></span>- <span id='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
|Standard Periodic Table (ref. Wikipedia)|c
|| !1 | !2 |!| !3 | !4 | !5 | !6 | !7 | !8 | !9 | !10 | !11 | !12 | !13 | !14 | !15 | !16 | !17 | !18 |
|!1|bgcolor(#a0ffa0): @@color(red):H@@ |>|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>||bgcolor(#c0ffff): @@color(red):He@@ |
|!2|bgcolor(#ff6666): Li |bgcolor(#ffdead): Be |>|>|>|>|>|>|>|>|>|>||bgcolor(#cccc99): B |bgcolor(#a0ffa0): C |bgcolor(#a0ffa0): @@color(red):N@@ |bgcolor(#a0ffa0): @@color(red):O@@ |bgcolor(#ffff99): @@color(red):F@@ |bgcolor(#c0ffff): @@color(red):Ne@@ |
|!3|bgcolor(#ff6666): Na |bgcolor(#ffdead): Mg |>|>|>|>|>|>|>|>|>|>||bgcolor(#cccccc): Al |bgcolor(#cccc99): Si |bgcolor(#a0ffa0): P |bgcolor(#a0ffa0): S |bgcolor(#ffff99): @@color(red):Cl@@ |bgcolor(#c0ffff): @@color(red):Ar@@ |
|!4|bgcolor(#ff6666): K |bgcolor(#ffdead): Ca ||bgcolor(#ffc0c0): Sc |bgcolor(#ffc0c0): Ti |bgcolor(#ffc0c0): V |bgcolor(#ffc0c0): Cr |bgcolor(#ffc0c0): Mn |bgcolor(#ffc0c0): Fe |bgcolor(#ffc0c0): Co |bgcolor(#ffc0c0): Ni |bgcolor(#ffc0c0): Cu |bgcolor(#ffc0c0): Zn |bgcolor(#cccccc): Ga |bgcolor(#cccc99): Ge |bgcolor(#cccc99): As |bgcolor(#a0ffa0): Se |bgcolor(#ffff99): @@color(green):Br@@ |bgcolor(#c0ffff): @@color(red):Kr@@ |
|!5|bgcolor(#ff6666): Rb |bgcolor(#ffdead): Sr ||bgcolor(#ffc0c0): Y |bgcolor(#ffc0c0): Zr |bgcolor(#ffc0c0): Nb |bgcolor(#ffc0c0): Mo |bgcolor(#ffc0c0): Tc |bgcolor(#ffc0c0): Ru |bgcolor(#ffc0c0): Rh |bgcolor(#ffc0c0): Pd |bgcolor(#ffc0c0): Ag |bgcolor(#ffc0c0): Cd |bgcolor(#cccccc): In |bgcolor(#cccccc): Sn |bgcolor(#cccc99): Sb |bgcolor(#cccc99): Te |bgcolor(#ffff99): I |bgcolor(#c0ffff): @@color(red):Xe@@ |
|!6|bgcolor(#ff6666): Cs |bgcolor(#ffdead): Ba |bgcolor(#ffbfff):^^*1^^|bgcolor(#ffc0c0): Lu |bgcolor(#ffc0c0): Hf |bgcolor(#ffc0c0): Ta |bgcolor(#ffc0c0): W |bgcolor(#ffc0c0): Re |bgcolor(#ffc0c0): Os |bgcolor(#ffc0c0): Ir |bgcolor(#ffc0c0): Pt |bgcolor(#ffc0c0): Au |bgcolor(#ffc0c0): @@color(green):Hg@@ |bgcolor(#cccccc): Tl |bgcolor(#cccccc): Pb |bgcolor(#cccccc): Bi |bgcolor(#cccc99): Po |bgcolor(#ffff99): At |bgcolor(#c0ffff): @@color(red):Rn@@ |
|!7|bgcolor(#ff6666): Fr |bgcolor(#ffdead): Ra |bgcolor(#ff99cc):^^*2^^|bgcolor(#ffc0c0): Lr |bgcolor(#ffc0c0): Rf |bgcolor(#ffc0c0): Db |bgcolor(#ffc0c0): Sq |bgcolor(#ffc0c0): Bh |bgcolor(#ffc0c0): Hs |bgcolor(#ffc0c0): Mt |bgcolor(#ffc0c0): Ds |bgcolor(#ffc0c0): Rg |bgcolor(#ffc0c0): @@color(green):Uub@@ |bgcolor(#cccccc): Uut |bgcolor(#cccccc): Uuq |bgcolor(#cccccc): Uup |bgcolor(#cccccc): Uuh |bgcolor(#fcfecc): @@color(#cccccc):Uus@@ |bgcolor(#ecfefc): @@color(#cccccc):Uuo@@ |
| !Lanthanides^^*1^^|bgcolor(#ffbfff): La |bgcolor(#ffbfff): Ce |bgcolor(#ffbfff): Pr |bgcolor(#ffbfff): Nd |bgcolor(#ffbfff): Pm |bgcolor(#ffbfff): Sm |bgcolor(#ffbfff): Eu |bgcolor(#ffbfff): Gd |bgcolor(#ffbfff): Tb |bgcolor(#ffbfff): Dy |bgcolor(#ffbfff): Ho |bgcolor(#ffbfff): Er |bgcolor(#ffbfff): Tm |bgcolor(#ffbfff): Yb |
| !Actinides^^*2^^|bgcolor(#ff99cc): Ac |bgcolor(#ff99cc): Th |bgcolor(#ff99cc): Pa |bgcolor(#ff99cc): U |bgcolor(#ff99cc): Np |bgcolor(#ff99cc): Pu |bgcolor(#ff99cc): Am |bgcolor(#ff99cc): Cm |bgcolor(#ff99cc): Bk |bgcolor(#ff99cc): Cf |bgcolor(#ff99cc): Es |bgcolor(#ff99cc): Fm |bgcolor(#ff99cc): Md |bgcolor(#ff99cc): No |
*Chemical Series of the Periodic Table
**@@bgcolor(#ff6666): Alkali metals@@
**@@bgcolor(#ffdead): Alkaline earth metals@@
**@@bgcolor(#ffbfff): Lanthanides@@
**@@bgcolor(#ff99cc): Actinides@@
**@@bgcolor(#ffc0c0): Transition metals@@
**@@bgcolor(#cccccc): Poor metals@@
**@@bgcolor(#cccc99): Metalloids@@
**@@bgcolor(#a0ffa0): Nonmetals@@
**@@bgcolor(#ffff99): Halogens@@
**@@bgcolor(#c0ffff): Noble gases@@
*State at standard temperature and pressure
**those in @@color(red):red@@ are gases
**those in @@color(green):green@@ are liquids
**those in black are solids
To make plugins, stylesheets and templates easier to read, you can use special alternative formatting for monospaced blocks.
In JavaScript code:
{{{
//{{{
var id = document.getElementById("mainMenu");
//}}}
}}}
In HTML templates:
{{{
<!--{{{-->
<div id="MainMenu">
</div>
<!--}}}-->
}}}
In CSS stylesheets
{{{
/*{{{*/
div {color: #ff0000;}
/*}}}*/
}}}
It will be displayed as:
//{{{
var id = document.getElementById("mainMenu");
//}}}
<!--{{{-->
<div id="MainMenu">
</div>
<!--}}}-->
/*{{{*/
div {color: #ff0000;}
/*}}}*/
*[[ForEachTiddlerPlugin]] - create customizable lists, tables etc. for your selections of tiddlers. Specify the tiddlers to include and their order through a powerful language.
*[[NestedSlidersPlugin]] - quickly make any tiddler content into an expandable 'slider' panel, without needing to create a separate tiddler to contain the slider content. Optional syntax allows ''default to open'', ''custom button label/tooltip'' and ''automatic blockquote formatting.''
*[[SelectThemePlugin]] - allows you to have custom themes; a good list of themes can be found [[here|http://tiddlythemes.com/]] and [[here|http://tiddlystyles.com/#Themes]]
*[[smiley]] - create smiley faces! <<smiley :-D>>
*[[SplashScreenPlugin]] - provides a splash screen during loading of a ~TiddlyWiki
*[[TagglyTaggingPlugin]] - a plugin that lets you use tagging in powerful and useful ways. [[See here for more info|http://mptw.tiddlyspot.com/#TagglyTagging]] (the tutorial is found near the bottom of that Tiddler).
You can now link to [[external sites|http://www.osmosoft.com]] or [[ordinary tiddlers|TiddlyWiki]] with ordinary words, without the messiness of the full URL appearing. Edit this tiddler to see how.
You can also LinkToFolders.
/***
''This plugin was previously called StyleChooser.''
|Name|SelectThemePlugin|
|Created by|SimonBaird and SaqImtiaz|
|Location|http://tw.lewcid.org/#SelectThemePlugin|
|Version|1.2.5|
|Requires|~TW2.x|
!Description
*An alternative style switcher, can be used to switch just stylesheets and/or pagetemplates, or a combination of both (a theme)
*you can add your own stylesheets and pagetemplates, or use a ThemePack, like BigThemePack.
!Usage
* You have to have fetch or create some styleSheets and pageTemplates to use this plugin.
**You can either get a ThemePack like BigThemePack which automatically adds themes to ThemeSelect.
**or create tiddlers with styleSheets and pageTemplates and tag them styleSheets and pageTemplates respectively.
* Put {{{<<themeSelect style 'Select theme'>>}}} in your SideBarOptions.
!Creating Theme Packs
*You can create your own theme pack if you like. Instructions can be found [[here.|CreateThemePack]]
!History
*20-Dec-06, v 1.2.5, fixed horizontal rules for IE (thanks Clint), compatibility fix with HoverMenuPlugin
* 08-Sept-06, v1.2.4, fixed bug with TW2.1
* 15-May-06, v1.2.3, added paramifier so you can put theme on url, eg http://www.somewhere.com/twfile.html#theme:Berry2, thanks Clint (Simon).
* 28-Apr-o6, v1.2.2, fixed bug with opening TW after deleting themepacks. (Saq)
* 26-Apr-06, v1.2.1, more code optimization, dropdowns now updated on the fly. (Saq)
* 25-Apr-06, v1.2.0, added 3rd party ThemePack support, and made various other improvements.(Simon & Saq)
* 24-Apr-06, v1.1.0, added: no styles and default styles options,<<br>>support for ThemePack, support for tag variations(Saq)
* 21-Apr-06, v1.0.0, Reworked dropdowns to include option for pagetemplates (Saq)
* 21-Apr-06, v0.9.0, Rewrote and added Saq's lovely dropdown select (Simon)
* 20-Apr-06, v0.0.1, Basic switcher working (Simon)
!Examples
|!Source|!Output|h
|{{{<<themeSelect style>>}}} for a dropdown with StyleSheets|<<themeSelect style>>|
|{{{<<themeSelect pagetemplate>>}}} for a dropdown with PageTemplates|<<themeSelect pagetemplate>>|
|{{{<<themeSelect style customlabel>>}}} to use a customlabel|<<themeSelect style customlabel>>|
* When applying a stylesheet or template, it also looks for a template or stylesheet respectively based on naming convention, eg MyFunkyStyleSheet and MyFunkyPageTemplate.
!Notes
* See also http://www.tiddlytools.com/#SelectStyleSheetPlugin for a more feature-rich style sheet switcher
! Ideas
* do ViewTemplate also?
* Pretty up the [x] bit
!Code
***/
//{{{
// for compatibility with TW <2.0.9
if (!Array.prototype.contains)
Array.prototype.contains = function(item)
{
return this.find(item) != null;
};
// for compatibility with TW <2.0.9
if (!Array.prototype.containsAny)
Array.prototype.containsAny = function(items)
{
for(var i=0; i<items.length; i++)
if (this.contains(items[i]))
return true;
return false;
};
//}}}
//{{{
version.extensions.SelectTheme = { major: 1, minor: 2, revision: 5, date: new Date(2006,12,20),
source: "http://tw.lewcid.org/#SelectTheme"
};
config.SelectTheme = {
things: {
style: {
tag: ["StyleSheets","StyleSheet","styleSheet","styleSheets","stylesheet","stylesheets"],
theDefault: "StyleSheet",
suffix: "StyleSheet",
notify: refreshStyles,
cookie: "txtStyleSheet",
otherThing: "pagetemplate",
label: "Choose StyleSheet: ",
tooltip: "Choose a StyleSheet",
caseNone: { text:"None", title:"NoStyleSheet"},
caseDefault: { text:"Default", title:"StyleSheet" }
},
pagetemplate: {
tag: ["PageTemplates","PageTemplate","pageTemplates","pageTemplate","pagetemplate","pagetemplates"],
theDefault: "PageTemplate",
suffix: "PageTemplate",
notify: refreshPageTemplate,
cookie: "txtPageTemplate",
otherThing: "style",
label: "Choose PageTemplate: ",
tooltip: "Choose a PageTemplate",
caseNone: { text:"None", title:"NoPageTemplate"},
caseDefault: { text:"Default", title:"PageTemplate" }
}
},
specialCases: ["caseNone","caseDefault"]
};
TiddlyWiki.prototype.removeNotification = function(title,fn) {
for (var i=0;i<this.namedNotifications.length;i++)
if((this.namedNotifications[i].name == title) && (this.namedNotifications[i].notify == fn))
this.namedNotifications.splice(i,1); // counting on it only being there once
}
var things = config.SelectTheme.things;
var specialCases=config.SelectTheme.specialCases;
for (var zz in things) {
// make sure we have a value
if (!config.options[things[zz].cookie])
config.options[things[zz].cookie] = things[zz].theDefault;
// remove core notify
store.removeNotification(things[zz].theDefault,things[zz].notify);
// and add our one
store.addNotification(config.options[things[zz].cookie],things[zz].notify);
}
//checks to see if a tiddler exists in store or as a shadow.
TiddlyWiki.prototype.isTiddler= function (title)
{return store.tiddlerExists(title) || store.isShadowTiddler(title)}
//hijack core function & make sure template exists
window.applyPageTemplate_themeSelect=window.applyPageTemplate;
window.applyPageTemplate=function(title){
if(!store.isTiddler(title))
{title = things.pagetemplate.theDefault;}
applyPageTemplate_themeSelect(title);
}
TiddlyWiki.prototype.makeActiveTheme = function(what,title,alsoCheckOtherThing) {
var thing = things[what];
if (!store.isTiddler(title))
title = thing.theDefault;
var oldTitle = config.options[thing.cookie];
if (what == "style") {
// remove old style element from DOM
var oldStyleElement = document.getElementById(oldTitle);
oldStyleElement.parentNode.removeChild(oldStyleElement);
}
store.removeNotification(oldTitle,thing.notify);
store.addNotification(title,thing.notify);
store.notify(title);
config.options[thing.cookie] = title;
saveOptionCookie(thing.cookie);
if (alsoCheckOtherThing)
this.makeActiveTheme(thing.otherThing,
title.replace(new RegExp(thing.suffix+"$"),"") + things[thing.otherThing].suffix,
false);
};
if (config.hoverMenu)
{
old_hovermenu_makeActiveTheme = TiddlyWiki.prototype.makeActiveTheme;
TiddlyWiki.prototype.makeActiveTheme = function(what,title,alsoCheckOtherThing)
{
old_hovermenu_makeActiveTheme.apply(this,arguments);
if (!alsoCheckOtherThing)
config.hoverMenu.handler();
};
}
config.shadowTiddlers.NoStyleSheet = "";
config.shadowTiddlers.NoPageTemplate = config.shadowTiddlers.PageTemplate;
function switchTheme(e){
if (!e) var e = window.event;
var theTarget = resolveTarget(e);
var theLink = theTarget;
var switchTo= theLink.getAttribute("switchTo");
var mode = theLink.getAttribute("mode");
if ((config.options[things[mode].cookie])!=switchTo)
{store.makeActiveTheme(mode,switchTo,true);};
return(false);
}
config.macros.themeSelect={};
config.macros.themeSelect.dropdownchar = (document.all?"â–¼":"â–¾");
config.macros.themeSelect.handler = function(place,macroName,params,wikifier,paramString,tiddler){
var arrow = config.macros.themeSelect.dropdownchar;
var mode = params[0];
var label = (params[1]?params[1]:things[mode].label) + arrow;
var cookie = (config.options[things[mode].cookie]);
var onclick = function(e)
{ if (!e) var e = window.event;
var popup = Popup.create(this);
var tagged=[];
store.forEachTiddler(function(title,tiddler) {
if ((tiddler.tags).containsAny(things[mode].tag)){
tagged.push(tiddler.title);}
});
//integrate ThemePacks
if (config.themes) {
// see what themes have been loaded...
for (var i=0;i<config.themes.length;i++) {
// see if there is one
var lookForThis = config.themes[i] + things[mode].suffix;
if (store.isShadowTiddler(lookForThis)) {
tagged.pushUnique(lookForThis);
}
}
tagged = tagged.sort();
}
//this function used later to create buttons
var createThemeButton = function(switchTo){
var theButton = createTiddlyButton(createTiddlyElement(popup,"li"),text,null,switchTheme,useClass);
theButton.setAttribute("switchTo",switchTo);
theButton.setAttribute("mode",mode);};
//create Buttons for None(shadow styles) & Default (StyleSheet)
// Default button is not created if StyleSheet doesnt exist.
for(var t=0; t<specialCases.length; t++){
var special = specialCases[t];
var text = things[mode][special].text;
var useClass = "tiddlyLinkExisting"; //redundant, optimize!
if ((things[mode][special].title==cookie)||(special=="caseNone"&&!store.isTiddler(cookie)))
{text+= " [x]";
useClass = "currentlySelected";}
if (!((special=="caseDefault")&&(!store.getTiddler(things[mode][special].title))))
createThemeButton(things[mode][special].title); }
//insert horizontal rule
//createTiddlyElement(createTiddlyElement(popup,"li"),"hr");
createTiddlyElement(createTiddlyElement(popup,"li",null,"listBreak"),"div");
//create buttons for all other stylesheet tiddlers
for(var t=0; t<tagged.length; t++)
{ var useClass = "tiddlyLinkExisting";
var text = (tagged[t]).replace((things[mode].suffix),"");
if (tagged[t]==(cookie) )
{text+=" [x]"; useClass="currentlySelected";}
if ((tagged[t]!= (things[mode].theDefault))&&tagged[t]!= (things[mode].none))
{createThemeButton(tagged[t]);}}
Popup.show(popup,false);
e.cancelBubble = true;
if (e.stopPropagation)
e.stopPropagation();
return(false);
};
var createdropperButton = function(place){
var sp = createTiddlyElement(place,"span",null,"ThemeChooserButton");
var theDropDownBtn = createTiddlyButton(sp,label,things[mode].tooltip,onclick);
};
createdropperButton(place);
};
setStylesheet(".popup li a.currentlySelected {background:#ccc;color:black;font-weight:bold;}","currentlySelectedStyle"); // could do better probably...
config.macros.layoutChooser=config.macros.themeSelect;
//shadow tiddler to hold instructions for creating ThemePacks
config.shadowTiddlers.ThemePack='See http://simonbaird.com/mptw/#CreateThemePack';
config.macros.applyTheme = {handler: function (place,macroName,params,wikifier,paramString,tiddler) {
var theme = params[0];
var label = params[1]?params[1]:'Apply theme "' + theme + '"';
var tooltip = 'Apply the "'+theme+'" theme to this TiddlyWiki';
createTiddlyButton(place,label,tooltip,function() {
store.makeActiveTheme("style",theme+things.style.suffix,true);
});
}};
// this means you can put #theme:ThemeName in url. suggested by Clint
config.paramifiers.theme = {
onstart: function(themeName) {
store.makeActiveTheme("style",themeName+config.SelectTheme.things.style.suffix,true);
}
};
//}}}
<<search>><<closeAll>><<permaview>><<newTiddler>><<newJournal "DD MMM YYYY" "journal">><<saveChanges>><<themeSelect style 'select theme'>><<slider chkSliderOptionsPanel OptionsPanel "options »" "Change TiddlyWiki advanced options">>
a way to store favourite plugins for [[others to download|Download Instructions]]
Jarada's TiddlyWiki Plugin Repository
Sparklines are used to create nifty little in-line bar graphs.
!Code
{{{
<<sparkline 163 218 231 236 232 266 176 249 289 1041 1835 2285 3098 2101 1755 3283 3353 3335 2898 2224 1404 1354 1825 1839 2142 1942 1784 1145 979 1328 1611>>
}}}
!Execution
<<sparkline 163 218 231 236 232 266 176 249 289 1041 1835 2285 3098 2101 1755 3283 3353 3335 2898 2224 1404 1354 1825 1839 2142 1942 1784 1145 979 1328 1611>>
/***
''Inspired by [[TiddlyPom|http://www.warwick.ac.uk/~tuspam/tiddlypom.html]]''
|Name|SplashScreenPlugin|
|Created by|SaqImtiaz|
|Location|http://lewcid.googlepages.com/lewcid.html#SplashScreenPlugin|
|Version|0.21 |
|Requires|~TW2.08+|
!Description:
Provides a simple splash screen that is visible while the TW is loading.
!Installation
Copy the source text of this tiddler to your TW in a new tiddler, tag it with systemConfig and save and reload. The SplashScreen will now be installed and will be visible the next time you reload your TW.
!Customizing
Once the SplashScreen has been installed and you have reloaded your TW, the splash screen html will be present in the MarkupPreHead tiddler. You can edit it and customize to your needs.
!History
* 20-07-06 : version 0.21, modified to hide contentWrapper while SplashScreen is displayed.
* 26-06-06 : version 0.2, first release
!Code
***/
//{{{
var old_lewcid_splash_restart=restart;
restart = function()
{ if (document.getElementById("SplashScreen"))
document.getElementById("SplashScreen").style.display = "none";
if (document.getElementById("contentWrapper"))
document.getElementById("contentWrapper").style.display = "block";
old_lewcid_splash_restart();
if (splashScreenInstall)
{if(config.options.chkAutoSave)
{saveChanges();}
displayMessage("TW SplashScreen has been installed, please save and refresh your TW.");
}
}
var oldText = store.getTiddlerText("MarkupPreHead");
if (oldText.indexOf("SplashScreen")==-1)
{var siteTitle = store.getTiddlerText("SiteTitle");
var splasher='\n\n<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>'+siteTitle +'</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>';
if (! store.tiddlerExists("MarkupPreHead"))
{var myTiddler = store.createTiddler("MarkupPreHead");}
else
{var myTiddler = store.getTiddler("MarkupPreHead");}
myTiddler.set(myTiddler.title,oldText+splasher,config.options.txtUserName,null,null);
store.setDirty(true);
var splashScreenInstall = true;
}
//}}}
/***
http://tiddlystyles.com/#theme:TiddlyPedia
***/
/*{{{*/
body{
background: #f9f9f9 url(headbg.jpg) no-repeat top left;
}
#titleLine{
display: block;
background: transparent url(wiki.png) no-repeat 18px -7px;
_background: transparent;
height: 120px;
_height: 135px;
width: 150px;
color: #000;
border: 1px;
padding: 0;
margin: 0;
}
* html #titleLine{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wiki.png',sizingMethod='scale');
}
#contentWrapper #siteTitle a{
display: inline;
font-weight: bold;
color: #000;
font-size: 13px;
}
#siteSubtitle{
padding: 0;
}
#siteTitle, #mainMenu{
position: static;
}
#contentWrapper #sidebar{
top: 0;
left: 0;
}
#displayArea {
margin: 0 0 0 15em;
}
#messageArea{
position: fixed;
top: 0;
right: 0;
font-size: 10px;
border: 1px solid #aaa;
background: #fff;
z-index: 25;
}
#messageArea a:link{
color: #002bb8;
text-decoration: none;
}
#messageArea a:hover{
text-decoration: underline;
}
.viewer{
background: #fff;
border: 1px solid #aaa;
padding: 1em;
margin: 0;
}
.body{
padding: 1px;
}
.title{
background: #fff;
border: 1px solid #aaa;
display: inline;
margin-left: .5em;
padding: 2px .5em;
border-bottom: 0;
font-weight: bold;
color: #000;
font-size: 1.2em;
}
.toolbar{
visibility: visible;
display: inline;
padding: 0;
font-family: sans-serif;
}
.toolbar a.button:link,.toolbar a.button:visited{
background: #fff;
border: 1px solid #aaa;
color:#002bb8;
font-size: 11px;
padding-bottom: 0;
margin-right: .25em;
}
/* TiddlyPedia was Created by Clinton Checketts based on the Monobook skin of Wikipedia */
#contentWrapper .toolbar .button:hover{
border-bottom: 1px solid #fff;
background: #fff;
color:#002bb8;
}
.toolbar a.button:hover{
border-bottom: 1px solid #fff;
background: #fff;
color:#000;
}
#displayArea .viewer a,a.button:link,a.button:visited,
a.tiddlyLink:link,a.tiddlyLink:visited,
#sidebarOptions .sliderPanel a{
color:#002bb8;
background: transparent;
border: 0;
}
.viewer a:hover,a.button:hover,a.button:active,
a.tiddlyLink:hover,a.tiddlyLink:active,
.viewer a.button:hover,
#sidebarOptions .sliderPanel a:hover{
color:#002bb8;
background: transparent;
text-decoration: underline;
}
#mainMenu{
font-family: sans-serif;
text-align: left;
font-size: x-small;
width: 100%;
margin: 0;
padding: 0;
}
#mainMenu h1{
font-size: 11px;
font-weight: normal;
padding: 0;
margin: 0;
background: transparent;
}
#mainMenu ul{
font-size: 11px;
border: 1px solid #aaa;
padding: .25em 0;
margin: 0;
list-style-type: square;
list-style-image: url(bullet.gif);
background: #fff;
width: 100%;
}
#mainMenu li{
margin: 0 0 0 2em;
padding: 0;
}
#contentWrapper #mainMenu a:link,#contentWrapper #mainMenu a:visited{
color:#002bb8;
padding: 0;
margin: 0;
background: transparent;
}
#mainMenu .externalLink {
text-decoration: none;
}
#mainMenu .externalLink:hover {
text-decoration: underline;
}
#sidebar{
padding: .5em;
font-family: sans-serif;
}
#sidebarOptions{
border: 1px solid #aaa;
background: #fff;
margin-top: .5em;
width: 100%;
}
#sidebar .sliderPanel{
margin: 0;
}
#contentWrapper #sidebarOptions .button,#contentWrapper #sidebarOptions .button:hover{
color:#002bb8;
padding: .1em 0 .1em 2em;
background: transparent url(bullet.gif) 10px -2px no-repeat;
}
#sidebarOptions input{
width: 80%;
margin: 0 .5em;
}
#sidebarTabs{
background: #fff;
margin-top: .5em;
width: 100%;
}
#sidebarTabs .tabContents,#sidebarTabs .tabContents .tabContents{
border: 1px solid #aaa;
background: #fff;
}
#sidebarTabs .tabSelected,#sidebarTabs .tabcontents .tabSelected {
background: #fff;
border: 1px solid #aaa;
border-bottom: 0;
cursor: default;
padding-bottom: 3px;
color: #000;
}
#sidebarTabs .tabUnselected,#sidebarTabs .tabContents .tabUnselected{
background: #aaa;
padding-bottom: 0;
color: #000;
}
#contentWrapper #sidebarTabs .tiddlyLink,#contentWrapper #sidebarTabs .button,
#contentWrapper #sidebarTabs a.tiddlyLink:hover,#contentWrapper #sidebarTabs a.button:hover{
background: transparent;
color: #002bb8;
}
.footer{
margin: -1em 0 1em 0;
}
.footer .button:hover,.editorFooter .button:hover{
background: transparent;
color: #002bb8;
border-bottom: 1px solid #002bb8;
}
#popup{
background: #e9e9e9;
color: #000;
}
#popup hr{
border-color: #aaa;
background-color: #aaa;
}
#popup a{
color: #000;
}
#popup a:hover,#contentWrapper #sidebarTabs #popup a:hover{
background: #666;
color: #fff;
text-decoration: none;
}
#displayArea .tiddler a.tiddlyLinkNonExisting{
color: #ba0000;
}
#displayArea .tiddler a.externalLink{
text-decoration: none;
color:#002bb8;
padding-right: 1em;
background: transparent url(external.png) 100% 50% no-repeat;
}
#displayArea .tiddler a.externalLink:hover{
text-decoration: underline;
}
.viewer pre{
background: #e9e9e9;
border: 1px solid #666;
}
.viewer h1, .viewer h2, .viewer h3, .viewer h4, .viewer h5, .viewer h6{
background: transparent;
border-bottom: .2em solid #aaa;
}
#sidebar .sliderPanel{
background: #e9e9e9;
}
#sidebar .sliderPanel input{width: auto;}
.tagged, .tagging, .listTitle{
float: none;
display: inline;
}
.tagged li, .tagging li,
.tagged ul, .tagging ul{
display: inline;
}
/*}}}*/
!Header 1
!!Header 2
!!!Header 3
!!!!Header 4
!!!!!Header 5
*sample:
|!th1111111111|!th2222222222|
|>| colspan |
| rowspan |left|
|~| right|
|bgcolor(#a0ffa0):colored| center |
|caption|c
*another sample: see PeriodicTable.
For advanced effects, you can control the CSS style of a table by adding a row like this:
{{{
|cssClass|k
}}}
The TaggingMacro returns a list of tiddlers based on a tag; if no tag is specified, it looks for tiddlers tagged with the title of the current tiddler.
!Code
Generic use:
{{{
<<tagging tagname>>
}}}
Specific use: This code will list all tiddlers tagged as Features
{{{
<<tagging Features>>
}}}
!Execution
<<tagging Features>>
!Chapter 1
Early versions of TiddlyWiki didn't have tagging. A couple of smart TiddlyWiki hackers realised that being able to tag your data in TiddlyWiki would be really good and (as is often the case with TiddlyWiki) they were inspired to have a go at adding it themselves. The result was two TiddlyWiki adaptations that implemented tagging, one called TagglyWiki created by Jody Foo, and one called TiddlyTagWiki by Johnny ~LeRoy.
TiddlyTagWiki used a 'tags as separate things' philosophy, space separated tags and popup menus when you click on a tag. TagglyWiki (and there was also a GTDTagglyWiki) had a 'tiddler is a tag is a tiddler' philosophy, had comma separated tags and introduced the concept of tiddlers displaying a list of their tagged tiddlers.
When Jeremy added tagging to the official TiddlyWiki version he considered both approaches and decided on the TiddlyTagWiki implementation. Jody Foo stopped maintaining TagglyWiki at around that time so TagglyWiki fans like me were forced to stick with their aging [[TagglyWiki]]s, missing out on numerous upgrades and cool new features as each revision of TiddlyWiki came out, until eventually they couldn't take it any more and started wondering what they could do to get hold of an up-to-date TiddlyWiki with TagglyWiki style tagging. (Okay, maybe that last part was just me!)
So when TiddlyWiki began to support enhancements via systemConfig plugins I decided to try to write a version of TagglyWiki style tagging as a plugin. It turned out to be easier than I thought. I managed to get it working and created MonkeyPirateTiddlyWiki (see [[Ancient Stuff]]) to share it (and my other plugins). Since then there have been a few enhancements like dynamic updating of tagged lists and the new sort controls.
TiddlyTagWiki has continued to be maintained by Johnny and now contains some interesting new plugins.
!Chapter 2
Seeing the wisdom of the TagglyTagging way, Jeremy incorporated the "tiddler is a tag is a tiddler" concept into TiddlyWiki version 2.0 and introduced the "tagging" list, the other central component of TagglyTagging. Most of the reason for TagglyTagging's existence had vanished! Rather than dissappear entirely TagglyTagging became the set of tools it is now, an enhanced tagging list with sort controls, layout changes and a few other simple tools (NewHerePlugin, QuickOpenTagPlugin and RenameTagsPlugin) that facilitate using the full power of tags in the TagglyTagging way.
!Chapter 3
After the TiddlyWiki 2.1 release I rewrote everything. The code in TagglyTaggingPlugin (previously called TagglyListPlugin) is now actually readable. Once I could read my code I threw in some new features like site map mode and better support for columns. Also it uses the new refresh mechanism in TiddlyWiki 2.1 to be more efficient with dynamically updating the screen.
You can do this right here and now. Maybe you should print this out so it's easy to follow while working on screen. I presume you have some familiarity with TiddlyWiki basics. If you are having trouble following this then try this [[excellent tutorial|http://www.blogjones.com/TiddlyWikiTutorial.html]] first.
!Getting started: Create some content
* First hit "close others" to clear up your screen
* Click "new tiddler" from the main menu.
* Name the tiddler "~MyStuff" by typing into the title box.
* Add some contents to the contents box, for example "This is my stuff"
* Click the Done button to save the new tiddler. (We will return to this one later).
* Let's say you just returned from a meeting and want to enter a couple of notes about it
** Click "new tiddler"
** Enter tiddler title as "Meeting with Leo - 12 Oct"
** Add some meeting notes in the content box
** Don't click Done just yet...
!Tagging your content
* Before you save the "Meeting with Leo..." tiddler let's add some tags
** It's a meeting so let's give it a tag called "Meetings". Type Meetings in the tags box.
** The meeting was with Leo so let's give it a tag called Leo. Type Leo in the tags box.
** Let's say the meeting was about budget planning for example. Type Budget in the tags box.
** So your tags box should look like this: {{{Meetings Leo Budget}}}
*Now save the tiddler by clicking the Done button.
!Using the tags
*No big deal so far, right? Now we start to get into TagglyTagging territory.
*Notice the tags appear above the title. They are italicised to indicate they don't exist yet (just like any other tiddler that doesn't exist yet).
*Click on the Leo tag. You will open an empty tiddler called Leo.
**Give it some content like "Leo Runcible, ext 1234. Likes cats". Or whatever.
**Leo's a person so give him a tag of "People" by typing People in the tags box.
**Save it by clicking Done.
!Lets pick up the pace
*Go back to your "Meeting with Leo..." tiddler.
** Click on Meetings. Give Meetings a tag of ~MyStuff and save it.
** Click on People. Give People a tag of ~MyStuff and save it.
** Click on Budget. Give Budget a tag of Projects. Type something about the Budget project in the tiddler contents if you want. Save it.
** Now above the Budget title click on the Projects tag. Give Projects a tag of ~MyStuff. Save that.
* Now find your ~MyStuff tiddler. Look at the tagged tiddler list which appears at the bottom of the tiddler. It should be a list containing Meetings, People and Projects.
* Close a few tiddlers and try navigating to your meeting tiddler from ~MyStuff using the tagged tiddler lists.
That's a quick look at the basics of TagglyTagging. Hopefully by now you have some idea about what TagglyTagging can do. Play around with it a little more if you like. Then continue to...
!The New Here Button
* Click on People.
* Do you know any other people?
* If so click, "new here" in the People tiddler
** Notice that the tags box already contains the tag People. (This is what the new here button does. It creates a new tiddler with the tag already filled in).
** Type someone's name and some notes on that person. Click Done to Save.
* Add a couple more people for fun
** Notice what happens to the "tagged tiddler" list at the bottom of the People tiddler.
!Changing the structure of your data
Let's look at how easy it is to change your structure. Suppose you decide that you want to have different types of Projects: Ongoing, Current and Future
* Go to your Budget tiddler. Edit it and change the Projects tag to Ongoing Projects. Save.
* Click the Ongoing Projects tag. Give that a tag of "Projects".
* That's it. You're done. Well actually you haven't added the Ongoing and Future Projects but you can see that's not hard. Maybe click "new here" at the Projects tiddler. Or maybe just tag a project as Future Projects and do it from the bottom up.
!Another example
* Suppose your original meeting had an action item for you. Type it into the meeting notes as a wiki word or {{{[[}}}Do Something{{{]]}}}.
* Now click on it and give it a tag of Todo. Type any extra information about how you're going to do it when it's due by etc into the contents. Put a reminder in there if you have ReminderPlugin installed.
* Now make sure you can get to your Todos by tagging Todo tiddler as MyStuff.
* For convenience let's put a link to MyStuff in your MainMenu. This will put all your new organised information at your fingertips at all times.
!Sort Controls and Columns
* If you mouse over a tagged tiddler list you should see some buttons. Try them out. Note that if you save it remembers your choice.
!Wrapup
Hopefully you can see that TagglyTagging gives you a powerful way to organise and structure your information. Don't forget that you can still use conventional wiki links to navigate around your tiddlers. TagglyTagging just gives you another way to do cool stuff with your TiddlyWiki.
~~This tutorial is a draft. Feedback is welcome. Please [[contact|Contact]] me with comments and suggestions.~~
/***
| Name:|TagglyTaggingPlugin|
| Description:|tagglyTagging macro is a replacement for the builtin tagging macro in your ViewTemplate|
| Version:|6.1.5|
| Date:|05-Oct-2006|
| Source:|http://mptw.tiddlyspot.com/#TagglyTaggingPlugin|
| Author:|Simon Baird <simon.baird@gmail.com>|
| CoreVersion:|2.1.x|
!Notes
See http://mptw.tiddlyspot.com/#TagglyTagging
***/
//{{{
config.taggly = {
// for translations
lingo: {
labels: {
asc: "\u2191", // down arrow
desc: "\u2193", // up arrow
title: "title",
modified: "modified",
created: "created",
show: "+",
hide: "-",
normal: "normal",
group: "group",
commas: "commas",
sitemap: "sitemap",
numCols: "cols\u00b1", // plus minus sign
label: "Tagged as '%0':"
},
tooltips: {
title: "Click to sort by title",
modified: "Click to sort by modified date",
created: "Click to sort by created date",
show: "Click to show tagging list",
hide: "Click to hide tagging list",
normal: "Click to show a normal ungrouped list",
group: "Click to show list grouped by tag",
sitemap: "Click to show a sitemap style list",
commas: "Click to show a comma separated list",
numCols: "Click to change number of columns"
}
},
config: {
showTaggingCounts: true,
listOpts: {
// the first one will be the default
sortBy: ["title","modified","created"],
sortOrder: ["asc","desc"],
hideState: ["show","hide"],
listMode: ["normal","group","sitemap","commas"],
numCols: ["1","2","3","4","5","6"]
},
valuePrefix: "taggly."
},
getTagglyOpt: function(title,opt) {
var val = store.getValue(title,this.config.valuePrefix+opt);
return val ? val : this.config.listOpts[opt][0];
},
setTagglyOpt: function(title,opt,value) {
if (!store.tiddlerExists(title))
// create it silently
store.saveTiddler(title,title,config.views.editor.defaultText.format([title]),config.options.txtUserName,new Date(),null);
// if value is default then remove it to save space
return store.setValue(title,
this.config.valuePrefix+opt,
value == this.config.listOpts[opt][0] ? null : value);
},
getNextValue: function(title,opt) {
var current = this.getTagglyOpt(title,opt);
var pos = this.config.listOpts[opt].indexOf(current);
// a little usability enhancement. actually it doesn't work right for grouped or sitemap
var limit = (opt == "numCols" ? store.getTaggedTiddlers(title).length : this.config.listOpts[opt].length);
var newPos = (pos + 1) % limit;
return this.config.listOpts[opt][newPos];
},
toggleTagglyOpt: function(title,opt) {
var newVal = this.getNextValue(title,opt);
this.setTagglyOpt(title,opt,newVal);
},
createListControl: function(place,title,type) {
var lingo = config.taggly.lingo;
var label;
var tooltip;
var onclick;
if ((type == "title" || type == "modified" || type == "created")) {
// "special" controls. a little tricky. derived from sortOrder and sortBy
label = lingo.labels[type];
tooltip = lingo.tooltips[type];
if (this.getTagglyOpt(title,"sortBy") == type) {
label += lingo.labels[this.getTagglyOpt(title,"sortOrder")];
onclick = function() {
config.taggly.toggleTagglyOpt(title,"sortOrder");
return false;
}
}
else {
onclick = function() {
config.taggly.setTagglyOpt(title,"sortBy",type);
config.taggly.setTagglyOpt(title,"sortOrder",config.taggly.config.listOpts.sortOrder[0]);
return false;
}
}
}
else {
// "regular" controls, nice and simple
label = lingo.labels[type == "numCols" ? type : this.getNextValue(title,type)];
tooltip = lingo.tooltips[type == "numCols" ? type : this.getNextValue(title,type)];
onclick = function() {
config.taggly.toggleTagglyOpt(title,type);
return false;
}
}
// hide button because commas don't have columns
if (!(this.getTagglyOpt(title,"listMode") == "commas" && type == "numCols"))
createTiddlyButton(place,label,tooltip,onclick,type == "hideState" ? "hidebutton" : "button");
},
makeColumns: function(orig,numCols) {
var listSize = orig.length;
var colSize = listSize/numCols;
var remainder = listSize % numCols;
var upperColsize = colSize;
var lowerColsize = colSize;
if (colSize != Math.floor(colSize)) {
// it's not an exact fit so..
upperColsize = Math.floor(colSize) + 1;
lowerColsize = Math.floor(colSize);
}
var output = [];
var c = 0;
for (var j=0;j<numCols;j++) {
var singleCol = [];
var thisSize = j < remainder ? upperColsize : lowerColsize;
for (var i=0;i<thisSize;i++)
singleCol.push(orig[c++]);
output.push(singleCol);
}
return output;
},
drawTable: function(place,columns,theClass) {
var newTable = createTiddlyElement(place,"table",null,theClass);
var newTbody = createTiddlyElement(newTable,"tbody");
var newTr = createTiddlyElement(newTbody,"tr");
for (var j=0;j<columns.length;j++) {
var colOutput = "";
for (var i=0;i<columns[j].length;i++)
colOutput += columns[j][i];
var newTd = createTiddlyElement(newTr,"td",null,"tagglyTagging"); // todo should not need this class
wikify(colOutput,newTd);
}
return newTable;
},
createTagglyList: function(place,title) {
switch(this.getTagglyOpt(title,"listMode")) {
case "group": return this.createTagglyListGrouped(place,title); break;
case "normal": return this.createTagglyListNormal(place,title,false); break;
case "commas": return this.createTagglyListNormal(place,title,true); break;
case "sitemap":return this.createTagglyListSiteMap(place,title); break;
}
},
getTaggingCount: function(title) {
// thanks to Doug Edmunds
if (this.config.showTaggingCounts) {
var tagCount = store.getTaggedTiddlers(title).length;
if (tagCount > 0)
return " ("+tagCount+")";
}
return "";
},
// this is for normal and commas mode
createTagglyListNormal: function(place,title,useCommas) {
var list = store.getTaggedTiddlers(title,this.getTagglyOpt(title,"sortBy"));
if (this.getTagglyOpt(title,"sortOrder") == "desc")
list = list.reverse();
var output = [];
for (var i=0;i<list.length;i++) {
var countString = this.getTaggingCount(list[i].title);
if (useCommas)
output.push((i > 0 ? ", " : "") + "[[" + list[i].title + "]]" + countString);
else
output.push("*[[" + list[i].title + "]]" + countString + "\n");
}
return this.drawTable(place,
this.makeColumns(output,useCommas ? 1 : parseInt(this.getTagglyOpt(title,"numCols"))),
useCommas ? "commas" : "normal");
},
// this is for the "grouped" mode
createTagglyListGrouped: function(place,title) {
var sortBy = this.getTagglyOpt(title,"sortBy");
var sortOrder = this.getTagglyOpt(title,"sortOrder");
var list = store.getTaggedTiddlers(title,sortBy);
if (sortOrder == "desc")
list = list.reverse();
var leftOvers = []
for (var i=0;i<list.length;i++)
leftOvers.push(list[i].title);
var allTagsHolder = {};
for (var i=0;i<list.length;i++) {
for (var j=0;j<list[i].tags.length;j++) {
if (list[i].tags[j] != title) { // not this tiddler
if (!allTagsHolder[list[i].tags[j]])
allTagsHolder[list[i].tags[j]] = "";
allTagsHolder[list[i].tags[j]] += "**[["+list[i].title+"]]"
+ this.getTaggingCount(list[i].title) + "\n";
leftOvers.setItem(list[i].title,-1); // remove from leftovers. at the end it will contain the leftovers
}
}
}
var allTags = [];
for (var t in allTagsHolder)
allTags.push(t);
var sortHelper = function(a,b) {
if (a == b) return 0;
if (a < b) return -1;
return 1;
};
allTags.sort(function(a,b) {
var tidA = store.getTiddler(a);
var tidB = store.getTiddler(b);
if (sortBy == "title") return sortHelper(a,b);
else if (!tidA && !tidB) return 0;
else if (!tidA) return -1;
else if (!tidB) return +1;
else return sortHelper(tidA[sortBy],tidB[sortBy]);
});
var leftOverOutput = "";
for (var i=0;i<leftOvers.length;i++)
leftOverOutput += "*[["+leftOvers[i]+"]]" + this.getTaggingCount(leftOvers[i]) + "\n";
var output = [];
if (sortOrder == "desc")
allTags.reverse();
else if (leftOverOutput != "")
// leftovers first...
output.push(leftOverOutput);
for (var i=0;i<allTags.length;i++)
output.push("*[["+allTags[i]+"]]" + this.getTaggingCount(leftOvers[i]) + "\n" + allTagsHolder[allTags[i]]);
if (sortOrder == "desc" && leftOverOutput != "")
// leftovers last...
output.push(leftOverOutput);
return this.drawTable(place,
this.makeColumns(output,parseInt(this.getTagglyOpt(title,"numCols"))),
"grouped");
},
// used to build site map
treeTraverse: function(title,depth,sortBy,sortOrder) {
var list = store.getTaggedTiddlers(title,sortBy);
if (sortOrder == "desc")
list.reverse();
var indent = "";
for (var j=0;j<depth;j++)
indent += "*"
var childOutput = "";
for (var i=0;i<list.length;i++)
if (list[i].title != title)
childOutput += this.treeTraverse(list[i].title,depth+1,sortBy,sortOrder);
if (depth == 0)
return childOutput;
else
return indent + "[["+title+"]]" + this.getTaggingCount(title) + "\n"+childOutput;
},
// this if for the site map mode
createTagglyListSiteMap: function(place,title) {
var output = this.treeTraverse(title,0,this.getTagglyOpt(title,"sortBy"),this.getTagglyOpt(title,"sortOrder"));
return this.drawTable(place,
this.makeColumns(output.split(/(?=^\*\[)/m),parseInt(this.getTagglyOpt(title,"numCols"))), // regexp magic
"sitemap"
);
},
macros: {
tagglyTagging: {
handler: function (place,macroName,params,wikifier,paramString,tiddler) {
var refreshContainer = createTiddlyElement(place,"div");
// do some refresh magic to make it keep the list fresh - thanks Saq
refreshContainer.setAttribute("refresh","macro");
refreshContainer.setAttribute("macroName",macroName);
refreshContainer.setAttribute("title",tiddler.title);
this.refresh(refreshContainer);
},
refresh: function(place) {
var title = place.getAttribute("title");
removeChildren(place);
if (store.getTaggedTiddlers(title).length > 0) {
var lingo = config.taggly.lingo;
config.taggly.createListControl(place,title,"hideState");
if (config.taggly.getTagglyOpt(title,"hideState") == "show") {
createTiddlyElement(place,"span",null,"tagglyLabel",lingo.labels.label.format([title]));
config.taggly.createListControl(place,title,"title");
config.taggly.createListControl(place,title,"modified");
config.taggly.createListControl(place,title,"created");
config.taggly.createListControl(place,title,"listMode");
config.taggly.createListControl(place,title,"numCols");
config.taggly.createTagglyList(place,title);
}
}
}
}
},
// todo fix these up a bit
styles:
"/*{{{*/\n"+
"/* created by TagglyTaggingPlugin */\n"+
".tagglyTagging { padding-top:0.5em; }\n"+
".tagglyTagging li.listTitle { display:none; }\n"+
".tagglyTagging ul {\n"+
" margin-top:0px; padding-top:0.5em; padding-left:2em;\n"+
" margin-bottom:0px; padding-bottom:0px;\n"+
"}\n"+
".tagglyTagging { vertical-align: top; margin:0px; padding:0px; }\n"+
".tagglyTagging table { margin:0px; padding:0px; }\n"+
".tagglyTagging .button { display:none; margin-left:3px; margin-right:3px; }\n"+
".tagglyTagging .button, .tagglyTagging .hidebutton {\n"+
" color:[[ColorPalette::TertiaryLight]]; font-size:90%;\n"+
" border:0px; padding-left:0.3em;padding-right:0.3em;\n"+
"}\n"+
".tagglyTagging .button:hover, .hidebutton:hover {\n"+
" background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]];\n"+
"}\n"+
".selected .tagglyTagging .button {\n"+
" display:inline;\n"+
"}\n"+
".tagglyTagging .hidebutton { color:[[ColorPalette::Background]]; }\n"+
".selected .tagglyTagging .hidebutton { color:[[ColorPalette::TertiaryLight]] }\n"+
".tagglyLabel { color:[[ColorPalette::TertiaryMid]]; font-size:90%; }\n"+
".tagglyTagging ul {padding-top:0px; padding-bottom:0.5em; margin-left:1em; }\n"+
".tagglyTagging ul ul {list-style-type:disc; margin-left:-1em;}\n"+
".tagglyTagging ul ul li {margin-left:0.5em; }\n"+
".editLabel { font-size:90%; padding-top:0.5em; }\n"+
".tagglyTagging .commas { padding-left:1.8em; }\n"+
"/*}}}*/\n"+
"",
init: function() {
merge(config.macros,this.macros);
config.shadowTiddlers["TagglyTaggingStyles"] = this.styles;
if (store)
store.addNotification("TagglyTaggingStyles",refreshStyles);
else
config.notifyTiddlers.push({name:"TagglyTaggingStyles", notify: refreshStyles});
}
};
config.taggly.init();
//}}}
To hide text within a tiddler so that it is not displayed you can wrap it in {{{/%}}} and {{{%/}}}. It can be a useful trick for hiding drafts or annotating complex markup. Edit this tiddler to see an example.
/%This text is not displayed
until you try to edit %/
<div class='title' macro='view title'></div>
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='editor' macro='edit title'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<!--{{{-->
<div id='header'>
</div>
<div id='sidebar'>
<div id='titleLine'></div>
<span id='siteTitle' refresh='content' tiddler='SiteTitle'></span>- <span id='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
/***
http://tiddlystyles.com/#theme:TiddlyPedia
***/
/*{{{*/
body{
background: #f9f9f9 url(headbg.jpg) no-repeat top left;
}
#titleLine{
display: block;
background: transparent url(wiki.png) no-repeat 18px -7px;
_background: transparent;
height: 120px;
_height: 135px;
width: 150px;
color: #000;
border: 1px;
padding: 0;
margin: 0;
}
* html #titleLine{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wiki.png',sizingMethod='scale');
}
#contentWrapper #siteTitle a{
display: inline;
font-weight: bold;
color: #000;
font-size: 13px;
}
#siteSubtitle{
padding: 0;
}
#siteTitle, #mainMenu{
position: static;
}
#contentWrapper #sidebar{
top: 0;
left: 0;
}
#displayArea {
margin: 0 0 0 15em;
}
#messageArea{
position: fixed;
top: 0;
right: 0;
font-size: 10px;
border: 1px solid #aaa;
background: #fff;
z-index: 25;
}
#messageArea a:link{
color: #002bb8;
text-decoration: none;
}
#messageArea a:hover{
text-decoration: underline;
}
.viewer{
background: #fff;
border: 1px solid #aaa;
padding: 1em;
margin: 0;
}
.body{
padding: 1px;
}
.title{
background: #fff;
border: 1px solid #aaa;
display: inline;
margin-left: .5em;
padding: 2px .5em;
border-bottom: 0;
font-weight: bold;
color: #000;
font-size: 1.2em;
}
.toolbar{
visibility: visible;
display: inline;
padding: 0;
font-family: sans-serif;
}
.toolbar a.button:link,.toolbar a.button:visited{
background: #fff;
border: 1px solid #aaa;
color:#002bb8;
font-size: 11px;
padding-bottom: 0;
margin-right: .25em;
}
/* TiddlyPedia was Created by Clinton Checketts based on the Monobook skin of Wikipedia */
#contentWrapper .toolbar .button:hover{
border-bottom: 1px solid #fff;
background: #fff;
color:#002bb8;
}
.toolbar a.button:hover{
border-bottom: 1px solid #fff;
background: #fff;
color:#000;
}
#displayArea .viewer a,a.button:link,a.button:visited,
a.tiddlyLink:link,a.tiddlyLink:visited,
#sidebarOptions .sliderPanel a{
color:#002bb8;
background: transparent;
border: 0;
}
.viewer a:hover,a.button:hover,a.button:active,
a.tiddlyLink:hover,a.tiddlyLink:active,
.viewer a.button:hover,
#sidebarOptions .sliderPanel a:hover{
color:#002bb8;
background: transparent;
text-decoration: underline;
}
#mainMenu{
font-family: sans-serif;
text-align: left;
font-size: x-small;
width: 100%;
margin: 0;
padding: 0;
}
#mainMenu h1{
font-size: 11px;
font-weight: normal;
padding: 0;
margin: 0;
background: transparent;
}
#mainMenu ul{
font-size: 11px;
border: 1px solid #aaa;
padding: .25em 0;
margin: 0;
list-style-type: square;
list-style-image: url(bullet.gif);
background: #fff;
width: 100%;
}
#mainMenu li{
margin: 0 0 0 2em;
padding: 0;
}
#contentWrapper #mainMenu a:link,#contentWrapper #mainMenu a:visited{
color:#002bb8;
padding: 0;
margin: 0;
background: transparent;
}
#mainMenu .externalLink {
text-decoration: none;
}
#mainMenu .externalLink:hover {
text-decoration: underline;
}
#sidebar{
padding: .5em;
font-family: sans-serif;
}
#sidebarOptions{
border: 1px solid #aaa;
background: #fff;
margin-top: .5em;
width: 100%;
}
#sidebar .sliderPanel{
margin: 0;
}
#contentWrapper #sidebarOptions .button,#contentWrapper #sidebarOptions .button:hover{
color:#002bb8;
padding: .1em 0 .1em 2em;
background: transparent url(bullet.gif) 10px -2px no-repeat;
}
#sidebarOptions input{
width: 80%;
margin: 0 .5em;
}
#sidebarTabs{
background: #fff;
margin-top: .5em;
width: 100%;
}
#sidebarTabs .tabContents,#sidebarTabs .tabContents .tabContents{
border: 1px solid #aaa;
background: #fff;
}
#sidebarTabs .tabSelected,#sidebarTabs .tabcontents .tabSelected {
background: #fff;
border: 1px solid #aaa;
border-bottom: 0;
cursor: default;
padding-bottom: 3px;
color: #000;
}
#sidebarTabs .tabUnselected,#sidebarTabs .tabContents .tabUnselected{
background: #aaa;
padding-bottom: 0;
color: #000;
}
#contentWrapper #sidebarTabs .tiddlyLink,#contentWrapper #sidebarTabs .button,
#contentWrapper #sidebarTabs a.tiddlyLink:hover,#contentWrapper #sidebarTabs a.button:hover{
background: transparent;
color: #002bb8;
}
.footer{
margin: -1em 0 1em 0;
}
.footer .button:hover,.editorFooter .button:hover{
background: transparent;
color: #002bb8;
border-bottom: 1px solid #002bb8;
}
#popup{
background: #e9e9e9;
color: #000;
}
#popup hr{
border-color: #aaa;
background-color: #aaa;
}
#popup a{
color: #000;
}
#popup a:hover,#contentWrapper #sidebarTabs #popup a:hover{
background: #666;
color: #fff;
text-decoration: none;
}
#displayArea .tiddler a.tiddlyLinkNonExisting{
color: #ba0000;
}
#displayArea .tiddler a.externalLink{
text-decoration: none;
color:#002bb8;
padding-right: 1em;
background: transparent url(external.png) 100% 50% no-repeat;
}
#displayArea .tiddler a.externalLink:hover{
text-decoration: underline;
}
.viewer pre{
background: #e9e9e9;
border: 1px solid #666;
}
.viewer h1, .viewer h2, .viewer h3, .viewer h4, .viewer h5, .viewer h6{
background: transparent;
border-bottom: .2em solid #aaa;
}
#sidebar .sliderPanel{
background: #e9e9e9;
}
#sidebar .sliderPanel input{width: auto;}
.tagged, .tagging, .listTitle{
float: none;
display: inline;
}
.tagged li, .tagging li,
.tagged ul, .tagging ul{
display: inline;
}
/*}}}*/
<!--{{{-->
<div class='title' macro='view title'></div>
<div class='toolbar' macro='toolbar -closeTiddler closeOthers +editTiddler permalink references jump'></div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
~TiddlyWiki is a single html file which has all the characteristics of a wiki - including all of the content, the functionality (including editing, saving, tagging and searching) and the style sheet. Because it's a single file, it's very portable - you can email it, put it on a web server or share it via a USB stick.
See it here: [[http://www.tiddlywiki.com/|http://www.tiddlywiki.com/]]
TiddlyWiki has been used as the basis of a couple of experiments in hypertext fiction right from the start GinaTrapani created [[Baby Dog Sitter|http://scribbling.net/tiddlywiki-and-non-linear-fiction]] with the FirstVersion of TiddlyWiki, followed by "[[Die, Vampire! Die!|http://www.davidvanwert.com/wiki/dievampiredie.html]]" from DavidVanWert and AlexSchroeders [[Rose|http://www.emacswiki.org/alex/rose.html]].
Perhaps the most ambitious and sustained experiment is Gimcrack'd (http://gimcrackd.com/), and CharlesStross' [[Singularity!|http://www.accelerando.org/_static/toughguide.html]] is a fun read.
The ToolbarMacro is primarily used in [[formatting TiddlyWiki|HowToFormatThePage]]. It defines the toolbar that appears when the mouse hovers over a tiddler.
!Code
{{{
<<toolbar closeTiddler -editTiddler +jump>>
}}}
!Execution
<<toolbar closeTiddler -editTiddler +jump>>
!Arguments
The commands available to use in the Toolbar are listed [[here|http://www.tiddlywiki.com/#tag:commands]].
Commands that are preceded by a + are executed when the user pushes the ~Ctrl-Enter keyboard shortcut or when the user doubleclicks the tiddler. Commands preceded by a - are executed when the user presses Esc on the keyboard.
<!--{{{-->
<div class='title' macro='view title'></div>
<div class='toolbar' macro='toolbar -closeTiddler closeOthers +editTiddler permalink references jump'></div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
Welcome to Jarada's TiddlyWiki Plugin Repository. For instructions on how to download these plugins into your own TiddlyWiki file, [[click here|Download Instructions]]. This file was last updated on the 25 May 2009 14:16. Today is the <<today>>.
+++[List of Inbuilt Macros|Click to Open]
These macros are already present in TiddlyWiki (and are taken from [[here|http://www.blogjones.com/TiddlyWikiTutorial.html#Macros]])
<<forEachTiddler where 'tiddler.tags.containsAll(["Macros"])' sortBy '(tiddler.title.toLowerCase())' >>
===
+++[List of Plugins|Click to Open]
Below is a list of additional plugins that I use and recommend.
<<tiddler [[Plugins Help]]>>
Don't forget there are [[loads more|http://delicious.com/tag/tiddlywikiplugin]]! Feel free to [[tell me|http://jarada.co.uk/Productions/contact.php]] of any you recommend.
===
+++[List of Formatting Help Tiddlers|Click to Open]
Below is a list of formatting help.
<<forEachTiddler where 'tiddler.tags.containsAll(["formatting"])' sortBy '(tiddler.title.toLowerCase())' >>
===
+++[Fun Ways of Using TiddlyWiki|Click to Open]
TiddlyWiki's have been used for many different purposes.
*They can be used to produce interative fictional stories called TiddlyWikiFiction. Although a lot of those links don't work, check out [[Gimcrack'd|http://gimcrackd.com/]].
===
Sometimes it's handy to be able to write WikiWords without them being recognised as links (for people's names, for instance). You can do this by preceding the WikiWord with a tilde ({{{~}}}). For example, ~JamesBond, ~JavaScript and ~TiddlyWiki
!Code
{{{
The following lists all tiddlers in alphabetical order:
<<list>>
}}}
!Execution
The following lists all tiddlers in alphabetical order:
<<list>>
!Code
{{{
Write a <<newJournal "DD MMM YYYY">> entry.
}}}
!Execution
Write a <<newJournal "DD MMM YYYY">> entry.
!Code
{{{
Create a <<newTiddler>>.
}}}
!Execution
Create a <<newTiddler>>.
!Code
{{{
<<slider chkSlider Welcome slider "Click here to slide out the Welcome message">>
}}}
!Execution
<<slider chkSlider Welcome slider "Click here to slide out the Welcome message">>
!Arguments
(This is copied from the original TiddlyWiki documentation)
* cookie name to be used to save the state of the slider
* name of the tiddler to include in the slider
* title text of the slider
* tooltip text of the slider
version.extensions.smileyMacro = {major: 0, minor: 1, revision: 0, date: new Date(2005,7,20)};
//Author: Alan Hecht
config.macros.smiley = {}
config.macros.smiley.handler = function(place,macroName,params)
{
var palette = ["transparent","#000000","#1a1507","#352e18","#464646","#666666","#a3141e","#b06b63","#cc9900","#dd9030","#dddddd","#e89d00","#edc32a","#f3cb3c","#fdf201","#fdf526","#ff3149","#ffac00","#ffbf06","#ffc846","#ffcc66","#ffd758","#ffdd01","#ffea7b","#ffed55","#ffffff"];
var data = params;
var imageMap = null;
if(data[0] == ":-)" || data[0] == ":)")
imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";
else if(data[0] == ":-(" || data[0] == ":(")
imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyyyyyyuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwbwwwwsbllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";
else if(data[0] == ";-)" || data[0] == ";)")
imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyxxxxxuujbaadyyyxxxeetttdabppphddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwboooowwwbllbbwwwboooowbrllbacwwwbbbbbrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";
else if(data[0] == ":-|" || data[0] == ":|")
imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyffyffuujbaadyyyeeyeetttdabppppddyddpmmlbbwoooooooowsrlbbwwpooooowwmrlbbwwoooooowwrllbbwwwwbbbbbsrllbacwwwwwwwsrllcaablswwwwsrrlibaaablsssrrllibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";
else if(data[0] == ":-D" || data[0] == ":D")
imageMap = "aaaaabbbbbaaaaaaaabdtyyvtdbaaaaabnyxxxxxujbaaabmyyeeyeeuujbaadyyyeeyeetttdabppppyyyyypmmlbbwbbbbbbbbbbblbbwbkzzzzzzzkbwbbwbfzzzzzzzfbwbbwbkzzzzzzzkbwbacwbkzzzzzkblcaablsbkzzzkblibaaablsbbbbblibaaaaabcrrlllcbaaaaaaaabbbbbaaaaa";
else
createTiddlyElement(place,"span",null,"errorNoSuchMacro","unknown smiley");
if(imageMap)
{
var box = createTiddlyElement(place,"span",null,"smiley",String.fromCharCode(160));
box.style.position = "relative";
box.style.width = "15px";
box.style.height = "15px";
box.style.marginLeft = "1px";
box.style.marginRight = "1px";
box.style.paddingRight = "12px";
box.style.verticalAlign = "top";
//now divide into 15x15 grid and create each pixel
// rows
for(r=0; r<15; r++)
{
// columns
for(c=0; c<15; c++)
{
//create each pixel with the correct background
var pix = document.createElement("img");
pix.className = "smileyPixel";
pix.style.position = "absolute";
pix.border = 0;
pix.style.top = r + "px";
pix.style.left = c + "px";
pix.style.width = "1px";
pix.style.height = "1px";
pix.style.backgroundColor = palette[imageMap.charCodeAt((r*15)+c)-97];
pix.src = "data:image/gif,GIF89a%01%00%01%00%91%FF%00%FF%FF%FF%00%00%00%C0%C0%C0%00%00%00!%F9%04%01%00%00%02%00%2C%00%00%00%00%01%00%01%00%40%02%02T%01%00%3B";
box.appendChild(pix);
}
}
}
}
!Code
{{{
<<tabs tabsClass
"Plugin Help" "A list of how all the Custom Plugins work" [[Plugins Help]]
Tables "A description of how tables work in TiddlyWiki" Tables
>>
}}}
!Execution
<<tabs tabsClass
"Plugin Help" "A list of how all the Custom Plugins work" [[Plugins Help]]
Tables "A description of how tables work in TiddlyWiki" Tables
>>
!Parameters
*First Line
**tabsClass: The CSS class that the tabs box takes; useful for formating your StyleSheet.
*Other Lines
**The title of the tab
**The text that appears when your mouseover the tab
**The tiddler that appears when you click the tab.
!Code
{{{
Click here to see all the tags marked <<tag Features>>.
}}}
!Execution
Click here to see all the tags marked <<tag Features>>.
!Code
{{{
<<tiddler Welcome>>
}}}
!Execution
<<tiddler Welcome>>
!Warning:
There is no protection against setting up an infinite loop using this function.
!Code
{{{
Today is <<today>>.
}}}
!Execution
Today is <<today>>.
!Code
{{{
What version of TiddlyWiki is this? <<version>>
}}}
!Execution
What version of TiddlyWiki is this? <<version>>