all files / skeleton/ skeleton.js

99.15% Statements 117/118
93.59% Branches 73/78
100% Functions 24/24
99.11% Lines 111/112
5 statements, 2 functions, 11 branches Ignored     
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180          55× 55× 55× 55×                           37×   152×     37×   37× 37×   37×   13× 13× 13×                       38× 38× 38× 38×     38× 152×   38× 38× 38×   37× 37× 37×   40× 39× 39× 39× 39× 39×   39×     41× 41× 41× 41×   40× 40× 40×   40× 39×     39×   38×                                          
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
/* istanbul ignore next */ 
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    Iif (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) Eif (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var cssClassName = {
        TEXTSHAPE: 'e-skeleton-text',
        CIRCLESHAPE: 'e-skeleton-circle',
        SQUARESHAPE: 'e-skeleton-square',
        RECTANGLESHAPE: 'e-skeleton-rectangle',
        WAVEEFFECT: 'e-shimmer-wave',
        PULSEEFFECT: 'e-shimmer-pulse',
        FADEEFFECT: 'e-shimmer-fade',
        VISIBLENONE: 'e-visible-none'
    };
    var SkeletonType;
    (function (SkeletonType) {
        SkeletonType["Text"] = "Text";
        SkeletonType["Circle"] = "Circle";
        SkeletonType["Square"] = "Square";
        SkeletonType["Rectangle"] = "Rectangle";
    })(SkeletonType = exports.SkeletonType || (exports.SkeletonType = {}));
    var ShimmerEffect;
    (function (ShimmerEffect) {
        ShimmerEffect["Wave"] = "Wave";
        ShimmerEffect["Fade"] = "Fade";
        ShimmerEffect["Pulse"] = "Pulse";
        ShimmerEffect["None"] = "None";
    })(ShimmerEffect = exports.ShimmerEffect || (exports.ShimmerEffect = {}));
    var Skeleton = (function (_super) {
        __extends(Skeleton, _super);
        function Skeleton(options, element) {
            return _super.call(this, options, element) || this;
        }
        Skeleton.prototype.getModuleName = function () {
            return 'skeleton';
        };
        Skeleton.prototype.getPersistData = function () {
            return this.addOnPersist([]);
        };
        Skeleton.prototype.preRender = function () {
            if (!this.element.id) {
                this.element.id = ej2_base_1.getUniqueID('e-' + this.getModuleName());
            }
            this.updateCssClass();
            ej2_base_1.attributes(this.element, { role: 'alert', 'aria-busy': 'true', 'aria-live': 'polite', 'aria-label': this.label });
        };
        Skeleton.prototype.render = function () {
            this.initialize();
        };
        Skeleton.prototype.onPropertyChanged = function (newProp, oldProp) {
            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                var prop = _a[_i];
                switch (prop) {
                    case 'width':
                    case 'height':
                        this.updateDimension();
                        break;
                    case 'shape':
                        this.updateShape();
                        break;
                    case 'shimmerEffect':
                        this.updateEffect();
                        break;
                    case 'visible':
                        this.updateVisibility();
                        break;
                    case 'label':
                        this.element.setAttribute('aria-label', this.label);
                        break;
                    case 'cssClass':
                        Eif (oldProp.cssClass) {
                            ej2_base_1.removeClass([this.element], oldProp.cssClass.split(' '));
                        }
                        this.updateCssClass();
                        break;
                }
            }
        };
        Skeleton.prototype.destroy = function () {
            _super.prototype.destroy.call(this);
            var attrs = ['role', 'aria-live', 'aria-busy', 'aria-label'];
            var cssClass = [];
            Iif (this.cssClass) {
                cssClass = cssClass.concat(this.cssClass.split(' '));
            }
            for (var i = 0; i < attrs.length; i++) {
                this.element.removeAttribute(attrs[parseInt(i.toString(), 10)]);
            }
            cssClass = cssClass.concat(this.element.classList.value.match(/(e-skeleton-[^\s]+)/g) || []);
            cssClass = cssClass.concat(this.element.classList.value.match(/(e-shimmer-[^\s]+)/g) || []);
            ej2_base_1.removeClass([this.element], cssClass);
        };
        Skeleton.prototype.initialize = function () {
            this.updateShape();
            this.updateEffect();
            this.updateVisibility();
        };
        Skeleton.prototype.updateShape = function () {
            if (!(ej2_base_1.isNullOrUndefined(this.shape))) {
                var shapeCss = cssClassName[this.shape.toUpperCase() + 'SHAPE'];
                var removeCss = (this.element.classList.value.match(/(e-skeleton-[^\s]+)/g) || []);
                this.updateDimension();
                Eif (removeCss) {
                    ej2_base_1.removeClass([this.element], removeCss);
                }
                ej2_base_1.addClass([this.element], [shapeCss]);
            }
        };
        Skeleton.prototype.updateDimension = function () {
            var width = (!this.width && (['Text', 'Rectangle'].indexOf(this.shape) > -1)) ? '100%' : ej2_base_1.formatUnit(this.width);
            var height = ['Circle', 'Square'].indexOf(this.shape) > -1 ? width : ej2_base_1.formatUnit(this.height);
            this.element.style.width = width;
            this.element.style.height = height;
        };
        Skeleton.prototype.updateEffect = function () {
            var removeCss = (this.element.classList.value.match(/(e-shimmer-[^\s]+)/g) || []);
            Eif (removeCss) {
                ej2_base_1.removeClass([this.element], removeCss);
            }
            if (!(ej2_base_1.isNullOrUndefined(this.shimmerEffect))) {
                ej2_base_1.addClass([this.element], [cssClassName[this.shimmerEffect.toUpperCase() + 'EFFECT']]);
            }
        };
        Skeleton.prototype.updateVisibility = function () {
            this.element.classList[this.visible ? 'remove' : 'add'](cssClassName.VISIBLENONE);
        };
        Skeleton.prototype.updateCssClass = function () {
            if (this.cssClass) {
                ej2_base_1.addClass([this.element], this.cssClass.split(' '));
            }
        };
        __decorate([
            ej2_base_1.Property('')
        ], Skeleton.prototype, "width", void 0);
        __decorate([
            ej2_base_1.Property('')
        ], Skeleton.prototype, "height", void 0);
        __decorate([
            ej2_base_1.Property(true)
        ], Skeleton.prototype, "visible", void 0);
        __decorate([
            ej2_base_1.Property('Text')
        ], Skeleton.prototype, "shape", void 0);
        __decorate([
            ej2_base_1.Property('Wave')
        ], Skeleton.prototype, "shimmerEffect", void 0);
        __decorate([
            ej2_base_1.Property('Loading...')
        ], Skeleton.prototype, "label", void 0);
        __decorate([
            ej2_base_1.Property('')
        ], Skeleton.prototype, "cssClass", void 0);
        Skeleton = __decorate([
            ej2_base_1.NotifyPropertyChanges
        ], Skeleton);
        return Skeleton;
    }(ej2_base_1.Component));
    exports.Skeleton = Skeleton;
});