From a4600c6c16e19e19e17b5d08446e7650453e9bcc Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Wed, 25 Jan 2012 15:35:52 +0000 Subject: [PATCH] Put the tiddler info stuff into sliders --- js/App.js | 12 +++++ js/Utils.js | 54 +++++++++++++++++----- js/WikiTextParseTree.js | 22 +++++---- js/macros/info.js | 6 +-- js/macros/slider.js | 22 ++------- readme.md | 2 +- tiddlywiki5/styles.css | 69 ++++++++++++++++++++++++++++- tiddlywiki5/tiddlers/HelloThere.tid | 1 + 8 files changed, 146 insertions(+), 42 deletions(-) diff --git a/js/App.js b/js/App.js index 6c9271cdc..c7e931a03 100644 --- a/js/App.js +++ b/js/App.js @@ -107,6 +107,18 @@ var App = function() { navigators.registerNavigator("StoryNavigator",new StoryNavigator(navigators)); // Use the story navigator for all links navigators.install("a","StoryNavigator"); + // Install an event handler for sliders + document.addEventListener("click",function(e) { + var el = e.target, + matchesSelector = el.matchesSelector || el.mozMatchesSelector || + el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector; + if(matchesSelector && matchesSelector.call(el,".tw-slider-label")) { + var currState = el.nextSibling.style.display; + el.nextSibling.style.display = currState === "block" ? "none" : "block"; + e.preventDefault(); + return false; + } + },false); // Open the PageTemplate var div = document.createElement("div"); div.innerHTML = this.store.renderTiddler("text/html","PageTemplate"); diff --git a/js/Utils.js b/js/Utils.js index e52ccd12d..a5aea606e 100755 --- a/js/Utils.js +++ b/js/Utils.js @@ -284,6 +284,36 @@ utils.stitchElement = function(element,attributes,options) { return output.join(""); }; +utils.stitchSlider = function(type,label,tooltip,body) { + if(type === "text/html") { + var labelAttrs = {}; + if(tooltip) { + labelAttrs.alt = tooltip; + labelAttrs.title = tooltip; + } + var labelNode = utils.stitchElement("a",labelAttrs,{ + content: label, + classNames: ["tw-slider-label"] + }), + bodyNode = utils.stitchElement("div",{ + style: { + display: "none" + } + },{ + content: body, + classNames: ["tw-slider-body"] + }); + return utils.stitchElement("div",null,{ + content: labelNode + bodyNode, + classNames: ["tw-slider"] + }); + } else if(type === "text/plain") { + return label + "\n" + body; + } else { + return null; + } +}; + /* Render an object and its children to a specified MIME type type: target MIME type @@ -310,18 +340,22 @@ utils.renderObject = function(output,type,node,customTemplates) { }, renderFieldHtml = function(output,name,value) { output.push(utils.stitchElement("li",null,{classNames: ["treeNodeField"]})); - output.push(utils.stitchElement("span",null,{ - content: utils.htmlEncode(name), - classNames: (typeof value === "object") ? ["label"] : ["splitLabel","splitLabelLeft"] - })); - if (value instanceof Array) { - renderArrayHtml(output,value); - } else if(typeof value === "object") { - renderNodeHtml(output,value); + if(typeof value === "object") { + output.push(utils.stitchElement("span",null,{ + classNames: ["label"], + content: utils.htmlEncode(name) + })); + renderNodeHtml(output,value); } else { output.push(utils.stitchElement("span",null,{ - content: utils.htmlEncode(value), - classNames: ["splitLabelRight"] + classNames: ["splitLabel"], + content: utils.stitchElement("span",null,{ + classNames: ["splitLabelLeft"], + content: utils.htmlEncode(name) + }) + utils.stitchElement("span",null,{ + classNames: ["splitLabelRight"], + content: utils.htmlEncode(value) + }) })); } output.push(""); diff --git a/js/WikiTextParseTree.js b/js/WikiTextParseTree.js index ef3ee57f0..22eb2e320 100644 --- a/js/WikiTextParseTree.js +++ b/js/WikiTextParseTree.js @@ -355,26 +355,32 @@ WikiTextParseTree.prototype.toString = function(type) { classNames: ["treeNode","label"] })); for(var f in node.attributes) { - output.push(utils.string("span",null,{ + output.push(utils.stitchElement("span",null,{ classNames: ["treeNode"] })); var v = node.attributes[f]; - output.push(utils.stitchElement("span",null,{ - content: utils.htmlEncode(f), - classNames: (typeof v === "object") ? ["label"] : ["splitLabel","splitLabelLeft"] - })); if(typeof v === "string") { v = '"' + utils.stringify(v) + '"'; } else if(v instanceof Array) { v = v.join("; "); } if(typeof v === "object") { + output.push(utils.stitchElement("span",null,{ + classNames: ["label"], + content: utils.htmlEncode(f) + })); utils.renderObject(output,type,v); } else { output.push(utils.stitchElement("span",null,{ - content: utils.htmlEncode(v), - classNames: ["splitLabelRight"] - })); + classNames: ["splitLabel"], + content: utils.stitchElement("span",null,{ + classNames: ["splitLabelLeft"], + content: utils.htmlEncode(f) + }) + utils.stitchElement("span",null,{ + classNames: ["splitLabelRight"], + content: utils.htmlEncode(v) + }) + })); } output.push(""); } diff --git a/js/macros/info.js b/js/macros/info.js index 01e5961f8..37d1b056d 100644 --- a/js/macros/info.js +++ b/js/macros/info.js @@ -17,15 +17,15 @@ exports.macro = { }, handler: function(type,tiddler,store,params) { var encoder = type === "text/html" ? utils.htmlEncode : function(x) {return x;}, - info = params.info ? params.info : "parsetree"; + info = params.info || "parsetree"; if(tiddler) { var parseTree = store.parseTiddler(tiddler.title); switch(info) { case "parsetree": - return "Parse tree: " + parseTree.toString(type); + return utils.stitchSlider(type,"Parse tree","The parse tree for this tiddler",parseTree.toString(type)); //break; case "compiled": - return "Compiled as: " + parseTree.compile(type).toString(type); + return utils.stitchSlider(type,"Render functions","The render functions for this tiddler",parseTree.compile(type).toString(type)); //break; case "dependencies": if(parseTree.dependencies === null) { diff --git a/js/macros/slider.js b/js/macros/slider.js index 8f33416fc..4fac2edc8 100644 --- a/js/macros/slider.js +++ b/js/macros/slider.js @@ -20,24 +20,10 @@ exports.macro = { }, handler: function(type,tiddler,store,params) { if(type === "text/html") { - var sliderHandle = utils.stitchElement("div",params.tooltip ? { - title: utils.htmlEncode(params.tooltip) - } : null,{ - content: utils.htmlEncode(params.label), - classNames: ["tw-slider-handle"] - }), - sliderBody = utils.stitchElement("div",{ - style: { - display: "block" - } - },{ - content: store.renderTiddler(type,params.targetTiddler), - classNames: ["tw-slider-body"] - }); - return utils.stitchElement("div",null,{ - content: sliderHandle + sliderBody, - classNames: ["tw-slider"] - }); + return utils.stitchSlider(type, + params.label, + params.tooltip, + store.renderTiddler(type,params.targetTiddler)); } else if(type === "text/plain") { return store.renderTiddler(type,params.target); } diff --git a/readme.md b/readme.md index 09b2838ac..651c8a77f 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -

Welcome to TiddlyWiki5

Welcome to TiddlyWiki5, an interactive wiki written in JavaScript to run in the browser or under node.js. It is a reboot of TiddlyWiki (http://www.tiddlywiki.com/), the now venerable, reusable non-linear personal web notebook first released in 2004.

TiddlyWiki is based on the idea of making information more useful by modelling it in the smallest meaningful semantic units, referred to as "tiddlers". Structure comes from links, tags, and stories (sequences of tiddlers). Tiddlers use a wikitext notation that concisely represents a wide range of text formatting and hypertext features.

TiddlyWiki has earned an enduring place as a tool that people love using for its rich, interactive interface to manipulate complex data with structure that doesn't easily fit into conventional tools like spreadsheets or wordprocessors. Because people can use it without needing any complicated server infrastructure, and because it is open source, it has bought unprecedented freedom to people to keep their precious information under their own control. TiddlyWiki was originally created by JeremyRuston and is now a thriving open source project with a busy Community of independent developers.

Usage

TiddlyWiki5 can be used on the command line to perform an extensive set of operations based on RecipeFiles, TiddlerFiles and TiddlyWikiFiles.

Usage:
+

Welcome to TiddlyWiki5

Welcome to TiddlyWiki5, an interactive wiki written in JavaScript to run in the browser or under node.js. It is a reboot of TiddlyWiki (http://www.tiddlywiki.com/), the now venerable, reusable non-linear personal web notebook first released in 2004.


TiddlyWiki is based on the idea of making information more useful by modelling it in the smallest meaningful semantic units, referred to as "tiddlers". Structure comes from links, tags, and stories (sequences of tiddlers). Tiddlers use a wikitext notation that concisely represents a wide range of text formatting and hypertext features.

TiddlyWiki has earned an enduring place as a tool that people love using for its rich, interactive interface to manipulate complex data with structure that doesn't easily fit into conventional tools like spreadsheets or wordprocessors. Because people can use it without needing any complicated server infrastructure, and because it is open source, it has bought unprecedented freedom to people to keep their precious information under their own control. TiddlyWiki was originally created by JeremyRuston and is now a thriving open source project with a busy Community of independent developers.

Usage

TiddlyWiki5 can be used on the command line to perform an extensive set of operations based on RecipeFiles, TiddlerFiles and TiddlyWikiFiles.

Usage:
node tiddlywiki.js <options>
The command line options are processed sequentially from left to right. Processing pauses during long operations, like loading a recipe file and all the subrecipes and tiddlers that it references. The following options are available:
--recipe <filepath>Loads a specfied .recipe file
--load <filepath>Load additional tiddlers from 2.x.x TiddlyWiki files (.html), .tiddler, .tid, .json or other files
--savewiki <dirpath>Saves all the loaded tiddlers as a single file TiddlyWiki called index.html and an RSS feed called index.xml in a new directory of the specified name
--savetiddler <title> <filename> [<type>]Save an individual tiddler as a specified MIME type, defaults to text/html
--savetiddlers <outdir>Saves all the loaded tiddlers as .tid files in the specified directory
--servewiki <port>Serve the cooked TiddlyWiki over HTTP at /
--servetiddlers <port>Serve individual tiddlers over HTTP at /tiddlertitle
--wikitest <dir>Run wikification tests against the tiddlers in the given directory
--dumpstoreDump the TiddlyWiki store in JSON format
--dumprecipeDump the current recipe in JSON format
--verboseverbose output, useful for debugging

Examples

This example loads the tiddlers from a TiddlyWiki HTML file and makes them available over HTTP:
node tiddlywiki.js --load mywiki.html --servewiki 127.0.0.1:8000 diff --git a/tiddlywiki5/styles.css b/tiddlywiki5/styles.css index 955fd1a49..15ddb692e 100644 --- a/tiddlywiki5/styles.css +++ b/tiddlywiki5/styles.css @@ -7,6 +7,8 @@ body { body { font-size: 15px; line-height: 22px; + max-width: 644px; + margin: auto; } code, pre { font-size: 13px; @@ -40,8 +42,6 @@ pre { word-wrap: break-word; } article { - max-width: 644px; - margin: auto; } .title { font-weight: bold; @@ -156,3 +156,68 @@ a.tw-tiddlylink-missing { background-color: #F89406; color: #fff; } + +.tw-slider-label { + -webkit-box-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.046875) 0px 1px 2px 0px; + -webkit-transition-delay: 0s; + -webkit-transition-duration: 0.1s; + -webkit-transition-property: all; + -webkit-transition-timing-function: linear; + background-color: #E6E6E6; + background-image: -webkit-linear-gradient(top, white, white 25%, #E6E6E6); + background-repeat: no-repeat; + border-bottom-color: #BBB; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-left-color: #CCC; + border-left-style: solid; + border-left-width: 1px; + border-right-color: #CCC; + border-right-style: solid; + border-right-width: 1px; + border-top-color: #CCC; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border-top-style: solid; + border-top-width: 1px; + box-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.046875) 0px 1px 2px 0px; + box-sizing: border-box; + color: #333; + cursor: pointer; + display: inline-block; + font-size: 13px; + font-style: normal; + font-weight: normal; + height: 28px; + letter-spacing: normal; + line-height: normal; + margin-bottom: 0px; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; + overflow-y: visible; + padding-bottom: 6px; + padding-left: 14px; + padding-right: 14px; + padding-top: 5px; + text-align: center; + text-indent: 0px; + text-shadow: rgba(255, 255, 255, 0.746094) 0px 1px 1px; + text-transform: none; + vertical-align: baseline; + width: 131px; + word-spacing: 0px; +} + +.tw-slider-label:hover { + background-color: #e6e6e6; + background-position: 0 -15px; + color: #333; + text-decoration: none; +} + +.tw-slider-label:focus { + outline: 1px dotted #666; +} diff --git a/tiddlywiki5/tiddlers/HelloThere.tid b/tiddlywiki5/tiddlers/HelloThere.tid index 3862ddc13..871b45d51 100644 --- a/tiddlywiki5/tiddlers/HelloThere.tid +++ b/tiddlywiki5/tiddlers/HelloThere.tid @@ -3,6 +3,7 @@ modifier: JeremyRuston Welcome to TiddlyWiki5, an interactive wiki written in JavaScript to run in the browser or under node.js. It is a reboot of TiddlyWiki (http://www.tiddlywiki.com/), the now venerable, reusable non-linear personal web notebook first released in 2004. +<> TiddlyWiki is based on the idea of making information more useful by modelling it in the smallest meaningful semantic units, referred to as "tiddlers". Structure comes from links, tags, and stories (sequences of tiddlers). Tiddlers use a wikitext notation that concisely represents a wide range of text formatting and hypertext features. TiddlyWiki has earned an enduring place as a tool that people [[love using|Raves]] for its rich, interactive interface to [[manipulate complex data|TiddlyWikiConcepts]] with structure that doesn't easily fit into conventional tools like spreadsheets or wordprocessors. Because people can use it without needing any complicated server infrastructure, and because it is [[open source|OpenSourceLicense]], it has bought unprecedented freedom to people to keep their precious information under their own control. TiddlyWiki was originally created by JeremyRuston and is now a thriving [[open source|OpenSourceLicense]] project with a busy [[Community]] of independent developers.