mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-04 13:19:11 +00:00
Code Issues Releases Wiki Activity

Change chooser macro to use embedded content

Browse Source 
Not quite done with this yet.
This commit is contained in:
Jeremy Ruston 2012-06-11 17:37:34 +01:00
parent a4a2b27749
commit f59c24f053
3 changed files with 70 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
core/modules/macros/chooser.js
View File

@ -22,51 +22,46 @@ exports.info = {
exports.showChooser = function() { exports.showChooser = function() {
if(!this.chooserDisplayed) { if(!this.chooserDisplayed) {
this.chooserDisplayed = true; this.chooserDisplayed = true;
var nodes = []; this.child.children[0].children = [];
this.wiki.forEachTiddler("title",function(title,tiddler) { for(var t=0; t<this.content.length; t++) {
nodes.push($tw.Tree.Element("li",{ var node = this.content[t].clone();
"data-link": title node.execute(this.parents,this.tiddlerTitle);
},[ node.renderInDom(this.child.children[0].domNode);
$tw.Tree.Text(title) this.child.children[0].children.push(node);
])); }
});
var wrapper = $tw.Tree.Element("ul",{},nodes);
wrapper.execute(this.parents,this.tiddlerTitle);
this.children = [wrapper];
this.children[0].renderInDom(this.domNode);
} }
}; };
/* /*
Select the appropriate chooser item given a touch/mouse position in screen coordinates Select the appropriate chooser item given a touch/mouse position in screen coordinates
*/ */
exports.select = function(y) { // exports.select = function(y) {
if(this.children.length > 0) { // if(this.children.length > 0) {
var targetIndex = Math.floor(this.children[0].domNode.childNodes.length * (y/window.innerHeight)), // var targetIndex = Math.floor(this.children[0].domNode.childNodes.length * (y/window.innerHeight)),
target = this.children[0].domNode.childNodes[targetIndex]; // target = this.children[0].domNode.childNodes[targetIndex];
if(target) { // if(target) {
this.deselect(); // this.deselect();
this.selectedNode = target; // this.selectedNode = target;
$tw.utils.addClass(target,"selected"); // $tw.utils.addClass(target,"selected");
} // }
} // }
}; // };
exports.deselect = function() { // exports.deselect = function() {
if(this.selectedNode) { // if(this.selectedNode) {
$tw.utils.removeClass(this.selectedNode,"selected"); // $tw.utils.removeClass(this.selectedNode,"selected");
this.selectedNode = null; // this.selectedNode = null;
} // }
}; // };
exports.action = function() { // exports.action = function() {
if(this.selectedNode) { // if(this.selectedNode) {
var navEvent = document.createEvent("Event"); // var navEvent = document.createEvent("Event");
navEvent.initEvent("tw-navigate",true,true); // navEvent.initEvent("tw-navigate",true,true);
navEvent.navigateTo = this.selectedNode.getAttribute("data-link"); // navEvent.navigateTo = this.selectedNode.getAttribute("data-link");
this.domNode.dispatchEvent(navEvent); // this.domNode.dispatchEvent(navEvent);
} // }
}; // };
/* /*
Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates
@ -74,13 +69,13 @@ Set the position of the chooser panel within its wrapper given a touch/mouse pos
exports.hoverChooser = function(x,y) { exports.hoverChooser = function(x,y) {
if(this.chooserDisplayed) { if(this.chooserDisplayed) {
// Get the target element that the touch/mouse is over // Get the target element that the touch/mouse is over
this.select(y); // this.select(y);
// Things we need for sizing and positioning the chooser // Things we need for sizing and positioning the chooser
var domPanel = this.children[0].domNode, var domPanel = this.child.children[0].domNode,
heightPanel = domPanel.offsetHeight, heightPanel = domPanel.offsetHeight,
widthPanel = domPanel.offsetWidth; widthPanel = domPanel.offsetWidth;
// Position the chooser div to account for scrolling // Position the chooser div to account for scrolling
this.children[0].domNode.style.top = window.pageYOffset + "px"; domPanel.style.top = window.pageYOffset + "px";
// Scale the panel to fit // Scale the panel to fit
var scaleFactor = window.innerHeight/heightPanel; var scaleFactor = window.innerHeight/heightPanel;
// Scale up as we move right // Scale up as we move right
@ -96,10 +91,12 @@ exports.hoverChooser = function(x,y) {
exports.hideChooser = function() { exports.hideChooser = function() {
if(this.chooserDisplayed) { if(this.chooserDisplayed) {
this.deselect(); // this.deselect();
this.chooserDisplayed = false; this.chooserDisplayed = false;
this.domNode.removeChild(this.children[0].domNode); for(var t=0; t<this.child.children[0].children.length; t++) {
this.children = []; this.child.children[0].domNode.removeChild(this.child.children[0].children[t].domNode);
}
this.child.children[0].children = [];
} }
}; };
@ -115,12 +112,12 @@ exports.handleEvent = function(event) {
event.preventDefault(); event.preventDefault();
return false; return false;
case "touchend": case "touchend":
this.action(); // this.action();
this.hideChooser(); this.hideChooser();
event.preventDefault(); event.preventDefault();
return false; return false;
case "mouseover": case "mouseover":
if(event.target === this.domNode) { if(event.target === this.child.domNode) {
this.showChooser(); this.showChooser();
this.hoverChooser(event.clientX,event.clientY); this.hoverChooser(event.clientX,event.clientY);
event.preventDefault(); event.preventDefault();
@ -132,12 +129,12 @@ exports.handleEvent = function(event) {
event.preventDefault(); event.preventDefault();
return false; return false;
case "mouseup": case "mouseup":
this.action(); // this.action();
this.hideChooser(); this.hideChooser();
event.preventDefault(); event.preventDefault();
return false; return false;
case "mouseout": case "mouseout":
if(!$tw.utils.domContains(this.domNode,event.relatedTarget)) { if(!$tw.utils.domContains(this.child.domNode,event.relatedTarget)) {
this.hideChooser(); this.hideChooser();
event.preventDefault(); event.preventDefault();
return false; return false;
@ -149,19 +146,33 @@ exports.handleEvent = function(event) {
exports.executeMacro = function() { exports.executeMacro = function() {
this.chooserDisplayed = false; this.chooserDisplayed = false;
var attributes = { var wrapperAttributes = {
style: { style: {
"position": "absolute", "position": "fixed",
"left": "0", "left": "0",
"top": "0", "top": "0",
"min-width": "16px", "min-width": "16px",
"height": "100%" // Makes the height the same as the body, since the body is position:relative "z-index": "2000",
} "height": "100%" // Makes the height the same as the body, since the body is position:relative
}; }
},
innerAttributes = {
style: {
"margin": "0 0 0 0",
"padding": "0px 4px 0px 4px",
"top": "0",
"min-width": "16px",
"z-index": "2000",
"background": "#ddd",
"border-right": "1px solid #aaa"
}
};
if(this.classes) { if(this.classes) {
attributes["class"] = this.classes.slice(0); wrapperAttributes["class"] = this.classes.slice(0);
} }
return $tw.Tree.Element("div",attributes,[]); return $tw.Tree.Element("div",wrapperAttributes,[
$tw.Tree.Element("div",innerAttributes,[])
]);
}; };
})(); })();

2
core/templates/PageTemplate.tid
View File

@ -3,7 +3,7 @@ title: $:/templates/PageTemplate
<div class="container-fluid"> <div class="container-fluid">
<<story story:"$:/StoryTiddlers" storyview:scroller>< <<story story:"$:/StoryTiddlers" storyview:scroller><
{{navigation-panel{ {{navigation-panel{
<<chooser>> <<chooser><<<list all>>>>
}}} }}}
<<zoomer>> <<zoomer>>
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">

19
tw5.com/wiki/styles.css.tid
View File

@ -158,22 +158,3 @@ a.tw-tiddlylink-missing {
.javascript-source .javascript-line-comment { .javascript-source .javascript-line-comment {
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
} }
.navigation-panel ul {
position: relative;
top: 0;
margin: 0 0 0 0;
padding: 0px 4px 0px 4px;
list-style: none;
background: #ddd;
border-right: 1px solid #aaa;
}
.navigation-panel ul li {
padding: 2px 4px 2px 4px;
}
.navigation-panel .selected {
color: #fff;
background: #a55;
}