Issue#271

[yuki-katayama]

@lukasoppermann

Description

This issue aims to address two main changes to improve the functionality of the HTML5Sortable library:

1. Enhancement of Custom Drag Image Selection: Extend the sortable function to allow customDragImage option to accept a string selector, in addition to the existing function type. This enhancement will make it more flexible for users to specify custom drag images directly via CSS selectors.

2. Testing for Custom Drag Image: Implement tests to ensure that custom drag images defined by CSS selectors are correctly applied, and to handle cases where the selector does not match any elements, ensuring the code robustness.

Tasks

• [x] Modify sortable function to handle string selectors for customDragImage.
• [x] Update setDragImage function to properly handle NodeList objects derived from string selectors.
• [x] Write tests to verify that custom drag images are correctly set when using selectors.
• [x] Write tests to ensure proper error handling when selectors do not match any elements.

Related Issues

issue#271

Implementation Video

using code

...
<div class="test-selector bg-teal white">
 test selector
</div>
...
<script>
...
sortable('.js-sortable-oneway-receive', {
 forcePlaceholderSize: true,
 acceptFrom: '.js-sortable-oneway,.js-sortable-oneway-receive',
 placeholderClass: 'mb1 bg-navy border border-yellow',
 customDragImage: '.test-selector'
});
</script>

Test results

-------------------------|----------|----------|----------|----------|-------------------|
File                     |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------------|----------|----------|----------|----------|-------------------|
All files                |    86.37 |    75.23 |       90 |    86.45 |                   |
 attribute.ts            |      100 |      100 |      100 |      100 |                   |
 data.ts                 |      100 |      100 |      100 |      100 |                   |
 debounce.ts             |      100 |      100 |      100 |      100 |                   |
 defaultConfiguration.ts |      100 |      100 |      100 |      100 |                   |
 elementHeight.ts        |      100 |      100 |      100 |      100 |                   |
 elementWidth.ts         |      100 |      100 |      100 |      100 |                   |
 eventListener.ts        |      100 |      100 |      100 |      100 |                   |
 filter.ts               |      100 |      100 |      100 |      100 |                   |
 getEventTarget.ts       |      100 |    66.67 |      100 |      100 |                 6 |
 getHandles.ts           |      100 |       70 |      100 |      100 |             20,25 |
 getIndex.ts             |      100 |      100 |      100 |      100 |                   |
 hoverClass.ts           |      100 |      100 |      100 |      100 |                   |
 html5sortable.ts        |    75.79 |    49.67 |    76.74 |    76.43 |... 23,644,645,659 |
 insertHtmlElements.ts   |      100 |      100 |      100 |      100 |                   |
 isConnected.ts          |      100 |      100 |      100 |      100 |                   |
 isInDom.ts              |      100 |      100 |      100 |      100 |                   |
 makePlaceholder.ts      |      100 |      100 |      100 |      100 |                   |
 offset.ts               |      100 |      100 |      100 |      100 |                   |
 serialize.ts            |      100 |      100 |      100 |      100 |                   |
 setDragImage.ts         |      100 |      100 |      100 |      100 |                   |
 store.ts                |      100 |      100 |      100 |      100 |                   |
 throttle.ts             |      100 |      100 |      100 |      100 |                   |
-------------------------|----------|----------|----------|----------|-------------------|

Test Suites: 25 passed, 25 total
Tests:       7 skipped, 123 passed, 130 total
Snapshots:   0 total
Time:        5.81s, estimated 7s
Ran all test suites.

[yuki-katayama]

@lukasoppermann

hi, is this project already finished?

If you find this pull request unnecessary, or if further modifications are required, please feel free to reject or suggest necessary revisions.

[lukasoppermann]

Sorry for the delay. Looks good @yuki-katayama just one comment.

[coveralls]

coverage: 86.188% (-0.3%) from 86.441% when pulling ae0e0be6457e83c509b33db278e1eb4cb5a969a4 on yuki-katayama:issue#271 into a8e05969e60cf381e33b1466d2456aed5a212dea on lukasoppermann:master.