@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
402 lines (401 loc) • 13.5 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
*/
import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
import { CSS, SLOTS, TEXT } from "./resources";
import { getSlotted, getElementDir } from "../../utils/dom";
import { clamp } from "../../utils/math";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
/**
* @slot - A slot for adding content to the shell panel.
* @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
*/
export class ShellPanel {
constructor() {
// --------------------------------------------------------------------------
//
// Properties
//
// --------------------------------------------------------------------------
/**
* Hide the content panel.
*/
this.collapsed = false;
/**
* This property makes the content area appear like a "floating" panel.
*/
this.detached = false;
/**
* Specifies the maximum height of the contents when detached.
*/
this.detachedHeightScale = "l";
/**
* This sets width of the content area.
*/
this.widthScale = "m";
/**
* Accessible label for resize separator.
* @default "Resize"
*/
this.intlResize = TEXT.resize;
/**
* This property makes the content area resizable if the calcite-shell-panel is not 'detached'.
*/
this.resizable = false;
this.contentWidth = null;
this.initialContentWidth = null;
this.initialClientX = null;
this.contentWidthMax = null;
this.contentWidthMin = null;
this.step = 1;
this.stepMultiplier = 10;
this.storeContentEl = (contentEl) => {
this.contentEl = contentEl;
};
this.getKeyAdjustedWidth = (event) => {
const { key } = event;
const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
const multipliedStep = step * stepMultiplier;
const MOVEMENT_KEYS = [
"ArrowUp",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"Home",
"End",
"PageUp",
"PageDown"
];
if (MOVEMENT_KEYS.indexOf(key) > -1) {
event.preventDefault();
}
const dir = getElementDir(el);
const directionKeys = ["ArrowLeft", "ArrowRight"];
const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
const increaseKeys = key === "ArrowUp" ||
(position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
if (increaseKeys) {
const stepValue = event.shiftKey ? multipliedStep : step;
return initialContentWidth + directionFactor * stepValue;
}
const decreaseKeys = key === "ArrowDown" ||
(position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
if (decreaseKeys) {
const stepValue = event.shiftKey ? multipliedStep : step;
return initialContentWidth - directionFactor * stepValue;
}
if (typeof contentWidthMin === "number" && key === "Home") {
return contentWidthMin;
}
if (typeof contentWidthMax === "number" && key === "End") {
return contentWidthMax;
}
if (key === "PageDown") {
return initialContentWidth - multipliedStep;
}
if (key === "PageUp") {
return initialContentWidth + multipliedStep;
}
return null;
};
this.separatorKeyDown = (event) => {
this.setInitialContentWidth();
const width = this.getKeyAdjustedWidth(event);
if (typeof width === "number") {
this.setContentWidth(width);
}
};
this.separatorPointerMove = (event) => {
event.preventDefault();
const { el, initialContentWidth, position, initialClientX } = this;
const offset = event.clientX - initialClientX;
const dir = getElementDir(el);
const adjustmentDirection = dir === "rtl" ? -1 : 1;
const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
const width = initialContentWidth + adjustedOffset;
this.setContentWidth(width);
};
this.separatorPointerUp = (event) => {
event.preventDefault();
document.removeEventListener("pointerup", this.separatorPointerUp);
document.removeEventListener("pointermove", this.separatorPointerMove);
};
this.setInitialContentWidth = () => {
var _a;
this.initialContentWidth = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
};
this.separatorPointerDown = (event) => {
event.preventDefault();
const { separatorEl } = this;
separatorEl && document.activeElement !== separatorEl && separatorEl.focus();
this.setInitialContentWidth();
this.initialClientX = event.clientX;
document.addEventListener("pointerup", this.separatorPointerUp);
document.addEventListener("pointermove", this.separatorPointerMove);
};
this.connectSeparator = (separatorEl) => {
this.disconnectSeparator();
this.separatorEl = separatorEl;
separatorEl.addEventListener("pointerdown", this.separatorPointerDown);
};
this.disconnectSeparator = () => {
var _a;
(_a = this.separatorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointerdown", this.separatorPointerDown);
};
}
watchHandler() {
this.calciteShellPanelToggle.emit();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
connectConditionalSlotComponent(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
this.disconnectSeparator();
}
componentDidLoad() {
this.updateAriaValues();
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderHeader() {
const { el } = this;
const hasHeader = getSlotted(el, SLOTS.header);
return hasHeader ? (h("div", { class: CSS.contentHeader, key: "header" },
h("slot", { name: SLOTS.header }))) : null;
}
render() {
const { collapsed, detached, position, initialContentWidth, contentWidth, contentWidthMax, contentWidthMin, intlResize, resizable } = this;
const allowResizing = !detached && resizable;
const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null },
this.renderHeader(),
h("div", { class: CSS.contentBody },
h("slot", null))));
const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
const actionBarNode = h("slot", { key: "action-bar", name: SLOTS.actionBar });
const mainNodes = [actionBarNode, contentNode, separatorNode];
if (position === "end") {
mainNodes.reverse();
}
return h("div", { class: { [CSS.container]: true } }, mainNodes);
}
// --------------------------------------------------------------------------
//
// private Methods
//
// --------------------------------------------------------------------------
setContentWidth(width) {
const { contentWidthMax, contentWidthMin } = this;
const roundedWidth = Math.round(width);
this.contentWidth =
typeof contentWidthMax === "number" && typeof contentWidthMin === "number"
? clamp(roundedWidth, contentWidthMin, contentWidthMax)
: roundedWidth;
}
updateAriaValues() {
const { contentEl } = this;
const computedStyle = contentEl && getComputedStyle(contentEl);
if (!computedStyle) {
return;
}
const max = parseInt(computedStyle.getPropertyValue("max-width"), 10);
const min = parseInt(computedStyle.getPropertyValue("min-width"), 10);
const valueNow = parseInt(computedStyle.getPropertyValue("width"), 10);
if (typeof valueNow === "number" && !isNaN(valueNow)) {
this.initialContentWidth = valueNow;
}
if (typeof max === "number" && !isNaN(max)) {
this.contentWidthMax = max;
}
if (typeof min === "number" && !isNaN(min)) {
this.contentWidthMin = min;
}
forceUpdate(this);
}
static get is() { return "calcite-shell-panel"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["shell-panel.scss"]
}; }
static get styleUrls() { return {
"$": ["shell-panel.css"]
}; }
static get properties() { return {
"collapsed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hide the content panel."
},
"attribute": "collapsed",
"reflect": true,
"defaultValue": "false"
},
"detached": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "This property makes the content area appear like a \"floating\" panel."
},
"attribute": "detached",
"reflect": true,
"defaultValue": "false"
},
"detachedHeightScale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the maximum height of the contents when detached."
},
"attribute": "detached-height-scale",
"reflect": true,
"defaultValue": "\"l\""
},
"widthScale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "This sets width of the content area."
},
"attribute": "width-scale",
"reflect": true,
"defaultValue": "\"m\""
},
"position": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Position",
"resolved": "\"end\" | \"start\"",
"references": {
"Position": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Arranges the component depending on the elements 'dir' property."
},
"attribute": "position",
"reflect": true
},
"intlResize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "default",
"text": "\"Resize\""
}],
"text": "Accessible label for resize separator."
},
"attribute": "intl-resize",
"reflect": false,
"defaultValue": "TEXT.resize"
},
"resizable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "This property makes the content area resizable if the calcite-shell-panel is not 'detached'."
},
"attribute": "resizable",
"reflect": true,
"defaultValue": "false"
}
}; }
static get states() { return {
"contentWidth": {}
}; }
static get events() { return [{
"method": "calciteShellPanelToggle",
"name": "calciteShellPanelToggle",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when collapse has been toggled."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
static get watchers() { return [{
"propName": "collapsed",
"methodName": "watchHandler"
}]; }
}