I am trying to capture scroll start/stop events for a page control. I want to find out if the last field of the page is in the viewport. The way I am trying to figure out if field is in the viewport is by using the method getBoundingClientRect(). All this works fine but I am not able to invoke this method as I am not able to capture the scroll event. I intend to call this method inside the event handler for scrollstop, so I know the user has stopped the scroll and now is the time to check if the field is reached.
Using this link to find out the events that can be handled:
https://sapui5.hana.ondemand.com/#/api/module:sap/ui/events/ControlEvents
It is a touch device so need to figure out how to handle touch event as well.
Currently, below is the code for mouse scroll which is not working. Other events like clicked, mouseover are working.
How to get onscrollstart and onscrollstop to work?
In controller.js
onAfterRendering: function () {
controller.getView().byId("PAGECONTROLID").addEventDelegate({
onclick: function(){
console.log("clicked"); // works on all panels within the page
},
onmouseover: function(){
console.log("mouseover"); // works on all panels within the page
},
onscroll: function(){
console.log("onscroll"); // IS NOT CORRECT EVENT, but tried it anyway
},
onscrollstart: function(){
console.log("scroll start"); // DOES NOT WORK
},
onscrollstop: function(){
console.log("scroll stop"); // DOES NOT WORK
}
})
My problem:
I need to add a delay for about 100 milliseconds because the inherited animation of the TextFormField when it gets focused shows the keyboard at almost the same time the building animation of itself is running (and also because I want to apply some animations in between and/or then chain the keyboard to it).
I would like to add a small delay there.
What did I have tried so far:
I have been doing a lot things to reproduce this behavior but with not much success, I tried several strategies from flutter community since adding delays, listen to the keyboard using several packages or listening the context bottom viewPadding, I have attached listeners to the onTap of the TextFormField class and it is not the best outcome.
I also have tried with this strategy, but is not good either (sometimes there's a race between the native and the instruction that flutter has internally to show it):
// flutter hook
useEffect(() {
void focusListener() {
// FOCUS:
if (focusNode.hasFocus) {
// #1. Using SystemChannels.textInput:
// The problem with this approach is that flutter ignores it,
// it gets never hidden.
// ... skipped by brevity ...
SystemChannels.textInput.invokeMethod('TextInput.hide')
// ... skipped by brevity ...
// #2. Delay in hide & show events:
// This approach hide the keyboard but its always visible at the beginning
// for a really short amount of time, that's like a blink
// and it doesn't look nice, but this kind of
// solve the issue.
// ... skipped by brevity ...
final channel = SystemChannels.textInput;
Future.delayed(Duration(seconds: 0), () {
channel.invokeMethod('TextInput.hide').whenComplete(() {
Future.delayed(Duration(milliseconds: 400), () {
channel.invokeMethod('TextInput.show');
});
});
});
// ... skipped by brevity ...
// #3. Delay in show event:
// This approach is similar to the previous but the order
// from the channel 'TextInput.hide' is skipped
// because of the same reason of the first approach.
// ... skipped by brevity ...
channel.invokeMethod('TextInput.hide').whenComplete(() {
Future.delayed(Duration(milliseconds: 400), () {
channel.invokeMethod('TextInput.show');
});
});
// ... skipped by brevity ...
}
// VALIDATION:
autovalidate.value = focusNode.hasFocus;
}
focusNode.addListener(focusListener);
return () => focusNode.removeListener(focusListener);
}, [focusNode.hasFocus]);
Any idea?
I've seen the solution to drag and drop external events in fullcalendar. But, in this demo, all the external events have a duration of 2 hours (because defaultEventMinutes parameter is set to 120). I'm trying to change this demo in order to manage events with different durations. Say, "My event 1" is 45min long, "My event 2" is 165min, etc.
At the beginning I though there may be an attribute to store the duration in the eventObject, but according to the documentation, it's not the case.
Then, I thought it would be possible to change the value of 'defaultEventMinutes' when starting dragging the event. But apparently, I can't do it without rebuilding the whole calendar.
According to you, what is the best means to meet this requirement?
Thanks in advance for your advice...
Worked on this as well and have solved the duration shown on fullCalendar this way:
Having a custom "setOptions" function for fullCalendar.
Having a property for fullCalendar called "dragMinutes" that can be set during elements $(this).draggable({start:...}).
Here is the code for the custom setOptions:
...
function Calendar(element, options, eventSources) {
var t = this;
// hack for setting options that updates
function setOptions(new_options, refresh) {
$.extend(options, new_options);
if (refresh) {
var viewName = currentView.name;
changeView(viewName, true);
}
}
// exports ...
t.setOptions = setOptions;
...
Heres the code for handling "dragMinutes" option in fullCalendar:
/* External Dragging
--------------------------------------------------------------------------------*/
function dragStart(_dragElement, ev, ui) {
hoverListener.start(function (cell) {
clearOverlays();
if (cell) {
if (cellIsAllDay(cell)) {
renderCellOverlay(cell.row, cell.col, cell.row, cell.col);
} else {
var d1 = cellDate(cell);
if (opt('dragMinutes'))
var d2 = addMinutes(cloneDate(d1), opt('dragMinutes'));
else
var d2 = addMinutes(cloneDate(d1), opt('defaultEventMinutes'));
renderSlotOverlay(d1, d2);
}
}
}, ev);
}
And heres how i make event draggable and update the "dragMinutes":
// make the event draggable using jQuery UI
$(this).draggable({
containment: 'document',
// return a custom styled elemnt being dragged
helper: function (event) {
return $('<div class="uv-planning-dragging"></div>').html($(this).html());
},
opacity: 0.70,
zIndex: 10000,
appendTo: 'body',
cursor: 'move',
revertDuration: 0,
revert: true,
start: function (e, ui) {
// set the "dragMinutes" option in fullCalendar so shown interval about to be added is correct.
var data = $(this).data('eventObject');
if (data) {
var min = data.jsonProps.durationMsec / 1000 / 60;
if (macroCalendar.calendar) {
macroCalendar.calendar.fullCalendar('setOptions', { dragMinutes: Math.round(min) }, false);
}
}
},
stop: function (e, ui) {
// further process
}
});
Hope it helps.
If anyone still visits the thread and don't find the solution, the solution would be to set the duration parameter in event div... and then call draggable on that div.
$(this).data('event', {
title: 'new event title', // use the element's text as the event title
id: $(this).attr('id'),
stick: true, // maintain when user navigates (see docs on the renderEvent method)
duration: '03:00:00' // will set the duration during drag of event
});
Currently, the best solution I have found is adding a duration attribute on my event Object, then the code to create my fullCalendar looks like this:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// HERE I force the end date based on the start date + duration
copiedEventObject.end = new Date(date.getTime() + copiedEventObject.duration * 60 * 1000);
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
The only drawback is when you're dragging the event, the event duration looks like defaultEventMinutes and not the actual duration, but I don't know how to fix it
These special properties can either be specified in the provided event object, or they can be standalone data attributes:
<!-- DURATION OF 3 hours EVENT WILL PROPAGATE TO CALENDAR WHEN DROPPED -->
<div class='draggable' data-event='1' data-duration='03:00' />
https://fullcalendar.io/docs/dropping/eventReceive/
With the latest fullcalendar v2.0.2, if you want the overlay to be of the particular duration, you can update in this function of fullcalendar-arshaw.js
function dragStart(_dragElement, ev, ui) {
hoverListener.start(function(cell) {
clearOverlays();
if (cell) {
var seconds = duration_in_minutes * 1000 * 60 ;
// we need to pass seconds into milli-seconds
if (d1.hasTime()) {
d2.add(seconds);
renderSlotOverlay(d1, d2, cell.col);
}
else {
d2.add(calendar.defaultAllDayEventDuration);
renderDayOverlay(d1, d2, true, cell.col);
}
}
}, ev);
}
Here, pass your duration in the external events object and that object you can fetch in _dragElement and then convert it into milli-seconds and pass it in d2.add(seconds). This will create the shadow of that mili-seconds on that calendar.
For non-external events you can use the fullcalendar settings:
defaultTimedEventDuration: (hours+':00:00'),
forceEventDuration: true,
// defaultEventMinutes: hours*60, // not needed
and in the event data you do not set the end property (or you null it):
eventData = {
title: title,
start: start,
// end: end, // MUST HAVE no end for fixedduration
color: '#00AA00',
editable: true, // for dragging
};
Ref: http://fullcalendar.io/docs/event_data/defaultTimedEventDuration/
Tip: In case you want to prevent the resizing of the events which is possible due to editable: true, you can use CSS to hide the handle: .fc-resizer.fc-end-resizer { display:none; }
Since v4 some of the above options are not working at all. The problem i was facing was as follows:
All day items for me have a duration, but not a start time. When i select a start time by dragging, the start time is set but as soon as i set the end date ( which is done similar as above answers ), the end date is reset again.. there is something buggy going on in the setDate function... the end date is set, this part works, then it does a comparisson on itself to find out the time difference between the dates, but the date is already set by the system itself causing the difference to be 0 which is causing the enddate to be set to null again......
A giant pain in my neck i got to say... it works perfect when staying within the timeline, but that's about it.
I managed to 'fix', more like destroy it by using this line in the eventDrop event, but it will also work in any other events you may use:
update your event with ajax here, since you have the start and end date *
calendar.refetchEvents(); in the success function
This is going to refetch all the events, it sounds pretty killer for performance but it doesn't seem to take up much time, try it for yourself.
This way my titles, times etc are always up to date and the calendar is showing the right end date.
I need to run a script after window get resized and isotope finish operating.
I thought callbacks would help but they're not fired in case of window resize.
As I need the updated container 's width value after resize, is there another way ?
Thanks for your help!
this worked..
docs
Similiar to a callback, onLayout is a function that will be triggered after every time an Isotope instance runs through its layout logic.
$('#container').isotope({
onLayout: function( $elems, instance ) {
// `this` refers to jQuery object of the container element
console.log( this.height() );
// callback provides jQuery object of laid-out item elements
$elems.css({ background: 'blue' });
// instance is the Isotope instance
console.log( instance.$filteredAtoms.length );
}
});
i was looking into that eather and couldnt find a solution. so i picked this ugly one:
$(window).smartresize(function () {
setTimeout(function () {
//your function
}, 810);
});
so on resize i set a timeout that calls 810ms after isotope relayout, which should take 800ms in jquery, or 0.8s in css3.
like is said, its ugly, but for now i fits the purpose..
Assume button A in an HTML5 webapp built with jQuery Mobile.
If someone taps button A, we call foo(). Foo() should get called once even if the user double taps button A.
We tried using event.preventDefault(), but that didn't stop the second tap from invoking foo(). event.stopImmediatePropagation() might work, but it also stops other methods further up the stack and may not lead to clean code maintenance.
Other suggestions? Maintaining a tracking variable seems like an awfully ugly solution and is undesirable.
You can set a flag and check if it's OK to run the foo() function or unbind the event for the time you don't want the user to be able to use it and then re-bind the event handler after a delay (just a couple options).
Here's what I would do. I would use a timeout to exclude the subsequent events:
$(document).delegate('#my-page-id', 'pageinit', function () {
//setup a flag to determine if it's OK to run the event handler
var okFlag = true;
//bind event handler to the element in question for the `click` event
$('#my-button-id').bind('click', function () {
//check to see if the flag is set to `true`, do nothing if it's not
if (okFlag) {
//set the flag to `false` so the event handler will be disabled until the timeout resolves
okFlag = false;
//set a timeout to set the flag back to `true` which enables the event handler once again
//you can change the delay for the timeout to whatever you may need, note that units are in milliseconds
setTimeout(function () {
okFlag = true;
}, 300);
//and now, finally, run your original event handler
foo();
}
});
});
I've created a sample here http://jsfiddle.net/kiliman/kH924/
If you're using <a data-role="button"> type buttons, there is no 'disabled' status, but you can add the appropriate class to give it the disabled look.
In your event handler, check to see if the button has the ui-disabled class, and if so, you can return right away. If it doesn't, add the ui-disabled class, then call foo()
If you want to re-enable the button, simply remove the class.
$(function() {
$('#page').bind('pageinit', function(e, data) {
// initialize page
$('#dofoo').click(function() {
var $btn = $(this),
isDisabled = $btn.hasClass('ui-disabled');
if (isDisabled) {
e.preventDefault();
return;
}
$btn.addClass('ui-disabled');
foo();
});
});
function foo() {
alert('I did foo');
}
});