MySlilerReveal-part-2

namespace YOUR_NAMESPACE.Common {

    export class MySlilerRevealOptions {
        target: JQuery;
        initDialog: () => Serenity.EntityDialog<any, any>;
        onDataChangeCallback?: () => void;
        sliderWidth?: any;
        entityOrId: any;
    }

    @Serenity.Decorators.registerClass()
    export class MySlilerReveal extends Serenity.TemplatedWidget<MySlilerRevealOptions> {

        private slider: JQuery;
        private overlayDiv: JQuery = $(`<div class="custom-slide-reveal-overlay" style="position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); display: block !important;"></div>`);
        private dlg: Serenity.EntityDialog<any, any>;
        
        constructor(container: JQuery, opt?: MySlilerRevealOptions) {
            super(container, opt);

            let target = this.getTargetElement();            
            target.addClass("slider-dialog-force-show-target");

            if (!$(".s-DataGrid").hasClass("panel-hidden")) {
                $(".s-DataGrid").addClass("slider-dialog-force-show-target");
            }

            this.dlg = this.options.initDialog();

            container.appendTo(target);

            if ($(".custom-slide-reveal-overlay").length > 0) {
                this.overlayDiv.css("opacity", 0.2);
            }

            this.overlayDiv.insertBefore(this.element);

            this.overlayDiv.click(e => {
                (this.slider as any).slideReveal('hide');
            });

            let targetCurIndex = 0;
            try {
                targetCurIndex = Q.parseInteger(target.css("z-index"));
            } catch{ }

            targetCurIndex = targetCurIndex.toString() == "NaN" ? 0 : targetCurIndex;
            targetCurIndex = targetCurIndex <= 0 ? 1101 : targetCurIndex;

            this.overlayDiv.css("z-index", targetCurIndex);
            this.element.css("z-index", targetCurIndex);
            

            this.element.css("position", "relative");

            this.dlg.element.addClass("flex-layout");

            let nbrExistedSlider = $(".slider-container").length;

            //let topHeight = $('header.main-header').height();
            this.slider = (this.byId("sliderContainer") as any).slideReveal({
                push: false,
                position: 'right',
                zIndex: 1100,
                overlay: false,
                autoEscape: true,
                //top: topHeight,
                width: Q.coalesce(this.options.sliderWidth, `calc(50% - ${nbrExistedSlider * 40}px`),
                trigger: this.byId("sliderCloseButton"),
                show: (slider, trigger) => {

                },
                shown: (slider, trigger) => {
                    $(slider).css("right", "-10px");
                },
                hide: (slider, trigger) => {
                    
                },
                hidden: (slider, trigger) => {
                    this.byId("sliderContainer").remove();

                    let target = this.getTargetElement();
                    $(".slider-dialog-force-show-target").removeClass("hidden").removeClass("panel-hidden");

                    target.removeClass("slider-dialog-force-show-target");

                    try {
                        this.overlayDiv.remove();
                    } catch {

                    }

                    try {
                        //this.dlg.dialogClose();
                        //Serenity.TemplatedDialog.closePanel(this.dlg.element);
                    } catch {

                    }
                }
            });

            this.dlg.element.bind('panelclose', () => {
                (this.slider as any).slideReveal('hide');
            });

            this.dlg.element.on("ondatachange", (x, data) => {
                this.options.onDataChangeCallback && this.options.onDataChangeCallback();
            });
        }

        private getTargetElement(): JQuery {
            if (this.options.target.hasClass("s-Panel")) {
                return this.options.target;
            }

            if (this.options.target.hasClass("ui-dialog-content")) {
                return this.options.target.parent();
            }

            if (this.options.target.hasClass("s-DataGrid")) {
                return this.options.target;
            }

            return this.options.target;
        }

        public handleEditItem() {
            if (typeof this.options.entityOrId == "string") {
                this.loadByIdAndOpenSlider(this.options.entityOrId);
                Q.Router.dialog(this.element, this.dlg.element, () => 'edit/' + this.options.entityOrId.toString());
            }
            else {
                Q.Router.dialog(this.element, this.dlg.element, () => "new");
                this.loadNewAndOpenSlider();
            }
        }

        public loadByIdAndOpenSlider(id: any) {

            this.dlg.loadById(id,
                response => window.setTimeout(() => {

                    this.dlg.dialogOpen(true);
                    this.slider.parent().removeClass("hidden").removeClass("panel-hidden");
                    this.dlg.element.find(".panel-titlebar").remove();

                    this.dlg.element.appendTo(this.byId("panelContainer"));

                }, 0),
                () => {
                    try {
                        (this.slider as any).slideReveal('close');
                    } catch{

                    }

                    if (!this.element.is(':visible')) {
                        this.element.remove();
                    }
                });

            this.injectDialogIntoPanel(id);
        }

        public loadNewAndOpenSlider() {

            this.dlg.loadNewAndOpenDialog(true);
            this.slider.parent().removeClass("hidden").removeClass("panel-hidden");
            this.dlg.element.find(".panel-titlebar").remove();
            this.dlg.element.find(".apply-changes-button").hide();

            this.dlg.element.appendTo(this.byId("panelContainer"));

            this.injectDialogIntoPanel();
        }

        private injectDialogIntoPanel(id?: any) {
            var nbrRetry = 0;

            var self = this;
            (function appendDialogIntoPanel() {
                setTimeout(function () {
                    nbrRetry++;

                    if (nbrRetry >= 100) {
                        return;
                    }

                    if (self.slider.find(".s-TemplatedDialog").length === 1) {
                        (self.slider as any).slideReveal('toggle');
                    }
                    else {
                        appendDialogIntoPanel();
                    }

                }, 100);
            })();

        }

        getTemplate() {
            return `<div id="~_sliderContainer" class="slider-container" style="background-color:#fff; position:relative; border-left: solid 1px #c9c9c9">
                        <div id="~_sliderCloseButton" style="width:25px; height: 25px; position: absolute; top: 10px; right: 13px;color: red; cursor: pointer">
                        <i class="fa fa-lg fa-times" aria-hidden="true"></i>
                        </div>
                        <div id="~_panelContainer">

                        </div>
                    </div>`;
        }
    }
}

ProductDialog.ts

getToolbarButtons() {
    let buttons = super.getToolbarButtons();

    buttons.push({
        title: "test",
        onClick: () => {
            let sliderContainer: JQuery = $("<div />");
            let slider = new Common.MySlilerReveal(sliderContainer, {
                target: this.element,
                entityOrId: {},
                initDialog: () => {
                    return new ProductDialog();
                }
            });

            slider.loadByIdAndOpenSlider(1);
        }
    });

    return buttons;
}