Skip to content

Commit 1655ee0

Browse files
gigadudegigadude
committed
Handle unmodified left left click only, allow open-in-new tab etc. to use the default handler.
Added tests for shift/ctrl/meta/middle-clicked uiSrefs.
1 parent 9e2cd3c commit 1655ee0

File tree

2 files changed

+135
-5
lines changed

2 files changed

+135
-5
lines changed

‎src/stateDirectives.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,11 @@ function $StateRefDirective($state) {
3838
if (isForm) return;
3939

4040
element.bind("click", function(e) {
41-
$state.transitionTo(ref.state, params);
42-
scope.$apply();
43-
e.preventDefault();
41+
if ((e.which == 1) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
42+
$state.transitionTo(ref.state, params);
43+
scope.$apply();
44+
e.preventDefault();
45+
}
4446
});
4547
}
4648
};

‎test/stateDirectivesSpec.js‎

Lines changed: 130 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,145 @@ describe('uiStateRef', function() {
3737
expect(el.attr('href')).toBe('/contacts/6');
3838
});
3939

40-
it('should transition states when clicked', inject(function($state, $stateParams, $document, $q) {
40+
it('should transition states when left-clicked', inject(function($state, $stateParams, $document, $q) {
4141
expect($state.$current.name).toEqual('');
4242

4343
var e = $document[0].createEvent("MouseEvents");
44-
e.initMouseEvent("click");
44+
e.initMouseEvent(
45+
"click", // typeArg of type DOMString, Specifies the event type.
46+
true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
47+
true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
48+
undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
49+
0, // detailArg of type long, Specifies the Event's mouse click count.
50+
0, // screenXArg of type long, Specifies the Event's screen x coordinate
51+
0, // screenYArg of type long, Specifies the Event's screen y coordinate
52+
0, // clientXArg of type long, Specifies the Event's client x coordinate
53+
0, // clientYArg of type long, Specifies the Event's client y coordinate
54+
false, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
55+
false, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
56+
false, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
57+
false, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
58+
0, // buttonArg of type unsigned short, Specifies the Event's mouse button.
59+
null // relatedTargetArg of type EventTarget
60+
);
4561
el[0].dispatchEvent(e);
4662

4763
$q.flush();
4864
expect($state.current.name).toEqual('contacts.item.detail');
4965
expect($stateParams).toEqual({ id: "5" });
5066
}));
67+
68+
it('should not transition states when ctrl-clicked', inject(function($state, $stateParams, $document, $q) {
69+
expect($state.$current.name).toEqual('');
70+
71+
var e = $document[0].createEvent("MouseEvents");
72+
e.initMouseEvent(
73+
"click", // typeArg of type DOMString, Specifies the event type.
74+
true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
75+
true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
76+
undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
77+
0, // detailArg of type long, Specifies the Event's mouse click count.
78+
0, // screenXArg of type long, Specifies the Event's screen x coordinate
79+
0, // screenYArg of type long, Specifies the Event's screen y coordinate
80+
0, // clientXArg of type long, Specifies the Event's client x coordinate
81+
0, // clientYArg of type long, Specifies the Event's client y coordinate
82+
true, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
83+
false, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
84+
false, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
85+
false, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
86+
0, // buttonArg of type unsigned short, Specifies the Event's mouse button.
87+
null // relatedTargetArg of type EventTarget
88+
);
89+
el[0].dispatchEvent(e);
90+
91+
$q.flush();
92+
expect($state.current.name).toEqual('');
93+
expect($stateParams).toEqual({ id: "5" });
94+
}));
95+
96+
it('should not transition states when meta-clicked', inject(function($state, $stateParams, $document, $q) {
97+
expect($state.$current.name).toEqual('');
98+
99+
var e = $document[0].createEvent("MouseEvents");
100+
e.initMouseEvent(
101+
"click", // typeArg of type DOMString, Specifies the event type.
102+
true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
103+
true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
104+
undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
105+
0, // detailArg of type long, Specifies the Event's mouse click count.
106+
0, // screenXArg of type long, Specifies the Event's screen x coordinate
107+
0, // screenYArg of type long, Specifies the Event's screen y coordinate
108+
0, // clientXArg of type long, Specifies the Event's client x coordinate
109+
0, // clientYArg of type long, Specifies the Event's client y coordinate
110+
false, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
111+
false, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
112+
false, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
113+
true, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
114+
0, // buttonArg of type unsigned short, Specifies the Event's mouse button.
115+
null // relatedTargetArg of type EventTarget
116+
);
117+
el[0].dispatchEvent(e);
118+
119+
$q.flush();
120+
expect($state.current.name).toEqual('');
121+
expect($stateParams).toEqual({ id: "5" });
122+
}));
123+
124+
it('should not transition states when shift-clicked', inject(function($state, $stateParams, $document, $q) {
125+
expect($state.$current.name).toEqual('');
126+
127+
var e = $document[0].createEvent("MouseEvents");
128+
e.initMouseEvent(
129+
"click", // typeArg of type DOMString, Specifies the event type.
130+
true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
131+
true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
132+
undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
133+
0, // detailArg of type long, Specifies the Event's mouse click count.
134+
0, // screenXArg of type long, Specifies the Event's screen x coordinate
135+
0, // screenYArg of type long, Specifies the Event's screen y coordinate
136+
0, // clientXArg of type long, Specifies the Event's client x coordinate
137+
0, // clientYArg of type long, Specifies the Event's client y coordinate
138+
false, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
139+
false, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
140+
true, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
141+
false, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
142+
0, // buttonArg of type unsigned short, Specifies the Event's mouse button.
143+
null // relatedTargetArg of type EventTarget
144+
);
145+
el[0].dispatchEvent(e);
146+
147+
$q.flush();
148+
expect($state.current.name).toEqual('');
149+
expect($stateParams).toEqual({ id: "5" });
150+
}));
151+
152+
it('should not transition states when middle-clicked', inject(function($state, $stateParams, $document, $q) {
153+
expect($state.$current.name).toEqual('');
154+
155+
var e = $document[0].createEvent("MouseEvents");
156+
e.initMouseEvent(
157+
"click", // typeArg of type DOMString, Specifies the event type.
158+
true, // canBubbleArg of type boolean, Specifies whether or not the event can bubble.
159+
true, // cancelableArg of type boolean, Specifies whether or not the event's default action can be prevented.
160+
undefined, // viewArg of type views::AbstractView, Specifies the Event's AbstractView.
161+
0, // detailArg of type long, Specifies the Event's mouse click count.
162+
0, // screenXArg of type long, Specifies the Event's screen x coordinate
163+
0, // screenYArg of type long, Specifies the Event's screen y coordinate
164+
0, // clientXArg of type long, Specifies the Event's client x coordinate
165+
0, // clientYArg of type long, Specifies the Event's client y coordinate
166+
false, // ctrlKeyArg of type boolean, Specifies whether or not control key was depressed during the Event.
167+
false, // altKeyArg of type boolean, Specifies whether or not alt key was depressed during the Event.
168+
false, // shiftKeyArg of type boolean, Specifies whether or not shift key was depressed during the Event.
169+
false, // metaKeyArg of type boolean, Specifies whether or not meta key was depressed during the Event.
170+
1, // buttonArg of type unsigned short, Specifies the Event's mouse button.
171+
null // relatedTargetArg of type EventTarget
172+
);
173+
el[0].dispatchEvent(e);
174+
175+
$q.flush();
176+
expect($state.current.name).toEqual('');
177+
expect($stateParams).toEqual({ id: "5" });
178+
}));
51179
});
52180

53181
describe('forms', function() {

0 commit comments

Comments
 (0)