uicore-ts/compiledScripts/UILoadingView.js

UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework tha

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var UILoadingView_exports = {};
__export(UILoadingView_exports, {
  UILoadingView: () => UILoadingView
});
module.exports = __toCommonJS(UILoadingView_exports);
var import_UIColor = require("./UIColor");
var import_UIObject = require("./UIObject");
var import_UIRectangle = require("./UIRectangle");
var import_UIView = require("./UIView");
class UILoadingView extends import_UIView.UIView {
  constructor(elementID) {
    super(elementID);
    this.isPulsing = import_UIObject.NO;
    this._theme = "light";
    this.spinnerView = new import_UIView.UIView(this.elementID + "_Spinner");
    this.spinnerView.addStyleClass("UILoadingViewSpinnerContainer");
    this.addSubview(this.spinnerView);
    this.configureWithObject({
      backgroundColor: import_UIColor.UIColor.transparentColor,
      userInteractionEnabled: import_UIObject.YES,
      pausesPointerEvents: import_UIObject.YES,
      style: { height: "100%", width: "100%" }
    });
    this.initViewStyleSelectors();
    this.updateColors();
  }
  set loading(loading) {
  }
  get loading() {
    return import_UIObject.NO;
  }
  set theme(theme) {
    this._theme = theme;
    this.updateColors();
  }
  get theme() {
    return this._theme;
  }
  initViewStyleSelectors() {
    super.initViewStyleSelectors();
    const pulseKeyframe = "UILoadingViewPulse";
    import_UIView.UIView.injectCSS(`
            @keyframes ${pulseKeyframe} {
                0% { background-color: rgba(0, 0, 0, 0.15); }
                50% { background-color: rgba(0, 0, 0, 0.35); }
                100% { background-color: rgba(0, 0, 0, 0.15); }
            }
        `, "UILoadingViewPulseCSS");
    import_UIView.UIView.createStyleSelector(".UILoadingViewPulsing", `animation: ${pulseKeyframe} 1.2s infinite ease-in-out;`);
    const spinKeyframe = "UILoadingViewSpin";
    import_UIView.UIView.injectCSS(`
            @keyframes ${spinKeyframe} {
                from { transform: rotate(0deg); }
                to { transform: rotate(-360deg); }
            }
        `, "UILoadingViewSpinCSS");
    import_UIView.UIView.createStyleSelector(".UILoadingViewSpinnerContainer::after", `
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border-style: solid;
            border-width: 5px;
            border-color: inherit;
            border-right-color: transparent !important;
            animation: ${spinKeyframe} 1.5s linear infinite;
            box-sizing: border-box;
        `);
  }
  updateColors() {
    const isLightTheme = this._theme === "light";
    const overlayColor = isLightTheme ? new import_UIColor.UIColor("rgba(255, 255, 255, 0.7)") : new import_UIColor.UIColor("rgba(0, 0, 0, 0.5)");
    const spinnerColor = isLightTheme ? new import_UIColor.UIColor("#343a40") : new import_UIColor.UIColor("#f8f9fa");
    if (!this.isPulsing) {
      this.backgroundColor = overlayColor;
    }
    this.spinnerView.style.borderTopColor = spinnerColor.stringValue;
    this.spinnerView.style.borderBottomColor = spinnerColor.stringValue;
    this.spinnerView.style.borderLeftColor = spinnerColor.stringValue;
    if (this.isPulsing) {
      this.style.backgroundColor = "";
    }
  }
  layoutSubviews() {
    super.layoutSubviews();
    this.configureWithObject({
      style: { height: "100%", width: "100%" }
    });
    const bounds = this.bounds;
    const minDimension = Math.min(bounds.width, bounds.height);
    if (minDimension < 40) {
      this.enablePulsingMode();
    } else {
      this.enableIndicatorMode();
    }
  }
  enablePulsingMode() {
    if (this.isPulsing) {
      return;
    }
    this.spinnerView.hidden = import_UIObject.YES;
    this.addStyleClass("UILoadingViewPulsing");
    this.style.backgroundColor = "";
    this.isPulsing = import_UIObject.YES;
  }
  enableIndicatorMode() {
    this.removeStyleClass("UILoadingViewPulsing");
    this.isPulsing = import_UIObject.NO;
    this.spinnerView.hidden = import_UIObject.NO;
    this.updateColors();
    const spinnerSize = 32;
    const borderWidth = 4;
    const bounds = this.bounds;
    const x = (bounds.width - spinnerSize) / 2;
    const y = (bounds.height - spinnerSize) / 2;
    this.spinnerView.frame = new import_UIRectangle.UIRectangle(x, y, spinnerSize, spinnerSize);
    this.spinnerView.style.borderWidth = borderWidth + "px";
  }
}
import_UIView.UIView.LoadingViewClass = UILoadingView;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  UILoadingView
});
//# sourceMappingURL=UILoadingView.js.map