Autocomplete Plugin with Notebook theme

#1

All,

I recently updated my Kansas Railroad Wiki to using the Notebook theme. Ever since then the Autocomplete Plugin has been behaving strangely. See the screenshot below. As you can see, the popup when autocomplete is triggered is a considerable distance to the right and maybe even down slightly. This becomes a big problem if the trigger is towards the left of the screen.

I have unsuccessfully tried to use the developer tools to try to figure out what’s going on, but the popup disappears as soon as I invoke the developer tools. I’ve also dug through the Notebook theme and the Autocomplete plugin contents to see if anything pops out at me to no avail. I went back through my backup files to see when this started and it was immediately after I went to the notebook theme.

My version on tiddlyhost has been updated to this so you should be able to replicate the problem there. I tried and it happens.

Any help would be greatly appreciated.

image
image1092×488 66.3 KB

#2

Just bumping for attention. @Maurycy any thoughts?

#3

I can confirm this happens, but only if the sidebar is opened.

I guess that AC calculates the horizontal position of the popup as if the whole page contents were inside one div (the one with tc-dropzone class), as it is in Vanilla theme regardless of sidebar visibility.
In Notebook theme however, the div.tc-dropzone shrinks when sidebar is opened, so the horizontal position of the popup will be off by the sidebar’s width.

I suspect this is the responsible part in $:/plugins/EvidentlyCube/AutoComplete/integration-core.js:

		function getCaretCoordinates() {
			const baseCoords = activeDom.getBoundingClientRect();
			const domDocument = activeDom.getRootNode();
			const domWindow = domDocument.defaultView;
			const caretCoords = getBaseCaretCoordinates(activeDom, selectionStart);
			const domScroll = {left: -activeDom.scrollLeft, top: -activeDom.scrollTop};
			const containingIframe = getContainingIframe(activeDom);
			const iframeCoords = getIframeOffset(containingIframe);
			const parentWindowCoords = containingIframe
				? {left: containingIframe.ownerDocument.defaultView.scrollX, top: containingIframe.ownerDocument.defaultView.scrollY}
				: {left: 0, top: 0};

			const totalCoords = sumCoords([baseCoords, caretCoords, iframeCoords, parentWindowCoords, domScroll]);

			return {
				left: totalCoords.left + domWindow.scrollX,
				top:  totalCoords.top  + domWindow.scrollY + caretCoords.height
			}
		}

		function sumCoords(coords) {
			const totalCoords = {left: 0, top: 0};
			for(const coord of coords) {
				totalCoords.left += coord.left;
				totalCoords.top += coord.top;
			}

			return totalCoords;
		}

I too would be very haopy if it could be adapted to work with Notebook.

#4

Perhaps the issue can be solved on the theme side, by rearranging how the elements are placed, I don’t know what is easier and I’m afraid I’m unable to do any of these things by myself.

#5

Thanks. That’s definitely something to look at. I didn’t notice the behavior in relation to the sidebar.

#6

I’ll take a look at this in coming days - the calculation for where to place the auto complete dialog should align it to the text area, but I’ve never thoroughly tested it so I’ll see what can be done about it.

2 Likes
#7

I tried to fix this quite a while ago. I created a new configuration to set the offset values to make it look right. I only changed it for when the sidebar is open though since I always use it that way.