gd-sprest-js/build/fabric/panel.js

SharePoint 2013/Online js components.

"use strict";
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var _1 = require(".");
/**
 * Panel Types
 */
var PanelTypes;
(function (PanelTypes) {
    PanelTypes[PanelTypes["Left"] = 0] = "Left";
    PanelTypes[PanelTypes["Medium"] = 1] = "Medium";
    PanelTypes[PanelTypes["Large"] = 2] = "Large";
    PanelTypes[PanelTypes["LargeFixed"] = 3] = "LargeFixed";
    PanelTypes[PanelTypes["XLarge"] = 4] = "XLarge";
    PanelTypes[PanelTypes["XXLarge"] = 5] = "XXLarge";
})(PanelTypes = exports.PanelTypes || (exports.PanelTypes = {}));
/**
 * Panel
 */
exports.Panel = function (props) {
    var _panel = null;
    // Method to get the fabric component
    var get = function () {
        // Return the panel
        return _panel;
    };
    // Method to get the content element
    var getContent = function () { return _panel ? _panel._panel.querySelector(".ms-Panel-content") : null; };
    // Method to get the footer element
    var getFooter = function () { return _panel ? _panel._panel.querySelector(".ms-Panel-footer") : null; };
    // Method to get the header element
    var getHeader = function () { return _panel ? _panel._panel.querySelector(".ms-Panel-header") : null; };
    // Method to hide the panel
    var hide = function () {
        // Dismiss the panel
        _panel ? _panel.dismiss() : null;
        // Clear the panel
        _panel = null;
    };
    // Method to determine if the panel is open
    var isOpen = function () { return _panel && _panel._panel.classList.contains("is-open"); };
    // Method to show the panel
    var show = function (content) {
        if (content === void 0) { content = ""; }
        // Add the panel html
        props.el.innerHTML = _1.Templates.Panel(props);
        // Show the panel
        _panel = new _1.fabric.Panel(props.el.querySelector(".ms-Panel"));
        // See if the fabric class name exists
        if (_panel.panelHost.panelHost.classList.contains("fabric") == false) {
            // Set the class name
            _panel.panelHost.panelHost.classList.add("fabric");
        }
        // See if this is a blocking panel
        if (props.isBlocking) {
            // Remove the click event to close the panel
            _panel.panelHost.overlay.overlayElement.removeEventListener("click", _panel._clickHandler);
            // Add a new event
            _panel.panelHost.overlay.overlayElement.addEventListener("click", function () {
                // Keep the overlay visible
                _panel.panelHost.overlay.show();
            });
        }
        // Get the inner content
        var innerContent = _panel._panel.querySelector(".ms-Panel-contentInner");
        if (innerContent) {
            // Set the class name
            innerContent.className += " ms-Panel-main";
            // Get the panel content
            innerContent = innerContent.querySelector(".ms-Panel-content");
            if (innerContent) {
                // Update the panel content
                innerContent.innerHTML = content;
            }
        }
        // Return content
        return innerContent;
    };
    // Method to update the panel content
    var updateContent = function (content) {
        if (content === void 0) { content = ""; }
        var panelContent = null;
        // Ensure the panel exists
        if (_panel == null) {
            // Show the panel
            panelContent = show(content);
        }
        else {
            // Update the panel content
            panelContent = _panel._panel.querySelector(".ms-Panel-content");
            panelContent ? panelContent.innerHTML = content : null;
        }
        // Return the panel content
        return panelContent;
    };
    // Method to update the panel footer
    var updateFooter = function (content) {
        if (content === void 0) { content = ""; }
        // Update the content
        var el = _panel._panel.querySelector(".ms-Panel-footer");
        el ? el.innerHTML = content : null;
        // Return the panel content
        return el;
    };
    // Method to update the panel header
    var updateHeader = function (content) {
        if (content === void 0) { content = ""; }
        // Update the content
        var el = _panel._panel.querySelector(".ms-Panel-header");
        el ? el.innerHTML = content : null;
        // Return the panel content
        return el;
    };
    // See if we are showing the panel
    if (props.visible) {
        // Show the panel
        _this.show();
    }
    // Return the panel
    return {
        get: get,
        getContent: getContent,
        getFooter: getFooter,
        getHeader: getHeader,
        hide: hide,
        isOpen: isOpen,
        show: show,
        updateContent: updateContent,
        updateFooter: updateFooter,
        updateHeader: updateHeader
    };
};