Skip to content

Commit

Permalink
Merge branch 'dev' into ROU-4495
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenOsodrac
BenOsodrac committed Sep 21, 2023
2 parents c7dec45 + b92a3f5 commit 15482f5
Show file tree
Hide file tree
Showing 9 changed files with 283 additions and 192 deletions.
170 changes: 15 additions & 155 deletions dist/OutSystemsUI.css
View file

Large diffs are not rendered by default.

29 changes: 22 additions & 7 deletions dist/OutSystemsUI.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ declare namespace OSFramework.OSUI.GlobalEnum {
HeaderIsFixed = "fixed-header",
HeaderIsVisible = "header-is--visible",
HeaderTopContent = "header-top-content",
InputNotValid = "not-valid",
IsTouch = "is--touch",
Layout = "layout",
LayoutNative = "layout-native",
Expand All @@ -190,7 +191,7 @@ declare namespace OSFramework.OSUI.GlobalEnum {
MainContent = "main-content",
MenuLinks = "app-menu-links",
Placeholder = "ph",
InputNotValid = "not-valid"
SkipContent = "skip-nav"
}
enum CSSSelectors {
InputFormControl = "input.form-control",
Expand Down Expand Up @@ -222,8 +223,8 @@ declare namespace OSFramework.OSUI.GlobalEnum {
enum FloatingPosition {
Auto = "auto",
Bottom = "bottom",
BottomStart = "bottom-start",
BottomEnd = "bottom-end",
BottomStart = "bottom-start",
Center = "center",
Left = "left",
LeftEnd = "left-end",
Expand All @@ -232,8 +233,8 @@ declare namespace OSFramework.OSUI.GlobalEnum {
RightEnd = "right-end",
RightStart = "right-start",
Top = "top",
TopStart = "top-start",
TopEnd = "top-end"
TopEnd = "top-end",
TopStart = "top-start"
}
enum CssProperties {
Auto = "auto",
Expand Down Expand Up @@ -283,6 +284,7 @@ declare namespace OSFramework.OSUI.GlobalEnum {
Class = "class",
DataInput = "data-input",
Disabled = "disabled",
Href = "href",
Id = "id",
Name = "name",
StatusBar = "data-status-bar-height",
Expand Down Expand Up @@ -400,8 +402,8 @@ declare namespace OSFramework.OSUI.GlobalEnum {
Submenu = "Submenu",
SwipeEvents = "SwipeEvents",
Tabs = "Tabs",
TabsHeaderItem = "TabsHeaderItem",
TabsContentItem = "TabsContentItem",
TabsHeaderItem = "TabsHeaderItem",
Timepicker = "Timepicker",
Tooltip = "Tooltip",
TouchEvents = "TouchEvents",
Expand Down Expand Up @@ -879,18 +881,21 @@ declare namespace OSFramework.OSUI.Feature.Balloon {
shape: GlobalEnum.ShapeTypes;
};
class Balloon<PT> extends AbstractFeature<PT, BalloonOptions> implements IBalloon {
private _currentFocusedElementIndex;
private _eventBodyClick;
private _eventOnKeypress;
private _floatingInstance;
private _floatingOptions;
private _focusManagerInstance;
private _focusTrapInstance;
private _focusableBalloonElements;
private _isOpenedByApi;
private _onToggleEvent;
isOpen: boolean;
constructor(featurePattern: PT, featureElem: HTMLElement, options: BalloonOptions);
private _bodyClickCallback;
private _handleFocusBehavior;
private _manageFocusInsideBalloon;
private _onkeypressCallback;
private _removeEventListeners;
private _setA11YProperties;
Expand All @@ -901,7 +906,7 @@ declare namespace OSFramework.OSUI.Feature.Balloon {
build(): void;
close(): void;
dispose(): void;
open(isOpenedByApi: boolean): void;
open(isOpenedByApi: boolean, arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void;
setBalloonShape(shape?: GlobalEnum.ShapeTypes): void;
setFloatingBehaviour(isUpdate?: boolean): void;
setFloatingConfigs(): void;
Expand All @@ -925,6 +930,7 @@ declare namespace OSFramework.OSUI.Feature.Balloon.Enum {
}
declare namespace OSFramework.OSUI.Feature.Balloon {
interface IBalloon extends Feature.IFeature, Interface.IOpenable {
open(isOpenedByApi?: boolean, arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void;
setBalloonShape(shape?: GlobalEnum.ShapeTypes): void;
updatePositionOption(position: GlobalEnum.FloatingPosition): void;
}
Expand Down Expand Up @@ -2448,6 +2454,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu {
interface IOverflowMenu extends Interface.IPattern, Interface.IOpenable {
disable(): void;
enable(): void;
open(isOpenedByApi?: boolean, arrowKeyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void;
}
}
declare namespace OSFramework.OSUI.Patterns.OverflowMenu {
Expand All @@ -2457,6 +2464,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu {
private _balloonFeature;
private _eventBalloonOnToggle;
private _eventOnClick;
private _eventOnKeydown;
private _isDisabled;
private _isOpenedByApi;
private _platformEventOnToggle;
Expand All @@ -2466,6 +2474,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu {
constructor(uniqueId: string, configs: JSON);
private _balloonOnToggleCallback;
private _onClickCallback;
private _onKeydownCallback;
private _setBalloonFeature;
private _setOverflowMenuShape;
private _togglePattern;
Expand All @@ -2483,7 +2492,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu {
disable(): void;
dispose(): void;
enable(): void;
open(isOpenedByApi: boolean): void;
open(isOpenedByApi: boolean, keyPressed?: GlobalEnum.Keycodes.ArrowDown | GlobalEnum.Keycodes.ArrowUp): void;
registerCallback(eventName: string, callback: GlobalCallbacks.OSGeneric): void;
setBalloonOptions(balloonOptions?: Feature.Balloon.BalloonOptions): void;
setTriggerAriaLabel(ariaLabelText: string): void;
Expand Down Expand Up @@ -4620,6 +4629,12 @@ declare namespace OutSystems.OSUI.Utils.LayoutPrivate {
static Unset(): void;
}
}
declare namespace OutSystems.OSUI.Utils.LayoutPrivate {
abstract class SkipContentLink {
private static _setLink;
static Set(): void;
}
}
declare namespace OutSystems.OSUI.Utils {
function LogMessage(message: string): void;
}
Expand Down
103 changes: 89 additions & 14 deletions dist/OutSystemsUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ var OSFramework;
CssClassElements["HeaderIsFixed"] = "fixed-header";
CssClassElements["HeaderIsVisible"] = "header-is--visible";
CssClassElements["HeaderTopContent"] = "header-top-content";
CssClassElements["InputNotValid"] = "not-valid";
CssClassElements["IsTouch"] = "is--touch";
CssClassElements["Layout"] = "layout";
CssClassElements["LayoutNative"] = "layout-native";
Expand All @@ -253,7 +254,7 @@ var OSFramework;
CssClassElements["MainContent"] = "main-content";
CssClassElements["MenuLinks"] = "app-menu-links";
CssClassElements["Placeholder"] = "ph";
CssClassElements["InputNotValid"] = "not-valid";
CssClassElements["SkipContent"] = "skip-nav";
})(CssClassElements = GlobalEnum.CssClassElements || (GlobalEnum.CssClassElements = {}));
let CSSSelectors;
(function (CSSSelectors) {
Expand Down Expand Up @@ -290,8 +291,8 @@ var OSFramework;
(function (FloatingPosition) {
FloatingPosition["Auto"] = "auto";
FloatingPosition["Bottom"] = "bottom";
FloatingPosition["BottomStart"] = "bottom-start";
FloatingPosition["BottomEnd"] = "bottom-end";
FloatingPosition["BottomStart"] = "bottom-start";
FloatingPosition["Center"] = "center";
FloatingPosition["Left"] = "left";
FloatingPosition["LeftEnd"] = "left-end";
Expand All @@ -300,8 +301,8 @@ var OSFramework;
FloatingPosition["RightEnd"] = "right-end";
FloatingPosition["RightStart"] = "right-start";
FloatingPosition["Top"] = "top";
FloatingPosition["TopStart"] = "top-start";
FloatingPosition["TopEnd"] = "top-end";
FloatingPosition["TopStart"] = "top-start";
})(FloatingPosition = GlobalEnum.FloatingPosition || (GlobalEnum.FloatingPosition = {}));
let CssProperties;
(function (CssProperties) {
Expand Down Expand Up @@ -357,6 +358,7 @@ var OSFramework;
HTMLAttributes["Class"] = "class";
HTMLAttributes["DataInput"] = "data-input";
HTMLAttributes["Disabled"] = "disabled";
HTMLAttributes["Href"] = "href";
HTMLAttributes["Id"] = "id";
HTMLAttributes["Name"] = "name";
HTMLAttributes["StatusBar"] = "data-status-bar-height";
Expand Down Expand Up @@ -483,8 +485,8 @@ var OSFramework;
PatternName["Submenu"] = "Submenu";
PatternName["SwipeEvents"] = "SwipeEvents";
PatternName["Tabs"] = "Tabs";
PatternName["TabsHeaderItem"] = "TabsHeaderItem";
PatternName["TabsContentItem"] = "TabsContentItem";
PatternName["TabsHeaderItem"] = "TabsHeaderItem";
PatternName["Timepicker"] = "Timepicker";
PatternName["Tooltip"] = "Tooltip";
PatternName["TouchEvents"] = "TouchEvents";
Expand Down Expand Up @@ -1854,10 +1856,46 @@ var OSFramework;
this._focusTrapInstance = new OSUI.Behaviors.FocusTrap(opts);
this._focusManagerInstance = new OSUI.Behaviors.FocusManager();
}
_manageFocusInsideBalloon(arrowKeyPressed) {
if (this._focusableBalloonElements.length === 0 || arrowKeyPressed === undefined) {
this._currentFocusedElementIndex = undefined;
}
else if (arrowKeyPressed === OSUI.GlobalEnum.Keycodes.ArrowDown) {
if (this._currentFocusedElementIndex === undefined ||
this._currentFocusedElementIndex >= this._focusableBalloonElements.length - 1)
this._currentFocusedElementIndex = 0;
else
this._currentFocusedElementIndex = this._currentFocusedElementIndex + 1;
}
else if (arrowKeyPressed === OSUI.GlobalEnum.Keycodes.ArrowUp) {
if (this._currentFocusedElementIndex === undefined || this._currentFocusedElementIndex === 0)
this._currentFocusedElementIndex = this._focusableBalloonElements.length - 1;
else
this._currentFocusedElementIndex = this._currentFocusedElementIndex - 1;
}
if (this._currentFocusedElementIndex === undefined) {
OSUI.Helper.AsyncInvocation(() => {
this.featureElem.focus();
});
}
else {
OSUI.Helper.AsyncInvocation(() => {
this._focusableBalloonElements[this._currentFocusedElementIndex].focus();
});
}
}
_onkeypressCallback(e) {
const isEscapedPressed = e.key === OSUI.GlobalEnum.Keycodes.Escape;
if (isEscapedPressed && this.isOpen) {
this.close();
const isArrowDownPressed = e.key === OSUI.GlobalEnum.Keycodes.ArrowDown;
const isArrowUpPressed = e.key === OSUI.GlobalEnum.Keycodes.ArrowUp;
if (this.isOpen) {
if (isEscapedPressed) {
this.close();
}
else if (isArrowDownPressed || isArrowUpPressed) {
this._manageFocusInsideBalloon(e.key);
e.preventDefault();
}
}
e.stopPropagation();
}
Expand Down Expand Up @@ -1891,7 +1929,7 @@ var OSFramework;
OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._eventBodyClick);
}
}
_toggleBalloon(isOpen, isBodyClick = false) {
_toggleBalloon(isOpen, isBodyClick = false, arrowKeyPressed) {
this.isOpen = isOpen;
if (isOpen) {
OSUI.Helper.Dom.Styles.AddClass(this.featureElem, Balloon_1.Enum.CssClasses.IsOpen);
Expand All @@ -1906,9 +1944,8 @@ var OSFramework;
this._focusManagerInstance.storeLastFocusedElement();
this._focusTrapInstance.enableForA11y();
this.setFloatingBehaviour();
OSUI.Helper.AsyncInvocation(() => {
this.featureElem.focus();
});
this._focusableBalloonElements = this.featureElem.querySelectorAll(OSUI.Constants.FocusableElems);
this._manageFocusInsideBalloon(arrowKeyPressed);
}
else {
this._focusTrapInstance.disableForA11y();
Expand All @@ -1919,6 +1956,8 @@ var OSFramework;
this._focusManagerInstance.setFocusToStoredElement();
}
});
this._focusableBalloonElements = undefined;
this._currentFocusedElementIndex = undefined;
}
this._onToggleEvent(this.isOpen, this.featureElem);
OSUI.Helper.AsyncInvocation(() => {
Expand Down Expand Up @@ -1950,10 +1989,10 @@ var OSFramework;
this._unsetCallbacks();
super.dispose();
}
open(isOpenedByApi) {
open(isOpenedByApi, arrowKeyPressed) {
if (this.isOpen === false) {
this._isOpenedByApi = isOpenedByApi;
this._toggleBalloon(true);
this._toggleBalloon(true, false, arrowKeyPressed);
}
}
setBalloonShape(shape) {
Expand Down Expand Up @@ -7244,6 +7283,14 @@ var OSFramework;
this.open(this._isOpenedByApi);
}
}
_onKeydownCallback(event) {
if (!this._balloonFeature.isOpen &&
(event.key === OSUI.GlobalEnum.Keycodes.ArrowDown || event.key === OSUI.GlobalEnum.Keycodes.ArrowUp)) {
this._isOpenedByApi = false;
this.open(this._isOpenedByApi, event.key);
event.preventDefault();
}
}
_setBalloonFeature() {
this.setBalloonOptions();
this._balloonFeature = new OSFramework.OSUI.Feature.Balloon.Balloon(this, this._balloonElem, this.balloonOptions);
Expand All @@ -7270,6 +7317,7 @@ var OSFramework;
}
removeEventListeners() {
this._triggerElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick);
this._triggerElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnKeydown);
OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BalloonOnToggle, this._eventBalloonOnToggle);
}
setA11YProperties() {
Expand All @@ -7284,9 +7332,11 @@ var OSFramework;
setCallbacks() {
this._eventBalloonOnToggle = this._balloonOnToggleCallback.bind(this);
this._eventOnClick = this._onClickCallback.bind(this);
this._eventOnKeydown = this._onKeydownCallback.bind(this);
}
setEventListeners() {
this._triggerElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick);
this._triggerElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnKeydown);
OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BalloonOnToggle, this._eventBalloonOnToggle);
}
setHtmlElements() {
Expand Down Expand Up @@ -7348,10 +7398,10 @@ var OSFramework;
this._isDisabled = false;
OSUI.Helper.Dom.Attribute.Remove(this._triggerElem, OSUI.GlobalEnum.HTMLAttributes.Disabled);
}
open(isOpenedByApi) {
open(isOpenedByApi, keyPressed) {
if (this._balloonFeature.isOpen === false && this._isDisabled === false) {
this._isOpenedByApi = isOpenedByApi;
this._balloonFeature.open(this._isOpenedByApi);
this._balloonFeature.open(this._isOpenedByApi, keyPressed);
}
}
registerCallback(eventName, callback) {
Expand Down Expand Up @@ -16353,6 +16403,31 @@ var OutSystems;
})(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {}));
})(OutSystems || (OutSystems = {}));
var OutSystems;
(function (OutSystems) {
var OSUI;
(function (OSUI) {
var Utils;
(function (Utils) {
var LayoutPrivate;
(function (LayoutPrivate) {
class SkipContentLink {
static _setLink() {
const mainContent = OSFramework.OSUI.Helper.Dom.ClassSelector(document, OSFramework.OSUI.GlobalEnum.CssClassElements.MainContent);
const skipContentLink = OSFramework.OSUI.Helper.Dom.ClassSelector(document, OSFramework.OSUI.GlobalEnum.CssClassElements.SkipContent);
if (mainContent && skipContentLink) {
skipContentLink.setAttribute(OSFramework.OSUI.GlobalEnum.HTMLAttributes.Href, mainContent.getAttribute(OSFramework.OSUI.GlobalEnum.HTMLAttributes.Id));
}
}
static Set() {
this._setLink();
}
}
LayoutPrivate.SkipContentLink = SkipContentLink;
})(LayoutPrivate = Utils.LayoutPrivate || (Utils.LayoutPrivate = {}));
})(Utils = OSUI.Utils || (OSUI.Utils = {}));
})(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {}));
})(OutSystems || (OutSystems = {}));
var OutSystems;
(function (OutSystems) {
var OSUI;
(function (OSUI) {
Expand Down
Loading

0 comments on commit 15482f5

Please sign in to comment.