diff options
Diffstat (limited to 'app/assets/javascripts/sortable')
-rw-r--r-- | app/assets/javascripts/sortable/constants.js | 19 | ||||
-rw-r--r-- | app/assets/javascripts/sortable/sortable_config.js | 8 | ||||
-rw-r--r-- | app/assets/javascripts/sortable/utils.js | 31 |
3 files changed, 50 insertions, 8 deletions
diff --git a/app/assets/javascripts/sortable/constants.js b/app/assets/javascripts/sortable/constants.js new file mode 100644 index 00000000000..7fddac00ab2 --- /dev/null +++ b/app/assets/javascripts/sortable/constants.js @@ -0,0 +1,19 @@ +/** + * Default config options for sortablejs. + * @type {object} + * + * @example + * import Sortable from 'sortablejs'; + * + * const sortable = Sortable.create(el, { + * ...defaultSortableOptions, + * }); + */ +export const defaultSortableOptions = { + animation: 200, + forceFallback: true, + fallbackClass: 'is-dragging', + fallbackOnBody: true, + ghostClass: 'is-ghost', + fallbackTolerance: 1, +}; diff --git a/app/assets/javascripts/sortable/sortable_config.js b/app/assets/javascripts/sortable/sortable_config.js deleted file mode 100644 index a4c4cb7f101..00000000000 --- a/app/assets/javascripts/sortable/sortable_config.js +++ /dev/null @@ -1,8 +0,0 @@ -export default { - animation: 200, - forceFallback: true, - fallbackClass: 'is-dragging', - fallbackOnBody: true, - ghostClass: 'is-ghost', - fallbackTolerance: 1, -}; diff --git a/app/assets/javascripts/sortable/utils.js b/app/assets/javascripts/sortable/utils.js new file mode 100644 index 00000000000..c2c8fb03b58 --- /dev/null +++ b/app/assets/javascripts/sortable/utils.js @@ -0,0 +1,31 @@ +/* global DocumentTouch */ + +import { defaultSortableOptions } from './constants'; + +export function sortableStart() { + document.body.classList.add('is-dragging'); +} + +export function sortableEnd() { + document.body.classList.remove('is-dragging'); +} + +export function getSortableDefaultOptions(options) { + const touchEnabled = + 'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch); + + const defaultSortOptions = { + ...defaultSortableOptions, + filter: '.no-drag', + delay: touchEnabled ? 100 : 0, + scrollSensitivity: touchEnabled ? 60 : 100, + scrollSpeed: 20, + onStart: sortableStart, + onEnd: sortableEnd, + }; + + return { + ...defaultSortOptions, + ...options, + }; +} |