Develop Reference

Find display type in FullCalendar callbacks

I am using FullCalendar to display events from two sources. I have one source to display them as background events and the other set to display as block events.
This works fine, but then I am using the eventClick callback. When I check the info.event.display property of the event clicked on, it returns as auto. In this callback I need to check this property to determine whether to do something or not.
This also is a problem with the eventDidMount callback. I was using that but have disabled it for now.
IE: In this case I only want a modal to appear if the display type is block.
Code:
let calendarEl = document.getElementById('calendar')
let loader = document.querySelector('.calendar-wrapper .loader')
let tooltip
let calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin],
firstDay: 1,
contentHeight: "auto",
aspectRatio: 1.5,
eventSources: [
{
url: '/api/trips.json',
display: 'background'
},
{
url: '/parks/visits.json',
display: 'block'
}
],
startParam: 'start',
endParam: 'end',
showNonCurrentDates: true,
loading: function (isLoading) {
if (isLoading) {
loader.style.display = 'flex'
} else {
loader.style.display = 'none'
}
},
headerToolbar: {
start: 'title',
center: 'prevYear,nextYear',
end: 'today prev,next'
},
// eventDidMount: function(info) {
// console.log(info.event);
// tooltip = new tippy(info.el, {
// theme: 'light-border',
// trigger: 'mouseenter',
// allowHTML: true,
// content: info.event.extendedProps.tooltipcontent,
// interactive: false,
// interactiveBorder: 0,
// animation: 'shift-away',
// moveTransition: 'transform 0.2s ease-out',
// zIndex: 99999,
// inertia: true,
// placement: 'top',
// touch: 'hold'
// })
// },
eventClick: function(info) {
console.log(info)
info.jsEvent.preventDefault()
let modal = document.querySelector('#modal-container')
modal.innerHTML = info.event.extendedProps.modalcontent
// tooltip.hide()
MicroModal.show('modal-visit')
}
})
Any suggestions?

It's because "background" is a property of the event source, not the event. Whilst that rule may then be applied when rendering, to control how the event appears, the event itself doesn't automatically have the value "background" set as the value for its own "display" property (because an individual event can potentially override the event source value for any given property).
Fortunately the event will contain a reference to the event source and, although the path to the information is convoluted (but fortunately discoverable by logging the event object to the Console), you can get the "display" property of the event source from it:
eventClick: function(info) {
alert(info.event.source.internalEventSource.ui.display);
}
Live demo: https://codepen.io/ADyson82/pen/BaQVyRO

Cannot access variables in angular from d3 Funnel js callback

As per the latest document in D3 JS funnel I have click event callback as referred by the documentation. But when I'm unable to access functions from inside angular component using this.try().
Here is the implementation, don't know how to implement it.
JS Code
const options = {
chart: { bottomPinch: 1, animate: 200, height: 300 },
block: {
// dynamicHeight: true,
// dynamicSlope: true,
highlight: true,
},
events: {
click: {
block(d) {
console.log(d.label.raw);
this.try(d.label.raw);
},
},
},
tooltip: { enabled: true, }
};
const chart = new D3Funnel('#d3Funnel');
chart.draw(data, options);
})
HTML
<div id="d3Funnel"></div>
It gives the error
ERROR TypeError: this.try is not a function
at SVGPathElement.block
I don't know how to resolve this.
Reference of library
https://github.com/jakezatecky/d3-funnel

block(d) { ... } is just a shorthand for block: function(d) { ... }, which would not lexically bind this.
If you replaced your event with an arrow function, such as block: (d) => { ... }, your code would be able to resolve this as you intend.

How to change the position of videojs Control bar elements order

I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......

I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin

For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.

Get element that called qTip?

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/

Making a draggable element drop on a target

Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/

Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/