Skip to content

Commit

Permalink
Remove Scroll implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryantxu
ryantxu committed Jul 12, 2018
1 parent e939f91 commit a0f398e
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 140 deletions.
3 changes: 1 addition & 2 deletions public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { DashboardPanel } from './DashboardPanel';
import { DashboardModel } from '../dashboard_model';
import { PanelContainer } from './PanelContainer';
import { PanelModel } from '../panel_model';
import { PanelObserver, PanelObserverScroll, PanelObserverIntersection } from './PanelObserver';
import { PanelObserver, PanelObserverIntersection } from './PanelObserver';
import classNames from 'classnames';
import sizeMe from 'react-sizeme';

Expand Down Expand Up @@ -81,7 +81,6 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.onWidthChange = this.onWidthChange.bind(this);

this.state = { animated: false };
this.observer = new PanelObserverScroll();
this.observer = new PanelObserverIntersection();

// subscribe to dashboard events
Expand Down
139 changes: 1 addition & 138 deletions public/app/features/dashboard/dashgrid/PanelObserver.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { PanelModel } from '../panel_model';

import _ from 'lodash';

import 'intersection-observer';

export const PANEL_VISIBILITY_CHANGED_EVENT = 'panel-visibility-changed';
Expand All @@ -12,141 +10,6 @@ export interface PanelObserver {
check: () => void;
}

export class PanelObserverScroll implements PanelObserver {
private registry = new Map<PanelModel, HTMLElement>();
private lastChecked = -1;
private scroller: HTMLElement;
private listener: EventListenerOrEventListenerObject = null;
private checkPending = false;

static readonly MARGIN: number = 200; // Say something it visible if it is close to the window

//---------------------------------------------------------
// API
//---------------------------------------------------------

dispose() {
this.registry.clear();
this.updateScrollListenerCallback(true);
}

// this may be called a couple times as
watch(e: HTMLElement, panel: PanelModel) {
if (e && panel) {
let x = this.findScrollWindow(e);
if (this.scroller) {
if (x !== this.scroller) {
console.error('???? did the root scroll element change????');
}
}
this.scroller = x;
this.registry.set(panel, e);
this.updateScrollListenerCallback();

this.checkPending = true;
setTimeout(() => {
if (this.checkPending) {
this.checkPending = true;

// Remove any stale elements from the DOM
this.registry.forEach((elem, panel) => {
if (!document.body.contains(elem)) {
this.registry.delete(panel);
}
});
this.updateVisibility(true);
}
}, 10);
}
}

// Called externally on big change
check() {
this.updateVisibility(true); // force check
}

//---------------------------------------------------------
// Internal
//---------------------------------------------------------

// HACK? Is there a standard non-jquery way to do this?
private findScrollWindow(element: HTMLElement): HTMLElement {
let t: HTMLElement = element.parentElement;
while (t != null) {
if ('scroll-canvas scroll-canvas--dashboard' === t.className) {
return t;
}
t = t.parentElement;
}
return null;
}

// The grid layout sets the positions explicitly using transform: translage(x, y);
private getTop(element: HTMLElement): number {
if (element['data-top'] && element['data-last-transform'] === element.style.transform) {
return element['data-top'];
}
const xform = element.style.transform; // translate(0px, 200px)
const top = parseInt(xform.substring(xform.lastIndexOf(' ') + 1, xform.lastIndexOf('p')));
return (element['data-top'] = top);
}

//---------------------------------------------------------
// Scroll Handling
//---------------------------------------------------------

private updateScrollListenerCallback(remove = false) {
if (this.scroller) {
const empty = _.isEmpty(this.registry);
if (empty || remove) {
if (this.listener) {
console.log('Removing dashboard scroll listener');
this.scroller.removeEventListener('scroll', this.listener);
this.listener = null;
}
} else if (!this.listener) {
console.log('Adding dashboard scroll listener');
this.listener = this.updateVisibility.bind(this);
this.scroller.addEventListener('scroll', this.listener, {
capture: true,
passive: true,
});
}
}
}

// The Scroll callback
updateVisibility(force = false) {
if (_.isEmpty(this.registry)) {
this.updateScrollListenerCallback(true);
} else if (this.scroller) {
const top = Math.floor(this.scroller.scrollTop / 10) * 10; // check every 10 pixels
if (top !== this.lastChecked || force === true) {
this.lastChecked = top;
this.updateVisibilityProps(
this.scroller.scrollTop - PanelObserverScroll.MARGIN,
this.scroller.scrollTop + PanelObserverScroll.MARGIN + this.scroller.offsetHeight
);
}
}
}

// Check visibility for all elements
updateVisibilityProps(view_top: number, view_bottom: number) {
//console.log( 'CHECK In Viewport', view_top, view_bottom );
this.registry.forEach((element, panel) => {
const top = this.getTop(element);
const bottom = top + element.offsetHeight;
const vis = !(view_top > bottom || view_bottom < top);
//console.log( 'VIS', vis, panel.title, top, bottom );
if (panel.visible !== vis) {
panel.visible = vis;
panel.events.emit(PANEL_VISIBILITY_CHANGED_EVENT, vis);
}
});
}
}

export class PanelObserverIntersection implements PanelObserver {
observer: IntersectionObserver;

Expand Down Expand Up @@ -175,7 +38,7 @@ export class PanelObserverIntersection implements PanelObserver {

// Called externally on big change
check() {
// nothing?
// Is there a way to force a callback?
}

//---------------------------------------------------------
Expand Down

0 comments on commit a0f398e

Please sign in to comment.