Skip to content

Commit

Permalink
Adaptive container enhancements (#6833)
Browse files Browse the repository at this point in the history 
* adaptive-container-enhancements

* add hideFirst option

* fixed action item remove priority

* adaptivity enhancements
need for surveyjs/survey-creator#4354

* fixed markup etalons

---------

Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
  • Loading branch information
@novikov82
novikov82 and Aleksey Novikov committed Aug 30, 2023
1 parent 105a266 commit f619bc3
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 12 deletions.
23 changes: 17 additions & 6 deletions src/actions/adaptive-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,30 @@ export class AdaptiveActionContainer<T extends Action = Action> extends ActionCo
public isResponsivenessDisabled = false;

private hideItemsGreaterN(visibleItemsCount: number) {
const actionsToHide = this.visibleActions.filter(action => !action.disableHide);
const actionsToHide = this.getActionsToHide();
visibleItemsCount = Math.max(visibleItemsCount, this.minVisibleItemsCount - (this.visibleActions.length - actionsToHide.length));
const hiddenItems: IAction[] = [];
actionsToHide.forEach((item) => {
if (visibleItemsCount <= 0) {
item.mode = "popup";
hiddenItems.push(item.innerItem);
if(item.removePriority) {
item.mode = "removed";
} else {
item.mode = "popup";
hiddenItems.push(item.innerItem);
}
}
visibleItemsCount--;
});
this.hiddenItemsListModel.setItems(hiddenItems);
}

private getActionsToHide() {
return this.visibleActions.filter(action => !action.disableHide).sort((a, b) => a.removePriority || 0 - b.removePriority || 0);
}

private getVisibleItemsCount(availableSize: number): number {
this.visibleActions.filter((action) => action.disableHide).forEach(action => availableSize -= action.minDimension);
const itemsSizes: number[] = this.visibleActions.filter(action => !action.disableHide).map((item) => item.minDimension);
const itemsSizes: number[] = this.getActionsToHide().map((item) => item.minDimension);
let currSize: number = 0;
for (var i = 0; i < itemsSizes.length; i++) {
currSize += itemsSizes[i];
Expand Down Expand Up @@ -127,7 +135,7 @@ export class AdaptiveActionContainer<T extends Action = Action> extends ActionCo
} else if (dimension < minSize) {
this.setActionsMode("small");
this.hideItemsGreaterN(this.getVisibleItemsCount(dimension - dotsItemSize));
this.dotsItem.visible = true;
this.dotsItem.visible = !!this.hiddenItemsListModel.actions.length;
} else {
this.updateItemMode(dimension, maxSize);
}
Expand All @@ -145,7 +153,10 @@ export class AdaptiveActionContainer<T extends Action = Action> extends ActionCo
}
}
public setActionsMode(mode: actionModeType) {
this.actions.forEach((action) => (action.mode = mode));
this.actions.forEach((action) => {
if(mode == "small" && action.disableShrink) return;
action.mode = mode;
});
}
public dispose(): void {
super.dispose();
Expand Down
1 change: 1 addition & 0 deletions src/actions/container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export let defaultActionBarCss = {
defaultSizeMode: "sv-action-bar--default-size-mode",
smallSizeMode: "sv-action-bar--small-size-mode",
item: "sv-action-bar-item",
itemAsIcon: "sv-action-bar-item--icon",
itemActive: "sv-action-bar-item--active",
itemPressed: "sv-action-bar-item--pressed",
itemIcon: "sv-action-bar-item__icon",
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<div class="sv-action-bar sv-action-bar--default-size-mode">
<div class="sv-action" id="prevPage">
<div class="sv-action__content">
<button class="sv-action-bar-item" role="button" tabindex="0" type="button">
<button class="sv-action-bar-item sv-action-bar-item--icon" role="button" tabindex="0" type="button">
<svg class="sv-action-bar-item__icon sv-svg-icon" role="img" style="height:16px; width:16px;">
<use xlink:href="#icon-arrowleft" class="">
</use>
Expand All @@ -47,7 +47,7 @@
</div>
<div class="sv-action" id="nextPage">
<div class="sv-action__content">
<button class="sv-action-bar-item" role="button" tabindex="0" type="button">
<button class="sv-action-bar-item sv-action-bar-item--icon" role="button" tabindex="0" type="button">
<svg class="sv-action-bar-item__icon sv-svg-icon" role="img" style="height:16px; width:16px;">
<use xlink:href="#icon-arrowright" class="">
</use>
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/file-mob2-zip-png.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
<div class="sv-action-bar sv-action-bar--default-size-mode">
<div class="sv-action" id="prevPage">
<div class="sv-action__content">
<button class="sv-action-bar-item" role="button" tabindex="0" type="button">
<button class="sv-action-bar-item sv-action-bar-item--icon" role="button" tabindex="0" type="button">
<svg class="sv-action-bar-item__icon sv-svg-icon" role="img" style="height:16px; width:16px;">
<use xlink:href="#icon-arrowleft" class="">
</use>
Expand All @@ -79,7 +79,7 @@
</div>
<div class="sv-action" id="nextPage">
<div class="sv-action__content">
<button class="sv-action-bar-item" role="button" tabindex="0" type="button">
<button class="sv-action-bar-item sv-action-bar-item--icon" role="button" tabindex="0" type="button">
<svg class="sv-action-bar-item__icon sv-svg-icon" role="img" style="height:16px; width:16px;">
<use xlink:href="#icon-arrowright" class="">
</use>
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
<div class="sv-action sv-action--hidden sv-dots">
<div class="sv-action__content">
<button class="sv-action-bar-item sv-dots__item" role="button" tabindex="0" title="More" type="button">
<button class="sv-action-bar-item sv-action-bar-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
<svg aria-label="More" class="sv-action-bar-item__icon sv-svg-icon" role="img" style="height:24px; width:24px;">
<use xlink:href="#icon-more" class="">
</use>
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
<div class="sv-action sv-action--hidden sv-dots">
<div class="sv-action__content">
<button class="sv-action-bar-item sv-dots__item" role="button" tabindex="0" title="More" type="button">
<button class="sv-action-bar-item sv-action-bar-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
<svg aria-label="More" class="sv-action-bar-item__icon sv-svg-icon" role="img" style="height:24px; width:24px;">
<use xlink:href="#icon-more" class="">
</use>
Expand Down
49 changes: 49 additions & 0 deletions tests/responsivityTests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,55 @@ QUnit.test("Fit items - hide if needed", function (assert) {
assert.equal(model.visibleActions[2].isVisible, true, "70 - visible 3");
});

QUnit.test("Fit items - hide items with priority", function (assert) {
const itemSmallWidth = 15;
const itemLargeWidth = 50;
const dotsItemSize = 10;
const model: AdaptiveActionContainer = new AdaptiveActionContainer();

const item1 = new Action(<any>{});
item1.minDimension = itemSmallWidth;
item1.maxDimension = itemLargeWidth;
item1.title = "a";
model.actions.push(item1);
const item2 = new Action(<any>{});
item2.minDimension = itemLargeWidth;
item2.disableShrink = true;
item2.maxDimension = itemLargeWidth;
item2.title = "b";
item2.removePriority = 1;
model.actions.push(item2);
const item3 = new Action(<any>{});
item3.minDimension = itemSmallWidth;
item3.maxDimension = itemLargeWidth;
item3.title = "c";
model.actions.push(item3);

assert.equal(model.actions.length, 3);
assert.equal(model.visibleActions.length, 3);

model.fit(300, dotsItemSize);
assert.equal(model.visibleActions.length, 3, "dimension 300");
assert.equal(model.visibleActions[0].isVisible, true, "300 - visible 1");
assert.equal(model.visibleActions[1].isVisible, true, "300 - visible 2");
assert.equal(model.visibleActions[2].isVisible, true, "300 - visible 3");
assert.equal(model.renderedActions[3].isVisible, false, "300 - dots hidden");

model.fit(78, dotsItemSize);
assert.equal(model.visibleActions.length, 3, "dimension 78");
assert.equal(model.visibleActions[0].isVisible, true, "78 - visible 1");
assert.equal(model.visibleActions[1].isVisible, false, "78 - invisible 2");
assert.equal(model.visibleActions[2].isVisible, true, "78 - visible 3");
assert.equal(model.renderedActions[3].isVisible, false, "78 - dots hidden");

model.fit(29, dotsItemSize);
assert.equal(model.visibleActions.length, 3, "dimension 29");
assert.equal(model.visibleActions[0].isVisible, true, "29 - visible 1");
assert.equal(model.visibleActions[1].isVisible, false, "29 - invisible 2");
assert.equal(model.visibleActions[2].isVisible, false, "29 - visible 3");
assert.equal(model.dotsItem.isVisible, true, "29 - dots visible");
});

QUnit.test("getAvailableSpace with content-box test", function (assert) {
const itemSmallWidth = 48;
const container: SimpleContainer = new SimpleContainer({
Expand Down

0 comments on commit f619bc3

Please sign in to comment.