Skip to content

Commit a0dc126

Browse files
MacJoomMacJoom
authored
Fix multi select behavior in Media Manager followup of 39824 (#44747)
1 parent 65da8b2 commit a0dc126

File tree

5 files changed

+103
-102
lines changed

5 files changed

+103
-102
lines changed

‎administrator/components/com_media/resources/scripts/components/browser/browser.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
v-for="item in localItems"
6565
:key="item.path"
6666
:item="item"
67+
:localItems="localItems"
6768
/>
6869
</div>
6970
</div>

‎administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js‎

Lines changed: 6 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@ import Image from './image.vue';
55
import Video from './video.vue';
66
import Audio from './audio.vue';
77
import Doc from './document.vue';
8-
import * as types from '../../../store/mutation-types.es6';
98
import api from '../../../app/Api.es6';
9+
import onItemClick from '../utils/utils.es6';
1010

1111
export default {
1212
props: {
1313
item: {
1414
type: Object,
1515
default: () => {},
1616
},
17+
localItems: {
18+
type: Array,
19+
default: () => [],
20+
},
1721
},
1822
data() {
1923
return {
@@ -120,64 +124,7 @@ export default {
120124
* @param event
121125
*/
122126
handleClick(event) {
123-
if (this.item.path && this.item.type === 'file') {
124-
window.parent.document.dispatchEvent(
125-
new CustomEvent('onMediaFileSelected', {
126-
bubbles: true,
127-
cancelable: false,
128-
detail: {
129-
type: this.item.type,
130-
name: this.item.name,
131-
path: this.item.path,
132-
thumb: this.item.thumb,
133-
fileType: this.item.mime_type ? this.item.mime_type : false,
134-
extension: this.item.extension ? this.item.extension : false,
135-
width: this.item.width ? this.item.width : 0,
136-
height: this.item.height ? this.item.height : 0,
137-
},
138-
}),
139-
);
140-
}
141-
142-
if (this.item.type === 'dir') {
143-
window.parent.document.dispatchEvent(
144-
new CustomEvent('onMediaFileSelected', {
145-
bubbles: true,
146-
cancelable: false,
147-
detail: {
148-
type: this.item.type,
149-
name: this.item.name,
150-
path: this.item.path,
151-
},
152-
}),
153-
);
154-
}
155-
156-
// Handle clicks when the item was not selected
157-
if (!this.isSelected()) {
158-
// Unselect all other selected items,
159-
// if the shift key was not pressed during the click event
160-
if (!(event.shiftKey || event.keyCode === 13)) {
161-
this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
162-
}
163-
this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
164-
return;
165-
}
166-
this.$store.dispatch('toggleBrowserItemSelect', this.item);
167-
window.parent.document.dispatchEvent(
168-
new CustomEvent('onMediaFileSelected', {
169-
bubbles: true,
170-
cancelable: false,
171-
detail: {},
172-
}),
173-
);
174-
175-
// If more than one item was selected and the user clicks again on the selected item,
176-
// he most probably wants to unselect all other items.
177-
if (this.$store.state.selectedItems.length > 1) {
178-
this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
179-
this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
180-
}
127+
return onItemClick(event, this);
181128
},
182129

183130
/**

‎administrator/components/com_media/resources/scripts/components/browser/table/row.vue‎

Lines changed: 6 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
import api from '../../../app/Api.es6';
4848
import * as types from '../../../store/mutation-types.es6';
4949
import navigable from '../../../mixins/navigable.es6';
50+
import onItemClick from '../utils/utils.es6';
5051
5152
export default {
5253
name: 'MediaBrowserItemRow',
@@ -56,6 +57,10 @@ export default {
5657
type: Object,
5758
default: () => {},
5859
},
60+
localItems: {
61+
type: Array,
62+
default: () => [],
63+
},
5964
},
6065
computed: {
6166
/* The dimension of a file */
@@ -136,49 +141,7 @@ export default {
136141
* @param event
137142
*/
138143
onClick(event) {
139-
const data = {
140-
type: this.item.type,
141-
name: this.item.name,
142-
path: this.item.path,
143-
thumb: false,
144-
fileType: this.item.mime_type ? this.item.mime_type : false,
145-
extension: this.item.extension ? this.item.extension : false,
146-
};
147-
148-
if (this.item.type === 'file') {
149-
data.thumb = this.item.thumb ? this.item.thumb : false;
150-
data.width = this.item.width ? this.item.width : 0;
151-
data.height = this.item.height ? this.item.height : 0;
152-
}
153-
154-
window.parent.document.dispatchEvent(
155-
new CustomEvent(
156-
'onMediaFileSelected',
157-
{
158-
bubbles: true,
159-
cancelable: false,
160-
detail: data,
161-
},
162-
),
163-
);
164-
165-
// Handle clicks when the item was not selected
166-
if (!this.isSelected()) {
167-
// Unselect all other selected items,
168-
// if the shift key was not pressed during the click event
169-
if (!(event.shiftKey || event.keyCode === 13)) {
170-
this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
171-
}
172-
this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
173-
return;
174-
}
175-
176-
// If more than one item was selected and the user clicks again on the selected item,
177-
// he most probably wants to unselect all other items.
178-
if (this.$store.state.selectedItems.length > 1) {
179-
this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
180-
this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
181-
}
144+
return onItemClick(event, this);
182145
},
183146
184147
},

‎administrator/components/com_media/resources/scripts/components/browser/table/table.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@
116116
v-for="item in localItems"
117117
:key="item.path"
118118
:item="item"
119+
:local-items="localItems"
119120
/>
120121
</tbody>
121122
</table>

‎administrator/components/com_media/resources/scripts/components/browser/utils/utils.es6.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import * as types from '../../../store/mutation-types.es6';
2+
3+
/**
4+
* Handle the click event
5+
* @param event
6+
* @param ctx the context
7+
*/
8+
export default function onItemClick(event, ctx) {
9+
if (ctx.item.path && ctx.item.type === 'file') {
10+
window.parent.document.dispatchEvent(
11+
new CustomEvent('onMediaFileSelected', {
12+
bubbles: true,
13+
cancelable: false,
14+
detail: {
15+
type: ctx.item.type,
16+
name: ctx.item.name,
17+
path: ctx.item.path,
18+
thumb: ctx.item.thumb,
19+
fileType: ctx.item.mime_type ? ctx.item.mime_type : false,
20+
extension: ctx.item.extension ? ctx.item.extension : false,
21+
width: ctx.item.width ? ctx.item.width : 0,
22+
height: ctx.item.height ? ctx.item.height : 0,
23+
},
24+
}),
25+
);
26+
}
27+
28+
if (ctx.item.type === 'dir') {
29+
window.parent.document.dispatchEvent(
30+
new CustomEvent('onMediaFileSelected', {
31+
bubbles: true,
32+
cancelable: false,
33+
detail: {
34+
type: ctx.item.type,
35+
name: ctx.item.name,
36+
path: ctx.item.path,
37+
},
38+
}),
39+
);
40+
}
41+
42+
// Handle clicks when the item was not selected
43+
if (!ctx.isSelected()) {
44+
// Handle clicks when ctrl key was pressed
45+
if (event[/Mac|Mac OS|MacIntel/gi.test(window.navigator.userAgent) ? 'metaKey' : 'ctrlKey'] || event.keyCode === 17) {
46+
ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
47+
48+
return;
49+
}
50+
51+
// Unselect when shift key is not pressed
52+
if (!event.shiftKey && event.keyCode !== 13) {
53+
ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
54+
ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
55+
56+
return;
57+
}
58+
59+
const currentIndex = ctx.localItems.indexOf(ctx.$store.state.selectedItems[0]);
60+
const endIndex = ctx.localItems.indexOf(ctx.item);
61+
// Handle selections from up to down
62+
if (currentIndex < endIndex) {
63+
ctx.localItems.slice(currentIndex, endIndex + 1).forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
64+
65+
return;
66+
}
67+
68+
// Handle selections from down to up
69+
ctx.localItems.slice(endIndex, currentIndex).forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
70+
71+
return;
72+
}
73+
74+
ctx.$store.dispatch('toggleBrowserItemSelect', ctx.item);
75+
window.parent.document.dispatchEvent(
76+
new CustomEvent('onMediaFileSelected', {
77+
bubbles: true,
78+
cancelable: false,
79+
detail: {},
80+
}),
81+
);
82+
83+
// If more than one item was selected and the user clicks again on the selected item,
84+
// he most probably wants to unselect all other items.
85+
if (ctx.$store.state.selectedItems.length > 1) {
86+
ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
87+
ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
88+
}
89+
}

0 commit comments

Comments
 (0)