miklo
/
TiddlyWiki5
kopia lustrzana https://github.com/miklobit/TiddlyWiki5
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Updated chooser 

It sort of works now
print-window-tiddler
Jeremy Ruston 2012-03-13 15:12:58 +00:00
rodzic 4c01ae392e
commit 98a681f904
2 zmienionych plików z 110 dodań i 46 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

135
js/macros/chooser.js
Wyświetl plik

@ -12,43 +12,86 @@ var Renderer = require("../Renderer.js").Renderer,
Tiddler = require("../Tiddler.js").Tiddler, Tiddler = require("../Tiddler.js").Tiddler,
utils = require("../Utils.js"); utils = require("../Utils.js");
function positionChooserPanel(macroNode,x,y) { function showChooser(macroNode) {
var domWrapper = macroNode.domNode, if(!macroNode.chooserDisplayed) {
heightWrapper = domWrapper.offsetHeight, macroNode.chooserDisplayed = true;
rectWrapper = domWrapper.getBoundingClientRect(), var nodes = [];
domPanel = macroNode.content[0].domNode, macroNode.store.forEachTiddler("title",function(title,tiddler) {
heightPanel = domPanel.offsetHeight, nodes.push(Renderer.ElementNode("li",{
rectPanel = domPanel.getBoundingClientRect(); "data-link": title
// Make the coordinates relative to the wrapper },[
x = x - rectWrapper.left; Renderer.TextNode(title)
y = y - rectWrapper.top; ]));
// Scale the panel to fit });
var scaleFactor = heightWrapper/heightPanel; var wrapper = Renderer.ElementNode("ul",{},nodes);
// Scale up as we move right wrapper.execute(macroNode.parents,macroNode.store.getTiddler(macroNode.tiddlerTitle));
var expandFactor = ((100+x)/100); macroNode.content = [wrapper];
// Set up the transform macroNode.content[0].renderInDom(macroNode.domNode);
var scale = scaleFactor * expandFactor, }
translate = (y / scale) - ((y/heightWrapper) * heightPanel);
domPanel.style.webkitTransformOrigin = "0 0";
domPanel.style.webkitTransform = "scale(" + scale + ") translateY(" + translate + "px)";
} }
function loadContent(macroNode) { function select(macroNode,y) {
var nodes = []; if(macroNode.content.length > 0) {
macroNode.store.forEachTiddler("title",function(title,tiddler) { var targetIndex = Math.floor(macroNode.content[0].domNode.childNodes.length * (y/macroNode.domNode.offsetHeight)),
nodes.push(Renderer.ElementNode("li",{},[ target = macroNode.content[0].domNode.childNodes[targetIndex];
Renderer.TextNode(title) if(target) {
])); deselect(macroNode);
}); macroNode.selectedNode = target;
var wrapper = Renderer.ElementNode("ul",{},nodes); utils.addClass(target,"selected");
wrapper.execute(macroNode.parents,macroNode.store.getTiddler(macroNode.tiddlerTitle)); }
macroNode.content = [wrapper]; }
macroNode.content[0].renderInDom(macroNode.domNode);
} }
function removeContent(macroNode) { function deselect(macroNode) {
macroNode.domNode.removeChild(macroNode.content[0].domNode); if(macroNode.selectedNode) {
macroNode.content = []; utils.removeClass(macroNode.selectedNode,"selected");
macroNode.selectedNode = null;
}
}
function action(macroNode) {
if(macroNode.selectedNode) {
var navEvent = document.createEvent("Event");
navEvent.initEvent("tw-navigate",true,true);
navEvent.navigateTo = macroNode.selectedNode.getAttribute("data-link");
macroNode.domNode.dispatchEvent(navEvent);
}
}
function hoverChooser(macroNode,x,y) {
if(macroNode.chooserDisplayed) {
// Get the target element that the touch/mouse is over
select(macroNode,y);
// Things we need for sizing and positioning the chooser
var domWrapper = macroNode.domNode,
heightWrapper = domWrapper.offsetHeight,
rectWrapper = domWrapper.getBoundingClientRect(),
domPanel = macroNode.content[0].domNode,
heightPanel = domPanel.offsetHeight,
widthPanel = domPanel.offsetWidth;
// Make the coordinates relative to the wrapper
x = x - rectWrapper.left;
y = y - rectWrapper.top;
// Scale the panel to fit
var scaleFactor = heightWrapper/heightPanel;
// Scale up as we move right
var expandFactor = x > 50 ? (x/50) : 1;
// Set up the transform
var scale = scaleFactor * expandFactor,
translateX = 0, //x > 50 ? 0 : -(((50-x)/50) * widthPanel) / scale,
translateY = (y / scale) - ((y/heightWrapper) * heightPanel);
domPanel.style.webkitTransformOrigin = "0 0";
domPanel.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
}
}
function hideChooser(macroNode) {
if(macroNode.chooserDisplayed) {
deselect(macroNode);
macroNode.chooserDisplayed = false;
macroNode.domNode.removeChild(macroNode.content[0].domNode);
macroNode.content = [];
}
} }
exports.macro = { exports.macro = {
@ -58,45 +101,51 @@ exports.macro = {
}, },
events: { events: {
touchstart: function(event) { touchstart: function(event) {
this.domNode.style.backgroundColor = "red"; showChooser(this);
loadContent(this); hoverChooser(this,event.touches[0].clientX,event.touches[0].clientY);
positionChooserPanel(this,event.touches[0].pageX,event.touches[0].pageY);
event.preventDefault(); event.preventDefault();
return false; return false;
}, },
touchmove: function(event) { touchmove: function(event) {
positionChooserPanel(this,event.touches[0].pageX,event.touches[0].pageY); hoverChooser(this,event.touches[0].clientX,event.touches[0].clientY);
event.preventDefault(); event.preventDefault();
return false; return false;
}, },
touchend: function(event) { touchend: function(event) {
this.domNode.style.backgroundColor = "blue"; action(this);
removeContent(this); hideChooser(this);
event.preventDefault(); event.preventDefault();
return false; return false;
}, },
mouseover: function(event) { mouseover: function(event) {
if(event.target === this.domNode) { if(event.target === this.domNode) {
loadContent(this); showChooser(this);
positionChooserPanel(this,event.clientX,event.clientY); hoverChooser(this,event.clientX,event.clientY);
event.preventDefault(); event.preventDefault();
return false; return false;
} }
}, },
mousemove: function(event) { mousemove: function(event) {
positionChooserPanel(this,event.clientX,event.clientY); hoverChooser(this,event.clientX,event.clientY);
event.preventDefault();
return false;
},
mouseup: function(event) {
action(this);
hideChooser(this);
event.preventDefault(); event.preventDefault();
return false; return false;
}, },
mouseout: function(event) { mouseout: function(event) {
if(!utils.domContains(this.domNode,event.relatedTarget)) { if(!utils.domContains(this.domNode,event.relatedTarget)) {
removeContent(this); hideChooser(this);
event.preventDefault(); event.preventDefault();
return false; return false;
} }
} }
}, },
execute: function() { execute: function() {
this.chooserDisplayed = false;
return []; return [];
} }
}; };

21
tiddlywiki5/styles.css
Wyświetl plik

@ -112,13 +112,28 @@ a.tw-tiddlylink-missing {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
min-width: 16px;
height: 100%; height: 100%;
background: #ddd;
} }
.navigation-panel div { .navigation-panel div {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 8px;
padding-right: 8px;
} }
.navigation-panel div ul {
margin: 0 0 0 0;
padding: 0px 4px 0px 4px;
list-style: none;
background: #ddd;
}
.navigation-panel div ul li {
padding: 2px 4px 2px 4px;
}
.navigation-panel .selected {
color: #fff;
background: #a55;
}