[4.1] Refactor vue browser items

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

@@ -0,0 +1,203 @@
+<template>
+  <span
+    class="media-browser-select"
+    :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+  />
+  <div
+    class="media-browser-actions"
+    :class="{ active: showActions }"
+  >
+    <media-browser-action-item-toggle
+      ref="actionToggle"
+      :on-focused="focused"
+      :main-action="openActions"
+      @keyup.up="openLastActions()"
+      @keyup.down="openActions()"
+    />
+    <div
+      v-if="showActions"
+      class="media-browser-actions-list"
+    >
+      <ul>
+        <li>
+          <media-browser-action-item-preview
+            v-if="previewable"
+            ref="actionPreview"
+            :on-focused="focused"
+            :main-action="openPreview"
+            :closing-action="hideActions"
+            @keyup.up="$refs.actionDelete.$el.focus()"
+            @keyup.down="$refs.actionDownload.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-download
+            v-if="downloadable"
+            ref="actionDownload"
+            :on-focused="focused"
+            :main-action="download"
+            :closing-action="hideActions"
+            @keyup.up="$refs.actionPreview.$el.focus()"
+            @keyup.down="$refs.actionRename.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-rename
+            ref="actionRename"
+            :on-focused="focused"
+            :main-action="openRenameModal"
+            :closing-action="hideActions"
+            @keyup.up="
+              downloadable
+                ? $refs.actionDownload.$el.focus()
+                : $refs.actionDelete.$el.focus()
+            "
+            @keyup.down="
+              canEdit
+                ? $refs.actionEdit.$el.focus()
+                : shareable
+                  ? $refs.actionShare.$el.focus()
+                  : $refs.actionDelete.$el.focus()
+            "
+          />
+        </li>
+        <li>
+          <media-browser-action-item-edit
+            v-if="canEdit"
+            ref="actionEdit"
+            :on-focused="focused"
+            :main-action="editItem"
+            :closing-action="hideActions"
+            @keyup.up="$refs.actionRename.$el.focus()"
+            @keyup.down="$refs.actionShare.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-share
+            v-if="shareable"
+            ref="actionShare"
+            :on-focused="focused"
+            :main-action="openShareUrlModal"
+            :closing-action="hideActions"
+            @keyup.up="
+              canEdit
+                ? $refs.actionEdit.$el.focus()
+                : $refs.actionRename.$el.focus()
+            "
+            @keyup.down="$refs.actionDelete.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-delete
+            ref="actionDelete"
+            :on-focused="focused"
+            :main-action="openConfirmDeleteModal"
+            :hide-actions="hideActions"
+            @keyup.up="
+              shareable
+                ? $refs.actionShare.$el.focus()
+                : $refs.actionRename.$el.focus()
+            "
+            @keyup.down="
+              previewable
+                ? $refs.actionPreview.$el.focus()
+                : $refs.actionRename.$el.focus()
+            "
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as types from '../../../store/mutation-types.es6';
+
+export default {
+  name: 'MediaBrowserActionItemsContainer',
+  props: {
+    item: { type: Object, default: () => {} },
+    onFocused: { type: Function, default: () => {} },
+    edit: { type: Function, default: () => {} },
+    editable: { type: Function, default: () => false },
+    previewable: { type: Boolean, default: false },
+    downloadable: { type: Boolean, default: false },
+    shareable: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      showActions: false,
+    };
+  },
+  computed: {
+    /* Check if the item is an document to edit */
+    canEdit() {
+      return this.editable();
+    },
+  },
+  watch: {
+    // eslint-disable-next-line
+    "$store.state.showRenameModal"(show) {
+      if (
+        !show
+        && this.$refs.actionToggle
+        && this.$store.state.selectedItems.find(
+          (item) => item.name === this.item.name,
+        ) !== undefined
+      ) {
+        this.$refs.actionToggle.$el.focus();
+      }
+    },
+  },
+  methods: {
+    /* Hide actions dropdown */
+    hideActions() {
+      this.showActions = false;
+    },
+    /* Preview an item */
+    openPreview() {
+      this.$store.commit(types.SHOW_PREVIEW_MODAL);
+      this.$store.dispatch('getFullContents', this.item);
+    },
+    /* Download an item */
+    download() {
+      this.$store.dispatch('download', this.item);
+    },
+    /* Opening confirm delete modal */
+    openConfirmDeleteModal() {
+      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
+    },
+    /* Rename an item */
+    openRenameModal() {
+      this.hideActions();
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_RENAME_MODAL);
+    },
+    /* Open modal for share url */
+    openShareUrlModal() {
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_SHARE_MODAL);
+    },
+    /* Open actions dropdown */
+    openActions() {
+      this.showActions = true;
+      if (this.previewable) {
+        this.$nextTick(() => this.$refs.actionPreview.$el.focus());
+      } else {
+        this.$nextTick(() => this.$refs.actionRename.$el.focus());
+      }
+    },
+    /* Open actions dropdown and focus on last element */
+    openLastActions() {
+      this.showActions = true;
+      this.$nextTick(() => this.$refs.actionDelete.$el.focus());
+    },
+    editItem() {
+      this.edit();
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-delete"
+    :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
+    :title="translate('COM_MEDIA_ACTION_DELETE')"
+    @keyup.enter="openConfirmDeleteModal()"
+    @keyup.space="openConfirmDeleteModal()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-trash"
+      aria-hidden="true"
+      @click.stop="openConfirmDeleteModal()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemDelete',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openConfirmDeleteModal() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.hideActions();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-download"
+    :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+    :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+    @keyup.enter="download()"
+    @keyup.space="download()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-download"
+      aria-hidden="true"
+      @click.stop="download()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemDownload',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    download() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <button
+    type="button"
+    class="action-edit"
+    :aria-label="translate('COM_MEDIA_ACTION_EDIT')"
+    :title="translate('COM_MEDIA_ACTION_EDIT')"
+    @keyup.enter="editItem()"
+    @keyup.space="editItem()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-pencil-alt"
+      aria-hidden="true"
+      @click.stop="editItem()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemEdit',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openRenameModal() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+    editItem() {
+      this.mainAction();
+    },
+  },
+};
+</script>

administrator/components/com_media/resources/scripts/components/browser/actionItems/export.es6.js

@@ -0,0 +1,12 @@
+import Rename from './rename.vue';
+import Toggle from './toggle.vue';
+import Preview from './preview.vue';
+import Download from './download.vue';
+import Share from './share.vue';
+import Delete from './delete.vue';
+import Edit from './edit.vue';
+import Container from './actionItemsContainer.vue';
+
+export {
+  Rename, Toggle, Preview, Download, Share, Delete, Edit, Container,
+};

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

@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-preview"
+    :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
+    :title="translate('COM_MEDIA_ACTION_PREVIEW')"
+    @keyup.enter="openPreview()"
+    @keyup.space="openPreview()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-search-plus"
+      aria-hidden="true"
+      @click.stop="openPreview()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemPreview',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openPreview() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>