blue-react 6.9.2

package/dist/SidebarMenu.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Die Seitenleiste für das Grid.
+ */
+var SidebarMenu = function (_React$Component) {
+    _inherits(SidebarMenu, _React$Component);
+
+    function SidebarMenu(props) {
+        _classCallCheck(this, SidebarMenu);
+
+        var _this = _possibleConstructorReturn(this, (SidebarMenu.__proto__ || Object.getPrototypeOf(SidebarMenu)).call(this, props));
+
+        _this.state = {
+            hasShadow: false,
+            height: window.innerHeight,
+            width: window.innerWidth
+        };
+        _this.updateDimensions = _this.updateDimensions.bind(_this);
+        return _this;
+    }
+
+    _createClass(SidebarMenu, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+            var _this2 = this;
+
+            var blueAppSidebar = document.querySelector(".blue-app-sidebar");
+
+            window.addEventListener("resize", this.updateDimensions);
+
+            if (blueAppSidebar.scrollHeight > blueAppSidebar.clientHeight) {
+                console.log("has scroll bar!");
+                this.setState({ hasShadow: true });
+            }
+
+            blueAppSidebar.addEventListener("scroll", function () {
+                if (blueAppSidebar.scrollHeight - blueAppSidebar.scrollTop === blueAppSidebar.clientHeight) {
+                    _this2.setState({ hasShadow: false });
+                } else {
+                    _this2.setState({ hasShadow: true });
+                }
+            });
+        }
+    }, {
+        key: "updateDimensions",
+        value: function updateDimensions() {
+            if (window.innerHeight > 500) {
+                this.setState({ hasShadow: false });
+            }
+            this.setState({
+                height: window.innerHeight,
+                width: window.innerWidth
+            });
+        }
+    }, {
+        key: "componentWillUnmount",
+        value: function componentWillUnmount() {
+            window.removeEventListener("resize", this.updateDimensions);
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            return _react2.default.createElement(
+                "div",
+                { className: "blue-app-sidebar " + (this.props.sidebarClass ? this.props.sidebarClass : ""),
+                    style: this.props.sidebarStyle ? this.props.sidebarStyle : {}
+                },
+                this.props.topContent && _react2.default.createElement(
+                    "div",
+                    { className: "blue-app-sidebar-top" },
+                    this.props.topContent
+                ),
+                _react2.default.createElement(
+                    "div",
+                    { className: "blue-app-menu " + (this.props.menuClass ? this.props.menuClass : ""),
+                        style: this.props.menuStyle ? this.props.menuStyle : {}
+                    },
+                    _react2.default.createElement(
+                        "div",
+                        { className: "fluent-btn" },
+                        _react2.default.createElement("div", { className: "fluent-btn-ball" }),
+                        this.props.children
+                    )
+                ),
+                this.props.bottomContent && _react2.default.createElement(
+                    "div",
+                    { className: "blue-app-sidebar-bottom " + (this.state.hasShadow ? " has-shadow" : "") },
+                    this.props.bottomContent
+                )
+            );
+        }
+    }]);
+
+    return SidebarMenu;
+}(_react2.default.Component);
+
+SidebarMenu.propTypes = {
+    /**
+     * Erweiterung der className-Property der Seitenleiste.
+     */
+    sidebarClass: _propTypes2.default.string,
+
+    /**
+     * Setzt die style-Property der Seitenleiste.
+     */
+    sidebarStyle: _propTypes2.default.object,
+
+    /**
+     * Erweiterung der className-Property des Menüs.
+     */
+    menuClass: _propTypes2.default.string,
+
+    /**
+     * Setzt die style-Property des Menüs.
+     */
+    menuStyle: _propTypes2.default.object,
+
+    /**
+     * Inhalte oberhalb des Sidebar-Menüs
+     */
+    topContent: _propTypes2.default.any,
+
+    /**
+     * Inhalte für den Footer der Sidebar
+     */
+    bottomContent: _propTypes2.default.any
+
+};
+
+exports.default = SidebarMenu;

package/dist/Switch.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Switch.
+ */
+var Switch = function (_React$Component) {
+    _inherits(Switch, _React$Component);
+
+    function Switch() {
+        _classCallCheck(this, Switch);
+
+        return _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).apply(this, arguments));
+    }
+
+    _createClass(Switch, [{
+        key: "render",
+        value: function render() {
+            return _react2.default.createElement(this.props.elementType, {
+                className: "switch " + (this.props.disabled ? "disabled " : "") + this.props.className
+            }, [_react2.default.createElement("input", {
+                key: 0,
+                type: "checkbox",
+                checked: this.props.checked,
+                onChange: this.props.onChange,
+                disabled: this.props.disabled
+            }), _react2.default.createElement("span", {
+                key: 1,
+                className: "slider round",
+                "data-label": this.props.sliderLabel
+            })]);
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                className: "",
+                checked: false,
+                onChange: function onChange() {},
+                sliderLabel: null,
+                elementType: "label",
+                disabled: false
+            };
+        }
+    }]);
+
+    return Switch;
+}(_react2.default.Component);
+
+Switch.propTypes = {
+    className: _propTypes2.default.string,
+    checked: _propTypes2.default.bool,
+    onChange: _propTypes2.default.func,
+
+    /**
+     * Sets label inside of the switch. If you set this, you should also set the className "lg" to make the switch larger.
+     */
+    sliderLabel: _propTypes2.default.string,
+
+    /**
+     * You can change the type of the wrapper element. If you do, the <code>onChange</code> event might not be triggered.
+     */
+    elementType: _propTypes2.default.string,
+
+    disabled: _propTypes2.default.bool
+};
+
+exports.default = Switch;

package/dist/SwitchMenuItem.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _MenuItem = require("./MenuItem.js");
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+var _Switch = require("./Switch.js");
+
+var _Switch2 = _interopRequireDefault(_Switch);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Switch for <strong>Actions</strong>
+ */
+var SwitchMenuItem = function (_React$Component) {
+    _inherits(SwitchMenuItem, _React$Component);
+
+    function SwitchMenuItem() {
+        _classCallCheck(this, SwitchMenuItem);
+
+        return _possibleConstructorReturn(this, (SwitchMenuItem.__proto__ || Object.getPrototypeOf(SwitchMenuItem)).apply(this, arguments));
+    }
+
+    _createClass(SwitchMenuItem, [{
+        key: "render",
+        value: function render() {
+            return _react2.default.createElement(_MenuItem2.default, {
+                onClick: this.props.onChange,
+                icon: _react2.default.createElement(_Switch2.default, _extends({}, this.props, {
+                    elementType: "span"
+                })),
+                label: this.props.label
+            });
+        }
+    }]);
+
+    return SwitchMenuItem;
+}(_react2.default.Component);
+
+SwitchMenuItem.propTypes = _Switch2.default.propTypes;
+
+exports.default = SwitchMenuItem;

package/dist/Utilities.js

@@ -0,0 +1,173 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var Utilities = {
+    hasClass: function hasClass(el, className) {
+        if (el.classList) return el.classList.contains(className);else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
+    },
+
+    addClass: function addClass(el, className) {
+        if (el.classList) el.classList.add(className);else if (!hasClass(el, className)) el.className += " " + className;
+    },
+
+    removeClass: function removeClass(el, className) {
+        if (el.classList) el.classList.remove(className);else if (hasClass(el, className)) el.className = el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
+    },
+
+    toggleClass: function toggleClass(element, className) {
+        if (!element || !className) {
+            return;
+        }
+
+        var classString = element.className,
+            nameIndex = classString.indexOf(className);
+        if (nameIndex == -1) {
+            classString += ' ' + className;
+        } else {
+            classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
+        }
+        element.className = classString;
+    },
+
+    startLoading: function startLoading() {
+        document.querySelectorAll(".blue-app-loading")[0].style.display = "block";
+    },
+
+    finishLoading: function finishLoading() {
+        document.querySelectorAll(".blue-app-loading")[0].style.display = "";
+    },
+
+    showSuccess: function showSuccess() {
+        document.querySelectorAll(".blue-app-status-success")[0].style.display = "block";
+    },
+
+    hideSuccess: function hideSuccess() {
+        document.querySelectorAll(".blue-app-status-success")[0].style.display = "";
+    },
+
+    toggleActions: function toggleActions() {
+        this.toggleClass(document.querySelector(".blue-app-wrapper"), "active");
+        this.toggleClass(document.querySelector(".blue-app-grid"), "wrapper-in");
+
+        var els = document.querySelectorAll(".blue-app-actions");
+        for (var i = 0; i < els.length; i++) {
+            this.toggleClass(els[i], "open");
+        }
+    },
+
+    resetAlertMessage: function resetAlertMessage() {
+        var alertClassName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "info";
+
+        var alertElement = document.querySelectorAll(".blue-app-status-alert")[0];
+        document.querySelectorAll(".blue-app-status-" + alertClassName)[0].style.display = "";
+        alertElement.style.display = "";
+        this.removeClass(alertElement, "alert-" + (alertClassName == "loading" ? "info" : alertClassName));
+    },
+
+    setAlertMessage: function setAlertMessage(message) {
+        var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
+
+        var _this = this;
+
+        var close = arguments[2];
+        var detailText = arguments[3];
+
+        var alertElement = document.querySelectorAll(".blue-app-status-alert")[0];
+
+        if (alertClassName.indexOf("alert-") > -1) {
+            alertClassName = alertClassName.replace("alert-", "");
+        }
+
+        document.querySelectorAll(".blue-app-status-" + alertClassName)[0].style.display = "block";
+        alertElement.style.display = "block";
+        this.addClass(alertElement, "alert-" + (alertClassName == "loading" ? "info" : alertClassName));
+
+        alertElement.querySelector(".alert-body").innerHTML = '<h2>' + message + '</h2>';
+        if (detailText) {
+            alertElement.querySelector(".alert-body").innerHTML += '<span>' + detailText + '</span>';
+        }
+
+        if (close) {
+            alertElement.querySelector(".close").style.display = "inline-block";
+            alertElement.querySelector(".close").onclick = function () {
+                _this.resetAlertMessage(alertClassName);
+            };
+        } else {
+            alertElement.querySelector(".close").style.display = "none";
+        }
+    },
+
+    guid: function guid() {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+        }
+        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    },
+
+    scrollToTop: function scrollToTop() {
+        var routerPage = document.querySelector(".router-page.active");
+
+        routerPage.scroll({
+            behavior: "smooth",
+            left: 0,
+            top: 0
+        });
+    },
+
+    fluentBtnsListener: function fluentBtnsListener(event, btn) {
+        var btnBall = btn.querySelector(".fluent-btn-ball");
+        var el = btn.getBoundingClientRect();
+        var offset = {
+            left: el.left + window.scrollX,
+            top: el.top + window.scrollY
+        };
+
+        var x = event.pageX - offset.left;
+        var y = event.pageY - offset.top;
+
+        btnBall.style.left = x + "px";
+        btnBall.style.top = y + "px";
+    },
+
+    unregisterFluentBtns: null,
+    registerFluentBtns: null
+};
+
+Utilities.unregisterFluentBtns = function () {
+    var btns = document.querySelectorAll(".fluent-btn");
+
+    btns.forEach(function (btn) {
+        btn.removeEventListener("mousemove", function (event) {
+            return Utilities.fluentBtnsListener(event, btn);
+        });
+    });
+};
+
+Utilities.registerFluentBtns = function () {
+    Utilities.unregisterFluentBtns();
+
+    var btns = document.querySelectorAll(".fluent-btn");
+
+    btns.forEach(function (btn) {
+        btn.addEventListener("mousemove", function (event) {
+            return Utilities.fluentBtnsListener(event, btn);
+        });
+    });
+};
+
+Utilities.fetchData = function (input) {
+    var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+
+    return fetch(input, init).then(function (response) {
+        if (!response.ok) throw response;
+        return response;
+    }).catch(function (reason) {
+        reason.text().then(function (errorMessage) {
+            Utilities.setAlertMessage(reason.status + ' - ' + reason.statusText, "danger", true, errorMessage);
+        });
+    });
+};
+
+exports.default = Utilities;

package/dist/style/_actions.scss

@@ -0,0 +1,109 @@
+$blue-actions-indicator-height: 2rem !default;
+
+.blue-actions {
+    --sidebar-bg: transparent;
+
+    color: $header-color;
+    position: fixed;
+    right: .5rem;
+    z-index: 41;
+    transition: height .4s;
+
+    .blue-app-sidebar-btn {
+        color: $header-color;
+
+        &:hover,
+        &:active {
+            background-color: $actions-control-bg-hover;
+        }
+    }
+
+    &.closed {
+        .blue-actions-featured {
+            display: flex;
+        }
+    }
+
+    &.break-sm {
+        @include actions-break(map-get($grid-breakpoints, "sm"));
+    }
+
+    &.break-md {
+        @include actions-break(map-get($grid-breakpoints, "md"));
+    }
+
+    &.break-lg {
+        @include actions-break(map-get($grid-breakpoints, "lg"));
+    }
+
+    &.break-xl {
+        @include actions-break(map-get($grid-breakpoints, "xl"));
+    }
+}
+
+.blue-actions-indicator {
+    height: $blue-actions-indicator-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+
+    &::before {
+        content: "";
+        width: 2.5rem;
+        height: 4px;
+        border-radius: 2px;
+        background-color: currentColor;
+    }
+}
+
+.blue-actions-controls {
+    .blue-app-sidebar-btn {
+        width: 100%;
+    }
+
+    .blue-app-sidebar-label {
+        display: inline-block;
+    }
+}
+
+.blue-actions-featured {
+    display: none;
+    justify-content: center;
+
+    > .fluent-btn {
+        display: inline-flex;
+        justify-content: center;
+    }
+
+    .blue-app-sidebar-btn {
+        margin: 2px;
+
+        &.has-label {
+            width: auto;
+
+            .blue-app-sidebar-label {
+                display: inline-block;
+            }
+        }
+    }
+}
+
+.has-actions {
+    &.break-sm {
+        @include has-actions(map-get($grid-breakpoints, "sm"));
+    }
+
+    &.break-md {
+        @include has-actions(map-get($grid-breakpoints, "md"));
+    }
+
+    &.break-lg {
+        @include has-actions(map-get($grid-breakpoints, "lg"));
+    }
+
+    &.break-xl {
+        @include has-actions(map-get($grid-breakpoints, "xl"));
+    }
+}

package/dist/style/_actions_deprecated.scss

@@ -0,0 +1,58 @@
+.blue-app-actions-menu {
+    .nav-link {
+        position: relative;
+        margin-left: 2px;
+
+        background-color: var(--action-link-bg-color);
+
+        &:hover {
+            background-color: $bla-button-bg-hover;
+        }
+    }
+}
+
+.blue-app-actions {
+    display: inline;
+    transition: background-color 0.5s linear;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    padding: 0;
+
+    &.open {
+        left: -48px;
+        width: calc(100% + 48px);
+    }
+    
+    .navbar-nav > li > a {
+        animation: fadeInDown 0.5s;
+    }
+
+    .form-switch {
+        font-weight: normal;
+        height: $normal-size;
+    }
+
+    &.sm {
+        @include actions(768px);
+    }
+
+    &.md {
+        @include actions(992px);
+    }
+
+    &.lg {
+        @include actions(1200px);
+    }
+}
+
+.blue-app-actions-menu-toggle > span:first-child {
+    transform: rotate(90deg);
+}
+
+.blue-app-actions-menu-item {
+    display: flex;
+    align-items: center;
+    color: inherit;
+}