mirror of
https://github.com/datahub-project/datahub.git
synced 2025-08-10 10:17:58 +00:00
843a6c5bbb
* Releases updated version of datahub-web client UI code * Fix typo in yarn lock * Change yarn lock to match yarn registry directories * Previous commit missed some paths * Even more changes to yarnlock missing in previous commit * Include codegen file for typings * Add files to get parity for datahub-web and current OS datahub-midtier * Add in typo fix from previous commit - change to proper license * Implement proper OS fix for person entity picture url * Workarounds for open source DH issues * Fixes institutional memory api and removes unopensourced tabs for datasets * Fixes search dataset deprecation and user search issue as a result of changes * Remove internal only options in the avatar menu
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import Component from '@glimmer/component';
|
|
import { action } from '@ember/object';
|
|
import Ember from 'ember';
|
|
|
|
/**
|
|
* Params for this component
|
|
*/
|
|
interface ILinkToSectionArgs {
|
|
// DOM selector of the element we want to scroll to.
|
|
sectionSelector: string;
|
|
// user defined CSS base class for customization
|
|
baseClass?: string;
|
|
}
|
|
|
|
/**
|
|
* Will calculate the height of all fixed navbars in DataHub. If one of the navbars is not found it will add 0
|
|
* to the total height.
|
|
*/
|
|
const calculateHeaderOffsets = (): number => {
|
|
const selectors = ['.banner-alert', '.navbar', '.nacho-breadcrumbs-container', '.entity-tabs'];
|
|
return selectors.reduce(
|
|
(offset: number, selector: string): number =>
|
|
offset + (document.querySelector(selector)?.getBoundingClientRect().height || 0),
|
|
0
|
|
);
|
|
};
|
|
|
|
/**
|
|
* This component will create a button which action will scroll to a certain element in the dom.
|
|
* To select that element, you must pass a selector.
|
|
*/
|
|
export default class LinkToSection extends Component<ILinkToSectionArgs> {
|
|
/**
|
|
* Handler when button is clicked on the UI. It will scroll to a position,
|
|
* determine by property top from an element + pageYOffset (in case there is some scroll already),
|
|
* - headerOffset, which is needed as there might be some fixed navbars on top of the page.
|
|
* @param sectionSelector dom selector for the element you want to scroll
|
|
*/
|
|
@action
|
|
scrollTo(sectionSelector: string): void {
|
|
const element = document.querySelector(sectionSelector);
|
|
const scrollContainer = Ember.testing ? document.querySelector('#ember-testing-container') : window;
|
|
// The testing page itself can have pageYOffset too
|
|
const pageYOffset = Ember.testing
|
|
? -(document.querySelector('#ember-testing')?.getBoundingClientRect().top || 0)
|
|
: window.pageYOffset;
|
|
|
|
if (element && scrollContainer) {
|
|
const headerOffset = calculateHeaderOffsets();
|
|
const boundingRect = element.getBoundingClientRect();
|
|
const absolutePosition = boundingRect.top + pageYOffset;
|
|
const offsetPosition = absolutePosition - headerOffset;
|
|
|
|
scrollContainer.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
}
|