mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 10:07:19 +00:00
Put the tiddler info stuff into sliders
This commit is contained in:
Jeremy Ruston
parent
aba830ff8c
commit
a4600c6c16
12
js/App.js
12
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");
|
||||
|
||||
54
js/Utils.js
54
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("</li>");
|
||||
|
||||
@ -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("</span>");
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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.
|
||||
|
||||
<<slider name "Motovun Jack.jpg" "TiddlyWiki Kitten" "See the kitten">>
|
||||
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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user