JigglyWiki

JigglyWiki is an experiment by PhilHawksworth. It is a clone of TiddlyWiki, the popular single page javascript wiki originally created by Jeremy Ruston and developed by Osmosoft and the TiddlyWiki community.

JigglyWiki is built using jQuery and is intended to demonstrate an unobtrusive use of Javascript. If you disable Javascript in your browser, this page should continue to be visible and navigable, but the more advanced features, will not be available.

Since JigglyWiki exposes the html first, web crawlers and screen readers should be able to more easily understand it and find meaning in its contents.

PhilHawksworth

Phil can't help but explore the possibilities of building a TiddlyWiki clone using jQuery in an attempt to create a version of TiddlyWiki which is based on the contents first, with functionality added via unobtrusive Javascript.

'tis but an experiment.

a sample viewable tiddler

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

another sample viewable tiddler

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

another sample viewable tiddler

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

a sample viewable tiddler

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

help

If javascript is not enabled, you should still be able to use tiddlerlinks to navigate the document.

By default, JigglyWiki will display the tiddlers that you list in the DefaultTiddlers tiddler.

We keep the tiddlers stored as readable html in a div called 'store'. This represents the content of the page. Displaying different tiddlers will not impact the order in which this content is stored but after manipulating the order of tiddler display in the UI, we can reflect those changes back here by calling the Jiggle function to jiggle the contents of the store around to be the same as the displayed tiddlers. That way, when we save our page, the content that search engines and screen readers will find, will be the same as what we can see.

a sample viewable tiddler

another sample viewable tiddler

sample

This tiddler is tagging some others. Do you See? help

shadow

A shadow tiddler is a tiddler which lurks behind the scenes with a default value. You can overwrite it. If you delete it, it will revert to it's default

DefaultTiddlers

ViewTemplate

macro:view, property:title, element:h1, css:tiddlerName macro:view, property:modifier, element:span, css:meta at macro:view, property:modified, element:span, css:meta editclose macro:view, property:text, element:div, css:text

EditTemplate

macro:view, property:title, element:input, css:tiddlerName macro:view, property:modifier, element:span, css:meta at macro:view, property:modified, element:span, css:meta save tiddlercancel
macro:view, property:text, element:textarea

NewTiddlerMacroDev

Here is a call to a macro. In this case it is the NewTiddler macro. macro:newTiddler

TIDDLER_TEMPLATE

TIDDLER_TEXT