Skip to content

Commit 41faf6b

Browse files
niksyniksy
committed
Allow opening in new tab for common controls
1 parent afb7144 commit 41faf6b

File tree

6 files changed

+61
-32
lines changed

6 files changed

+61
-32
lines changed

‎src/js/components/mainNavigation.vue‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
:href="item.url"
2929
:class="['item', item.icon ? 'icon' + item.icon : '', {selected: item.selected}]"
3030
:title="item.caption"
31-
@click.prevent="openItem(item)"
31+
@click="openItem(item, $event)"
3232
>
3333
{{ item.caption }}
3434
<span v-if="!item.icon" class="initials">{{ item.initials }}</span>
@@ -57,7 +57,7 @@
5757
:href="subItem.url"
5858
:class="['item', {selected: subItem.selected}]"
5959
:title="subItem.caption"
60-
@click.prevent="openItem(subItem)"
60+
@click="openItem(subItem, $event)"
6161
>
6262
{{ subItem.caption }}
6363
</a>
@@ -83,7 +83,7 @@
8383
class="item"
8484
:href="item.url"
8585
v-html="item.caption"
86-
@click.prevent="openUserItem(item)"
86+
@click="openUserItem(item, $event)"
8787
></a>
8888
<button
8989
v-else
@@ -107,7 +107,7 @@
107107
</template>
108108

109109
<script>
110-
import {pickTo} from '../library/toolkit.js';
110+
import {pickTo, isNewTabClick} from '../library/toolkit.js';
111111
import vueDismiss from '../dependencies/vue-dismiss/index.js';
112112
import serviceContainer from '../library/serviceContainer.js';
113113
import {GlobalEvents} from 'vue-global-events';
@@ -234,7 +234,13 @@ export default {
234234
235235
},
236236
237-
openItem(item) {
237+
openItem(item, event) {
238+
239+
if (isNewTabClick(event)) {
240+
return;
241+
}
242+
243+
event?.preventDefault();
238244
239245
if (item.action) {
240246
item.action(this);
@@ -288,7 +294,13 @@ export default {
288294
289295
},
290296
291-
openUserItem(item) {
297+
openUserItem(item, event) {
298+
299+
if (isNewTabClick(event)) {
300+
return;
301+
}
302+
303+
event?.preventDefault();
292304
293305
if (item.action) {
294306
item.action(this);

‎src/js/components/resourceControls.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<template>
22
<nav class="resourceControls" v-if="parsedControls.length">
3-
<template v-for="(control, index) in parsedControls">
3+
<template v-for="(control, index) in parsedControls" :key="control.caption + index">
44
<div
55
v-if="control.isDropdown"
6-
:key="control.caption + index"
76
class="dropdownControls"
87
:class="{active: control.active, accentedAdjecent: control.accentedAdjecent}"
98
v-on-dismiss="{callback: () => closeDropdown(control), watch: control.active}"
@@ -31,21 +30,19 @@
3130
<a
3231
v-else-if="control.url"
3332
:href="control.url"
34-
:key="control.caption + index"
3533
:class="control.className"
3634
:title="control.caption"
37-
@click.prevent="runControlAction(control)"
35+
@click="runControlAction(control, $event)"
3836
>
3937
<span>{{ control.caption }}</span>
4038
</a>
4139
<button
4240
v-else
4341
class="nBtn"
4442
type="button"
45-
:key="control.caption + index"
4643
:class="control.className"
4744
:title="control.caption"
48-
@click.prevent="runControlAction(control)"
45+
@click="runControlAction(control, $event)"
4946
>
5047
<span>{{ control.caption }}</span>
5148
</button>
@@ -56,7 +53,7 @@
5653
<script>
5754
5855
import translate from '../library/translate.js';
59-
import {assign} from '../library/toolkit.js';
56+
import {assign, isNewTabClick} from '../library/toolkit.js';
6057
import vueDismiss from '../dependencies/vue-dismiss/index.js';
6158
import screenSize from '../mixins/screenSize.js';
6259
@@ -119,9 +116,14 @@ export default {
119116
120117
},
121118
122-
runControlAction(config) {
119+
runControlAction(config, event) {
123120
124-
config.action.call(config.actionContext);
121+
if (isNewTabClick(event)) {
122+
// do nothing
123+
} else {
124+
event?.preventDefault();
125+
config.action.call(config.actionContext);
126+
}
125127
126128
},
127129

‎src/js/components/resourceHeader.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,17 @@
22
<header class="headerType1" :class={hasBottomBorder}>
33
<h1 class="projectCaption">{{ projectCaption }}</h1>
44
<h2 v-if="breadcrumbs.length" class="title">
5-
<template v-for="(breadcrumb, index) in breadcrumbs">
5+
<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.caption">
66
<a
77
v-if="breadcrumb.url"
8-
:key="breadcrumb.caption"
98
:href="breadcrumb.url"
109
:class="{iconChevronRight: index + 1 < breadcrumbs.length}"
11-
@click.prevent="clickBreadcrumb(breadcrumb)"
10+
@click="clickBreadcrumb(breadcrumb, $event)"
1211
>
1312
{{ breadcrumb.caption }}
1413
</a>
1514
<span
1615
v-else
17-
:key="breadcrumb.caption"
1816
:class="{iconChevronRight: index + 1 < breadcrumbs.length}"
1917
>
2018
{{ breadcrumb.caption }}
@@ -26,6 +24,7 @@
2624
</template>
2725

2826
<script>
27+
import {isNewTabClick} from '../library/toolkit.js';
2928
3029
export default {
3130
@@ -46,11 +45,15 @@ export default {
4645
4746
methods: {
4847
49-
clickBreadcrumb(breadcrumb) {
48+
clickBreadcrumb(breadcrumb, e) {
5049
51-
if (breadcrumb.action) {
50+
if (isNewTabClick(e)) {
51+
// do nothing
52+
} else if (breadcrumb.action) {
53+
e.preventDefault();
5254
breadcrumb.action();
5355
} else if (breadcrumb.url) {
56+
e.preventDefault();
5457
this.$router.navigateTo(breadcrumb.url);
5558
}
5659

‎src/js/components/resourcePagination.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
v-if="currentPage !== 1"
2828
class="iconArrowLeft icon page icr"
2929
:href="getUrlForPage(currentPage - 1)"
30-
@click.prevent="selectPage(currentPage - 1)"
30+
@click="selectPage(currentPage - 1, $event)"
3131
>
3232
{{ currentPage - 1 }}
3333
</a>
@@ -38,7 +38,7 @@
3838
<a
3939
:class="['page', {selected: 1 == currentPage}]"
4040
:href="getUrlForPage(1)"
41-
@click.prevent="selectPage(1)"
41+
@click="selectPage(1, $event)"
4242
>1</a>
4343
</li>
4444

@@ -51,7 +51,7 @@
5151
<a
5252
:class="['page', {selected: page == currentPage}]"
5353
:href="getUrlForPage(page)"
54-
@click.prevent="selectPage(page)"
54+
@click="selectPage(page, $event)"
5555
>{{ page }}</a>
5656
</li>
5757

@@ -64,7 +64,7 @@
6464
<a
6565
:class="['page', {selected: totalPages === currentPage}]"
6666
:href="getUrlForPage(totalPages)"
67-
@click.prevent="selectPage(totalPages)"
67+
@click="selectPage(totalPages, $event)"
6868
>{{ totalPages }}</a>
6969
</li>
7070

@@ -73,7 +73,7 @@
7373
v-if="currentPage < totalPages"
7474
class="iconArrowRight page icon icr"
7575
:href="getUrlForPage(currentPage + 1)"
76-
@click.prevent="selectPage(currentPage + 1)"
76+
@click="selectPage(currentPage + 1, $event)"
7777
>{{ currentPage + 1 }}
7878
</a>
7979
<button v-else class="iconArrowRight disabled icon icr"></button>
@@ -88,7 +88,7 @@
8888
8989
import userPreferences from '../library/userPreferences.js';
9090
import translate from '../library/translate.js';
91-
import {range} from '../library/toolkit.js';
91+
import {range, isNewTabClick} from '../library/toolkit.js';
9292
import bootData from '../library/bootData.js';
9393
import screenSize from '../mixins/screenSize.js';
9494
@@ -172,9 +172,14 @@ const Pagination = {
172172
173173
},
174174
175-
selectPage(page) {
175+
selectPage(page, event) {
176176
177-
this.$emit('pageRequest', page);
177+
if (isNewTabClick(event)) {
178+
// do nothing
179+
} else {
180+
event?.preventDefault();
181+
this.$emit('pageRequest', page);
182+
}
178183
179184
}
180185

‎src/js/library/toolkit.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,3 +329,9 @@ export function getComponentInitialValue(Component, options = {}) {
329329
}
330330

331331
}
332+
333+
export function isNewTabClick(event) {
334+
return event
335+
? Boolean(event.ctrlKey || event.metaKey || event.which === 2)
336+
: false;
337+
}

‎src/js/listElements/link.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<script>
1313
1414
import base from './base.js';
15-
import {result} from '../library/toolkit.js';
15+
import {result, isNewTabClick} from '../library/toolkit.js';
1616
1717
export default {
1818
@@ -52,7 +52,9 @@ export default {
5252
5353
handleClick(e) {
5454
55-
if (this.action) {
55+
if (isNewTabClick(e)) {
56+
// do nothing
57+
} else if (this.action) {
5658
e.preventDefault();
5759
this.action(this.resourceModel, e);
5860
} else if (!this.isExternalLink) {
@@ -65,7 +67,6 @@ export default {
6567
}
6668
6769
};
68-
6970
</script>
7071

7172
<style lang="scss" scoped>

0 commit comments

Comments
 (0)