### Install Project Dependencies Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/CONTRIBUTING.md Clone the repository and install project dependencies using pnpm. ```bash git clone cd ember-sortable pnpm install ``` -------------------------------- ### Install ember-sortable Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Use the ember CLI to install the ember-sortable addon. ```sh $ ember install ember-sortable ``` -------------------------------- ### Clone and Install Dependencies Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Clone the repository and install project dependencies using pnpm. ```sh git clone git@github.com:adopted-ember-addons/ember-sortable cd ember-sortable pnpm install ``` -------------------------------- ### Run the Test Application Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/CONTRIBUTING.md Navigate to the test-app directory and start the development server using ember serve. The test application will be available at http://localhost:4200. ```bash cd test-app ember serve ``` -------------------------------- ### Ember Sortable Item with Drag Actions Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Example of how to attach `onDragStart` and `onDragStop` actions to a sortable item in an Ember template. The `model` is passed to the item. ```handlebars
  • {{item}} ↕
    • ``` -------------------------------- ### Build the Project Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/CONTRIBUTING.md Build the project using the pnpm build command. ```bash pnpm build ``` -------------------------------- ### Publish Demo Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Generate and publish the project's demo using the make demo command. ```sh make demo ``` -------------------------------- ### Run Tests Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Execute the project's tests using the pnpm test command. ```sh pnpm run test ``` -------------------------------- ### Using Let Helper for Group Name Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md An alternative method for assigning a `groupName` using the `{{#let}}` helper for clearer usage, especially in template-only components. ```handlebars {{#let 'products' as |myGroupName|}}
      {{#each this.items as |item|}}
    1. {{item}} ↕
      2. {{/each}}
    {{/let}} ``` -------------------------------- ### Lint Project Code Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/CONTRIBUTING.md Lint the project code using pnpm lint. Use pnpm lint:fix to automatically fix linting issues. ```bash pnpm lint ``` ```bash pnpm lint:fix ``` -------------------------------- ### Basic Sortable List Usage Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Demonstrates a basic sortable list using the `sortable-group` and `sortable-item` components. The `onChange` action is triggered when the order changes, providing the new item order and the dragged model. ```hbs {{! app/components/my-list/template.hbs }}
      {{#each this.items as |item|}}
    1. {{item}} ↕
      2. {{/each}}

    The last dragged item was: {{this.lastDragged}}

    ``` ```js // app/components/my-list/component.js export default class MyList extends Component { @tracked lastDragged; @tracked items = ['Coal Ila', 'Askaig', 'Bowmore']; @action reorderItems(itemModels, draggedModel) { this.items = itemModels; this.lastDragged = draggedModel; } } ``` -------------------------------- ### Drag Elements in Acceptance Tests Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Simulate dragging an element using the `drag` helper. Provide the interaction type, a selector for the draggable element, and a callback function that returns the drag offset (dx, dy). ```javascript await drag('mouse', '[data-test-scrollable-demo-handle] .handle', () => { return { dy: itemHeight() * 2 + 1, dx: undefined }; }); ``` -------------------------------- ### Import Ember-Sortable Test Helpers Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Import the necessary test helpers and key code constants from ember-sortable/test-support to use in your application's tests. ```javascript import { drag, reorder, ENTER_KEY_CODE, SPACE_KEY_CODE, ESCAPE_KEY_CODE, ARROW_KEY_CODES, } from 'ember-sortable/test-support'; ``` -------------------------------- ### Screen Reader Announcement Configuration Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Customize screen reader announcements for different accessibility actions. This object maps actions to functions that generate announcement strings based on provided context. ```javascript a11yAnnounceConfig = { a11yItemName, index, maxLength, direction, delta }; ``` ```javascript { ACTIVATE: function({ a11yItemName, index, maxLength, direction }) { let message = `${a11yItemName} at position, ${index + 1} of ${maxLength}, is activated to be repositioned.`; if (direction === 'y') { message += 'Press up and down keys to change position,'; } else { message += 'Press left and right keys to change position,'; } message += ' Space to confirm new position, Escape to cancel.'; return message; }, MOVE: function({ a11yItemName, index, maxLength, delta }) { return `${a11yItemName} is moved to position, ${index + 1 + delta} of ${maxLength}. Press Space to confirm new position, Escape to cancel.`; }, CONFIRM: function({ a11yItemName}) { return `${a11yItemName} is successfully repositioned.`; }, CANCEL: function({ a11yItemName }) { return `Cancelling ${a11yItemName} repositioning`; } } ``` -------------------------------- ### Trigger Keyboard Events in Acceptance Tests Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Use `triggerKeyEvent` to simulate keyboard interactions, such as pressing the Enter key, on specific elements. This is useful for testing actions triggered by key presses. ```javascript await triggerKeyEvent('[data-test-vertical-demo-handle]', 'keydown', ENTER_KEY_CODE); ``` -------------------------------- ### Ember Sortable Drag Event Actions Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Defines actions for `onDragStart` and `onDragStop` on sortable items. The item's model is passed as an argument to these actions. ```javascript // app/components/my-list/component.js export default class MyRoute extends Route { @action dragStarted(item) { console.log(`Item started dragging: ${item}`); }, @action dragStopped(item) { console.log(`Item stopped dragging: ${item}`); } } ``` -------------------------------- ### Reorder Elements in Acceptance Tests Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Use the `reorder` helper to change the order of elements in acceptance tests. Specify the interaction type ('mouse' or 'touch'), a selector for the elements to reorder, and the desired new order. ```javascript await reorder('mouse', '[data-test-vertical-demo-handle]', ...order); ``` -------------------------------- ### Sortable List with Action Currying Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Alternative usage of `sortable-group` with the `fn` helper for passing arguments to the `onChange` action, suitable for modifier-based implementations. ```hbs {{! app/components/my-list/template.hbs }}
      {{#each this.items as |item|}}
    1. {{item}} ↕
      2. {{/each}}
    ``` -------------------------------- ### Configuring Multiple Sortables with Group Name Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Assign a `groupName` to `{{sortable-group}}` and `{{sortable-item}}` when rendering multiple sortables simultaneously to prevent state management conflicts. ```handlebars
      {{#each this.items as |item|}}
    1. {{item}} ↕
      2. {{/each}}
    ``` -------------------------------- ### Default Sortable Item Transition Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Applies a default transition of 0.125s to sortable items. This CSS should be included in your application's stylesheet. ```css .sortable-item { transition: all 0.125s; } ``` -------------------------------- ### Dragging Sortable Item Styles Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Styles for when a sortable item is being dragged. It sets transition duration to 0s, applies a red background, and ensures it's at the top of the stack with a higher z-index. ```css .sortable-item.is-dragging { transition-duration: 0s; background: red; z-index: 10; } ``` -------------------------------- ### Dropping Sortable Item Styles Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Styles for when a sortable item is being dropped. It maintains the z-index and applies a slightly different background color. ```css .sortable-item.is-dropping { background: #f66; z-index: 10; } ``` -------------------------------- ### Setting Drag Tolerance Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Control the minimum distance in pixels the mouse must move before sorting begins by setting the `distance` attribute on `sortable-item`. This can prevent accidental drags when clicking on elements within the sortable item. ```hbs
  • ``` -------------------------------- ### Ember Sortable CSS Classes Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Defines CSS classes for different states of sortable items: default, dragging, dropping, and keyboard-activated. Use these classes to style your sortable list items. ```html
  • ...
  • ...
  • ...
  • ...
    • ``` -------------------------------- ### Changing Sort Direction Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Configure the `sortable-group` component with the `direction` attribute to control the sorting axis. Options include 'y' (vertical, default), 'x' (horizontal), and 'grid' (all directions). ```hbs
      ``` -------------------------------- ### Adjusting Dragged Element Spacing Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Customize the visual spacing around the currently dragged element using the `spacing` attribute on `sortable-item`. This affects how other elements reposition during the drag operation. ```hbs
    1. ``` -------------------------------- ### Disabling Reordering Source: https://github.com/adopted-ember-addons/ember-sortable/blob/master/README.md Completely disable sorting for a `sortable-group` and all its child items by setting the `disabled` attribute to `true` on the `sortable-group` component. ```hbs
    2. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.