node-red/editor/js/ui/tray.js

/**
 * Copyright 2016 IBM Corp.
 *
 * 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.
 **/
RED.tray = (function() {

    var stack = [];
    var editorStack = $("#editor-stack");
    var openingTray = false;

    function resize() {

    }
    function showTray(options) {
        var el = $('<div class="editor-tray"></div>');
        var header = $('<div class="editor-tray-header"></div>').appendTo(el);
        var bodyWrapper = $('<div class="editor-tray-body-wrapper"></div>').appendTo(el);
        var body = $('<div class="editor-tray-body"></div>').appendTo(bodyWrapper);
        var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
        var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
        // var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
        // var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
        if (options.title) {
            $('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
        }
        var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
        var primaryButton;
        if (options.buttons) {
            for (var i=0;i<options.buttons.length;i++) {
                var button = options.buttons[i];

                var b = $('<button>').appendTo(buttonBar);
                if (button.id) {
                    b.attr('id',button.id);
                }
                if (button.text) {
                    b.html(button.text);
                }
                if (button.click) {
                    b.click((function(action) {
                        return function(evt) {
                            if (!$(this).hasClass('disabled')) {
                                action(evt);
                            }
                        };
                    })(button.click));
                }
                if (button.class) {
                    b.addClass(button.class);
                    if (button.class === "primary") {
                        primaryButton = button;
                    }
                }
            }
        }
        el.appendTo(editorStack);
        var tray = {
            tray: el,
            header: header,
            body: body,
            footer: footer,
            options: options,
            primaryButton: primaryButton
        };
        stack.push(tray);

        el.draggable({
                handle: resizer,
                axis: "x",
                start:function(event,ui) {
                    el.width('auto');
                },
                drag: function(event,ui) {
                    var absolutePosition = editorStack.position().left+ui.position.left
                    if (absolutePosition < 7) {
                        ui.position.left += 7-absolutePosition;
                    } else if (ui.position.left > -tray.preferredWidth-1) {
                        ui.position.left = -Math.min(editorStack.position().left-7,tray.preferredWidth-1);
                    }
                    if (tray.options.resize) {
                        setTimeout(function() {
                            tray.options.resize({width: -ui.position.left});
                        },0);
                    }
                    tray.width = -ui.position.left;
                },
                stop:function(event,ui) {
                    el.width(-ui.position.left);
                    el.css({left:''});
                    if (tray.options.resize) {
                        tray.options.resize({width: -ui.position.left});
                    }
                    tray.width = -ui.position.left;
                }
            });

        if (options.open) {
            options.open(el);
        }

        $("#header-shade").show();
        $("#editor-shade").show();
        $(".sidebar-shade").show();

        tray.preferredWidth = Math.max(el.width(),500);
        body.css({"minWidth":tray.preferredWidth-40});

        if (options.width) {
            if (options.width > $("#editor-stack").position().left-8) {
                options.width = $("#editor-stack").position().left-8;
            }
            el.width(options.width);
        } else {
            el.width(tray.preferredWidth);
        }

        tray.width = el.width();
        if (tray.width > $("#editor-stack").position().left-8) {
            tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
            el.width(tray.width);
        }

        // tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width));

        el.css({
            right: -(el.width()+10)+"px",
            transition: "right 0.25s ease"
        });
        $("#workspace").scrollLeft(0);
        handleWindowResize();
        openingTray = true;
        setTimeout(function() {
            setTimeout(function() {
                if (!options.width) {
                    el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
                }
                if (options.resize) {
                    options.resize({width:el.width()});
                }
                if (options.show) {
                    options.show();
                }
                setTimeout(function() {
                    // Delay resetting the flag, so we don't close prematurely
                    openingTray = false;
                },200);
            },150);
            el.css({right:0});
        },0);

        // growButton.click(function(e) {
        //     e.preventDefault();
        //     tray.lastWidth = tray.width;
        //     tray.width = $("#editor-stack").position().left-8;
        //     el.width(tray.width);
        //     if (options.resize) {
        //         options.resize({width:tray.width});
        //     }
        // });
        // shrinkButton.click(function(e) {
        //     e.preventDefault();
        //     if (tray.lastWidth && tray.width > tray.lastWidth) {
        //         tray.width = tray.lastWidth;
        //     } else if (tray.width > tray.preferredWidth) {
        //         tray.width = tray.preferredWidth;
        //     }
        //     el.width(tray.width);
        //     if (options.resize) {
        //         options.resize({width:tray.width});
        //     }
        // });

    }

    function handleWindowResize() {
        if (stack.length > 0) {
            var tray = stack[stack.length-1];
            var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
            tray.body.height(trayHeight-40);
            if (tray.width > $("#editor-stack").position().left-8) {
                tray.width = $("#editor-stack").position().left-8;
                tray.tray.width(tray.width);
                // tray.body.parent().width(tray.width);
            } else if (tray.width < tray.preferredWidth) {
                tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth);
                tray.tray.width(tray.width);
                // tray.body.parent().width(tray.width);
            }
            if (tray.options.resize) {
                tray.options.resize({width:tray.width});
            }
        }
    }

    return {
        init: function init() {
            $(window).resize(handleWindowResize);
            RED.events.on("sidebar:resize",handleWindowResize);
            $("#editor-shade").click(function() {
                if (!openingTray) {
                    var tray = stack[stack.length-1];
                    if (tray && tray.primaryButton) {
                        tray.primaryButton.click();
                    }
                }
            });
        },
        show: function show(options) {
            if (stack.length > 0) {
                var oldTray = stack[stack.length-1];
                oldTray.tray.css({
                    right: -(oldTray.tray.width()+10)+"px"
                });
                setTimeout(function() {
                    oldTray.tray.detach();
                    showTray(options);
                },250)
            } else {
                RED.events.emit("editor:open");
                showTray(options);
            }

        },
        close: function close(done) {
            if (stack.length > 0) {
                var tray = stack.pop();
                tray.tray.css({
                    right: -(tray.tray.width()+10)+"px"
                });
                setTimeout(function() {
                    if (tray.options.close) {
                        tray.options.close();
                    }
                    tray.tray.remove();
                    if (stack.length > 0) {
                        var oldTray = stack[stack.length-1];
                        oldTray.tray.appendTo("#editor-stack");
                        setTimeout(function() {
                            handleWindowResize();
                            oldTray.tray.css({right:0});
                            if (oldTray.options.show) {
                                oldTray.options.show();
                            }
                        },0);
                    }
                    if (done) {
                        done();
                    }
                    if (stack.length === 0) {
                        $("#header-shade").hide();
                        $("#editor-shade").hide();
                        $(".sidebar-shade").hide();
                        RED.events.emit("editor:close");
                        RED.view.focus();
                    }
                },250)
            }
        }
    }
})();