yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working drag

Browse Source
This commit is contained in:
Niels Lyngsø
2023-04-18 13:21:12 +02:00
parent d65cf550bc
commit 12ba3536c1
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Umbraco.Web.UI.Client/libs/sorter/sorter.controller.ts
View File

@@ -66,6 +66,7 @@ type INTERNAL_UmbSorterConfig<T> = {
querySelectModelToElement: (container: HTMLElement, modelEntry: T) => HTMLElement | null;
identifier: string;
itemSelector: string;
disabledItemSelector?: string;
containerSelector: string;
ignorerSelector: string;
placeholderClass: string;
@@ -115,7 +116,7 @@ export type UmbSorterConfig<T> = Omit<
*/
export class UmbSorterController<T> implements UmbControllerInterface {
#host;
#config;
#config: INTERNAL_UmbSorterConfig<T>;
#observer;
#model: Array<T> = [];
@@ -208,8 +209,10 @@ export class UmbSorterController<T> implements UmbControllerInterface {
setupIgnorerElements(element, this.#config.ignorerSelector);
}
element.draggable = true;
element.addEventListener('dragstart', this.handleDragStart);
if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
element.draggable = true;
element.addEventListener('dragstart', this.handleDragStart);
}
}
destroyItem(element: HTMLElement) {
@@ -367,7 +370,7 @@ export class UmbSorterController<T> implements UmbControllerInterface {
this.#currentDragRect = this.#currentDragElement!.getBoundingClientRect();
const insideCurrentRect = isWithinRect(this.#dragX, this.#dragY, this.#currentDragRect);
if (!insideCurrentRect) {
if (this.#rqaId === null) {
if (this.#rqaId === undefined) {
this.#rqaId = requestAnimationFrame(this.moveCurrentElement);
}
}
@@ -380,6 +383,8 @@ export class UmbSorterController<T> implements UmbControllerInterface {
return;
}
console.log('moveCurrentElement!!!');
const currentElementRect = this.#currentElement.getBoundingClientRect();
const insideCurrentRect = isWithinRect(this.#dragX, this.#dragY, currentElementRect);
if (insideCurrentRect) {
@@ -430,6 +435,8 @@ export class UmbSorterController<T> implements UmbControllerInterface {
: this.#currentContainerElement.children
);
console.log('orderedContainerElements', orderedContainerElements);
const currentContainerRect = this.#currentContainerElement.getBoundingClientRect();
// gather elements on the same row.
@@ -665,6 +672,9 @@ export class UmbSorterController<T> implements UmbControllerInterface {
}
let newIndex = this.#model.length;
console.log('NextEl:', nextEl);
if (nextEl) {
// We had a reference element, we want to get the index of it.
// This is might a problem if a item is being moved forward? (was also like this in the AngularJS version...)

6
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
View File

@@ -19,7 +19,8 @@ const SORTER_CONFIG: UmbSorterConfig<DocumentTypePropertyTypeResponseModel> = {
return container.querySelector('data-umb-property-id[' + modelEntry.id + ']');
},
identifier: 'content-type-property-sorter',
itemSelector: '[data-umb-property-id][data-property-of-owner-document]',
itemSelector: '[data-umb-property-id]',
disabledItemSelector: ':not([data-property-of-owner-document])',
};
@customElement('umb-document-type-workspace-view-edit-properties')
export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
@@ -28,6 +29,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
performItemInsert: (args) => {
let sortOrder = 0;
if (this._propertyStructure.length > 0) {
console.log('args.newIndex', args.newIndex);
if (args.newIndex === 0) {
// TODO: Remove as any when sortOrder is added to the model:
sortOrder = ((this._propertyStructure[0] as any).sortOrder ?? 0) - 1;
@@ -109,7 +111,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
render() {
return html`${repeat(
this._propertyStructure,
(property) => property.alias,
(property) => property.alias ?? '' + property.containerId ?? '' + (property as any).sortOrder ?? '',
(property) =>
html`<document-type-workspace-view-edit-property
class="property"