Commit fbcd5bf2 authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya

Migrate toolbar module to TypeScript

parent f58a5098
import { createRef, render } from 'preact'; import { createRef, render } from 'preact';
import type { RefObject } from 'preact';
import Toolbar from './components/Toolbar'; import Toolbar from './components/Toolbar';
/** export type ToolbarOptions = {
* @typedef ToolbarOptions createAnnotation: () => void;
* @prop {() => void} createAnnotation setSidebarOpen: (open: boolean) => void;
* @prop {(open: boolean) => void} setSidebarOpen setHighlightsVisible: (visible: boolean) => void;
* @prop {(visible: boolean) => void} setHighlightsVisible };
*/
/** /**
* Controller for the toolbar on the edge of the sidebar. * Controller for the toolbar on the edge of the sidebar.
...@@ -16,20 +16,26 @@ import Toolbar from './components/Toolbar'; ...@@ -16,20 +16,26 @@ import Toolbar from './components/Toolbar';
* highlight visibility etc. * highlight visibility etc.
*/ */
export class ToolbarController { export class ToolbarController {
private _container: HTMLElement;
private _newAnnotationType: 'annotation' | 'note';
private _useMinimalControls: boolean;
private _highlightsVisible: boolean;
private _sidebarOpen: boolean;
private _closeSidebar: () => void;
private _toggleSidebar: () => void;
private _toggleHighlights: () => void;
private _createAnnotation: () => void;
private _sidebarToggleButton: RefObject<HTMLElement>;
/** /**
* @param {HTMLElement} container - Element into which the toolbar is rendered * @param container - Element into which the toolbar is rendered
* @param {ToolbarOptions} options
*/ */
constructor(container, options) { constructor(container: HTMLElement, options: ToolbarOptions) {
const { createAnnotation, setSidebarOpen, setHighlightsVisible } = options; const { createAnnotation, setSidebarOpen, setHighlightsVisible } = options;
this._container = container; this._container = container;
this._useMinimalControls = false; this._useMinimalControls = false;
/** @type {'annotation'|'note'} */
this._newAnnotationType = 'note'; this._newAnnotationType = 'note';
this._highlightsVisible = false; this._highlightsVisible = false;
this._sidebarOpen = false; this._sidebarOpen = false;
...@@ -43,13 +49,13 @@ export class ToolbarController { ...@@ -43,13 +49,13 @@ export class ToolbarController {
}; };
/** Reference to the sidebar toggle button. */ /** Reference to the sidebar toggle button. */
this._sidebarToggleButton = createRef(); this._sidebarToggleButton = createRef<HTMLElement>();
this.render(); this.render();
} }
getWidth() { getWidth() {
const content = /** @type {HTMLElement} */ (this._container.firstChild); const content = this._container.firstChild as HTMLElement;
return content.getBoundingClientRect().width; return content.getBoundingClientRect().width;
} }
...@@ -106,11 +112,9 @@ export class ToolbarController { ...@@ -106,11 +112,9 @@ export class ToolbarController {
/** /**
* Return the DOM element that toggles the sidebar's visibility. * Return the DOM element that toggles the sidebar's visibility.
*
* @type {HTMLButtonElement}
*/ */
get sidebarToggleButton() { get sidebarToggleButton() {
return this._sidebarToggleButton.current; return this._sidebarToggleButton.current as HTMLButtonElement;
} }
render() { render() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment