Can't Get Button Click on Angular Material CDK Overlay - javascript

I am using the Angular Material CDK Overlay to show some options once an HTML element is clicked and I cannot figure out how to get the buttons to trigger a click event. Is there a way to do this?
I need to know which button was clicked and I cannot find a way. Clicking everywhere else works - outside of the overlay closes and inside the overlay triggers a click but not the buttons. Nothing happens on click of the buttons.
this._overlayRef = this.overlayService.createPopover(
cellId,
checkOutElement,
[
{
offsetX: -145,
offsetY: -20,
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom'
},
{
offsetX: -145,
offsetY: 20,
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top'
}
]
);
let moreInfoPortal = new ComponentPortal(PopoverComponent, this.vcr)
const poppoverRef = this._overlayRef.attach(moreInfoPortal);
const data = {
item,
checkIn,
checkOut
}
poppoverRef.instance.data = data;
Any help is much appreciated!

Related

Chartjs Bar Chart add background color to value labels

I have bar charts with value on top using chartjs-plugin-labels, and some values bumping to each other as image shown below on highlighted values
How do I add background color to the values or is there any other nice solutions?
you can see my code here, please click Show Files and then choose bar-chart.html
https://replit.com/#panjigemilang/html?v=1
you can user plugin option of chart js as per below code.
plugins: {
datalabels: {
color: "#000",
backgroundColor: "#f0f0f0",
font: {
weight: "bold",
size: 12
},
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
},
}
}
https://www.npmjs.com/package/chartjs-plugin-datalabels => You can use this plugin
https://www.npmjs.com/package/chartjs-plugin-labels => This is very old plugin

GSAP + PaperJS position animation

I am trying to integrate it into an existing Paper.js application to replace the original .tweenTo function (http://paperjs.org/reference/tween/). The only issue I am facing so far is the "chaining" of the position or point property animations:
https://codepen.io/yevsim/pen/GRmPBZB
paper.install(window)
paper.setup(canvas);
const text = new PointText({
point: new Point(100, 100),
fontFamily: "sans-serif",
fontWeight: "bold",
fontSize: 48,
fillColor: 'black'
});
text.content = 'Move me';
const timeline = gsap.timeline();
timeline.to(text.point, { duration: 1, x: '+=100' });
timeline.to(text.point, { delay: 1, duration: 1, x: '+=100' });
For the reason unknown to me, it moves the text back to its original position before doing the second animation (i.e. instead of going from 100 -> 200 -> 300, it goes 100 -> 200 -> 100 -> 200). Chaining other properties animation e.g. width, height, color, opacity works as expected. I tried to play with replacing point with position, combining them together, but nothing worked for me.
I'm not really sure why but this will work if you store text.point into a variable and use this variable instead of a reference to the actual object when creating your timeline.
Based on your code, here a corrected version:
const text = new PointText({
point: new Point(100, 100),
fontFamily: 'sans-serif',
fontWeight: 'bold',
fontSize: 48,
fillColor: 'black',
content: 'Move me'
});
// Use a variable to reference the property to animate.
const point = text.point;
const timeline = gsap.timeline();
timeline.to(point, { duration: 1, x: '+=100' });
timeline.to(point, { delay: 1, duration: 1, x: '+=100' });

Update/redraw canvas on clicking a button

I'm using cirque.js plugin to show circle percentage values drawn with a canvas.
Here's a JSFIDDLE I made that should contain all the info with plugin code.
Initially, the circle gets drawn correctly, with the correct value.
Issue: When I try to update the value via a function on clicking a button, nothing happens, not working, I think the canvas needs to be drawn again with the new value?
Q: How can I update the circle percentage value asynchronously?
$('.cirque').cirque ({ //this works
radius: 40,
value: 65,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
$('#update').click(function (e) {
updateCircle(50); //this does not work
});
function updateCircle(val){
$('.cirque').cirque ({
radius: 40,
value: val,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
}
I've not find any function to update value in this plugin. But you can update value with a trick. Replace the div having class cirque with a same div and initialize it with new value like following. Hope this will help you.
function updateCircle(val){
var cirque=$('<div class="cirque"></div>');
$('.cirque').replaceWith(cirque);
cirque.cirque ({
radius: 40,
value: val,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
}
Updated Fiddle: https://jsfiddle.net/8d9sw1yg/2/

Mootools options: how to change/overwrite an options property in an event function?

I have a class constructor that produces a series of animated radial progress bars, and outside of the constructor the elementSize property is assigned via the variables of options shown below. Each set of options assigns a different element size to the radial progress bars when they load in the browser. The four values shown below are from the first index in an array.
I am completely new to mootools and am struggling to figure out how I could change individual elementSize properties to each of my radial progress bars from here. I have 2 buttons with onclick events that go forward and backward through an array of values, so what I want to do is to call the elementSize option(s) and change the value of x depending on whether the user clicks forward (x++) or backward (x--).
Is there a way to do this in my buttons function? Or does it need to be included in my code by some other means?
var RPBoptionsB1 = {
backgroundColor: '#fff',
borderColor: '#1895cd',
borderWidth: '10',
elementSize: 90+(arrayStatsB[x][0]/45.775),
fontColor: '#5f6f7e',
overlayColor: '#fff',
animateText: true
};
var RPBoptionsB2 = {
backgroundColor: '#fff',
borderColor: '#1895cd',
borderWidth: '10',
elementSize: 90+(arrayStatsB[x][1]/45.775),
fontColor: '#5f6f7e',
overlayColor: '#fff',
animateText: true
};
var RPBoptionsB3 = {
backgroundColor: '#fff',
borderColor: '#1895cd',
borderWidth: '10',
elementSize: 90+(arrayStatsB[x][2]/45.775),
fontColor: '#5f6f7e',
overlayColor: '#fff',
animateText: true
};
var RPBoptionsB4 = {
backgroundColor: '#fff',
borderColor: '#1895cd',
borderWidth: '10',
elementSize: 90+(arrayStatsB[x][3]/45.775),
fontColor: '#5f6f7e',
overlayColor: '#fff',
animateText: true
};
//-----------------------------------------
var rpbArrayB = {
rpbB1: new RadialProgressBar($('rpbB1'), RPBoptionsB),
rpbB2: new RadialProgressBar($('rpbB2'), RPBoptionsB),
rpbB3: new RadialProgressBar($('rpbB3'), RPBoptionsB),
rpbB4: new RadialProgressBar($('rpbB4'), RPBoptionsB)
};
Thanks in advance.
In Mootools it is common to put options in the options object (http://mootools.net/docs/core/Class/Class.Extras#Options:setOptions).
Take this example:
var MyClass = new Class({
Implements: Options,
options: {
elementSize: 10
},
initialize: function(options){
this.setOptions(options);
}
});
var instance1 = new MyClass();
console.log(instance1.options.elementSize); // Returns 10
instance1.options.elementSize = 20;
console.log(instance1.options.elementSize); // Returns 20
var instance2 = new MyClass({
elementSize: 15
});
console.log(instance2.options.elementSize); // Returns 15
In your example, the classes are initiated as Array variables, so you can change the options like so:
rpbArrayB.rpbB1.options.elementSize = 20
Note that this might not always have the desired effect though. If the class takes the options on initialization and doesn't use them anymore afterwards, changing the options will have no effect on an initialized class. In that case you would have to re-initialize the class.

How can I stop the flickering in Scriptaculous?

I'm running this script on a page which shows a box with more information when you roll over it.
site for review
The script works fine, except theres a flicker of the box before it actually scales.
What is causing this? I use the same thing in the main navigation with the same flicking.
Any ideas whats causing this?
//work page springing box
$$('.box').each(function(s) {
var more = $(s).down(2);
$(s).observe('mouseenter', function(e) {
$(more).show();
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
});
$(s).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks.
Rich
I should note, I am testing in Safari 4.0.4
#Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:
$(more).show.bind(more).delay(0.01);
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
})
The site looks fine to me. I did notice a very little something, but it could be my imagination.
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
$(more).show();
You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.
Firefox, fully updated btw.

Categories

Resources