ranui/dist/index-DHI8URkB.js

UI Component library based on `Web Component`

var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { n as noop, c as create, C as Client, M as MessageCodec } from "./plus-DgJxWGlo.js";
import { m as message } from "./index-BbW0dxzy.js";
import "./index-n4X6wdwJ.js";
const less = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.r-preview-slot{display:block}:host{cursor:pointer}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-loading{position:absolute;top:30vh;left:50vw;transform:translate(-50%);display:flex;flex-flow:column;align-items:center}.r-preview-mask .r-preview-loading-text{color:#fff;font-size:16px}.r-preview-mask .r-preview-options{width:100%;pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;-webkit-user-select:none;user-select:none}.r-preview-mask .r-preview-contain{max-width:calc(100vw - 20px);margin:0 auto;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{margin:0 auto;height:calc(100vh - 68px);display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center;overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context-pdf{width:100%;margin:34px auto;height:100vh;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center;overflow:auto}";
const PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
const PDF = "application/pdf";
const DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
const XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
const XLS = "application/vnd.ms-excel";
const TARGET_ORIGIN = "https://ranuts.github.io/document";
const renderOffice = async (file, options) => {
  var _a;
  try {
    const { iframe, onLoad, dom } = options;
    dom == null ? void 0 : dom.style.setProperty("display", "none");
    if (!iframe) return;
    Client.removeAll();
    const { id } = Client.connect({
      targetOrigin: new URL(TARGET_ORIGIN).origin,
      targetWindow: iframe.contentWindow
    });
    const chunks = await MessageCodec.encodeFileChunked(file);
    await Promise.all(
      chunks.map(
        (item) => Client.call({
          id,
          type: "RENDER_OFFICE",
          payload: item
        })
      )
    );
    iframe.style.setProperty("width", "100%");
    iframe.style.setProperty("height", "100%");
    iframe.style.setProperty("border", "none");
    iframe.style.setProperty("display", "block");
    onLoad == null ? void 0 : onLoad();
  } catch (error) {
    console.error("renderOffice error:", error);
    (_a = options.onError) == null ? void 0 : _a.call(options, error);
  }
};
async function Custom() {
  if (typeof document !== "undefined" && !customElements.get("r-preview")) {
    const { warning = noop } = message;
    const { renderPdf } = await import("./pdf-BKWcQYL4.js");
    const requestUrlToBuffer = (src, options) => {
      if (typeof XMLHttpRequest === "undefined") {
        throw new Error("XMLHttpRequest is not defined");
      }
      if (typeof document === "undefined") {
        return Promise.reject("document is not defined");
      }
      return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(options.method || "GET", src, true);
        xhr.responseType = options.responseType || "arraybuffer";
        xhr.onload = function() {
          if (xhr.status === 200) {
            const event = { success: true, data: xhr.response, message: "" };
            options.onLoad && options.onLoad(event);
            resolve(event);
          } else {
            const error = { success: false, data: xhr.status, message: `The request status is${xhr.status}` };
            options.onError && options.onError(error);
            reject(error);
          }
        };
        xhr.onerror = function(e) {
          const error = { success: false, data: e, message: `` };
          options.onError && options.onError(error);
          reject(error);
        };
        xhr.onprogress = (event) => {
          options.onProgress && options.onProgress(event);
        };
        xhr.withCredentials = options.withCredentials || false;
        if (options.headers) {
          Object.keys(options.headers).forEach(function(key) {
            (options == null ? void 0 : options.headers) && xhr.setRequestHeader(key, options.headers[key]);
          });
        }
        xhr.send(options.body);
      });
    };
    const renderFileMap = /* @__PURE__ */ new Map([
      [PDF, renderPdf],
      [PPTX, renderOffice],
      [DOCX, renderOffice],
      [XLSX, renderOffice],
      [XLS, renderOffice]
    ]);
    class CustomElement extends HTMLElement {
      constructor() {
        super();
        __publicField(this, "previewContextPdf");
        __publicField(this, "_loadingText");
        __publicField(this, "previewIframe");
        __publicField(this, "preview");
        __publicField(this, "previewContext");
        __publicField(this, "_slot");
        __publicField(this, "_div");
        __publicField(this, "_loadingElement");
        __publicField(this, "_iframe");
        __publicField(this, "_editorWindow");
        __publicField(this, "createLoading", () => {
          this._loadingElement = document.createElement("div");
          this._loadingElement.setAttribute("class", "r-preview-loading");
          const icon = document.createElement("r-icon");
          icon.setAttribute("name", "loading");
          icon.setAttribute("size", "100");
          icon.setAttribute("color", "#1E90FF");
          icon.setAttribute("spin", "");
          this._loadingText = document.createElement("div");
          this._loadingElement.appendChild(icon);
          this._loadingText.setAttribute("class", "r-preview-loading-text");
          this._loadingElement.appendChild(this._loadingText);
          return this._loadingElement;
        });
        __publicField(this, "onProgress", (event) => {
          const num = event.loaded / event.total * 100;
          const progress = Math.min(99, num).toFixed(2) + "%";
          if (this._loadingText && this._loadingElement) {
            this._loadingText.innerText = `Loading ${progress}`;
            if (num >= 100) {
              setTimeout(() => {
                if (this._loadingText) {
                  this._loadingText.innerText = `Loading...`;
                }
              }, 300);
            }
          }
        });
        __publicField(this, "onError", () => {
          var _a;
          (_a = this.preview) == null ? void 0 : _a.removeChild(this._loadingElement);
        });
        __publicField(this, "onLoad", () => {
          var _a;
          (_a = this.preview) == null ? void 0 : _a.removeChild(this._loadingElement);
        });
        __publicField(this, "handleFile", async (file) => {
          try {
            if (typeof file === "string") {
              const { success, data, message: message2 } = await requestUrlToBuffer(file, {
                onProgress: this.onProgress,
                onError: this.onError,
                responseType: "blob"
              });
              if (success && data) {
                file = new File([data], data.name, { type: data.type });
              } else {
                warning(message2);
              }
            }
            if (file instanceof File) {
              const { type } = file;
              const handler = renderFileMap.get(type);
              if (handler && this.previewContext) {
                this.previewContext.style.setProperty("width", "100%");
                const options = {
                  dom: this.previewContextPdf,
                  onError: this.onError,
                  onLoad: this.onLoad,
                  iframe: this.previewIframe
                };
                handler(file, options);
              }
            }
          } catch (error) {
          }
        });
        __publicField(this, "closePreview", () => {
          var _a;
          if (this.preview) {
            Client.broadcast({
              type: "CLOSE_PREVIEW",
              payload: ""
            });
            Client.removeAll();
            (_a = this.previewIframe) == null ? void 0 : _a.style.setProperty("display", "none");
            this.preview.style.setProperty("display", "none");
            if (this.previewContextPdf && this.previewContext) {
              this.previewContext.removeChild(this.previewContextPdf);
            }
          }
        });
        __publicField(this, "showPreview", () => {
          var _a, _b, _c;
          if (this.src) {
            if (this.preview) {
              this.preview.style.display = "block";
              this.preview.appendChild(this._loadingElement);
              if (this.previewContextPdf && ((_a = this.previewContext) == null ? void 0 : _a.contains(this.previewContextPdf))) {
                this.previewContext.removeChild(this.previewContextPdf);
              }
              this.previewContextPdf = document.createElement("div");
              this.previewContextPdf.setAttribute("class", "r-preview-context-pdf");
              (_b = this.previewContext) == null ? void 0 : _b.appendChild(this.previewContextPdf);
              (_c = this._loadingElement) == null ? void 0 : _c.style.setProperty("display", "block");
            } else {
              this.preliminary();
            }
            this.handleFile(this.src);
          }
        });
        __publicField(this, "preliminary", () => {
          var _a;
          this.preview = document.createElement("div");
          this.preview.setAttribute("class", "r-preview-mask");
          this.preview.setAttribute("id", "r-preview-mask");
          const previewOption = document.createElement("div");
          previewOption.setAttribute("class", "r-preview-options");
          if (this.closeable !== "false") {
            const previewCloseButton = document.createElement("r-icon");
            previewCloseButton.setAttribute("class", "r-preview-options-close");
            previewCloseButton.setAttribute("name", "close-circle-fill");
            previewCloseButton.setAttribute("size", "40");
            previewCloseButton.addEventListener("click", this.closePreview);
            previewOption.appendChild(previewCloseButton);
          }
          const previewContain = document.createElement("div");
          previewContain.setAttribute("class", "r-preview-contain");
          this.previewContext = document.createElement("div");
          this.previewContext.setAttribute("class", "r-preview-context");
          this.previewContextPdf = document.createElement("div");
          this.previewContextPdf.setAttribute("class", "r-preview-context-pdf");
          this.previewContext.appendChild(this.previewContextPdf);
          this.previewIframe = document.createElement("iframe");
          this.previewIframe.setAttribute("src", TARGET_ORIGIN);
          this.previewIframe.setAttribute("style", "display: none;");
          this.previewIframe.style.setProperty("margin-bottom", "30px");
          this.previewContext.appendChild(this.previewIframe);
          previewContain.appendChild(this.previewContext);
          this.preview.appendChild(previewOption);
          this._loadingElement = this.createLoading();
          this.preview.appendChild(this._loadingElement);
          (_a = this.preview) == null ? void 0 : _a.appendChild(previewContain);
          this.preview.style.setProperty("display", "none");
          document.body.appendChild(this.preview);
        });
        this._div = document.createElement("div");
        this.preview = document.getElementById("r-preview-mask");
        this._slot = document.createElement("slot");
        this._div.appendChild(this._slot);
        this._slot.setAttribute("class", "r-preview-slot");
        this._div.setAttribute("class", "r-preview");
        const shadowRoot = this.attachShadow({ mode: "closed" });
        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = less;
        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
        shadowRoot.appendChild(this._div);
      }
      static get observedAttributes() {
        return ["src", "closeable"];
      }
      get label() {
        return this.getAttribute("label");
      }
      set label(value) {
        if (value) this.setAttribute("label", value);
      }
      get src() {
        return this.getAttribute("src");
      }
      set src(value) {
        if (value) this.setAttribute("src", value);
      }
      get closeable() {
        return this.getAttribute("closeable");
      }
      set closeable(value) {
        if (value) this.setAttribute("closeable", value);
      }
      connectedCallback() {
        this.preliminary();
        this.addEventListener("click", this.showPreview);
      }
      disconnectedCallback() {
        this.removeEventListener("click", this.showPreview);
        this.preview && document.body.removeChild(this.preview);
      }
      attributeChangedCallback(name, oldValue, newValue) {
        if (newValue !== oldValue) {
          if (name === "src" && newValue) {
            this.setAttribute("src", newValue);
            this.showPreview();
          }
        }
      }
    }
    if (typeof document !== "undefined" && !customElements.get("r-preview")) {
      customElements.define("r-preview", CustomElement);
      const style = create("style").setTextContent(less);
      document.body.appendChild(style.element);
    }
  }
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
  index as a,
  index$1 as i
};