web/gui2/src/main/webapp/app/fw/widget/panel.base.ts

/*
 * Copyright 2018-present Open Networking Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { FnService } from '../util/fn.service';
import { LoadingService } from '../layer/loading.service';
import { LogService } from '../../log.service';
import { WebSocketService } from '../remote/websocket.service';


const noop = (): any => undefined;

/**
 ********* Static functions *********
 */
function margin(p) {
    return p.settings.margin;
}

function hideMargin(p) {
    return p.settings.hideMargin;
}

function noPx(p, what) {
    return Number(p.el.style(what).replace(/px$/, ''));
}

function widthVal(p) {
    return noPx(p, 'width');
}

function heightVal(p) {
    return noPx(p, 'height');
}

function pxShow(p) {
    return margin(p) + 'px';
}

function pxHide(p) {
    return (-hideMargin(p) - widthVal(p) - (noPx(p, 'padding') * 2)) + 'px';
}


/**
 * Base model of panel view - implemented by Panel components
 */
export interface PanelBase {
    showPanel(cb: any): void;
    hidePanel(cb: any): void;
    togglePanel(cb: any): void;
    emptyPanel(): void;
    appendPanel(what: any): void;
    panelWidth(w: number): number;
    panelHeight(h: number): number;
    panelBBox(): string;
    panelIsVisible(): boolean;
    classed(cls: any, bool: boolean): boolean;
    panelEl(): any;
}

/**
 * ONOS GUI -- Widget -- Panel Base class
 *
 * Replacing the panel service in the old implementation
 */
export abstract class PanelBaseImpl implements PanelBase {

    protected on: boolean;
    protected el: any;

    constructor(
        protected fs: FnService,
        protected ls: LoadingService,
        protected log: LogService,
        protected wss: WebSocketService,
        protected settings: any
    ) {
//        this.log.debug('Panel base class constructed');
    }

    showPanel(cb) {
        const endCb = this.fs.isF(cb) || noop;
        this.on = true;
        this.el.transition().duration(this.settings.xtnTime)
            .each('end', endCb)
            .style(this.settings.edge, pxShow(this))
            .style('opacity', 1);
    }

    hidePanel(cb) {
        const endCb = this.fs.isF(cb) || noop;
        const endOpacity = this.settings.fade ? 0 : 1;
        this.on = false;
        this.el.transition().duration(this.settings.xtnTime)
            .each('end', endCb)
            .style(this.settings.edge, pxHide(this))
            .style('opacity', endOpacity);
    }

    togglePanel(cb): boolean {
        if (this.on) {
            this.hidePanel(cb);
        } else {
            this.showPanel(cb);
        }
        return this.on;
    }

    emptyPanel(): string {
        return this.el.text('');
    }

    appendPanel(what) {
        return this.el.append(what);
    }

    panelWidth(w: number): number {
        if (w === undefined) {
            return widthVal(this);
        }
        this.el.style('width', w + 'px');
    }

    panelHeight(h: number): number {
        if (h === undefined) {
            return heightVal(this);
        }
        this.el.style('height', h + 'px');
    }

    panelBBox(): string {
        return this.el.node().getBoundingClientRect();
    }

    panelIsVisible(): boolean {
        return this.on;
    }

    classed(cls, bool): boolean {
        return this.el.classed(cls, bool);
    }

    panelEl() {
        return this.el;
    }


    /**
     * A dummy implementation of the lionFn until the response is received and the LION
     * bundle is received from the WebSocket
     */
    dummyLion(key: string): string {
        return '%' + key + '%';
    }
}