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

add story for sorter.controller

Browse Source
This commit is contained in:
Jacob Overgaard
2023-08-11 09:47:56 +02:00
parent 9e78a3163a
commit 713fd8b193
4 changed files with 128 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts
View File

@@ -2,49 +2,7 @@ import { expect, fixture, html } from '@open-wc/testing';
import { UmbSorterConfig, UmbSorterController } from './sorter.controller.js';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { customElement } from '@umbraco-cms/backoffice/external/lit';
type SortEntryType = {
id: string;
value: string;
};
const sorterConfig: UmbSorterConfig<SortEntryType> = {
compareElementToModel: (element: HTMLElement, model: SortEntryType) => {
return element.getAttribute('id') === model.id;
},
querySelectModelToElement: (container: HTMLElement, modelEntry: SortEntryType) => {
return container.querySelector('data-sort-entry-id[' + modelEntry.id + ']');
},
identifier: 'test-sorter',
itemSelector: 'li',
};
const model: Array<SortEntryType> = [
{
id: '0',
value: 'Entry 0',
},
{
id: '1',
value: 'Entry 1',
},
{
id: '2',
value: 'Entry 2',
},
];
@customElement('test-my-sorter-controller')
class UmbTestSorterControllerElement extends UmbLitElement {
public sorter;
constructor() {
super();
this.sorter = new UmbSorterController(this, sorterConfig);
this.sorter.setModel(model);
}
}
import UmbTestSorterControllerElement from './stories/test-sorter-controller.element.js';
describe('UmbContextConsumer', () => {
let hostElement: UmbTestSorterControllerElement;

7
src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
View File

@@ -740,7 +740,7 @@ export class UmbSorterController<T> implements UmbController {
// TODO: Move auto scroll into its own class?
#autoScrollRAF: number | null = null;
#autoScrollEl?: Element;
#autoScrollEl = document.scrollingElement || document.documentElement;
private autoScrollX = 0;
private autoScrollY = 0;
@@ -788,11 +788,11 @@ export class UmbSorterController<T> implements UmbController {
this.#autoScrollRAF = requestAnimationFrame(this._performAutoScroll);
}
}
private _performAutoScroll() {
private _performAutoScroll = () => {
this.#autoScrollEl!.scrollLeft += this.autoScrollX * autoScrollSpeed;
this.#autoScrollEl!.scrollTop += this.autoScrollY * autoScrollSpeed;
this.#autoScrollRAF = requestAnimationFrame(this._performAutoScroll);
}
};
private stopAutoScroll() {
cancelAnimationFrame(this.#autoScrollRAF!);
this.#autoScrollRAF = null;
@@ -833,6 +833,5 @@ export class UmbSorterController<T> implements UmbController {
// For auto scroller:
this.#scrollElement = null;
this.#autoScrollEl = undefined;
}
}

26
src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/sorter.stories.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
import type UmbTestSorterControllerElement from './test-sorter-controller.element.js';
import './test-sorter-controller.element.js';
const meta: Meta<UmbTestSorterControllerElement> = {
title: 'API/Drag and Drop/Sorter',
component: 'test-my-sorter-controller',
decorators: [
(Story) => {
return html`<div
style="margin:2rem auto; width: 50%; min-height: 350px; padding: 20px; box-sizing: border-box; background:white;">
<p>
<strong>Drag and drop the items to sort them.</strong>
</p>
${Story()}
</div>`;
},
],
};
export default meta;
type Story = StoryObj<UmbTestSorterControllerElement>;
export const Default: Story = {};

98
src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/test-sorter-controller.element.ts Normal file
View File

@@ -0,0 +1,98 @@
import { UmbSorterConfig, UmbSorterController } from '../sorter.controller.js';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
type SortEntryType = {
id: string;
value: string;
};
const sorterConfig: UmbSorterConfig<SortEntryType> = {
compareElementToModel: (element: HTMLElement, model: SortEntryType) => {
return element.getAttribute('data-sort-entry-id') === model.id;
},
querySelectModelToElement: (container: HTMLElement, modelEntry: SortEntryType) => {
return container.querySelector('data-sort-entry-id[' + modelEntry.id + ']');
},
identifier: 'test-sorter',
itemSelector: 'li',
containerSelector: 'ul',
};
const model: Array<SortEntryType> = [
{
id: '0',
value: 'Entry 0',
},
{
id: '1',
value: 'Entry 1',
},
{
id: '2',
value: 'Entry 2',
},
];
@customElement('test-my-sorter-controller')
export default class UmbTestSorterControllerElement extends UmbLitElement {
public sorter;
constructor() {
super();
this.sorter = new UmbSorterController(this, sorterConfig);
this.sorter.setModel(model);
}
render() {
return html`
<ul>
${model.map(
(entry) => html`<li id="${'sort' + entry.id}" data-sort-entry-id="${entry.id}">${entry.value}</li>`
)}
</ul>
`;
}
static styles = [
css`
:host {
display: block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
margin: 5px;
background: #eee;
}
li:hover {
background: #ddd !important;
cursor: move;
}
li:active {
background: #ccc;
}
#sort0 {
background: #f00;
}
#sort1 {
background: #0f0;
}
#sort2 {
background: #c9da10;
}
`,
];
}