mirror of
https://github.com/go-gitea/gitea
synced 2025-10-29 02:18:27 +00:00
68d9f36543
Provide a cropping tool on the avatar editing page, allowing users to select the cropping area themselves. This way, users can decide the displayed area of the image, rather than us deciding for them. --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io>
23 lines
839 B
TypeScript
23 lines
839 B
TypeScript
import type {SortableOptions, SortableEvent} from 'sortablejs';
|
|
|
|
export async function createSortable(el: Element, opts: {handle?: string} & SortableOptions = {}) {
|
|
// @ts-expect-error: wrong type derived by typescript
|
|
const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs');
|
|
|
|
return new Sortable(el, {
|
|
animation: 150,
|
|
ghostClass: 'card-ghost',
|
|
onChoose: (e: SortableEvent) => {
|
|
const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
|
|
handle.classList.add('tw-cursor-grabbing');
|
|
opts.onChoose?.(e);
|
|
},
|
|
onUnchoose: (e: SortableEvent) => {
|
|
const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
|
|
handle.classList.remove('tw-cursor-grabbing');
|
|
opts.onUnchoose?.(e);
|
|
},
|
|
...opts,
|
|
} satisfies SortableOptions);
|
|
}
|