Modules (181)

WorkspaceManager

Description

Manages layout of panels surrounding the editor area, and size of the editor area (but not its contents).

Updates panel sizes when the window is resized. Maintains the max resizing limits for panels, based on currently available window size.

Events: workspaceUpdateLayout When workspace size changes for any reason (including panel show/hide panel resize, or the window resize). The 2nd arg is the available workspace height. The 3rd arg is a refreshHint flag for internal use (passed in to recomputeLayout)

Dependencies

Variables

$editorHolder

Type
jQueryObject

The "#editor-holder": has only one visible child, the current CodeMirror instance (or the no-editor placeholder)

    var $editorHolder;

$windowContent

Type
jQueryObject

The ".content" vertical stack (editor + all header/footer panels)

    var $windowContent;

panelIDMap

A map from panel ID's to all reated panels

    var panelIDMap = {};

windowResizing

Type
boolean

Have we already started listening for the end of the ongoing window resize?

    var windowResizing = false;

Functions

Private Public API

_setMockDOM

Unit test only: allow passing in mock DOM notes, e.g. for use with SpecRunnerUtils.createMockEditor()

    function _setMockDOM($mockWindowContent, $mockEditorHolder) {
        $windowContent = $mockWindowContent;
        $editorHolder = $mockEditorHolder;
    }

calcAvailableHeight

Calculates the available height for the full-size Editor (or the no-editor placeholder), accounting for the current size of all visible panels, toolbar, & status bar.

Returns:
number
    function calcAvailableHeight() {
        var availableHt = $windowContent.height();

        $editorHolder.siblings().each(function (i, elem) {
            var $elem = $(elem);
            if ($elem.css("display") !== "none" && $elem.css("position") !== "absolute") {
                availableHt -= $elem.outerHeight();
            }
        });

        // Clip value to 0 (it could be negative if a panel wants more space than we have)
        return Math.max(availableHt, 0);
    }
Public API

createBottomPanel

Creates a new resizable panel beneath the editor area and above the status bar footer. Panel is initially invisible. The panel's size & visibility are automatically saved & restored as a view-state preference.

id
non-nullable
string
Unique id for this panel. Use package-style naming, e.g. "myextension.feature.panelname"
$panel
non-nullable
jQueryObject
DOM content to use as the panel. Need not be in the document yet. Must have an id attribute, for use as a preferences key.
minSize
optional
number
Minimum height of panel in px.
Returns:
!Panel
    function createBottomPanel(id, $panel, minSize) {
        $panel.insertBefore("#status-bar");
        $panel.hide();
        updateResizeLimits();  // initialize panel's max size

        panelIDMap[id] = new Panel($panel, minSize);
        panelIDMap[id].panelID = id;

        return panelIDMap[id];
    }
Public API

getAllPanelIDs

Returns an array of all panel ID's

    function getAllPanelIDs() {
        var property, panelIDs = [];
        for (property in panelIDMap) {
            if (panelIDMap.hasOwnProperty(property)) {
                panelIDs.push(property);
            }
        }
        return panelIDs;
    }
Public API

getPanelForID

Gets the Panel interface for the given ID. Can return undefined if no panel with the ID is found.

panelID
string
    function getPanelForID(panelID) {
        return panelIDMap[panelID];
    }

handleWindowResize

Trigger editor area resize whenever the window is resized

    function handleWindowResize() {
        // These are not initialized in Jasmine Spec Runner window until a test
        // is run that creates a mock document.
        if (!$windowContent || !$editorHolder) {
            return;
        }

        // FIXME (issue #4564) Workaround https://github.com/codemirror/CodeMirror/issues/1787
        triggerUpdateLayout();

        if (!windowResizing) {
            windowResizing = true;

            // We don't need any fancy debouncing here - we just need to react before the user can start
            // resizing any panels at the new window size. So just listen for first mousemove once the
            // window resize releases mouse capture.
            $(window.document).one("mousemove", function () {
                windowResizing = false;
                updateResizeLimits();
            });
        }
    }

listenToResize

Trigger editor area resize whenever the given panel is shown/hidden/resized @param {!jQueryObject} $panel the jquery object in which to attach event handlers

    function listenToResize($panel) {
        // Update editor height when shown/hidden, & continuously as panel is resized
        $panel.on("panelCollapsed panelExpanded panelResizeUpdate", function () {
            triggerUpdateLayout();
        });
        // Update max size of sibling panels when shown/hidden, & at *end* of resize gesture
        $panel.on("panelCollapsed panelExpanded panelResizeEnd", function () {
            updateResizeLimits();
        });
    }
Public API

recomputeLayout

Called when an external widget has appeared and needs some of the space occupied by the mainview manager

refreshHint
boolean
true to refresh the editor, false if not
    function recomputeLayout(refreshHint) {
        triggerUpdateLayout(refreshHint);
        updateResizeLimits();
    }

triggerUpdateLayout

Calculates a new size for editor-holder and resizes it accordingly, then and dispatches the "workspaceUpdateLayout" event. (The editors within are resized by EditorManager, in response to that event).

refreshHint
optional
boolean
true to force a complete refresh
    function triggerUpdateLayout(refreshHint) {
        // Find how much space is left for the editor
        var editorAreaHeight = calcAvailableHeight();

        $editorHolder.height(editorAreaHeight);  // affects size of "not-editor" placeholder as well

        // Resize editor to fill the space
        exports.trigger(EVENT_WORKSPACE_UPDATE_LAYOUT, editorAreaHeight, refreshHint);
    }

updateResizeLimits

Updates panel resize limits to disallow making panels big enough to shrink editor area below 0

    function updateResizeLimits() {
        var editorAreaHeight = $editorHolder.height();

        $editorHolder.siblings().each(function (i, elem) {
            var $elem = $(elem);
            if ($elem.css("display") === "none") {
                $elem.data("maxsize", editorAreaHeight);
            } else {
                $elem.data("maxsize", editorAreaHeight + $elem.outerHeight());
            }
        });
    }

Classes

Constructor

Panel

Represents a panel below the editor area (a child of ".content").

$panel
jQueryObject
The entire panel, including any chrome, already in the DOM.
minSize
number
Minimum height of panel in px.
    function Panel($panel, minSize) {
        this.$panel = $panel;

        Resizer.makeResizable($panel[0], Resizer.DIRECTION_VERTICAL, Resizer.POSITION_TOP, minSize, false, undefined, true);
        listenToResize($panel);
    }

Properties

$panel

Type
jQueryObject

Dom node holding the rendered panel

    Panel.prototype.$panel = null;

Methods

hide

Hides the panel

    Panel.prototype.hide = function () {
        Resizer.hide(this.$panel[0]);
        exports.trigger(EVENT_WORKSPACE_PANEL_HIDDEN, this.panelID);
    };

isVisible

Determines if the panel is visible

Returns:
boolean
true if visible, false if not
    Panel.prototype.isVisible = function () {
        return this.$panel.is(":visible");
    };

setVisible

Sets the panel's visibility state

visible
boolean
true to show, false to hide
    Panel.prototype.setVisible = function (visible) {
        if (visible) {
            this.show();
        } else {
            this.hide();
        }
    };

show

Shows the panel

    Panel.prototype.show = function () {
        Resizer.show(this.$panel[0]);
        exports.trigger(EVENT_WORKSPACE_PANEL_SHOWN, this.panelID);
    };