Skip to content

Commit

Permalink
Add search new architecure without native behavior enablement
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmarcelino-fe
bmarcelino-fe committed Oct 3, 2023
1 parent dff9319 commit e2f76b3
Show file tree
Hide file tree
Showing 10 changed files with 16 additions and 628 deletions.
107 changes: 6 additions & 101 deletions dist/OutSystemsUI.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10280,46 +10280,15 @@ body.vscomp-popup-active .vscomp-wrapper{
-servicestudio-border-radius:4px;
-servicestudio-height:40px;
}
.osui-search__input input[data-input]{
background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDAxIiB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmNvbS9zdmdqcyI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMDIiPjwvZGVmcz48ZyBpZD0iU3ZnanNHMTAwOCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjY0IDE2NjQiIHdpZHRoPSIyODgiIGhlaWdodD0iMjg4Ij48cGF0aCBmaWxsPSIjYWRiNWJkIiBkPSJNMTE1MiA3MDRxMC0xODUtMTMxLjUtMzE2LjVUNzA0IDI1NlQzODcuNSAzODcuNVQyNTYgNzA0dDEzMS41IDMxNi41VDcwNCAxMTUydDMxNi41LTEzMS41VDExNTIgNzA0em01MTIgODMycTAgNTItMzggOTB0LTkwIDM4cS01NCAwLTkwLTM4bC0zNDMtMzQycS0xNzkgMTI0LTM5OSAxMjRxLTE0MyAwLTI3My41LTU1LjV0LTIyNS0xNTB0LTE1MC0yMjVUMCA3MDR0NTUuNS0yNzMuNXQxNTAtMjI1dDIyNS0xNTBUNzA0IDB0MjczLjUgNTUuNXQyMjUgMTUwdDE1MCAyMjVUMTQwOCA3MDRxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgY2xhc3M9ImNvbG9yY3VycmVudENvbG9yIHN2Z1NoYXBlIj48L3BhdGg+PC9zdmc+PC9nPjwvc3ZnPg==);
background-position:left var(--space-base) center;
background-repeat:no-repeat;
background-size:14px auto;
}
.osui-search .form-control[data-input]{
padding-left:var(--space-xl);
}
.osui-search span.osui-search__glass, .osui-search span.osui-search__glass-circle, .osui-search span.osui-search__glass-bar{
display:block;
-webkit-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.osui-search span.osui-search__glass{
height:22px;
left:var(--space-base);
margin-top:-11px;
position:absolute;
top:50%;
-webkit-transform:scale(0.7);
-ms-transform:scale(0.7);
transform:scale(0.7);
width:18px;
}
.osui-search span.osui-search__glass-circle{
border-radius:var(--border-radius-circle);
-webkit-box-shadow:inset 0 0 0 3px var(--color-neutral-6);
box-shadow:inset 0 0 0 3px var(--color-neutral-6);
height:16px;
position:absolute;
top:0;
width:16px;
}
.osui-search span.osui-search__glass-bar{
background-color:var(--color-neutral-6);
bottom:0;
height:10px;
position:absolute;
right:0;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
width:3px;
}
.form .osui-search input[data-input]{
margin-bottom:var(--space-none);
}
Expand All @@ -10335,70 +10304,6 @@ body.vscomp-popup-active .vscomp-wrapper{
border:var(--border-size-none);
padding-left:var(--space-xl);
}
.layout-native .header-right .osui-search--native.osui-search{
background-color:transparent;
padding:var(--space-none);
position:static;
}
.layout-native .header-right .osui-search--native.osui-search.osui-search--is-open .osui-search__input{
-webkit-transform:translate(0, 0);
-ms-transform:translate(0, 0);
transform:translate(0, 0);
}
.layout-native .header-right .osui-search--native.osui-search.osui-search--is-open .osui-search__glass-button span.osui-search__glass-circle{
border-radius:var(--border-radius-none);
height:22px;
-webkit-transform:translateX(8px) rotate(135deg);
-ms-transform:translateX(8px) rotate(135deg);
transform:translateX(8px) rotate(135deg);
width:3px;
}
.layout-native .header-right .osui-search--native.osui-search.osui-search--is-open .osui-search__glass-button span.osui-search__glass-bar{
height:22px;
-webkit-transform:translateX(-8px) rotate(45deg);
-ms-transform:translateX(-8px) rotate(45deg);
transform:translateX(-8px) rotate(45deg);
}
.layout-native .header-right .osui-search--native.osui-search.osui-search--is-open span.osui-search__glass{
-webkit-transform:translateY(-24px) scale(0.7);
-ms-transform:translateY(-24px) scale(0.7);
transform:translateY(-24px) scale(0.7);
}
.layout-native .header-right .osui-search--native.osui-search span.osui-search__glass{
-webkit-transform:translateY(-300%) scale(0.7);
-ms-transform:translateY(-300%) scale(0.7);
transform:translateY(-300%) scale(0.7);
}
.layout-native .header-right .osui-search--native .osui-search__glass-button{
height:22px;
position:relative;
width:19px;
}
.layout-native .header-right .osui-search--native .osui-search__input{
left:var(--os-safe-area-left);
position:absolute;
right:0;
top:var(--os-safe-area-top);
-webkit-transform:translate(0, calc(-100% - var(--os-safe-area-top)));
-ms-transform:translate(0, calc(-100% - var(--os-safe-area-top)));
transform:translate(0, calc(-100% - var(--os-safe-area-top)));
-webkit-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.layout-native .header-right .osui-search--native .osui-search__input input[data-input], .layout-native .header-right .osui-search--native .osui-search__input input[data-input]:empty{
height:var(--header-size);
padding:var(--space-none) var(--space-xl);
-webkit-transition:none;
-o-transition:none;
transition:none;
}
.layout-native .header-right .osui-search--native .osui-search__input input[data-input]:focus{
border-bottom:var(--border-size-s) solid transparent;
}
.layout-native .header-right .osui-search--native .osui-search__input ::-webkit-input-placeholder{
color:var(--color-neutral-6);
}
.layout-native .header-content .osui-search input[data-input], .layout-native .header-content .osui-search input[data-input]:empty{
border-radius:var(--border-radius-none);
}
Expand Down
36 changes: 0 additions & 36 deletions dist/OutSystemsUI.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2874,52 +2874,20 @@ declare namespace OSFramework.OSUI.Patterns.Rating {
constructor(config: JSON);
}
}
declare namespace OSFramework.OSUI.Patterns.Search.Enum {
enum CssClass {
Pattern = "osui-search",
PatternGlassBar = "osui-search__glass-bar",
PatternGlassButton = "osui-search__glass-button",
PatternGlassCircle = "osui-search__glass-circle",
PatternInput = "osui-search__input",
PatternIsOpen = "osui-search--is-open",
PatternNative = "osui-search--native"
}
enum AriaLabel {
Close = "Close search",
Open = "Open search"
}
}
declare namespace OSFramework.OSUI.Patterns.Search {
interface ISearch extends Interface.IPattern {
IsNativeEnabled: boolean;
IsOpen: boolean;
enableNativeBehavior(): void;
setAriaLabel(openAriaLabel: string, closeAriaLabel: string): void;
}
}
declare namespace OSFramework.OSUI.Patterns.Search {
class Search extends AbstractPattern<SearchConfig> implements ISearch {
private _enableNative;
private _isOpen;
private _searchCloseAriaLabel;
private _searchGlassButton;
private _searchInput;
private _searchOpenAriaLabel;
constructor(uniqueId: string, configs: JSON);
private _nativeSearchBehavior;
private _removeEvents;
private _toggleNativeSearch;
protected setA11YProperties(): void;
protected setCallbacks(): void;
protected setHtmlElements(): void;
protected unsetCallbacks(): void;
protected unsetHtmlElements(): void;
build(): void;
dispose(): void;
enableNativeBehavior(): void;
setAriaLabel(openAriaLabel: string, closeAriaLabel: string): void;
get IsNativeEnabled(): boolean;
get IsOpen(): boolean;
}
}
declare namespace OSFramework.OSUI.Patterns.Search {
Expand Down Expand Up @@ -4066,8 +4034,6 @@ declare namespace OutSystems.OSUI.ErrorCodes {
FailChangeProperty: string;
FailDispose: string;
FailRegisterCallback: string;
FailEnableNativeBehavior: string;
FailUpdateGlassButtonAriaLabel: string;
};
const SectionIndexItem: {
FailChangeProperty: string;
Expand Down Expand Up @@ -4445,8 +4411,6 @@ declare namespace OutSystems.OSUI.Patterns.SearchAPI {
function GetSearchById(searchId: string): OSFramework.OSUI.Patterns.Search.ISearch;
function Initialize(searchId: string): OSFramework.OSUI.Patterns.Search.ISearch;
function RegisterCallback(searchId: string, eventName: string, callback: OSFramework.OSUI.GlobalCallbacks.OSGeneric): string;
function EnableNativeBehavior(searchId: string): string;
function UpdateGlassButtonAriaLabel(searchId: string, openAriaLabel: string, closeAriaLabel: string): string;
}
declare namespace OutSystems.OSUI.Patterns.SectionIndexAPI {
function ChangeProperty(sectionIndexId: string, propertyName: string, propertyValue: any): string;
Expand Down
123 changes: 1 addition & 122 deletions dist/OutSystemsUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8624,36 +8624,6 @@ var OSFramework;
})(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {}));
})(OSFramework || (OSFramework = {}));
var OSFramework;
(function (OSFramework) {
var OSUI;
(function (OSUI) {
var Patterns;
(function (Patterns) {
var Search;
(function (Search) {
var Enum;
(function (Enum) {
let CssClass;
(function (CssClass) {
CssClass["Pattern"] = "osui-search";
CssClass["PatternGlassBar"] = "osui-search__glass-bar";
CssClass["PatternGlassButton"] = "osui-search__glass-button";
CssClass["PatternGlassCircle"] = "osui-search__glass-circle";
CssClass["PatternInput"] = "osui-search__input";
CssClass["PatternIsOpen"] = "osui-search--is-open";
CssClass["PatternNative"] = "osui-search--native";
})(CssClass = Enum.CssClass || (Enum.CssClass = {}));
let AriaLabel;
(function (AriaLabel) {
AriaLabel["Close"] = "Close search";
AriaLabel["Open"] = "Open search";
})(AriaLabel = Enum.AriaLabel || (Enum.AriaLabel = {}));
})(Enum = Search.Enum || (Search.Enum = {}));
})(Search = Patterns.Search || (Patterns.Search = {}));
})(Patterns = OSUI.Patterns || (OSUI.Patterns = {}));
})(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {}));
})(OSFramework || (OSFramework = {}));
var OSFramework;
(function (OSFramework) {
var OSUI;
(function (OSUI) {
Expand All @@ -8664,52 +8634,6 @@ var OSFramework;
class Search extends Patterns.AbstractPattern {
constructor(uniqueId, configs) {
super(uniqueId, new Search_1.SearchConfig(configs));
this._enableNative = false;
this._isOpen = false;
}
_nativeSearchBehavior() {
this._enableNative = true;
this.selfElement.classList.add(Search_1.Enum.CssClass.PatternNative);
this._searchInput = OSUI.Helper.Dom.TagSelector(this.selfElement, OSFramework.OSUI.GlobalEnum.HTMLElement.Input);
this._searchGlassButton = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Div);
this._searchGlassButton.classList.add(Search_1.Enum.CssClass.PatternGlassButton);
this.selfElement.appendChild(this._searchGlassButton);
OSUI.Helper.A11Y.TabIndexFalse(this._searchInput);
OSUI.Helper.A11Y.TabIndexTrue(this._searchGlassButton);
OSUI.Helper.A11Y.RoleButton(this._searchGlassButton);
OSUI.Helper.A11Y.AriaExpandedFalse(this._searchGlassButton);
OSUI.Helper.A11Y.AriaLabel(this._searchGlassButton, this._searchOpenAriaLabel === undefined ? Search_1.Enum.AriaLabel.Open : this._searchOpenAriaLabel);
const glassCircle = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Span);
const glassBar = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Span);
glassCircle.classList.add(Search_1.Enum.CssClass.PatternGlassCircle);
glassBar.classList.add(Search_1.Enum.CssClass.PatternGlassBar);
this._searchGlassButton.appendChild(glassCircle);
this._searchGlassButton.appendChild(glassBar);
this._searchGlassButton.addEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._toggleNativeSearch.bind(this));
}
_removeEvents() {
this._searchGlassButton.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._toggleNativeSearch);
}
_toggleNativeSearch() {
if (this._isOpen) {
this.selfElement.classList.remove(Search_1.Enum.CssClass.PatternIsOpen);
OSUI.Helper.A11Y.TabIndexFalse(this._searchInput);
OSUI.Helper.A11Y.AriaExpandedFalse(this._searchGlassButton);
OSUI.Helper.A11Y.AriaLabel(this._searchGlassButton, this._searchOpenAriaLabel === undefined ? Search_1.Enum.AriaLabel.Open : this._searchOpenAriaLabel);
this._isOpen = false;
}
else {
if (this._searchInput && this._searchInput.value === '') {
OSFramework.OSUI.Helper.ApplySetTimeOut(() => {
this._searchInput.focus();
}, 300);
}
this.selfElement.classList.add(Search_1.Enum.CssClass.PatternIsOpen);
OSUI.Helper.A11Y.TabIndexTrue(this._searchInput);
OSUI.Helper.A11Y.AriaExpandedTrue(this._searchGlassButton);
OSUI.Helper.A11Y.AriaLabel(this._searchGlassButton, this._searchCloseAriaLabel === undefined ? Search_1.Enum.AriaLabel.Close : this._searchCloseAriaLabel);
this._isOpen = true;
}
}
setA11YProperties() {
console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented);
Expand All @@ -8724,38 +8648,17 @@ var OSFramework;
console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented);
}
unsetHtmlElements() {
this._searchGlassButton = undefined;
this._searchInput = undefined;
console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented);
}
build() {
super.build();
this.finishBuild();
}
dispose() {
if (this.isBuilt) {
if (this._enableNative) {
this._removeEvents();
this.unsetHtmlElements();
}
super.dispose();
}
}
enableNativeBehavior() {
this._nativeSearchBehavior();
}
setAriaLabel(openAriaLabel, closeAriaLabel) {
if (this._searchGlassButton) {
this._searchOpenAriaLabel = openAriaLabel;
this._searchCloseAriaLabel = closeAriaLabel;
OSUI.Helper.A11Y.AriaLabel(this._searchGlassButton, this._searchOpenAriaLabel);
}
}
get IsNativeEnabled() {
return this._enableNative;
}
get IsOpen() {
return this._isOpen;
}
}
Search_1.Search = Search;
})(Search = Patterns.Search || (Patterns.Search = {}));
Expand Down Expand Up @@ -12366,8 +12269,6 @@ var OutSystems;
FailChangeProperty: 'OSUI-API-20001',
FailDispose: 'OSUI-API-20002',
FailRegisterCallback: 'OSUI-API-20003',
FailEnableNativeBehavior: 'OSUI-API-20004',
FailUpdateGlassButtonAriaLabel: 'OSUI-API-20005',
};
ErrorCodes.SectionIndexItem = {
FailChangeProperty: 'OSUI-API-21001',
Expand Down Expand Up @@ -14692,28 +14593,6 @@ var OutSystems;
return result;
}
SearchAPI.RegisterCallback = RegisterCallback;
function EnableNativeBehavior(searchId) {
const result = OutSystems.OSUI.Utils.CreateApiResponse({
errorCode: OSUI.ErrorCodes.Search.FailEnableNativeBehavior,
callback: () => {
const search = this.GetSearchById(searchId);
search.enableNativeBehavior();
},
});
return result;
}
SearchAPI.EnableNativeBehavior = EnableNativeBehavior;
function UpdateGlassButtonAriaLabel(searchId, openAriaLabel, closeAriaLabel) {
const result = OutSystems.OSUI.Utils.CreateApiResponse({
errorCode: OSUI.ErrorCodes.Search.FailUpdateGlassButtonAriaLabel,
callback: () => {
const search = this.GetSearchById(searchId);
search.setAriaLabel(openAriaLabel, closeAriaLabel);
},
});
return result;
}
SearchAPI.UpdateGlassButtonAriaLabel = UpdateGlassButtonAriaLabel;
})(SearchAPI = Patterns.SearchAPI || (Patterns.SearchAPI = {}));
})(Patterns = OSUI.Patterns || (OSUI.Patterns = {}));
})(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {}));
Expand Down
Empty file removed src/scripts/OSFramework/OSUI/Pattern/Search/Callbacks.ts
View file
Empty file.
22 changes: 0 additions & 22 deletions src/scripts/OSFramework/OSUI/Pattern/Search/Enum.ts
View file

This file was deleted.

Loading

0 comments on commit e2f76b3

Please sign in to comment.