@atlassian/aui/lib/js/aui/spinner.js

Atlassian User Interface Framework

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define(['skatejs', './underscore'], factory);
    } else if (typeof exports !== "undefined") {
        factory(require('skatejs'), require('./underscore'));
    } else {
        var mod = {
            exports: {}
        };
        factory(global.skatejs, global.underscore);
        global.spinner = mod.exports;
    }
})(this, function (_skatejs, _underscore) {
    'use strict';

    var _skatejs2 = _interopRequireDefault(_skatejs);

    var _underscore2 = _interopRequireDefault(_underscore);

    function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }

    var SIZE = {
        SMALL: {
            name: 'small',
            px: 20,
            radius: 9
        },
        MEDIUM: {
            name: 'medium',
            px: 30,
            radius: 13.5
        },
        LARGE: {
            name: 'large',
            px: 50,
            radius: 22.5
        }
    };

    var DEFAULTS = {
        filled: false,
        size: SIZE.MEDIUM.name
    };

    function setMiddleTop(element) {
        var svg = element.querySelector('svg');
        var parent = element.parentNode;

        var svgDomRect = svg.getBoundingClientRect();
        var parentDomRect = parent.getBoundingClientRect();

        var currentSpinnerTop = svgDomRect.top - parentDomRect.top;

        svg.style.top = (parentDomRect.height - svgDomRect.height) / 2 - currentSpinnerTop + 'px';
    }

    function removeMiddleTop(element) {
        element.querySelector('svg').style.top = '0px';
    }

    function validateSize(size) {
        var result = SIZE.MEDIUM.name;
        size = size.toLowerCase();
        var possibleSizes = Object.keys(SIZE).map(function (key) {
            return key.toLowerCase();
        });

        if (possibleSizes.indexOf(size) > -1) {
            result = size;
        }

        return result;
    }

    function setSize(element, size, radius) {
        var svg = element.querySelector('svg');
        var circle = element.querySelector('circle');

        svg.setAttribute('size', size);
        svg.setAttribute('height', size);
        svg.setAttribute('width', size);
        svg.setAttribute('viewBox', '0 0 ' + size + ' ' + size);

        var circleSize = size / 2;

        circle.setAttribute('cx', circleSize);
        circle.setAttribute('cy', circleSize);
        circle.setAttribute('r', radius);
    }

    function refresh(element) {
        if (element._data.IS_COMPONENT_ATTACHED) {
            var _ref = _underscore2.default.find(SIZE, function (s) {
                return s.name === element._data.size;
            }) || SIZE.MEDIUM,
                px = _ref.px,
                radius = _ref.radius;

            setSize(element, px, radius);

            if (element._data.filled) {
                setMiddleTop(element);
            } else {
                removeMiddleTop(element);
            }
        }
    }

    (0, _skatejs2.default)('aui-spinner', {
        template: function template(element) {
            element._data.IS_COMPONENT_ATTACHED = false;
            element.innerHTML = '<div class="aui-spinner spinner">\n                <svg focusable="false" size="' + SIZE.MEDIUM.px + '" height="' + SIZE.MEDIUM.px + '" width="' + SIZE.MEDIUM.px + '" viewBox="0 0 ' + SIZE.MEDIUM.px + ' ' + SIZE.MEDIUM.px + '">\n                    <circle cx="' + SIZE.MEDIUM.px / 2 + '" cy="' + SIZE.MEDIUM.px / 2 + '" r="' + SIZE.MEDIUM.radius + '"></circle>\n                </svg>\n            </div>';
            if (!element.hasAttribute('size')) {
                element.setAttribute('size', SIZE.MEDIUM.name);
            }
        },
        attached: function attached(element) {
            element._data.IS_COMPONENT_ATTACHED = true;
            refresh(element);
        },

        attributes: {
            filled: {
                created: function created(element) {
                    element._data.filled = true;
                    refresh(element);
                },
                removed: function removed(element) {
                    element._data.filled = false;
                    refresh(element);
                }
            },
            size: function size(element, data) {
                element._data.size = validateSize(data.newValue);
                refresh(element);
            }
        },
        prototype: {
            get _data() {
                return this.__data || (this._data = _underscore2.default.defaults({}, DEFAULTS));
            },
            set _data(data) {
                return this.__data = data;
            },
            set filled(isFilled) {
                !!isFilled ? this.setAttribute('filled', '') : this.removeAttribute('filled');
            },
            set size(newSize) {
                var size = validateSize(newSize);
                this.setAttribute('size', size);
            }
        }
    });
});
//# sourceMappingURL=spinner.js.map