Skip to content

Commit

Permalink
Refactor PanelTab EP
Browse files Browse the repository at this point in the history
Remove PanelTabEvents and pass the PanelTab directly to the extension point to match other framework implementation.
  • Loading branch information
thinkh committed Mar 13, 2020
1 parent 0141585 commit e5d204e
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 22 deletions.
16 changes: 10 additions & 6 deletions src/extensions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {IDType} from 'phovea_core/src/idtype';
import {IColumnDesc, Column, LocalDataProvider} from 'lineupjs';
import {EViewMode} from './views/interfaces';
import {AppHeader} from 'phovea_ui/src/header';
import {PanelTabEvents} from './lineup/internal/panel/PanelTab';
import {PanelTab} from './lineup/internal/panel/PanelTab';

export * from './tour/extensions';

Expand All @@ -27,10 +27,6 @@ export const EXTENSION_POINT_TDP_VIEW_GROUPS = 'tdpViewGroups';
/**
* Register a new tab to the LineupSidePanel.
* Consists of a button/header to open the tab content and the tab content itself
* @factoryParam {HTMLElement} parent The node of the tab content created through the extension point
* @factoryParam {LocalDataProvider} provider The data of the current ranking
* @factoryParam {IPanelTabExtensionDesc} desc The phovea extension point description
* @factoryParam {PanelTabEvents} events Listen when the tab closes or opens
*/
export const EP_TDP_CORE_LINEUP_PANEL_TAB = 'epTdpCoreLineupPanelTab';

Expand Down Expand Up @@ -149,7 +145,14 @@ export interface IScoreColumnPatcherExtensionDesc extends IPluginDesc {

export interface IPanelTabExtension {
desc: IPanelTabExtensionDesc;
factory(parent: HTMLElement, provider: LocalDataProvider, desc: IRankingButtonExtensionDesc, events: PanelTabEvents, extraArgs?: object): Promise<IScoreParam>;

/**
* Create and attach a new LineUp side panel
* @param tab PanelTab instance to attach the HTMLElement and listen to events
* @param provider The data of the current ranking
* @param desc The phovea extension point description
*/
factory(desc: IPanelTabExtensionDesc, tab: PanelTab, provider: LocalDataProvider): void;
}

export interface IPanelTabExtensionDesc extends IPluginDesc {
Expand Down Expand Up @@ -181,6 +184,7 @@ export interface IPanelTabExtensionDesc extends IPluginDesc {

load(): Promise<IPlugin & IPanelTabExtension>;
}

export interface IRankingButtonExtension {
desc: IRankingButtonExtensionDesc;
factory(desc: IRankingButtonExtensionDesc, idType: IDType, extraArgs: object): Promise<IScoreParam>;
Expand Down
2 changes: 1 addition & 1 deletion src/lineup/internal/LineUpPanelActions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export default class LineUpPanelActions extends EventHandler {

} else {
plugin.load().then((p: IPanelTabExtension) => {
p.factory(tab.node, this.provider, p.desc, tab.events);
p.factory(p.desc, tab, this.provider);
this.collapse = false; // expand side panel
this.tabContainer.showTab(tab);
isLoaded = true;
Expand Down
23 changes: 8 additions & 15 deletions src/lineup/internal/panel/PanelTab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,23 +36,15 @@ export interface IPanelTabDesc {
}

/**
* Events for PanelTab for when its showed/hidden
* The PanelTab creates a tab component that with can be toggled through the PanelNavButton
*/
export class PanelTabEvents extends EventHandler {
export class PanelTab extends EventHandler {

static readonly SHOW_PANEL = 'showPanel';

static readonly HIDE_PANEL = 'hidePanel';

}

/**
* The PanelTab creates a tab component that with can be toggled through the PanelNavButton
*/
export class PanelTab {

readonly node: HTMLElement;
readonly events: PanelTabEvents;
readonly options: IPanelTabDesc = {
cssClass: 'fa fa-sliders',
title: 'Ranking Configuration',
Expand All @@ -66,29 +58,30 @@ export class PanelTab {
* @param options Extra styles to apply to the PanelTab
*/
constructor(private parent: HTMLElement, options?: IPanelTabDesc) {
this.events = new PanelTabEvents();
super();

this.node = parent.ownerDocument.createElement('div');
this.node.classList.add('tab-pane');
this.node.setAttribute('role', 'tabpanel');
Object.assign(this.options, options);
}

/**
* Show this tab and fire the `PanelTabEvents.SHOW_PANEL` event.
* Show this tab and fire the `PanelTab.SHOW_PANEL` event.
*/
public show() {
this.node.classList.add('active');
this.navButton.setActive(true);
this.events.fire(PanelTabEvents.SHOW_PANEL);
this.fire(PanelTab.SHOW_PANEL);
}

/**
* Hide this tab and fire the `PanelTabEvents.HIDE_PANEL` event.
* Hide this tab and fire the `PanelTab.HIDE_PANEL` event.
*/
public hide() {
this.node.classList.remove('active');
this.navButton.setActive(false);
this.events.fire(PanelTabEvents.HIDE_PANEL);
this.fire(PanelTab.HIDE_PANEL);
}

getNavButton(listener): PanelNavButton {
Expand Down

0 comments on commit e5d204e

Please sign in to comment.