<VBox class="topSection"
width="100%"
height="100%">
<IconTabHeader id="projectInfoIconTabBar"
class="innerIconTabBar"
mode="Inline"
select="onProjectTabPress">
<items>
<IconTabFilter key="edit-section-header" text="{i18n>section.header.subsection.info}" />
<IconTabFilter key="edit-section-description" text="{i18n>section.header.subsection.description}">
<items>
<IconTabFilter key="edit-section-description-needs" text="{i18n>section.header.subsection.description.needs}"/>
<IconTabFilter key="edit-section-description-projets" text="{i18n>section.header.subsection.description.project}"/>
<IconTabFilter key="edit-section-description-customer-benefits" text="{i18n>section.header.subsection.description.customersBenefits}"/>
</items>
</IconTabFilter>
<IconTabFilter key="edit-section-strategy" text="{i18n>section.header.strategy}"/>
<IconTabFilter key="edit-section-economie" text="{i18n>section.header.subsection.economic_data}"/>
</items>
<layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</layoutData>
</IconTabHeader>
<ScrollContainer id="projectInfoScrollContainer"
height="100%"
width="100%"
vertical="true" >
<!-- Header Info -->
<core:Fragment fragmentName="lu.cfl.ps.investmenthub.detail.view.page.edit.header_section" type="XML"/>
<!-- Descriptions -->
<core:Fragment fragmentName="lu.cfl.ps.investmenthub.detail.view.page.edit.description_section" type="XML"/>
<!-- Strategy -->
<core:Fragment fragmentName="lu.cfl.ps.investmenthub.detail.view.page.edit.strategy_section" type="XML"/>
<!-- Strategy -->
<core:Fragment fragmentName="lu.cfl.ps.investmenthub.detail.view.page.edit.economic_section" type="XML"/>
</ScrollContainer>
<layoutData>
<FlexItemData growFactor="1" baseSize="0%"></FlexItemData>
</layoutData>
</VBox>
/**
* @override
*/
onBeforeRendering() {
BaseController.prototype.onBeforeRendering.apply(this, arguments);
...
/** Register scroll listening event **/
this.byId("projectInfoScrollContainer").attachBrowserEvent("scroll", this.onScroll.bind(this));
},
/* * * * *\
* Event *
\* * * * */
/**
* Event: On scroll event
*
* @private
* @listens scroll
* @param {sap.ui.base.Event} oEvent - Event object
**/
onScroll: function(oEvent) {
const iconTabBar = this.byId("projectInfoIconTabBar");
const elementIds = ["edit-section-header",
"edit-section-description",
"edit-section-strategy",
"edit-section-economie"];
for (const elementId of elementIds) {
var element = this.byId(elementId)
if (element) {
var elementRef = element.$();
if (this.isElementInViewPort(elementRef)) {
if (iconTabBar.getSelectedKey() !== elementId) {
iconTabBar.setSelectedKey(elementId);
}
return;
}
}
}
},
/* * * * * *\
* Private *
\* * * * * */
/**
* Is element in view
*
* @private
* @param {Element} element - Is Element in view
**/
isElementInViewPort: function(element) {
// Source: https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport
// Special bonus for those using jQuery
if (typeof jQuery === "function" && element instanceof jQuery) {
element = element[0];
}
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
);
},