dev-ui.qwc-web-bundler-output.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of quarkus-web-bundler-deployment Show documentation
There is a newer version: 1.8.0
Show newest version
import {LitElement, html, css} from 'lit';
import {staticAssets} from 'build-time-data';
import '@vaadin/grid';
import '@vaadin/grid/vaadin-grid-column.js';
import '@vaadin/split-layout';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';

export class QwcWebBundlerOutput extends LitElement {

    static styles = css`
        :host {
            height: 100%;
            display: flex;
            padding-left: 10px;
        }
        .preview {
            display: flex;
            justify-content: center;
            padding: 50px 10px 10px;
        }
        .preview img{
            max-height: 100%;
            max-width: 100%;
        }
        master-content {
            min-width: 300px;
        }
        .linkOut {
            right: 15px;
            position: absolute;
            top: 5px;
            cursor: pointer;
        }
        vaadin-grid {
            height: 100%;
        }
    `;

    static properties = {
        _staticAssets: {},
        _selectedStaticAsset: {state: true},
        _selectedStaticAssetContent: {state: true}
    };

    constructor() {
        super();
        this._staticAssets = staticAssets;
        this._selectedStaticAsset = this._staticAssets[0]; // Select the first item by default
        this._selectedStaticAssetContent = null;
        this._fetchContent();
    }

    render() {
        return html`
                        ${this._renderStaticAssets()}
                        ${this._renderAsset()}
                    `;
    }

    _fetchContent() {
        if(this._selectedStaticAsset) {
            fetch(this._selectedStaticAsset.path)
                .then(r => r.text())
                .then(t => this._selectedStaticAssetContent = t);
        }

    }

    _renderStaticAssets(){
        return html`
            
                
                
            `;
    }

    _renderPath(entryPoint) {
        return html`
            ${entryPoint.path}
        `;
    }

    _renderAsset(){
        if(this._selectedStaticAsset){
            let fileType = this._getFileType(this._selectedStaticAsset.path);
            if (this._isImage(fileType)) {
                return html`
                            
                        
                        ${this._renderLinkOut(this._selectedStaticAsset)}`;
            }
            if(this._selectedStaticAssetContent) {
                return html`
                            
                            
                        `;
            } else {
                return html``;
            }
        }
    }

    _isImage(fileType) {
        const imageExtensionsRegex = /^jpg|jpeg|png|gif|bmp|webp|ico|svg|tif|tiff|svg$/i;
        return imageExtensionsRegex.test(fileType);
    }

    _getFileType(filename) {
        let lastDotIndex = filename.lastIndexOf('.');

        if (lastDotIndex === -1 || lastDotIndex === 0) {
            return 'js'; // default
        } else {
            return filename.substring(lastDotIndex + 1);
        }
    }


    _renderLinkOut(staticAsset){
        return html` {this._navigate(staticAsset.path)}}>`;
    }

    _navigate(link){
        window.open(link, '_blank').focus();
    }
}

customElements.define('qwc-web-bundler-output', QwcWebBundlerOutput)