ForeCiteNote - Interactive Note-Taking Platform

1. ForeCiteNote by Emma Nguyen, 11th June 2010

2. Outline • Overview • Server side • Client side • JavaScript classes

3. ForeCiteNote - Overview • A modification of TiddlyWiki • A single PHP/HTML/JavaScript/CSS file • A collection of small blocks of content called “tiddlers” • Tiddlers are invisible (by default) DIVs, loaded on startup (from database/file) to an internal “TiddlyWiki” data structure.

4. ForeCiteNote - Overview • Consists of main area (LHS) and a sidebar (RHS) • Main area is a “Story” – a sequence of visible tiddlers • Configurations are made through special tiddlers : PageTemplate, StyleSheet, etc.

5. ForeCiteNote – Server side • Server side solution in PHP, provides ubiquitous access to a hosted ForeCiteNote • Maintains data integrity between users’ data and ForeCite centralized database: create, modify or delete tiddlers • Provides metadata auto complete • Supports other miscellaneous functionalities : login/logout, register, send mail to users, etc.

6. ForeCiteNote – Client Side • HTML: stores tiddlers as DIVs <div id=“” paperid=“1” title=“Record Matching in Digital Library Metadata” …> <pre> [Note content] </pre> </div> • CSS: defines style • JS: implements FCNote functionalities

7. ForeCiteNote – JS classes - Constructor function pattern function Tiddler(title) { this.title = title; this.text = "";     ... returnthis; } var myTiddler = new Tiddler(“New Tiddler”); (*) - (*) will 1) create a blank Tiddler object, 2) execute the commands listed in Tiddler function

8. ForeCiteNote – JS classes Each Tiddler object has methods associated with it, so we can call myTiddler.isTagged(“test”). Tiddler.prototype.isTagged = function(tag) { returnthis.tags.indexOf(tag) != -1; } function TiddlyWiki() { var tiddlers = {}; // Hashmap by name of tiddlers   ... this.fetchTiddler = function(title){ var t = tiddlers[title];  return t instanceof Tiddler ? t : null; }; }

9. ForeCiteNote – JS classes • Initialization • Main: main() function which runs an initialization sequence on page load • AJAX request • DSR: handles AJAX requests • Animation • Animator: runs the dynamic flow of stepping through an animation, delegating to specific animation type. • Morpher: supports smooth transformation between 2 CSS styles • Scroller: scroll a window to show an element • Slider: slides elements upon opening/closing • Data structures • Tiddler: represents a tiddler (block of text with a title) • TiddlyWiki: represents a collection of tiddlers • Data import/export • Loader/Saver: converts between HTML and a list of tiddlers • Saving: saves FCN, serialized tiddlers to DOM elements and saving to local file system

10. ForeCiteNote – JS classes • Control & Options • Config: General config, control capacities, names of shadow tiddlers, which options can be set… • Commands: toolbar commands (close, edit, delete, close others,…) • Macros: define built-in macros • Options: cookie based preferences. • UI elements • ListView: table-like list • Messages: status notification • NewTiddler: macro for new tiddler, when users hit “new research note” • NewNote: macro for new tiddler, when users hit “new normal note” • Search: search implementation • Toolbar: toolbar shown in the top of tiddler • Wizard: multi-step wizard framework

11. ForeCiteNote – Tiddler • Represents micro-content blocks that make up FCNote • Title • Text • Timestamp • Tags/tasks • Fields : hash of arbitrary properties ..

12. ForeCiteNote – Shadow Tiddler • Used for configuration like stylesheets, site URL, etc • Stored in separated place & treated in a special way • Shadow tiddlers aren’t actually of class Tiddler. • Shadow tiddlers : maps from title to text • Regular tiddlers: maps from title to Tiddler • Immutable, but can be overridden with regular tiddlers of the same name : fallback mechanism

13. ForeCiteNote - TiddlyWiki • Hash of tiddlers, keyed on their titles function TiddlyWiki() { var tiddlers = {}; // Hashmap by name of tiddlers   ... this.clear = function(){ tiddlers = {}; }; this.fetchTiddler = function(title){return tiddlers[title]; }; this.deleteTiddler = function(title){delete tiddlers[title]; }; this.addTiddler = function(tiddler){ tiddlers[tiddler.title] = tiddler; }; } • Main function: manage tiddlers hash, such as add, fetch, remove …a tiddler in tiddlers hash

14. ForeCiteNote - Story • Container of all visible tiddlers in FCNote, whose main properties is containerId and idPrefix • In Story, a “tiddler” is a DOM element • Each tiddler’s ID is idPrefix + title • Story contains logic to display and render tiddlers • Tiddlers are rendered using template (contained in shadow tiddlers) • PageTemplate: overall structure • NoteViewTemplate: show normal notes in view mode • NoteEditTempalte: show normal notes in edit mode • ViewTemplate: show research notes in view mode • EditTemplate: show research notes in edit mode

15. ForeCiteNote - Main • Create new TiddlyWiki data store, populated from invisible “storeArea” div (using TiddlyWiki.prototype.loadFromDiv()) • Create a second data store to hold shadow tiddlers, populated from invisible “shadowArea” div • Create a new Story div • Call several lifecycle event handlers as it loads (get notification every minute) • Set up event propagation - certain tiddlers are notified when certain actions occur E.g.: {name: "SiteTitle", notify: refreshPageTitle}, • Show the display (display header according to online/offline or sandbox mode)