Skip to content

Commit 62a3dc0

Browse files
IvayloGIvayloG
committed
chore(select): Update css class structure #5911
Update sample, Cleanup code.
1 parent 69111d6 commit 62a3dc0

File tree

8 files changed

+75
-173
lines changed

8 files changed

+75
-173
lines changed

‎projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,4 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBase implements DoC
8484
this.dropDown.selectItem(this, event);
8585
}
8686
}
87-
8887
}

‎projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts

+40-64
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// tslint:disable: max-line-length
2-
31
import { VerticalAlignment, HorizontalAlignment, PositionSettings, Size, Point, Util } from '../services/overlay/utilities';
42
import { IPositionStrategy } from '../services/overlay/position';
53
import { fadeOut, fadeIn } from '../animations/main';
@@ -27,45 +25,32 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
2725
this.settings = Object.assign({}, this._selectDefaultSettings, settings);
2826
}
2927

30-
// TODO: Get this dynamically from styles?
31-
private get getItemPaddingBasedOnDisplayDensity(): number {
32-
switch (this.select.displayDensity) {
33-
case DisplayDensity.compact:
34-
return 16;
35-
case DisplayDensity.cosy:
36-
return 20;
37-
case DisplayDensity.comfortable:
38-
return 24;
39-
default: return 24;
40-
}
41-
}
42-
// private viewPort = Util.getViewportRect(document); // in SelectFit
43-
// private ddl = this.select.getListItemsContainer(); // in SelectFit
44-
private itemElement = this.getInteractionItemElement();
45-
private itemBoundRect = this.itemElement.getBoundingClientRect() as DOMRect;
46-
private itemHeight = this.itemBoundRect.height;
28+
// private itemElement = this.getInteractionItemElement();
29+
// private itemBoundRect = this.itemElement.getBoundingClientRect() as DOMRect;
4730

48-
private nyOffset = 0;
49-
private nxOffset = 0;
50-
private nstyles: SelectStyles = { };
51-
private nInitialCall: boolean;
31+
32+
// Global variables required for cases of !initialCall (page scroll/overlay repositionAll)
33+
private global_yOffset = 0;
34+
private global_xOffset = 0;
35+
private global_styles: SelectStyles = {};
5236

5337
position(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean): void {
54-
// 1st: Check if the interaction item is visible. If NO it should be scrolled in view. Adjust the new container position with the scrolled amount and store it.
38+
// 1st: Check if the interaction item is visible. If NO it should be scrolled in view.
39+
// Adjust the new container position with the scrolled amount.
5540
// 2nd: Try position the container after the item is scrolled.
5641
// 3rd: If unsuccessful, position the overlay container on TOP/ABOVE or BOTTOM/BELLOW of the input. BOTTOM/BELLOW is preferred.
42+
// 4th: On page scroll, persist the ddl container position relative to its target element.
5743

58-
// is it OK to use a method for this and keeps all stuff in Obj, instead of global vars initialized on the go when needed?
5944
const rects = super.calculateElementRectangles(contentElement);
60-
45+
// selectFit obj, to be used for both cases of initialCall and !initialCall(page scroll/overlay repositionAll)
6146
const selectFit: SelectFit = {
62-
yOffset: this.nyOffset, xOffset: this.nxOffset, targetRect: rects.targetRect,
63-
contentElementRect: rects.elementRect, styles: this.nstyles
47+
yOffset: this.global_yOffset, xOffset: this.global_xOffset,
48+
targetRect: rects.targetRect,
49+
contentElementRect: rects.elementRect,
50+
styles: this.global_styles
6451
};
6552

66-
this.nInitialCall = false;
6753
if (initialCall) {
68-
this.nInitialCall = true;
6954
selectFit.viewPortRect = Util.getViewportRect(document);
7055

7156
// Fill in the required selectFit object properties.
@@ -81,13 +66,12 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
8166

8267
super.updateViewPortFit(selectFit);
8368
if (!selectFit.fitVertical) {
84-
this.fitInViewport(contentElement, selectFit); // TODO: Cleanup Not really using contentElement
69+
this.fitInViewport(contentElement, selectFit);
8570
}
8671
}
87-
this.setStyles(contentElement, selectFit);
72+
this.setStyles(contentElement, selectFit, initialCall);
8873
}
8974

90-
// TODO: can be a getter but needs access to an exposed selectFit object //can't be passed as a param
9175
public itemIsInvisible(selectFit: SelectFit) {
9276
return selectFit.itemElement.getBoundingClientRect().top >= selectFit.dropDownList.getBoundingClientRect().bottom ||
9377
selectFit.itemElement.getBoundingClientRect().bottom <= selectFit.dropDownList.getBoundingClientRect().top;
@@ -127,7 +111,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
127111
// This method can be scrambled and combined in manageScrollToItem()
128112
private compensateYScroll(selectFit: SelectFit, compensation: number ) {
129113
selectFit.yOffset += compensation;
130-
this.nyOffset = selectFit.yOffset;
114+
this.global_yOffset = selectFit.yOffset;
131115
}
132116

133117
// Position the items outer container Below or Above the input.
@@ -136,36 +120,39 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
136120
if (this.canFitBelowInput(selectFit) && this.canFitAboveInput(selectFit) ||
137121
!this.canFitAboveInput(selectFit)) {
138122
// Calculate container starting point;
139-
selectFit.top = selectFit.targetRect.top - selectFit.styles.itemTextToInputTextDiff; // TODO: modify the yOffset instead & use one call to super.setStyle
123+
// TODO: modify the yOffset instead & use one call to super.setStyle
124+
selectFit.top = selectFit.targetRect.top - selectFit.styles.itemTextToInputTextDiff;
140125

141-
} else { // Position Select component's container above target/input
126+
} else {
127+
// Position Select component's container above target/input
128+
// TODO: modify the yOffset instead & use one call to super.setStyle
142129
selectFit.top = selectFit.targetRect.bottom + selectFit.styles.itemTextToInputTextDiff -
143-
selectFit.contentElementRect.height; // TODO: modify the yOffset instead & use one call to super.setStyle
144-
}
130+
selectFit.contentElementRect.height;
131+
}
145132
}
146133

147134
protected canFitBelowInput(selectFit: SelectFit): boolean {
148-
selectFit.top = selectFit.targetRect.top - selectFit.styles.itemTextToInputTextDiff;
149-
return selectFit.targetRect.top - selectFit.styles.itemTextToInputTextDiff + selectFit.contentElementRect.height < selectFit.viewPortRect.bottom;
135+
return selectFit.targetRect.top - selectFit.styles.itemTextToInputTextDiff + selectFit.contentElementRect.height <
136+
selectFit.viewPortRect.bottom;
150137
}
151138

152139
protected canFitAboveInput(selectFit: SelectFit): boolean {
153140
return selectFit.targetRect.bottom + selectFit.styles.itemTextToInputTextDiff -
154141
selectFit.contentElementRect.height > selectFit.viewPortRect.top;
155142
}
156143

157-
protected setStyles(contentElement: HTMLElement, selectFit: SelectFit) {
144+
protected setStyles(contentElement: HTMLElement, selectFit: SelectFit, initialCall?: boolean) {
158145
// The Select component's container is about to be displayed. Set its position.
159-
if (this.nInitialCall) {
146+
if (initialCall) {
160147
contentElement.style.top = `${selectFit.top}px`;
161148
contentElement.style.left = `${selectFit.left}px`;
162149
// Page's View Window container is scrolled. Reposition Select's container.
163-
} else if (this.nInitialCall === false) {
164-
super.setStyle(contentElement, selectFit.targetRect, selectFit.contentElementRect, selectFit); // TODO Cleanup? passing too much stuff;
150+
} else {
151+
super.setStyle(contentElement, selectFit.targetRect, selectFit.contentElementRect, selectFit);
165152
}
166153

167-
this.nstyles.contentElementNewWidth = selectFit.styles.contentElementNewWidth;
168154
contentElement.style.width = `${selectFit.styles.contentElementNewWidth}px`; // manage container based on paddings?
155+
this.global_styles.contentElementNewWidth = selectFit.styles.contentElementNewWidth;
169156
}
170157

171158
private calculateVariables(contentElement: HTMLElement, selectFit: SelectFit) {
@@ -178,24 +165,11 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
178165
selectFit.dropDownList = this.select.getListItemsContainer();
179166
selectFit.targetRect = targetRect;
180167
selectFit.contentElementRect = contentElementRect;
181-
// selectFit.inputElement = this._selectDefaultSettings.target; // TODO Get as Point target is used update to getEditElement();
182168
selectFit.inputElement = this.select.getEditElement();
183169
// Calculate input and selected item elements style related variables
184170
this.calculateStyles(selectFit);
185-
186171
}
187172

188-
// private getItemPaddingBasedOnDisplayDensity(): number {
189-
// switch (this.select.displayDensity) {
190-
// case DisplayDensity.compact:
191-
// return 16;
192-
// case DisplayDensity.cosy:
193-
// return 20;
194-
// case DisplayDensity.comfortable:
195-
// return 24;
196-
// default: return 24;
197-
// }
198-
// }
199173
public calculateStyles(selectFit: SelectFit) {
200174
const inputFontSize = window.getComputedStyle(selectFit.inputElement).fontSize;
201175
const numericInputFontSize = parseFloat(inputFontSize);
@@ -210,15 +184,15 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
210184
) / 2;
211185
selectFit.styles.itemTextToInputTextDiff = Math.ceil(itemTextToItemTop - inputTextToInputTop + negateInputPaddings);
212186

213-
const selectItemPaddingHorizontal = this.getItemPaddingBasedOnDisplayDensity; //24; //maybe get this from styles directly instead of hardoding it //16px/20px/24px based on DisplayDensty // TODO: Get it dinamicaly from styles
214187
const itemLeftPadding = window.getComputedStyle(selectFit.itemElement).paddingLeft;
215188
const itemTextIndent = window.getComputedStyle(selectFit.itemElement).textIndent;
216189
const numericLeftPadding = parseFloat(itemLeftPadding);
217190
const numericTextIndent = parseFloat(itemTextIndent);
218191

219192
selectFit.styles.itemTextPadding = numericLeftPadding;
220193
selectFit.styles.itemTextIndent = numericTextIndent;
221-
selectFit.styles.contentElementNewWidth = selectFit.targetRect.width + 24 + selectItemPaddingHorizontal * 2; // 24 is the input dd icon width
194+
// 24 is the input's toggle ddl icon width
195+
selectFit.styles.contentElementNewWidth = selectFit.targetRect.width + 24 + numericLeftPadding * 2;
222196
}
223197

224198
private getInteractionItemElement(): HTMLElement {
@@ -237,13 +211,14 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
237211

238212
protected calculateYoffset(selectFit: SelectFit) {
239213
const contentElementTopLeftPointY = selectFit.contentElementRect.top;
240-
selectFit.yOffset = -(selectFit.itemElement.getBoundingClientRect().top - contentElementTopLeftPointY + selectFit.styles.itemTextToInputTextDiff);
241-
this.nyOffset = selectFit.yOffset;
214+
selectFit.yOffset =
215+
-(selectFit.itemElement.getBoundingClientRect().top - contentElementTopLeftPointY + selectFit.styles.itemTextToInputTextDiff);
216+
this.global_yOffset = selectFit.yOffset;
242217
}
243218

244219
protected calculateXoffset(selectFit: SelectFit) {
245220
selectFit.xOffset = selectFit.styles.itemTextIndent - selectFit.styles.itemTextPadding;
246-
this.nxOffset = selectFit.xOffset;
221+
this.global_xOffset = selectFit.xOffset;
247222
}
248223
}
249224

@@ -264,7 +239,7 @@ export interface SelectFit extends ConnectedFit {
264239
inputElement?: HTMLElement;
265240
dropDownList?: HTMLElement;
266241
itemElement?: HTMLElement;
267-
itemHeight?: number; // TODO: Can reduce code and use inputElement directly, Yet code is more readable with itemHeight
242+
itemHeight?: number;
268243
styles?: SelectStyles;
269244
}
270245

@@ -274,5 +249,6 @@ export interface SelectStyles {
274249
itemTextToInputTextDiff?: number;
275250
contentElementNewWidth?: number;
276251
displayDensity?: DisplayDensity | string;
252+
numericLeftPadding?: number;
277253
}
278254

‎projects/igniteui-angular/src/lib/select/select.common.ts

-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { IgxDropDownBase, IgxDropDownItemBase } from '../drop-down';
22
import { OverlaySettings } from '../services';
33
import { IgxInputDirective } from '../input-group';
4-
import { TemplateRef } from '@angular/core';
54

65
/** @hidden @internal */
76
export interface IgxSelectBase extends IgxDropDownBase {
@@ -13,9 +12,5 @@ export interface IgxSelectBase extends IgxDropDownBase {
1312
calculateScrollPosition(item: IgxDropDownItemBase): number;
1413
getFirstItemElement(): HTMLElement;
1514
getListItemsContainer(): HTMLElement;
16-
getHeaderContainer(): HTMLElement;
17-
getFooterContainer(): HTMLElement;
18-
getHeaderTemplate(): TemplateRef<any> ;
19-
getFooterTemplate(): TemplateRef<any> ;
2015
getEditElement(): HTMLElement; // returns input HTMLElement
2116
}

‎projects/igniteui-angular/src/lib/select/select.component.html

+28-74
Original file line numberDiff line numberDiff line change
@@ -5,88 +5,42 @@
55
<ng-container ngProjectAs="igx-prefix">
66
<ng-content select="igx-prefix,[igxPrefix]"></ng-content>
77
</ng-container>
8-
<input #input class="input" type="text" igxInput [igxSelectItemNavigation]="this"
9-
readonly="true"
10-
[attr.placeholder]="this.placeholder"
11-
[value]="this.selectionValue"
12-
role="combobox"
13-
aria-haspopup="listbox"
14-
[attr.aria-labelledby]="this.label ? this.label.id : ''"
15-
[attr.aria-expanded]="!this.collapsed"
16-
[attr.aria-owns]="this.listId"
17-
[attr.aria-activedescendant]="!this.collapsed ? this.focusedItem?.id : null"
18-
(blur)="onBlur()"
19-
/>
20-
<ng-container ngProjectAs="igx-suffix">
8+
<input #input class="input" type="text" igxInput [igxSelectItemNavigation]="this"
9+
readonly="true"
10+
[attr.placeholder]="this.placeholder"
11+
[value]="this.selectionValue"
12+
role="combobox"
13+
aria-haspopup="listbox"
14+
[attr.aria-labelledby]="this.label ? this.label.id : ''"
15+
[attr.aria-expanded]="!this.collapsed"
16+
[attr.aria-owns]="this.listId"
17+
[attr.aria-activedescendant]="!this.collapsed ? this.focusedItem?.id : null"
18+
(blur)="onBlur()"
19+
/>
20+
<ng-container ngProjectAs="igx-suffix">
2121
<ng-content select="igx-suffix,[igxSuffix]"></ng-content>
22-
</ng-container>
23-
<igx-suffix>
22+
</ng-container>
23+
<igx-suffix>
2424
<ng-container *ngIf="toggleIconTemplate">
2525
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
2626
</ng-container>
2727
<igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
28-
</igx-suffix>
29-
</igx-input-group>
30-
31-
<!-- Version 3 -->
32-
<div igxToggle class="igx-drop-down__list--select"
33-
(mousedown)="mousedownHandler($event);"
34-
(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
35-
(onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
36-
<ng-content *ngTemplateOutlet="headerTemplate">
37-
</ng-content>
38-
39-
<div #scrollContainer class="igx-drop-down__list-inner--select" style="overflow-y: auto;" [style.maxHeight]="maxHeight" [attr.id]="this.listId" role="listbox">
40-
<ng-content select="igx-select-item, igx-select-item-group">
41-
</ng-content>
42-
</div>
28+
</igx-suffix>
29+
</igx-input-group>
30+
<div igxToggle class="igx-drop-down-wrapper" (mousedown)="mousedownHandler($event);" (onOpening)="onToggleOpening($event)"
31+
(onOpened)="onToggleOpened()" (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
4332

44-
<ng-container *ngTemplateOutlet="footerTemplate">
45-
</ng-container>
33+
<div *ngIf="headerTemplate" class="igx-drop-down-wrapper__header">
34+
<ng-content *ngTemplateOutlet="headerTemplate"></ng-content>
4635
</div>
4736

48-
49-
<!-- Version 2 -->
50-
<!-- <div class="igx-drop-down__list--select" igxToggle [style.maxHeight]="maxHeight"
51-
(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
52-
(onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
53-
<ng-content *ngTemplateOutlet="headerTemplate">
54-
</ng-content>
55-
56-
<div [attr.id]="this.listId" role="listbox">
57-
<ng-content select="igx-select-item, igx-select-item-group">
58-
</ng-content>
59-
</div>
60-
61-
<ng-container *ngTemplateOutlet="footerTemplate">
62-
</ng-container>
63-
</div> -->
64-
65-
66-
67-
<!-- Version 1 -->
68-
<!-- <div class="igx-drop-down__list--select" igxToggle [style.maxHeight]="maxHeight"
69-
(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
70-
(onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
71-
<ng-container *ngIf="header">
72-
<ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate : headerBase;">
73-
</ng-container>
74-
</ng-container>
75-
76-
<div [attr.id]="this.listId" role="listbox">
37+
<div #scrollContainer class="igx-drop-down__list--select" style="overflow-y: auto;"
38+
[style.maxHeight]="maxHeight" [attr.id]="this.listId" role="listbox">
7739
<ng-content select="igx-select-item, igx-select-item-group">
7840
</ng-content>
79-
</div>
80-
<ng-container *ngIf="header">
81-
<ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate : headerBase;">
82-
</ng-container>
83-
</ng-container>
84-
</div> -->
85-
86-
41+
</div>
8742

88-
<!-- Combo -->
89-
<!-- <ng-container *ngTemplateOutlet="headerTemplate">
90-
</ng-container>
91-
<ng-container *ngTemplateOutlet="footerTemplate">
92-
</ng-container> -->
43+
<div *ngIf="footerTemplate" class="igx-drop-down-wrapper__footer">
44+
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
45+
</div>
46+
</div>

‎projects/igniteui-angular/src/lib/select/select.component.ts

-20
Original file line numberDiff line numberDiff line change
@@ -317,26 +317,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
317317
return this.getFirstItemElement().parentElement;
318318
}
319319

320-
/** @hidden @internal */
321-
public getHeaderContainer(): HTMLElement {
322-
return this.headerTemplate ? this.headerTemplate.elementRef.nativeElement : null;
323-
}
324-
325-
/** @hidden @internal */
326-
public getFooterContainer(): HTMLElement {
327-
return this.footerTemplate ? this.footerTemplate.elementRef.nativeElement : null;
328-
}
329-
330-
/** @hidden @internal */
331-
public getHeaderTemplate(): TemplateRef<any> {
332-
return this.headerTemplate ? this.headerTemplate : null;
333-
}
334-
335-
/** @hidden @internal */
336-
public getFooterTemplate(): TemplateRef<any> {
337-
return this.footerTemplate ? this.footerTemplate : null;
338-
}
339-
340320
/**
341321
* Opens the select
342322
*

0 commit comments

Comments
 (0)