I want to be able to set the slider value without getting the update event to fire. I tried with setting a second parameter (fireSetEvent) in the set function, but that doesn't work.
nouiContrast = document.getElementById('nouiContrast');
noUiSlider.create(nouiContrast, {
start: 0,
step: 0.01,
behaviour: 'tap',
connect: [true, false],
range: {
'min': 0,
'max': 1
}
});
nouiContrast.noUiSlider.on('update', function(values, handle) {
applyFilterValue(6, 'contrast', values[handle]);
});
//....
nouiContrast.noUiSlider.set(val, false);
If you want to handle updates only when the user dragging the slider but not when the code set an update, you can listen to the slide event.
From the docs:
This event is useful when you specifically want to listen to a handle being dragged, but want to ignore other updates to the slider value. This event also fires on a change by a 'tap'. In most cases, the update is the better choice.
nouiContrast = document.getElementById('nouiContrast');
noUiSlider.create(nouiContrast, {
start: 0,
step: 0.01,
behaviour: 'tap',
connect: [true, false],
range: {
'min': 0,
'max': 1
}
});
nouiContrast.noUiSlider.on('slide', function(values, handle) {
applyFilterValue(6, 'contrast', values[handle]);
});
//....
nouiContrast.noUiSlider.set(val, false);
Related
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
I'm trying to animate a series of SVG objects. Here's the basic goal: The first set of 4 objects animates in, then out, and then the next set of objects animate in. While the first 2 queue up just fine, I'm not sure of the best method to get the second set to wait until the first set finishes.
Here's my code:
JS:
$( document ).ready(function() {
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightOut", {stagger: 200, drag: true });
$('.tr0,.tr1,.tr2,.tr3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true });
})
UPDATE: Here's my solution, but I'm bothered by utilizing a delay rather than a queuing method.
$( document ).ready(function() {
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandIn", {stagger: 200, drag: true });
$('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandOut", {stagger: 200, drag: true, delay: 1000 });
$('.tr0,.tr1,.tr2,.tr3').velocity({opacity: 0}, {duration:0 });
$('.tr0,.tr1,.tr2,.tr3').velocity("transition.expandIn", {stagger: 200, drag: true, delay: 3000 });
})
Use the callbacks?
$('.dt0').velocity({
opacity: 0 //or animation name
}, {
complete: function(elements) {
$('.dt1').velocity({
opacity: 0 //or animation name
}, {
complete: function(elements) {
//... the others
},{duration:200, delay:2000 } //2s delay
});
},{duration:1000 }
});
Apologies for the long title. Basically, I want to add a keydown event listener to my propertyGrid. I've been looking online for possible solutions but I haven't been lucky.
I have a property grid defined as such:
{
xtype: 'propertygrid',
x: 570,
y: 210,
id: 'pfGridPanelMode',
itemId: 'pfGridPanelMode',
maxWidth: 200,
minWidth: 200,
width: 200,
frameHeader: false,
header: false,
title: 'Payment Mode',
scroll: 'none',
sealedColumns: true,
sortableColumns: false,
source: {
Cash: '',
Check: '',
Total: ''
}
}
I know I can use the propertychange event listener and get the recordID and the newValue. However, I want the keydown event so that when the user fills up the Cash and Check fields, I can update the Total field live.
I've checked the other event binding names and I saw cellkeydown, however, it does not seem to work when I added it in my controller as such:
onPropertygridCellkeydown: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
console.log("cell key down fired");
console.log("cellIndex " + cellIndex);
console.log("rowIndex " + rowIndex);
}
. . . . . . .
"#pfGridPanelMode": {
cellkeydown: this.onPropertygridCellkeydown
//I have other event listeners here
},
I've tried clicking and entering values in the cells but to no avail.
I then checked the extjs4 docs from sencha and I saw the add listener method of the grid panel. I tried the example of adding a mouseover listener but to no avail. I tried putting the code on the beforerender and the afterrender events like so:
(please note that this function is in my controller)
onPropertygridBeforeRender/onPropertygridAfterRender: function(component, eOpts) {
var form = Ext.getCmp('processingFeeRecieptPanel');
var receipt1 = form.child('#receipt1');
var mode = receipt1.child('#pfGridPanelMode');
mode.addListener("mouseover", this.onMouseOver, this);
mode.on({
mouseover: this.onMouseOver
});
}
and I have the onMouseOver event like so:
onMouseOver: function() {
console.log("on mouse over called");
}
However, that too does not work - the log does not show up.
Does anyone have a solution for this? I want a keydown listener so that the updates are live. I know I can use the propertychange listener but I am aiming for a better user experience overall.
Thank you for any help and sorry for the long post.
Add this to your grid:
listeners: {
afterrender : function(grid) {
grid.el.dom.addEventListener('keypress', function (e) {
Ext.defer(function(){
console.log(e.srcElement.value);
},10);
});
}
}
Here's how I made it work. The basic idea is to make a textField inside the source using sourceConfig and the editor method. This textField is then given a listener for keyup event (or any event that you want). You can then do anything you want inside that listener. For my case, I called a controller to calculate a total value that I need.
Here is my source:
source: {
"Cash": 0,
"Check": 0,
"Total": 0
}
Here's my sourceConfig:
sourceConfig: {
Cash:{
editor: Ext.create(
'Ext.form.field.Text',
{
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
keyup : function(textfield, e, eOpts) {
console.log("cash value change new value is = " + textfield.getValue());
myAppName.app.getController('PFReceipt').computeTotal('cash', textfield.getValue());
}
}
}
),
type:'number'
},
Check:{
editor: Ext.create(
'Ext.form.field.Text',
{
selectOnFocus: true,
enableKeyEvents: true,
listeners: {
keyup : function(textfield, e, eOpts) {
console.log("cash value change new value is = " + textfield.getValue());
myAppName.app.getController('PFReceipt').computeTotal('check', textfield.getValue());
}
}
}
),
type:'number'
},
}
I have a GSAP animation that updates a jquery UI slider as the animation plays and the slider can control the animation progress... Example Here
I need to switch over to noUiSlider for various reasons and I can't figure out how to make it work. Here is my jQuery UI code:
totalProgressSlider = $("#totalProgressSlider").slider({
range: false,
min: 0,
max: 100,
step:.1,
slide: function ( event, ui ) {
tl.totalProgress( ui.value/100 ).pause();
}
});
function updateUI() {
totalProgressSlider.slider("value", tl.totalProgress() *100);
}
$("#slider").slider({
range: false,
min: 0,
max: 100,
step:.1,
slide: function ( event, ui ) {
tl.pause();
tl.progress( ui.value/100 );
}
});
function updateSlider() {
$("#slider").slider("value", tl.progress() *100);
}
and here is my noUiSlider code so far:
$(".slider").noUiSlider({
range: [ 10, 50 ],
start: [ 2, 40 ],
step: 1,
handles: 1,
slide: function(){
/* ... */
},
set: function(){
/* ... */
}
}).change( function(){
/* ... */
});
function updateUI() {
$("#slider").slider();
}
I guess I don't really understand what 'event, ui' is and 'ui.value/100' and how I can convert this. Any suggestions would be much appreciated!
Why don't you use Greensock's draggable tool:
http://www.greensock.com/draggable/
You can easily update a tween/timeline through the draggable instance and vice versa, update the draggable instance through the tween.
Take a look at this codepens:
http://codepen.io/rhernando/pen/Batoc
http://codepen.io/rhernando/pen/npBoF
Rodrigo.
I am using jCarousel to show a list of items. Lets say there are 8 items. I am showing 4, waiting 10 seconds, then scrolling to show the last 4. I'd like it to then show the first four and then throw a trigger that tells it to rebind data. The items would update and continue cycling like this.
These items are being loaded through jquery.load [ajax]. I want the items to rebind after they all show. It'd be even better if I could get them to rebind after cycling twice. I was rebinding the data using setInterval (time based), but I'd like it to be dynamic so I don't have to change the javascript timer later down the road when more items are added.
My calling code looks like this:
$(document).ready(function () {
updateConsoles();
$("#tableapp").ajaxStop(function () {
scrollwindow();
});
});
function updateConsoles() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4
});
};
Ideally I am looking to be able to add something like:
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
whenFinishedCyclingItems: updateConsoles()
});
};
I am pretty new to javascript and jQuery.
It looks like jCarouselLite has an afterEnd function.
So you should be able to do something like this:
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
afterEnd: updateConsoles()
});
};
I'm not positive if you'd have to wrap that function inside another function or not, but just in case, the code would be:
afterEnd: function(){updateConsoles();}