Fix popup positioning in the reveal widget

This commit is contained in:
Jeremy Ruston 2013-10-14 23:32:01 +01:00
parent c621339729
commit 20cd398e88
3 changed files with 38 additions and 3 deletions

View File

@ -33,9 +33,43 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
var domNode = this.document.createElement("div");
parent.insertBefore(domNode,nextSibling);
this.renderChildren(domNode,null);
if(!domNode.isTiddlyWikiFakeDom && this.type === "popup" && this.isOpen) {
this.positionPopup(domNode);
}
this.domNodes.push(domNode);
};
RevealWidget.prototype.positionPopup = function(domNode) {
domNode.style.position = "absolute";
domNode.style.zIndex = "1000";
switch(this.position) {
case "left":
domNode.style.left = (this.popup.left - domNode.offsetWidth) + "px";
domNode.style.top = this.popup.top + "px";
break;
case "above":
domNode.style.left = this.popup.left + "px";
domNode.style.top = (this.popup.top - domNode.offsetHeight) + "px";
break;
case "aboveright":
domNode.style.left = (this.popup.left + this.popup.width) + "px";
domNode.style.top = (this.popup.top + this.popup.height - domNode.offsetHeight) + "px";
break;
case "right":
domNode.style.left = (this.popup.left + this.popup.width) + "px";
domNode.style.top = this.popup.top + "px";
break;
case "belowleft":
domNode.style.left = (this.popup.left + this.popup.width - domNode.offsetWidth) + "px";
domNode.style.top = (this.popup.top + this.popup.height) + "px";
break;
default: // Below
domNode.style.left = this.popup.left + "px";
domNode.style.top = (this.popup.top + this.popup.height) + "px";
break;
}
};
/*
Compute the internal state of the widget
*/

View File

@ -28,6 +28,7 @@ var TW_TextNode = function(text) {
var TW_Element = function(tag,namespace) {
bumpSequenceNumber(this);
this.isTiddlyWikiFakeDom = true;
this.tag = tag;
this.attributes = {};
this.isRaw = false;

View File

@ -1,8 +1,8 @@
title: $:/core/ui/MissingTemplate
<$button popup="$:/state/missingpopup" qualifyTiddlerTitles="yes" class="btn-invisible tw-missing-tiddler-label"><$view field="title" format="text" /></$button>
<$reveal state="$:/state/missingpopup" type="popup" position="below" qualifyTiddlerTitles="yes" ><div class="tw-drop-down">
<div class="tw-tiddler-missing"><$button popup="$:/state/missingpopup" qualifyTiddlerTitles="yes" class="btn-invisible tw-missing-tiddler-label"><$view field="title" format="text" /></$button>
<$reveal state="$:/state/missingpopup" type="popup" position="below" qualifyTiddlerTitles="yes"><div class="tw-drop-down">
<$transclude title="$:/core/ui/ListItemTemplate"/>
<hr>
<$list filter="[is[current]backlinks[]sort[title]]" template="$:/core/ui/ListItemTemplate"/>
</div></$reveal>
</div></$reveal></div>