@ryusei/light
Version:
<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
73 lines (62 loc) • 1.9 kB
text/typescript
import { PROJECT_CODE_SHORT } from '../../constants/project';
import { Renderer } from '../../core/Renderer/Renderer';
import { EventBus } from '../../event/EventBus';
/**
* The component for rendering overlay and tools elements.
*
* @since 0.0.1
*/
export function Overlay( { event, options }: Renderer ) {
event.on( 'mounted', () => {
const { overlay = {} } = options;
const { tools } = options;
let { topRight, topLeft } = overlay;
topRight = topRight || tools === 'topRight';
topLeft = topLeft || tools === 'topLeft';
[ topRight, topLeft ].forEach( ( active, index ) => {
if ( active ) {
if ( tools ) {
appendTools( event, index === 1 );
}
appendOverlay( event, index === 1 );
}
} );
if ( topRight || topLeft ) {
event.on( 'open', ( append, classes ) => {
classes.push( 'has-top-overlay' );
} );
}
} );
}
/**
* Appends HTML for the overlay.
*
* @private
*
* @param event - The EventBus object.
* @param left - Optional. Set `true` for the left overlay.
*/
function appendOverlay( event: EventBus, left?: boolean ) {
const className = `${ PROJECT_CODE_SHORT }__overlay`;
event.on( 'close', append => {
append( `<div class="${ className } ${ className }--top-${ left ? 'left' : 'right' }">` );
event.emit( `overlay:top${ left ? 'Left' : 'Right' }`, append );
append( `</div>` );
} );
}
/**
* Appends HTML for tools.
*
* @private
*
* @param event - The EventBus object.
* @param left - Optional. Set `true` for the left tools.
*/
function appendTools( event: EventBus, left?: boolean ): void {
const position = left ? 'Left' : 'Right';
event.on( `overlay:top${ position }`, append => {
append( `<span class="${ PROJECT_CODE_SHORT }__tools">` );
event.emit( `tools:top${ position }`, append );
append( `</span>` );
} );
}