Appearance

Shift Selection Mixin ​

File Information ​

  • Path: mixins/shiftSelection.js
  • Purpose: Shift-click multi-select functionality for files and folders

Overview ​

The Shift Selection mixin provides functionality for range selection using Shift+Click. It allows users to select multiple items by clicking one item, then Shift+clicking another item to select all items in between. The mixin handles selection state, last selected index tracking, and selection updates.

Key Features ​

  1. Range Selection

    • Shift+Click range selection
    • Selects all items between two clicks
    • Maintains selection state

  2. Selection State Management

    • Last selected index tracking
    • Temporary index tracking
    • Selection state updates

  3. Multi-Context Support

    • Folders context
    • Collage context
    • Uploaded assets context
    • External files context

Data Properties ​

javascript
{
  tmpLastIndex: number,        // Temporary last index (-1 if none)
  tmpLastIndexShare: number,   // Last index for share context
  tmpLastIndexEmbed: number    // Last index for embed context
}

Methods ​

findLastIndexByKey(arr, key, value, isSearch) ​

Finds last index in array by key value:

  • Searches array from end
  • Returns index of matching item
  • Supports search results format

Parameters:

  • arr (Array): Array to search
  • key (string): Key to match
  • value (any): Value to match (default: true)
  • isSearch (boolean): If true, searches document[key] (for search results)

Returns: Index number or -1 if not found

toggleSelection(file, index, event, pageType) ​

Toggles file selection with Shift+Click support:

  • Handles normal click selection
  • Handles Shift+Click range selection
  • Updates selection state
  • Tracks last selected index

Parameters:

  • file (Object): File object to toggle
  • index (number): File index in array
  • event (Event): Click event object
  • pageType (string): Page type ('collage', 'uploaded', 'folders', 'external')

Selection Logic:

Normal Click:

  • Toggles single file selection
  • Updates last selected index
  • Updates selection state

Shift+Click:

  • Finds range between last selected and current
  • Selects/deselects all items in range
  • Updates selection state
  • Tracks temporary index

Page Type Mapping:

  • 'collage' → files array
  • 'uploaded' → files array
  • 'folders' → folderAssets array
  • 'external' → externalFiles array

Selection Behavior ​

Normal Selection ​

  1. User clicks file
  2. File selection toggled
  3. Last selected index updated
  4. Selection state updated

Shift+Click Selection ​

  1. User clicks first file (sets anchor)
  2. User Shift+clicks second file
  3. All files between anchor and target are selected
  4. Range selection applied
  5. Last selected index updated to end of range

Deselection ​

  • Shift+click on selected item deselects range
  • Normal click deselects single item
  • Selection state updates accordingly

Usage Examples ​

Basic Usage ​

vue
<template>
  <div v-for="(file, index) in files" :key="file.id">
    <input
      type="checkbox"
      :checked="file.is_selected"
      @click="toggleSelection(file, index, $event, 'uploaded')"
    />
    {{ file.display_file_name }}
  </div>
</template>

<script>
import shiftSelection from '~/mixins/shift-selection'

export default {
  mixins: [shiftSelection],
  data() {
    return {
      files: [],
      lastSelectedIndex: -1
    }
  }
}
</script>

With Keyboard Event ​

vue
<template>
  <div
    v-for="(file, index) in files"
    :key="file.id"
    @click="handleFileClick(file, index, $event)"
  >
    {{ file.display_file_name }}
  </div>
</template>

<script>
import shiftSelection from '~/mixins/shift-selection'

export default {
  mixins: [shiftSelection],
  methods: {
    handleFileClick(file, index, event) {
      this.toggleSelection(file, index, event, 'folders')
    }
  }
}
</script>

Integration Points ​

  • Asset List Components: File selection
  • Folder Details Pages: Asset selection
  • Uploaded Assets Page: Asset selection
  • Collage Details: File selection
  • External Uploads: File selection

Notes for Development ​

  • Mixin handles Shift+Click range selection
  • Last selected index is tracked for range calculation
  • Selection state is maintained in file objects (is_selected)
  • Page type determines which array to use
  • Range selection works in both directions
  • Selection state updates trigger UI refresh