Event management attribute in the directive about angular-leaflet-directive HOT 18 CLOSED

Glad you brought this up! I had a hunch that firing off all the events might cause issues. My original work was aiming to fire just the events you'd want but I then opted for everything for completeness. I agree that there should be a way to limit which events are fired.

One issue with the current implementation is that the events property on the scope is being used for map event callbacks which might be obsolete now that we have map events broadcasting. I left it in after adding map event broadcasting so that I wouldn't break anyone's code that was using the map callbacks.

As for your proposed solutions above, I personally would lean towards the model binding as I can see putting it in the attribute getting pretty messy.

One addition I could see pretty useful is the inverse of what you have there currently.

Here are the events I don't want to be fired

The use case would be that you're fine with the majority of the events being fired but there are one or two that are just firing way too often and you don't really need them so exclude those from being passed on. That would be easier than including all but the one event in your controller for which should be fired.

Thoughts?

Also, for the model biding, is there an advantage to doing

events = {
  map: {
    click: true,
    popupopen: true,
    popupclose: true
  },
  markers: {
    mouseover: true
  }
}

vs

events = {
  map: [
    "click",
    "popupopen",
    "popupclose"
  ],
  markers: [
    "mouseover"
  ]
}

?

from angular-leaflet-directive.

Hi,

right for me. I prefer the array scheme. For the FIRE / NOT FIRE there can be an attribute like logic: "enable"/"disable"

Also I'm figureing out how to broadcast html events for markers, for example a transitionend event, that was easyly handled with JQuery:

$("Marker" + i.toString()).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    $self.finishTransition($self);
});

Any hint?

from angular-leaflet-directive.

Also I'm figureing out how to broadcast html events for markers, for example a transitionend event, that was easyly handled with JQuery:

I've never broadcasted html events from the markers before. What's the scenario around that? What are you trying to do? Sounds like something I might like to also play with 😄.

I prefer the array scheme. For the FIRE / NOT FIRE there can be an attribute like logic: "enable"/"disable"

Here's my proposal for the events control

Events disabling/enabling is separated by map and marker for easier processing. With this setup it might be clearer when declaring some map event enabled while disabling some marker events for example.

Setting which events to enable

events.map.enable = [
    "click",
    "popupopen",
    "popupclose"
];

events.marker.enable = [
    "mouseover"
];

All other events are disabled by the mere presence of events.*.enable.

Setting which events to disable

events.map.disable = [
    "click",
    "popupopen",
    "popupclose"
];

events.marker.disable = [
    "mouseover"
];

This has the inverse effect of events.*.enable. The events listed here are explicitly disabled while all other events are still broadcasted.

Enable for one disable for other

events.map.disable = [
    "click",
    "popupopen",
    "popupclose"
];

events.marker.enable = [
    "mouseover"
];

Here, certain map events are disable while only one marker event is enabled.

Are any cases not covered with what I have above? Any flaws or recommendations? Would this all be too confusing? lol

from angular-leaflet-directive.

Hi,

sounds very good to me. I will the enable and disable schema proposed by @grantlucas.

The html events, in my case, are for animating marker movements. something like: http://openplans.github.io/Leaflet.AnimatedMarker/ but in a bit more complex way (inside a syncronized simulator).

from angular-leaflet-directive.

sounds very good to me. I will the enable and disable schema proposed by @grantlucas.

Great! Glad we managed to sort this out

The html events, in my case, are for animating marker movements. something like: http://openplans.github.io/Leaflet.AnimatedMarker/ but in a bit more complex way (inside a syncronized simulator).

Woh, animated markers are pretty neat! Sadly I have no info on the html events though. Looking forward to see it if you manage to sort it out.

from angular-leaflet-directive.

I'm coding this feature, but I'm not able to write any working test. I've tryed almost everything I can imagine and always fail the tests. First I'm just testing the usage of the model, something very easy:

    it('should NOT broadcast events from the rootscope if the event-broadcast option is not an object',function() {
        var $scope = $rootScope.$new();
        $scope.events = 3;
        $scope.fired = false;
        $scope.$on("leafletDirectiveMap.click", function(event, args){
            $scope.fired = true;
        });
        var element = angular.element('<leaflet event-broadcast="events" testing="testing"></leaflet>');
        element = $compile(element)($scope);
        var map = element.scope().leaflet.map;
        map.fire("click");
        $scope.$digest();
        expect($scope.fired).toBe(true);
    });

I endend up with this code, but while testing and testing I realized that the events test passes although you comment the fireEvent line.

    for (var k in mapEvents){
        var eventName = 'leafletDirectiveMap.' + mapEvents[k];
        // console.log(eventName); // Inspect
        scope.$on(eventName, setEventTrue(k));
        map.fireEvent([mapEvents[k]]);
        expect(check[mapEvents[k]]).toEqual(true);
    }

I think threre is a bug, but I can't resolve it.
Please, help 😢
EDIT: the directive is broadcasting all events although test description says NOT.

from angular-leaflet-directive.

thanks for taking care of this :)

@JaumeFigueras , can you push your code to a public branch so we can test it locally on our machine?

from angular-leaflet-directive.

You can find it here:
https://github.com/JaumeFigueras/angular-leaflet-directive

from angular-leaflet-directive.

I've added more code, so test problems commit is:
f2c79fa

from angular-leaflet-directive.

@grantlucas Events will have a logic attribute with possible values 'emit' or 'broadcast' in order to emit the events or broadcast the events

so the model will look like:

events = {
    map: {
        disable = ["click",
            "popupopen",
            "popupclose"
        ],
        logic: "emit"
    },
    marker: {
        enable: ["mouseover"],
        logic: "broadcast"
    }
}

This logic is useful if you have multiple maps on one page (like while writing an usage example), so you can choose to broadcast an event to all listeners or only to your parent scopes (from directive to controllers until rootScope is reached).

from angular-leaflet-directive.

@JaumeFigueras Ah cool cool. Looks solid to me. What will the default logic be? Broadcast?

from angular-leaflet-directive.

Defaults will be, for backward compatibility, all enabled and broadcast.

Grant Lucas [email protected] wrote:

@JaumeFigueras Ah cool cool. Looks solid to me. What will the default
logic be? Broadcast?

---

Reply to this email directly or view it on GitHub:
#137 (comment)

Jaume Figueras. Enviat des d'un aparell mòbil, disculpeu la brevetat I les faltes ortogràfiques.

from angular-leaflet-directive.

Perfect

from angular-leaflet-directive.

About the tests problems, I think events are part of the e2e test rather than the unit tests.
I searched the web but still not have any solution.
I'm sending a pull request with the functionaity, the tests defined but without code. Also some examples.

from angular-leaflet-directive.

@JaumeFigueras , sorry I am too busy recently :(

Just got a chance to run your test, you made a typo ;p

scope.$on(eventName, setEventTrue(k));

should be:

scope.$on(eventName, function() {setEventTrue(k)});

from angular-leaflet-directive.

Thanks, solved. Now doing pending tests.

from angular-leaflet-directive.

@JaumeFigueras Did you ever manage to figure out a way to unit test the map events?

I tried something along the lines of

leafletData.getMap().then(function(map){
    map.fireEvent('click');
});

but that's not working either.

from angular-leaflet-directive.

Old issue, code has changed a lot since this, closing. Please reply if you think this should be reopened. Thanks.

from angular-leaflet-directive.