mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-26 16:48:49 +01:00
Et2VfsPath widget
This commit is contained in:
nathan
parent
187718ccd8
commit
b19c913006
95
api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts
Normal file
95
api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import {css} from 'lit';
|
||||||
|
|
||||||
|
export default css`
|
||||||
|
|
||||||
|
.form-control-input {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.1rem 0.5rem;
|
||||||
|
|
||||||
|
background-color: var(--sl-input-background-color);
|
||||||
|
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
||||||
|
|
||||||
|
border-radius: var(--sl-input-border-radius-medium);
|
||||||
|
font-size: var(--sl-input-font-size-medium);
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: var(--sl-input-spacing-medium);
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
padding-bottom: 0.1rem;
|
||||||
|
|
||||||
|
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
|
||||||
|
var(--sl-transition-fast) background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vfs-path__value-input {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
order: 10;
|
||||||
|
min-width: 7em;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: var(--input-text-color);
|
||||||
|
|
||||||
|
font-size: var(--sl-input-font-size-medium);
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: var(--sl-input-spacing-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edit button */
|
||||||
|
|
||||||
|
.vfs-path__edit {
|
||||||
|
flex-grow: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: inherit;
|
||||||
|
color: var(--sl-input-icon-color);
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
transition: var(--sl-transition-fast) color;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breadcrumb directories */
|
||||||
|
|
||||||
|
sl-breadcrumb-item::part(label) {
|
||||||
|
color: var(--input-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
sl-breadcrumb-item::part(separator) {
|
||||||
|
color: var(--input-text-color);
|
||||||
|
margin: 0 var(--sl-spacing-2x-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sizes */
|
||||||
|
|
||||||
|
.form-control--medium, .form-control--medium .form-control-input {
|
||||||
|
min-height: var(--sl-input-height-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control--medium .vfs-path__edit {
|
||||||
|
margin-inline-start: var(--sl-input-spacing-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Readonly */
|
||||||
|
|
||||||
|
:host([readonly]) .form-control-input {
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vfs-path__readonly sl-breadcrumb-item::part(label) {
|
||||||
|
cursor: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vfs-path__disabled sl-breadcrumb-item::part(label) {
|
||||||
|
color: var(--sl-input-color-disabled);
|
||||||
|
}
|
||||||
|
`;
|
||||||
290
api/js/etemplate/Et2Vfs/Et2VfsPath.ts
Normal file
290
api/js/etemplate/Et2Vfs/Et2VfsPath.ts
Normal file
@ -0,0 +1,290 @@
|
|||||||
|
/**
|
||||||
|
* EGroupware eTemplate2 - Vfs path WebComponent
|
||||||
|
*
|
||||||
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||||
|
* @package api
|
||||||
|
* @link https://www.egroupware.org
|
||||||
|
* @author Nathan Gray
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
|
||||||
|
import {html, LitElement, nothing} from "lit";
|
||||||
|
import shoelace from "../Styles/shoelace";
|
||||||
|
import styles from "./Et2VfsPath.styles";
|
||||||
|
import {property} from "lit/decorators/property.js";
|
||||||
|
import {state} from "lit/decorators/state.js";
|
||||||
|
import {classMap} from "lit/directives/class-map.js";
|
||||||
|
import {repeat} from "lit/directives/repeat.js";
|
||||||
|
import {FileInfo} from "./Et2VfsSelect";
|
||||||
|
import {SlBreadcrumbItem} from "@shoelace-style/shoelace";
|
||||||
|
import {HasSlotController} from "../Et2Widget/slot";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @summary Display an editable path from the VFS
|
||||||
|
* @since
|
||||||
|
*
|
||||||
|
* @slot prefix - Before the path
|
||||||
|
* @slot suffix - Like prefix, but after
|
||||||
|
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
||||||
|
*
|
||||||
|
* @event change - Emitted when the control's value changes.
|
||||||
|
*
|
||||||
|
* @csspart form-control-input - The textbox's wrapper.
|
||||||
|
* @csspart form-control-help-text - The help text's wrapper.
|
||||||
|
* @csspart prefix - The container that wraps the prefix slot.
|
||||||
|
* @csspart suffix - The container that wraps the suffix slot.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export class Et2VfsPath extends Et2InputWidget(LitElement)
|
||||||
|
{
|
||||||
|
static get styles()
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
shoelace,
|
||||||
|
...super.styles,
|
||||||
|
styles
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The component's help text. If you need to display HTML, use the `help-text` slot instead. */
|
||||||
|
@property({attribute: 'help-text'}) helpText = '';
|
||||||
|
|
||||||
|
/* User is directly editing the path as a string */
|
||||||
|
@state() editing = false;
|
||||||
|
|
||||||
|
protected readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
|
||||||
|
private _value = ""
|
||||||
|
|
||||||
|
|
||||||
|
get _edit() : HTMLInputElement { return this.shadowRoot.querySelector("input");}
|
||||||
|
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.handleEditMouseDown = this.handleEditMouseDown.bind(this);
|
||||||
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||||
|
this.handlePathClick = this.handlePathClick.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
@property()
|
||||||
|
set value(_value : string)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
_value = this.egw().decodePath(<string>_value);
|
||||||
|
}
|
||||||
|
catch(e)
|
||||||
|
{
|
||||||
|
this.set_validation_error('Error! ' + _value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const oldValue = this._value;
|
||||||
|
this._value = <string>_value;
|
||||||
|
this.requestUpdate("value", oldValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() { return this._value;}
|
||||||
|
|
||||||
|
setValue(_value : string | FileInfo)
|
||||||
|
{
|
||||||
|
if(typeof _value != "string" && _value.path)
|
||||||
|
{
|
||||||
|
_value = _value.path;
|
||||||
|
}
|
||||||
|
this.value = <string>_value;
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue()
|
||||||
|
{
|
||||||
|
return (this.readonly || this.disabled) ? null : (this.egw().encodePath(this._value || ''));
|
||||||
|
}
|
||||||
|
|
||||||
|
public focus()
|
||||||
|
{
|
||||||
|
this.edit();
|
||||||
|
}
|
||||||
|
|
||||||
|
public blur()
|
||||||
|
{
|
||||||
|
this.editing = false;
|
||||||
|
|
||||||
|
this.requestUpdate("editing");
|
||||||
|
let oldValue = this.value;
|
||||||
|
this.value = this._edit.value;
|
||||||
|
|
||||||
|
if(oldValue != this.value)
|
||||||
|
{
|
||||||
|
this.updateComplete.then(() =>
|
||||||
|
{
|
||||||
|
this.dispatchEvent(new Event("change"));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public edit()
|
||||||
|
{
|
||||||
|
const oldValue = this.editing;
|
||||||
|
this.editing = true;
|
||||||
|
|
||||||
|
this.requestUpdate("editing", oldValue);
|
||||||
|
this.updateComplete.then(() =>
|
||||||
|
{
|
||||||
|
this._edit?.focus();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
protected handleLabelClick()
|
||||||
|
{
|
||||||
|
this.edit();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected handleEditMouseDown(event : MouseEvent)
|
||||||
|
{
|
||||||
|
this.edit();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected handleKeyDown(event : KeyboardEvent)
|
||||||
|
{
|
||||||
|
switch(event.key)
|
||||||
|
{
|
||||||
|
case "Enter":
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
this.editing = !this.editing;
|
||||||
|
this.requestUpdate("editing");
|
||||||
|
break;
|
||||||
|
case "Escape":
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
this.blur();
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected handlePathClick(event : MouseEvent)
|
||||||
|
{
|
||||||
|
if(event.target instanceof SlBreadcrumbItem && event.composedPath().includes(this))
|
||||||
|
{
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const dirs = Array.from(event.target.parentElement.querySelectorAll('sl-breadcrumb-item')) ?? [];
|
||||||
|
let stopIndex = dirs.indexOf(event.target) + 1;
|
||||||
|
let newPath = dirs.slice(0, stopIndex).map(d => d.textContent);
|
||||||
|
if(!(this.disabled || this.readonly))
|
||||||
|
{
|
||||||
|
const oldValue = this.value;
|
||||||
|
this.value = newPath.join("");
|
||||||
|
if(oldValue != this.value)
|
||||||
|
{
|
||||||
|
this.updateComplete.then(() =>
|
||||||
|
{
|
||||||
|
this.dispatchEvent(new Event("change"));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Can still click on it when disabled I guess
|
||||||
|
if(!this.disabled)
|
||||||
|
{
|
||||||
|
this.dispatchEvent(new CustomEvent("click", {
|
||||||
|
bubbles: true,
|
||||||
|
cancelable: true,
|
||||||
|
detail: newPath.join("")
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
const hasLabelSlot = this.hasSlotController.test('label');
|
||||||
|
const hasHelpTextSlot = this.hasSlotController.test('help-text');
|
||||||
|
const hasLabel = this.label ? true : !!hasLabelSlot;
|
||||||
|
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
|
||||||
|
const pathParts = this.value === "/" ? [""] : this.value.split('/');
|
||||||
|
const isEditable = !(this.disabled || this.readonly);
|
||||||
|
const editing = this.editing && isEditable;
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div
|
||||||
|
part="form-control"
|
||||||
|
class=${classMap({
|
||||||
|
'vfs-path': true,
|
||||||
|
'vfs-path__readonly': !isEditable,
|
||||||
|
'vfs-path__disabled': this.disabled,
|
||||||
|
'form-control': true,
|
||||||
|
'form-control--medium': true,
|
||||||
|
'form-control--has-label': hasLabel,
|
||||||
|
'form-control--has-help-text': hasHelpText
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
id="label"
|
||||||
|
part="form-control-label"
|
||||||
|
class="form-control__label"
|
||||||
|
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||||
|
@click=${this.handleLabelClick}
|
||||||
|
>
|
||||||
|
<slot name="label">${this.label}</slot>
|
||||||
|
</label>
|
||||||
|
<div part="form-control-input" class="form-control-input"
|
||||||
|
@click=${() => this.focus()}
|
||||||
|
>
|
||||||
|
<slot part="prefix" name="prefix"></slot>
|
||||||
|
${editing ? html`
|
||||||
|
<input
|
||||||
|
class="vfs-path__value-input"
|
||||||
|
type="text"
|
||||||
|
?disabled=${this.disabled}
|
||||||
|
?required=${this.required}
|
||||||
|
.value=${this.value}
|
||||||
|
tabindex="-1"
|
||||||
|
aria-hidden="true"
|
||||||
|
@blur=${() => this.blur()}
|
||||||
|
@keydown=${this.handleKeyDown}
|
||||||
|
/>` : html`
|
||||||
|
<sl-breadcrumb
|
||||||
|
class="vfs-path__breadcrumb"
|
||||||
|
@click=${this.handlePathClick}
|
||||||
|
>
|
||||||
|
<span slot="separator">/</span>
|
||||||
|
${repeat(pathParts, (path) =>
|
||||||
|
{
|
||||||
|
return html`
|
||||||
|
<sl-breadcrumb-item class="vfs-path__directory">${path}</sl-breadcrumb-item>`;
|
||||||
|
})}
|
||||||
|
</sl-breadcrumb>
|
||||||
|
${!isEditable ? nothing : html`
|
||||||
|
<button
|
||||||
|
part="edit-button"
|
||||||
|
class="vfs-path__edit"
|
||||||
|
type="button"
|
||||||
|
aria-label=${this.egw().lang('edit')}
|
||||||
|
@mousedown=${this.handleEditMouseDown}
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<slot name="edit-icon">
|
||||||
|
<sl-icon name="pencil"></sl-icon>
|
||||||
|
</slot>
|
||||||
|
</button>`
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
<slot part="suffix" name="suffix"></slot>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
part="form-control-help-text"
|
||||||
|
id="help-text"
|
||||||
|
class="form-control__help-text"
|
||||||
|
aria-hidden=${hasHelpText ? 'false' : 'true'}
|
||||||
|
>
|
||||||
|
<slot name="help-text">${this.helpText}</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("et2-vfs-path", Et2VfsPath);
|
||||||
86
api/js/etemplate/Et2Vfs/test/Et2VfsPath.test.ts
Normal file
86
api/js/etemplate/Et2Vfs/test/Et2VfsPath.test.ts
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import {assert, elementUpdated, fixture, html} from '@open-wc/testing';
|
||||||
|
import * as sinon from 'sinon';
|
||||||
|
import {inputBasicTests} from "../../Et2InputWidget/test/InputBasicTests";
|
||||||
|
import {Et2VfsPath} from "../Et2VfsPath";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test file for Etemplate webComponent VfsPath
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
window.egw = {
|
||||||
|
ajaxUrl: () => "",
|
||||||
|
app: () => "addressbook",
|
||||||
|
decodePath: (_path : string) => _path,
|
||||||
|
encodePath: (_path : string) => _path,
|
||||||
|
image: () => "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjk2OTY5IiBkPSJNNi45NDMsMjguNDUzDQoJYzAuOTA2LDAuNzY1LDIuMDk3LDEuMTI3LDMuMjg2LDEuMTA5YzAuNDMsMC4wMTQsMC44NTItMC4wNjgsMS4yNjUtMC4yMDdjMC42NzktMC4xOCwxLjMyOC0wLjQ1LDEuODY2LTAuOTAyTDI5LjQwMywxNC45DQoJYzEuNzcyLTEuNDk4LDEuNzcyLTMuOTI1LDAtNS40MjJjLTEuNzcyLTEuNDk3LTQuNjQ2LTEuNDk3LTYuNDE4LDBMMTAuMTE5LDIwLjM0OWwtMi4zODktMi40MjRjLTEuNDQtMS40NTctMy43NzItMS40NTctNS4yMTIsMA0KCWMtMS40MzgsMS40Ni0xLjQzOCwzLjgyNSwwLDUuMjgxQzIuNTE4LDIzLjIwNiw1LjQ3NCwyNi45NDcsNi45NDMsMjguNDUzeiIvPg0KPC9zdmc+DQo=",
|
||||||
|
jsonq: () => Promise.resolve({}),
|
||||||
|
lang: i => i + "*",
|
||||||
|
link: i => i,
|
||||||
|
preference: i => "",
|
||||||
|
tooltipUnbind: () => {},
|
||||||
|
webserverUrl: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
let element : Et2VfsPath;
|
||||||
|
|
||||||
|
async function before()
|
||||||
|
{
|
||||||
|
// Create an element to test with, and wait until it's ready
|
||||||
|
// @ts-ignore
|
||||||
|
element = await fixture<Et2VfsPath>(html`
|
||||||
|
<et2-vfs-path label="I'm a vfs path">
|
||||||
|
</et2-vfs-path>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// Stub egw()
|
||||||
|
sinon.stub(element, "egw").returns(window.egw);
|
||||||
|
await elementUpdated(element);
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("Path widget basics", () =>
|
||||||
|
{
|
||||||
|
// Setup run before each test
|
||||||
|
beforeEach(before);
|
||||||
|
|
||||||
|
// Make sure it works
|
||||||
|
it('is defined', () =>
|
||||||
|
{
|
||||||
|
assert.instanceOf(element, Et2VfsPath);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('has a label', async() =>
|
||||||
|
{
|
||||||
|
element.set_label("Label set");
|
||||||
|
await elementUpdated(element);
|
||||||
|
|
||||||
|
assert.equal(element.querySelector("[slot='label']").textContent, "Label set");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("textbox gets focus when widget is focused", async() =>
|
||||||
|
{
|
||||||
|
element.focus();
|
||||||
|
await elementUpdated(element);
|
||||||
|
assert.equal(element.shadowRoot.activeElement, element._edit, "Editable path did not get focus when widget got focus");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("blurring widget accepts current text", async() =>
|
||||||
|
{
|
||||||
|
const value = "/home/test/directory";
|
||||||
|
element.focus();
|
||||||
|
await elementUpdated(element);
|
||||||
|
element._edit.value = value;
|
||||||
|
element.blur();
|
||||||
|
await elementUpdated(element);
|
||||||
|
|
||||||
|
assert.equal(element.value, value, "Path was not accepted on blur");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
inputBasicTests(async() =>
|
||||||
|
{
|
||||||
|
const element = await before();
|
||||||
|
element.noLang = true;
|
||||||
|
return element
|
||||||
|
}, "/home/test", "sl-breadcrumb");
|
||||||
@ -97,6 +97,7 @@ import './Et2Url/Et2UrlFaxReadonly';
|
|||||||
import "./Layout/Et2Split/Et2Split";
|
import "./Layout/Et2Split/Et2Split";
|
||||||
import "./Layout/RowLimitedMixin";
|
import "./Layout/RowLimitedMixin";
|
||||||
import "./Et2Vfs/Et2VfsMime";
|
import "./Et2Vfs/Et2VfsMime";
|
||||||
|
import "./Et2Vfs/Et2VfsPath";
|
||||||
import "./Et2Vfs/Et2VfsSelect";
|
import "./Et2Vfs/Et2VfsSelect";
|
||||||
import "./Et2Vfs/Et2VfsSelectRow";
|
import "./Et2Vfs/Et2VfsSelectRow";
|
||||||
import "./Et2Vfs/Et2VfsUid";
|
import "./Et2Vfs/Et2VfsUid";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user