How to determine Translate Y positioning with PopperJS - javascript

I am creating a drop-down control as a reusable web component and I decided to use PopperJS to handle the positioning of the drop-down items.
I am experimenting with sub-items, I've created a little check to determine the placement:
placement: this.parentElement.nodeName == "MY-ELEMENT" // Check if parent is a menu
? "right"
: "bottom"
I have created a StackBlitz.
The sub-items open to the right okay, but if you F12 and inspect the items they are translated -60px, so the items are positioned in the centre rather than positioned at the bottom going down.
If I choose placement right-end then the items are positioned too far down, what I want is for translate Y to be 0 not -60.
How do I determine that the items should be positioned correctly?

Is the StackBlitz working properly?
I think you could use the offset modifier to add some skidding:
createPopper(reference, popper, {
placement: this.parentElement.nodeName == "MY-ELEMENT"
? "right"
: "bottom",
modifiers: [
{
name: 'offset',
options: {
offset: ({ placement, reference, popper }) => {
if (placement === 'right') {
return [60, 0];
} else {
return [];
}
},
},
},
],
});
It could be 60 instead of -60, not sure if I got exactly what you want.
You can check the usage here: https://popper.js.org/docs/v2/modifiers/offset/

Related

Adding panels with fixed 2 rows and multiple columns dynamically

I want to add a panel dynamically with this structure. It should grow in a column and also if I delete panel in middle next panels should move before.
Panel1 panel3 panel5 ....
Panel2 panel4 panel6 ....
I tried the column layout but its growing in columnwise. I tried to update the layout with
vertical: true.
if (itemLength % 2 === 1 && itemLength !== 0) {
container.setLayout({
vertical : true
})
} else {
container.setLayout({
vertical : false
})
}
Nothing seems to work.
You can use hbox layout for container in which you want to add panels horizontally and vbox for vertically.
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
}
},
And provide flex to adjust height and width accordingly while adding or deleting.
flex: 1;
Here You can find the working fiddle for your scenario. When you click on add button, a panel will be added to your container horizontally having a delete button and width will be adjusted accordingly and same will be taken care on deletion.

How can I add more padding to tree chart in echartjs?

For some tools, we use tree chart from echartjs .
Everything works fine but I have one problem and it is the size of padding in tree chart.
As you can see in this image everything is fine, but I can't enable more padding to this chart :
i want this chart for my friend website (امروز چندمه)
And this is my code :
myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
top: '1%',
left: '15%',
bottom: '1%',
right: '7%',
symbolSize: 7,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});
Thanks :)
You need to change the values of the top and bottom properties to negative values, and the left and right properties to larger positive values.
For example, set top : -10% and bottom: -15%. Then Right: 20% and left:15%. You will have to try different values until you find a combination that suits your situation.The higher the right and left values, and the lower the top and bottom values, the more pronounced the effect. That is, making your chart taller and narrower, thus spacing or padding out the values.
You could also reduce the value of the symbolSize property e.g to 1.
Here is the link to the JsFiddle
Echart version 4 removed the padding option from the nodes. I also tried to fix this but there is an issue on echart github. You can use other features like mouseOver.
Seems like in Echart version 4 there is no way to define padding for nodes
But there is a way to avoid collapsing of nodes.
This tree is gonna take as much space (width and height) as you allow it to take.
So you can just specify bigger height value for outer div. And then overflow: auto; for next div.
<div style="overflow:auto">
<div style="min-height:2000px">
<EchartsSVG/>
</div>
</div>
You can create a formula to count your nodes and calculate min-height

Where do chart.js positioners go for tooltips to move downward

I am wanting to move the tooltip downwards a few pixels instead of always at the top of each stack (on stacked bar chart).
I found this in the docs about positioners, but I cannot understand the structure of code and where it should actually go.
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var tooltip = this;
return {
x: 0,
y: -50
};
}
For reference, you can see where I've tried to place it here ( not much wonder why its not working )
Config seems to have a position and yPadding, neither of which seem to have effect I want when I put them in the tooltips options:
tooltips: {
yAlign: 'top',
position: 'nearest',
yPadding: 50
}
yPadding distorts the tooltip, I'm not sure why but it muddles up the caret and box.

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});​
This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}
Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).
The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)

jQuery multi-draggable

Edit#1:
Since I asked this problem, I made a script which allows the elements to move together, but with problems. :(
$(this).append(
$('<div class="elem '+classes+'" style="width: 210px; height: 30px" data-modby="'+ui.draggable.attr("data-for")+'"><p>'+text+'</p></div>')
.resizable({
grid: 10,
maxHeight: 120,
maxWidth: 600,
minHeight: 30,
minWidth: 210,
containment: ".box-section"
})
.draggable({
grid: [10,10],
containment: ".box-section",
scroll: false,
helper: "original",
start: function(event, ui) {
posTopArray = [];
posLeftArray = [];
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
thiscsstop = $(this).css('top');
if (thiscsstop == 'auto') thiscsstop = 0;
thiscssleft = $(this).css('left');
if (thiscssleft == 'auto') thiscssleft = 0;
posTopArray[i] = parseInt(thiscsstop);
posLeftArray[i] = parseInt(thiscssleft);
});
}
begintop = $(this).offset().top;
beginleft = $(this).offset().left;
},
drag: function(event, ui) {
var topdiff = $(this).offset().top - begintop;
var leftdiff = $(this).offset().left - beginleft;
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
$(this).css('top', posTopArray[i] + topdiff);
$(this).css('left', posLeftArray[i] + leftdiff);
});
}
}
})
);
The actual problem is the moved elements have to stay in the containment box (called .box-section and if I have a single element it works fine. Also if i have two elements has not the same width, if i pick the sorter one and drag, I can pull out the longer of the container.
Also, if I move them fast (like a ninja) they will slip, and they won't be in the same grid they used to be.
30 percent solved since:
I'm going to make a new thingy which can drag and drop items to a box, and resize them.
My problem is that, I can't make them move together. But with some rules.
Rule one: They must move based on a 10x10px grid.
Rule two: They can't move outside their frame.
(Resize is an issue which i simply can't imagine, so I don't care about it, resize will be later)
I made a fiddle for it here: http://jsfiddle.net/9fueY/ you can see this.
In the right side, you can see inputs and a and a checkbox (and on hover a button).
The checkbox is the draggable object, drag it to the image. Now you have some text or a star appeared on the left.
If you type anything to the inputs, it refreshes the text.
OnHover the right boxes you can see a button. By clicking on it, will make a clone of the first element. Drag it inside.
If you click to a right-side box, it will glow blue. Click to two boxes on the right, makes all the two textfields glow blue in the image.
Now this is the case when i want them to move together. :D
What's your opinion, what should I do with this?
Thank you very much. - Répás
There is a plugin i developed for dragging elements together. Please do use it if it makes sense.
https://github.com/someshwara/MultiDraggable

Categories