search

kevalbhatt / timezone-picker

Select timezone using world map
http://kevalbhatt.github.io/timezone-picker
MIT License
98 stars 40 forks source link

Constant flicker during polygon hover #33

Open MadDanimal opened 4 years ago

MadDanimal commented 4 years ago

Getting a constant flicker during polygon hover because the mouseenter and mouseleave events start firing constantly. It also happens in the demo but not as reliably. Fixed by adding conditionals to the mouseenter and mouseleave events:

                    this.$el.on("mouseenter", "svg polygon", function(o) {
                        var i = t(o.target).data()
                          , a = e.mapHoverType
                          , s = e.hoverText;
                        if (!e.target || e.target.dataset && (n.$el.find(".hover-text p").text() != e.target.dataset.timezone + ' (' + e.target.dataset.zonename + ')')) {
                            t(a ? ".timezone-map polygon[data-" + a + '="' + i[a] + '"]' : o.currentTarget),
                            n.$el.find(".hover-text p").addClass("active").text(s && s instanceof Function ? s(o, i) : i.timezone + " (" + i.zonename + ")");
                        }
                    }),
                    this.$el.on("mouseleave", "svg polygon", function(e) {
                        if (!e.target || e.target.dataset && (n.$el.find(".hover-text p").text() != e.target.dataset.timezone + ' (' + e.target.dataset.zonename + ')')) {
                            n.$el.find(".hover-text p").removeClass("active").text("")
                        }
                    }),
kevalbhatt commented 4 years ago

Can you please send PR will review it and merge it.

On Mon, Aug 31, 2020, 20:39 MadDanimal notifications@github.com wrote:

Getting a constant flicker during polygon hover because the mouseenter and mouseleave events start firing constantly. It also happens in the demo but not as reliably. Fixed by adding conditionals to the mouseenter and mouseleave events:

                this.$el.on("mouseenter", "svg polygon", function(o) {
                    var i = t(o.target).data()
                      , a = e.mapHoverType
                      , s = e.hoverText;
                    if (!e.target.dataset || (n.$el.find(".hover-text p").text() != e.target.dataset.timezone + ' (' + e.target.dataset.zonename + ')')) {
                        t(a ? ".timezone-map polygon[data-" + a + '="' + i[a] + '"]' : o.currentTarget),
                        n.$el.find(".hover-text p").addClass("active").text(s && s instanceof Function ? s(o, i) : i.timezone + " (" + i.zonename + ")");
                    }
                }),
                this.$el.on("mouseleave", "svg polygon", function(e) {
                    if (!e.target.dataset || (n.$el.find(".hover-text p").text() != e.target.dataset.timezone + ' (' + e.target.dataset.zonename + ')')) {
                        n.$el.find(".hover-text p").removeClass("active").text("")
                    }
                }),

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/kevalbhatt/timezone-picker/issues/33, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7CGCF2H5HFKE7WEDLPVCLSDO4LBANCNFSM4QQT5PRQ .