I would like to render events differently based on the source of the Event Object, but even though the fullcalendar documentation states
source "Event Source Object. Automatically populated. A reference to
the event source that this event came from."
I am unable to query the "source" property of the Event Object.
console.log(event.source); results in [object Object]
I am using multiple Google Calendar eventSources, but nothing in the documentation seems to indicate that I shouldn't be able to do this.
I initially planned to render events based on filtered eventSources (triggered by a custom button which invokes a modal containing checkboxes), but I spent way to long reading up docs, code samples and numerous suggestions before I finally decided to throw in the towel on this idea. In the end I removed all eventSources using 'removeEventSources' before adding each source one by one using 'addEventSource' (depending on what filter options are selected).
It seems that there is no built in mechanism or straight forward functionality to filter eventSources (especially Google Calendars) and I suspect the ability to query the "sources" property of the Event Object would allow us a different approach to accomplish such functionality and improve load times.
Other use case example:
If want to determine the "source" at eventClick or render to decide whether to use certain fields e.g.
if event source == Holiday Cal do not display event.start & event.end
or
if source == eventSource1 use Modal1 else use Modal2
etc
So my question is:
Does anyone know why I cannot query the "source" property of the Event Object as documented in the following link?
https://fullcalendar.io/docs/event-object
Fullcalendar documentation screen shot:
The message you're seeing tells you that event.source is an Object, so console.log() won't show you much. But console.dir() will, including:
...
calendar: t {loadingLevel: 0, ignoreUpdateViewSize: 0, freezeContentHeightDepth: 0, el: w.fn.init(1), viewsByType: {…}, …}
className: ["TestCase"]
googleCalendarId: "e0kujgeepc0ev00eojborllms8#group.calendar.google.com"
... etc
You can use any of those properties to test which source you're looking at, for eg (not sure why className is an array but that's not relevant to this problem):
$target = (event.source.className[0] === 'HolidaysUK') ? $modal1 : $modal2;
Here's a much simplified Codepen which opens your events on click in different modals, depending on source, which is what I understand is one of the things you are trying to do.
Side note - you'll make it much easier for ppl to help if you try to create a minimal, complete, and verifiable example of your problem. Your Codepen includes loads of stuff entirely unrelated to the problem, which we have to wade through and evaluate and discard while looking at the problem.
Related
I'm going through the documentation for arangojs and looking at the function collection.update(), keepNull is one of the options that can be added. https://github.com/arangodb/arangojs/blob/master/docs/Drivers/JS/Reference/Collection/DocumentManipulation.md
When going through the same documentation for the function collection.save() (https://github.com/arangodb/arangojs/blob/master/docs/Drivers/JS/Reference/Collection/DocumentCollection.md) we find no such option. Why? Do I first need to have an original file, then update that one with keepNull: false before I get it to clean up my documents from any null valued keys? Or is this a lack in the documentation? I think it's correct since I haven't managed to set keepNull to false using collection.save myself.
The driver hands the query options over to the server, so this is the relevant documentation to look at:
https://www.arangodb.com/docs/stable/http/document-working-with-documents.html#create-document
The API does not support keepNull as option when creating a document. It is only available for UPDATE/REPLACE queries to mark attributes for removal. So it's up to you to do this on the client-side. You may open a feature request nonetheless.
BTW. In AQL, UPDATE doc WITH {} OPTIONS { keepNull: false } will not remove any attributes with a null value! It only removes attributes you set explicitly to null in the WITH {} part. This may apply to the driver as well.
I am trying to process an insert event from the CKEditor 5.
editor.document.on("change", (eventInfo, type, data) => {
switch (type) {
case "insert":
console.log(type, data);
break;
}
});
When typing in the editor the call back is called. The data argument in the event callback looks like approximately like this:
{
range: {
start: {
root: { ... },
path: [0, 14]
},
end: {
root: { ... },
path: [0, 15]
}
}
}
I don't see a convenient way to figure out what text was actually inserted. I can call data.range.root.getNodeByPath(data.range.start.path); which seems to get me the text node that the text was inserted in. Should we then look at the text node's data field? Should we assume that the last item in the path is always an offset for the start and end of the range and use that to substring? I think the insert event is also fired for inserting non-text type things (e.g. element). How would we know that this is indeed a text type of an event?
Is there something I am missing, or is there just a different way to do this all together?
First, let me describe how you would do it currently (Jan 2018). Please, keep in mind that CKEditor 5 is now undergoing a big refactoring and things will change. At the end, I will describe how it will look like after we finish this refactoring. You may skip to the later part if you don't mind waiting some more time for the refactoring to come to an end.
EDIT: The 1.0.0-beta.1 was released on 15th of March, so you can jump to the "Since March 2018" section.
Until March 2018 (up to 1.0.0-alpha.2)
(If you need to learn more about some class API or an event, please check out the docs.)
Your best bet would be simply to iterate through the inserted range.
let data = '';
for ( const child of data.range.getItems() ) {
if ( child.is( 'textProxy' ) ) {
data += child.data;
}
}
Note, that a TextProxy instance is always returned when you iterate through the range, even if the whole Text node is included in the range.
(You can read more about stringifying a range in CKEditor5 & Angular2 - Getting exact position of caret on click inside editor to grab data.)
Keep in mind, that InsertOperation may insert multiple nodes of a different kind. Mostly, these are just singular characters or elements, but more nodes can be provided. That's why there is no additional data.item or similar property in data. There could be data.items but those would just be same as Array.from( data.range.getItems() ).
Doing changes on Document#change
You haven't mentioned what you want to do with this information afterwards. Getting the range's content is easy, but if you'd like to somehow react to these changes and change the model, then you need to be careful. When the change event is fired, there might be already more changes enqueued. For example:
more changes can come at once from collaboration service,
a different feature might have already reacted to the same change and enqueued its changes which might make the model different.
If you know exactly what set of features you will use, you may just stick with what I proposed. Just remember that any change you do on the model should be done in a Document#enqueueChanges() block (otherwise, it won't be rendered).
If you would like to have this solution bulletproof, you probably would have to do this:
While iterating over data.range children, if you found a TextProxy, create a LiveRange spanning over that node.
Then, in a enqueueChanges() block, iterate through stored LiveRanges and through their children.
Do your logic for each found TextProxy instance.
Remember to destroy() all the LiveRanges afterwards.
As you can see this seems unnecessarily complicated. There are some drawbacks of providing an open and flexible framework, like CKE5, and having in mind all the edge cases is one of them. However it is true, that it could be simpler, that's why we started refactoring in the first place.
Since March 2018 (starting from 1.0.0-beta.1)
The big change coming in 1.0.0-beta.1 will be the introduction of the model.Differ class, revamped events structure and a new API for big part of the model.
First of all, Document#event:change will be fired after all enqueueChange blocks have finished. This means that you won't have to be worried whether another change won't mess up with the change that you are reacting to in your callback.
Also, engine.Document#registerPostFixer() method will be added and you will be able to use it to register callbacks. change event still will be available, but there will be slight differences between change event and registerPostFixer (we will cover them in a guide and docs).
Second, you will have access to a model.Differ instance, which will store a diff between the model state before the first change and the model state at the moment when you want to react to the changes. You will iterate through all diff items and check what exactly and where has changed.
Other than that, a lot of other changes will be conducted in the refactoring and below code snippet will also reflect them. So, in the new world, it will look like this:
editor.document.registerPostFixer( writer => {
const changes = editor.document.differ.getChanges();
for ( const entry of changes ) {
if ( entry.type == 'insert' && entry.name == '$text' ) {
// Use `writer` to do your logic here.
// `entry` also contains `length` and `position` properties.
}
}
} );
In terms of code, it might be a bit more of it than in the first snippet, but:
The first snippet was incomplete.
There are a lot fewer edge cases to think about in the new approach.
The new approach is easier to grasp - you have all the changes available after they are all done, instead of reacting to a change when other changes are queued and may mess up with the model.
The writer is an object that will be used to do changes on the model (instead of Document#batch API). It will have methods like insertText(), insertElement(), remove(), etc.
You can check model.Differ API and tests already as they are already available on master branch. (The internal code will change, but API will stay as it is.)
#Szymon Cofalik's answer went into a direction "How to apply some changes based on a change listener". This made it far more complex than what's needed to get the text from the Document#change event, which boils down to the following snippet:
let data = '';
for ( const child of data.range.getChildren() ) {
if ( child.is( 'textProxy' ) ) {
data += child.data;
}
}
However, reacting to a change is a tricky task and, therefore, make sure to read Szymon's insightful answer if you plan to do so.
I can't get uiCalendar to update after changing the elements in the event source.
The calendar is defined in the template as:
<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="EC.calendarEvents" calendar="eventsCalendar"></div>
When I add or remove elements from EC.calendarEvents the calendar doesn't update.
I've tried all of the following statements to try to get the calendar to refresh after modifying EC.calendarEvents:
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('render');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('rerenderEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('refetchEvents');
I've also tried removing and re-adding the source:
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('removeEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('addEventSource', $scope.EC.calendarEvents);
But this just causes the following error to show up in the console:
TypeError: Cannot read property 'hasTime' of undefined
The error is occurring in fullcalendar.js in the normalizeEventTimes function on line 12272.
The error line is:
eventProps.allDay = !(eventProps.start.hasTime() || (eventProps.end && eventProps.end.hasTime()));
In this post they suggest maintaining the same reference to the array and pushing/splicing events in and out: AngularJS UI-calendar not updating events on Calendar
I tried this as well but it didn't make any difference.
The problem turned out to be an inconsistency in the format that ui-calendar expects to receive it's events in.
When the controller loads and I populate EC.calendarEvents, ui-calendar expects to receive an array of arrays. So the assignment looks like this:
$scope.EC.calendarEvents = [createCalendarEventsFromCoreEvents(coreEvents)];
However, whenever I want to alter EC.calendarEvents, it has to be an array only, not an array of arrays.
So subsequent updates to EC.calendarEvents look like this:
$scope.EC.calendarEvents = createCalendarEventsFromCoreEvents(filterEvents());
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('removeEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('addEventSource', $scope.EC.calendarEvents);
Note the lack of brackets [] around createCalendarEventsFromCoreEvents.
I am trying to use ngGrid to make somewhat of a "tree-control" which I can build dynamically by calling API's. ngGrid allows for grouping on rows, yet the nature of it requires that all rows be present at the beginning. This is unfortunate for the fact that an API to pull back all generation data for a File Integrity Monitoring system would be insanely slow and stupid. Instead, I wish to build the "tree" dynamically on the expansion of each generation.
I am trying to inject children (ngRows) into a group-row (ngAggregate) on a callback, yet I do not think that I am calling the correct constructor for the ngRows for the fact that the rows are ignored by the control
Through the use of the aggregateTemplate option on the gridOptions for ngGrid, I have been able to intersept the expansion of a group quite easily.
(maybe not easily, but still)
I've replaced the ng-click of the default template:
ng-click="row.toggleExpand()"
with:
ng-click="$parent.$parent.rowExpanded(row)"
I know that it's a bit of a hack, but we can get to that later. For now, it gets the job done.
The way that I discovered how to work my way up the $scope to my rowExpanded function was by setting a breakpoint in ngGrid's "row.toggleExpand" function and calling it from the template as so:
ng-click="row.toggleExpand(this)"
Once I retrieve the group I want, I call an API to get the children for said group. I then need to make the return as children of the row. I decided to do this by calling ngGrid's ngRow factory:
row.children = [];
for(var i = 0; i < childData.length; i++)
{
row.children[row.children.length] = row.rowFactory.buildEntityRow(childData[i], i);
}
row.toggleExpand();
... yet this does not appear to be working. The rows are not showing up after I do the expand! Why won't my rows show up?
Here's my current Plunker!
By the way
I've placed a debugger statement within the group-expand callback. As long as you have your debugger open, you should catch a breakpoint on the expansion of a group.
Thanks everybody!
I found my answer, I'm an idiot....
I got this control working, and then realized that it was a total hack, that I could have used the control the way it was meant to be used and it would have worked much better, had much better work-flow, and it would have saved me an entire day of development. If you are wondering how you use the control this way, the answer is that you don't.
I got the stupid thing to work by updating my data structure after the round trip and forcing the grid to refresh, pretty obvious. I had to set the grid options so that groups were always expanded and I had to control the collapser icon logic myself, outside of ngGrid. I never called row.toggleExpand. I also hid any rows with null values by a function call within an ng-if on my rowTemplate. After all that was said and done, I put my foot in my mouth.
I am trying to bind a property of an object to a property that's bound in an ArrayController. I want all of this to occur after the object has already been created and added to the ArrayController.
Here is a fiddle with a simplified example of what I'm trying to achieve.
I am wondering if I'm having problems with scope - I've already tried to bind to the global path (i.e. 'App.objectTwoController.objectOne.param3') to set the binding to. I've also tried to bind directly to the objectOneController (which is not what I want to do, but tried it just to see if it worked) and that still didn't work.
Any ideas on what I'm doing incorrectly? Thanks in advance for taking the time to look at this post.
So in the example below (I simplified it a little bit, but same principles apply)... The method below ends up looking for "objectOne" on "objectTwo" instead of on the "objectTwoController".
var objectTwoController: Em.Object.create({
objectOneBinding: 'App.objectOne',
objectTwoBinding: 'App.objectTwo',
_onSomething: function() {
var objectTwo = this.get('objectTwo');
objectTwo.bind('param2', Em.Binding.from('objectOne.param3'));
}.observes('something')
});
The problem is that you can't bind between two none relative objects. If you look in the "connect" method in ember you will see that it only takes one reference object (this) in which to observe both paths (this is true for 9.8.1 from your example and the ember-pre-1.0 release).
You have few options (that I can think of at least).
First: You can tell the objects about each other and in turn the relative paths will start working. This will actually give "objectTwo" an object to reference when binding paths.
....
objectTwo.set('objectOne', this.get('objectOne');
....
Second: You could add your own observer/computed property that will just keep the two in sync (but it is a little more verbose). You might be able to pull off something really slick but it maybe difficult. Even go so far as writing your own binding (like Transforms) to allow you to bind two non-related objects as long as you have paths to both.
_param3: function(){
this.setPath('objectTwo.param2', this.getPath('objectOne.param3');
}.observes('objectOne.param3')
You can make these dynamically and not need to pre-define them...
Third: Simply make them global paths; "App.objectOneController.content.param3" should work as your binding "_from" path (but not sure how much this helps you in your real application, because with larger applications I personally don't like everything global).
EDIT: When setting the full paths. Make sure you wait until end of the current cycle before fetching the value because bindings don't always update until everything is flushed. Meaning, your alert message needs to be wrapped in Ember.run.next or you will not see the change.