[5.1] Corrected different multi-select behavior in media manager.

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

@@ -45,6 +45,7 @@
           v-for="item in localItems"
           :key="item.path"
           :item="item"
+          :localItems="localItems"
         />
       </div>
     </div>

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

@@ -5,15 +5,19 @@ import Image from './image.vue';
 import Video from './video.vue';
 import Audio from './audio.vue';
 import Doc from './document.vue';
-import * as types from '../../../store/mutation-types.es6';
 import api from '../../../app/Api.es6';
+import onItemClick from '../utils/utils.es6';
 
 export default {
   props: {
     item: {
       type: Object,
       default: () => {},
     },
+    localItems: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -120,58 +124,7 @@ export default {
      * @param event
      */
     handleClick(event) {
-      if (this.item.path && this.item.type === 'file') {
-        window.parent.document.dispatchEvent(
-          new CustomEvent('onMediaFileSelected', {
-            bubbles: true,
-            cancelable: false,
-            detail: {
-              path: this.item.path,
-              thumb: this.item.thumb,
-              fileType: this.item.mime_type ? this.item.mime_type : false,
-              extension: this.item.extension ? this.item.extension : false,
-              width: this.item.width ? this.item.width : 0,
-              height: this.item.height ? this.item.height : 0,
-            },
-          }),
-        );
-      }
-
-      if (this.item.type === 'dir') {
-        window.parent.document.dispatchEvent(
-          new CustomEvent('onMediaFileSelected', {
-            bubbles: true,
-            cancelable: false,
-            detail: {},
-          }),
-        );
-      }
-
-      // Handle clicks when the item was not selected
-      if (!this.isSelected()) {
-        // Unselect all other selected items,
-        // if the shift key was not pressed during the click event
-        if (!(event.shiftKey || event.keyCode === 13)) {
-          this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        }
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-        return;
-      }
-      this.$store.dispatch('toggleBrowserItemSelect', this.item);
-      window.parent.document.dispatchEvent(
-        new CustomEvent('onMediaFileSelected', {
-          bubbles: true,
-          cancelable: false,
-          detail: {},
-        }),
-      );
-
-      // If more than one item was selected and the user clicks again on the selected item,
-      // he most probably wants to unselect all other items.
-      if (this.$store.state.selectedItems.length > 1) {
-        this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      }
+      return onItemClick(event, this);
     },
 
     /**

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

@@ -33,6 +33,7 @@
 <script>
 import * as types from '../../../store/mutation-types.es6';
 import navigable from '../../../mixins/navigable.es6';
+import onItemClick from '../utils/utils.es6';
 
 export default {
   name: 'MediaBrowserItemRow',
@@ -42,6 +43,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    localItems: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     /* The dimension of a file */
@@ -98,49 +103,7 @@ export default {
      * @param event
      */
     onClick(event) {
-      const path = false;
-      const data = {
-        path,
-        thumb: false,
-        fileType: this.item.mime_type ? this.item.mime_type : false,
-        extension: this.item.extension ? this.item.extension : false,
-      };
-
-      if (this.item.type === 'file') {
-        data.path = this.item.path;
-        data.thumb = this.item.thumb ? this.item.thumb : false;
-        data.width = this.item.width ? this.item.width : 0;
-        data.height = this.item.height ? this.item.height : 0;
-
-        window.parent.document.dispatchEvent(
-          new CustomEvent(
-            'onMediaFileSelected',
-            {
-              bubbles: true,
-              cancelable: false,
-              detail: data,
-            },
-          ),
-        );
-      }
-
-      // Handle clicks when the item was not selected
-      if (!this.isSelected()) {
-        // Unselect all other selected items,
-        // if the shift key was not pressed during the click event
-        if (!(event.shiftKey || event.keyCode === 13)) {
-          this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        }
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-        return;
-      }
-
-      // If more than one item was selected and the user clicks again on the selected item,
-      // he most probably wants to unselect all other items.
-      if (this.$store.state.selectedItems.length > 1) {
-        this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-        this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      }
+      return onItemClick(event, this);
     },
 
   },

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

@@ -116,6 +116,7 @@
         v-for="item in localItems"
         :key="item.path"
         :item="item"
+        :local-items="localItems"
       />
     </tbody>
   </table>

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

@@ -0,0 +1,75 @@
+import * as types from '../../../store/mutation-types.es6';
+
+/**
+ * Handle the click event
+ * @param event
+ * @param ctx  the context
+ */
+export default function onItemClick(event, ctx) {
+  if (ctx.item.path && ctx.item.type === 'file') {
+    window.parent.document.dispatchEvent(
+      new CustomEvent('onMediaFileSelected', {
+        bubbles: true,
+        cancelable: false,
+        detail: {
+          path: ctx.item.path,
+          thumb: ctx.item.thumb,
+          fileType: ctx.item.mime_type ? ctx.item.mime_type : false,
+          extension: ctx.item.extension ? ctx.item.extension : false,
+          width: ctx.item.width ? ctx.item.width : 0,
+          height: ctx.item.height ? ctx.item.height : 0,
+        },
+      }),
+    );
+  }
+
+  if (ctx.item.type === 'dir') {
+    window.parent.document.dispatchEvent(
+      new CustomEvent('onMediaFileSelected', {
+        bubbles: true,
+        cancelable: false,
+        detail: {},
+      }),
+    );
+  }
+
+  // Handle clicks when the item was not selected
+  if (!ctx.isSelected()) {
+    // Handle clicks when shift key was pressed
+    if (event.shiftKey || event.keyCode === 13) {
+      const currentIndex = ctx.localItems.indexOf(ctx.$store.state.selectedItems[0]);
+      const endindex = ctx.localItems.indexOf(ctx.item);
+      // Handle selections from up to down
+      if (currentIndex < endindex) {
+        ctx.localItems.slice(currentIndex, endindex + 1)
+          .forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
+      // Handle selections from down to up
+      } else {
+        ctx.localItems.slice(endindex, currentIndex)
+          .forEach((element) => ctx.$store.commit(types.SELECT_BROWSER_ITEM, element));
+      }
+      // Handle clicks when ctrl key was pressed
+    } else if (event[/Mac|Mac OS|MacIntel/gi.test(window.navigator.userAgent) ? 'metaKey' : 'ctrlKey'] || event.keyCode === 17) {
+      ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
+    } else {
+      ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+      ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
+    }
+    return;
+  }
+  ctx.$store.dispatch('toggleBrowserItemSelect', ctx.item);
+  window.parent.document.dispatchEvent(
+    new CustomEvent('onMediaFileSelected', {
+      bubbles: true,
+      cancelable: false,
+      detail: {},
+    }),
+  );
+
+  // If more than one item was selected and the user clicks again on the selected item,
+  // he most probably wants to unselect all other items.
+  if (ctx.$store.state.selectedItems.length > 1) {
+    ctx.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+    ctx.$store.commit(types.SELECT_BROWSER_ITEM, ctx.item);
+  }
+}