I've read floating-ui doc but there are some methods that I really cant understand such as getElementRects, getClippingRect and getDimensions, I tried to learn then by trail and error but I still haven't figured them out how to work with them, here is my snippet code and its placement just doesn't work.
this._cleanup = autoUpdate(referenceEl, this.floatingEl, () => {
computePosition(referenceEl, this.floatingEl, {
strategy: 'absolute',
middleware: [autoPlacement()],
placement: 'bottom-start',
platform: {
getElementRects: () =>
Promise.resolve({
reference: { width: 0, height: 0, x: 0, y: 0 },
floating: { width: 0, height: 0, x: 0, y: 0 }
}),
getClippingRect: () => ({ x: 0, y: 0, width: 0, height: 0 }),
getDimensions: (element) => {
console.log({ element });
return { width: 0, height: 0 };
}
}
}).then(({ x, y }) => {
Object.assign(this.floatingEl.style, {
position: 'absolute',
left: `${x}px`,
top: `${y}px`
});
});
});
As you can see the floating element is on top end of the input element.
I guess the computePosition method is not configured properly moreover I haven't found any example for vanilla js floating-ui til now.
PS: I can't remove getElementRects, getClippingRect and getDimensions because they are required and if I ignore them with //#ts-ignore it doesn't work.
You don't need to provide the platform object yourself, it's for advanced use cases and is entirely optional as the #floating-ui/dom library already provides those methods for you. If you've installed #floating-ui/core, uninstall it and install #floating-ui/dom instead.
Then, you can remove the platform property from the options to use the default/recommended platform and it will work.
Related
I'm using GSAP with ASScroll to add a couple of animations to my static site generated with Hugo. All animations work as intended. However when I reload the page only when I'm not scrolled all the way up the animations will go to the last frame and stop. The same thing occurs when the toolbar of Chrome mobile goes all the way up after you scroll down far enough. This occurs on very consistent spots, but not everywhere. For example when scrolling 600px down it would always occur, but at 700px it would never occur.
I'm not getting any errors or warning in the console.
using:
#ashthornton/asscroll 2.0.11
gsap 3.11.3
main.js setup
import ASScroll from '#ashthornton/asscroll'
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import {
Timeline
} from 'gsap/gsap-core';
gsap.registerPlugin(ScrollTrigger);
const isTouch = ('ontouchstart' in document.documentElement);
const asscroll = new ASScroll({
disableRaf: true,
ease: 0.175,
touchEase: 0.175
});
gsap.ticker.add(asscroll.update);
ScrollTrigger.defaults({
scroller: asscroll.containerElement
});
ScrollTrigger.scrollerProxy(asscroll.containerElement, {
scrollTop(value) {
return arguments.length ? asscroll.currentPos = value : asscroll.currentPos;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
}
});
asscroll.on("update", () => ScrollTrigger.refresh());
ScrollTrigger.addEventListener("refresh", asscroll.resize);
window.addEventListener("load", () => {
// ...
Animation:
const imgMicroservice = document.getElementById('img-microservices');
gsap.timeline({
scrollTrigger: {
trigger: imgMicroservice,
start: "top bottom",
onRefresh: () => {},
end: "bottom top",
invalidateOnRefresh: false,
scrub: 1,
},
})
.fromTo(imgMicroservice, {
y: 150,
scale: 0.96,
ease: "none"
}, {
y: 0,
ease: 0,
scale: 1,
rotate: "0deg",
}, 0)
I tried disabling ASScroll, this solved the problem. Though I want to use it or any other smooth scroll js library.
I'm trying to create a custom credits with a tooltip, I've found and example of setting an event listener to title and add tooltip to chart title using mouseover. But for some reason adding this event listener doesn't seem to work with my custom label created with SVGRenderer, what am I missing??
My attempt: https://jsfiddle.net/bernardo0marques/ovhx39c8/10/
Notice that in your example, in the load callback you are trying to add a custom event to the label which doesn't exist because it wasn't rendered yet.
Check console: https://jsfiddle.net/BlackLabel/u07y5gnr/
To fix it, add this logic after rendering this label: https://jsfiddle.net/BlackLabel/p4mL23yr/
chart: {
events: {
render: function() {
let chart = this,
credits = chart.options.credits;
// keep label responsive
if (chart.customLabel) chart.customLabel.destroy();
chart.customLabel = chart.renderer
.label('my custom text', 0, 0).css(credits.style)
.add();
chart.customLabel.translate(chart.plotWidth, chart.chartHeight - chart.customLabel.getBBox().height)
chart.customLabel.on('mouseover', e => {
chart.myLabel = this.renderer.label(this.title.textStr, e.x - 75, e.y - 50, 'rectangle')
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 4,
})
.add()
.toFront();
});
chart.customLabel.on('mouseout', e => {
if (chart.myLabel) {
chart.myLabel.destroy();
}
})
}
},
},
Hello I have problem with style ContextMenuButton :/
cm.add(this.$("ContextMenuButton",
this.$(go.TextBlock, {
text: 'Usuń',
stroke: '#323232',
background: '#eee',
margin: 0,
alignment: go.Spot.Center
}),
{
click: () => {
this.diagram.commandHandler.deleteSelection();
},
mouseHover: () => {
console.log(this.diagram);
}
}));
How to set new properties for cm object? I mean how to remove blue shadow? (mouse over)
You need to add selectionAdorned: false to your context menu.
Here is an example I did on Codepen.
You can see this is a context menu and when you remove the selectionAdorned property, when you click on the items you will have the selection around the square.
You can find documentation about this here.
Ok, but it's does't work :/ the only place where I found anything about contextMenu is this part of code. As you can see I have added cm.selectionAdorned = false;
private setUpDiagram() {
this.diagram = new go.Diagram();
this.diagram.initialContentAlignment = go.Spot.Center;
this.diagram.undoManager.isEnabled = true;
this.diagram.validCycle = go.Diagram.CycleNotDirected;
this.diagram.toolManager.panningTool.canStart = () => {
return this.diagram.lastInput.control;
};
this.diagram.toolManager.dragSelectingTool.isEnabled = true;
this.diagram.allowCopy = false;
this.diagram.addDiagramListener('SelectionMoved', () => this.shiftNodesToEmptySpaces(this.diagram));
this.diagram.toolManager.draggingTool.isCopyEnabled = false;
this.diagram.toolManager.contextMenuTool.showContextMenu = (cm: Adornment, obj) => {
let data = obj.part.data;
this.diagram.selectCollection(this.diagram.selection.filter(x => x.key != '0'));
while (cm.elements.count > 0) cm.removeAt(0);
cm.selectionAdorned = false;
console.log(cm);
if (data.key != '0') {
cm.add(this.$("ContextMenuButton",
this.$(go.Shape,
{
stroke: null, strokeWidth: 0,
fill: '#323232',
width: 50,
height: 25
},
),
this.$(go.TextBlock, {
text: 'Usuń',
stroke: '#ffffff',
background: '#323232',
margin: 0,
alignment: go.Spot.Center
}),
{
click: () => {
this.diagram.commandHandler.deleteSelection();
}
}));
}
go.ContextMenuTool.prototype.showContextMenu.call(this.diagram.toolManager.contextMenuTool, cm, obj);
};
}
I'm trying to tween a sprite from one point to another and have it fade away while it's moving. I've tried this:
const tween = game.tweens.add({
targets: [log.sprite],
x: fire.x,
y: fire.y + (fire.height * 0.2),
opacity: 0,
duration: 300,
repeat: 0,
onComplete() {
destroyLog(log);
resolve();
},
});
But this doesn't work. I'm having a lot of trouble finding good API docs for Phaser 3, so I'm not sure where I should be looking for this information.
You probably should use alpha instead of opacity. Below is a working example for Phaser3. The start and end value lambdas are good just for flexibility. I guess you can replace them by values directly. this refers to Phaser.Scene instance.
this.add.tween({
targets: [sprite],
ease: 'Sine.easeInOut',
duration: 1000,
delay: 0,
x: {
getStart: () => startX,
getEnd: () => endX
},
y: {
getStart: () => startY,
getEnd: () => endY
},
alpha: {
getStart: () => startAlpha,
getEnd: () => endAlpha
},
onComplete: () => {
// Handle completion
}
});
You can easily find helpful usage examples for Phaser 3 by cloning the repo locally and searching for some keywords in the code.
I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn't the element that called the qtip (I think it's window).
Does anyone know how I can get the handle that called it (like it would if I set target to false)?
Thanks.
In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);
Here's the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.
$(".report-error").qtip(
{
content: 'test content',
position:
{
adjust:
{
screen: true
},
target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
corner:
{
target: 'bottomMiddle',
tooltip: 'topRight'
}
},
show:
{
when:
{
event: 'click'
}
},
style:
{
name: 'cream',
tip:
{
corner: 'topRight'
},
padding: 0,
width: 400,
border:
{
radius: 5,
width: 0
}
},
hide:
{
when:
{
event: 'unfocus'
}
},
api:
{
beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position
this.options.position.target = $(this.elements.target).find('.icon');
this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
}
}
});
It's working on the site now at http://wncba.co.uk/results/