@wu529778790/floating-ad 0.0.0-stage → 0.1.3

package/dist/index.umd.js

@@ -0,0 +1,242 @@
+"use strict";
+var FloatingAd = (() => {
+  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);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    FloatingAd: () => FloatingAd,
+    default: () => index_default
+  });
+
+  // src/FloatingAd.ts
+  var DEFAULT_THEME = {
+    bg: "rgba(255, 255, 255, 0.96)",
+    accent: "#333",
+    radius: "12px",
+    border: "rgba(0, 0, 0, 0.1)"
+  };
+  var STORAGE_KEY = "floating-ad:closed";
+  var MOBILE_QUERY = "(max-width: 767px)";
+  function isMobile() {
+    var _a, _b, _c;
+    if (typeof window === "undefined") return false;
+    return (_c = (_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, MOBILE_QUERY)) == null ? void 0 : _b.matches) != null ? _c : false;
+  }
+  function hasCloseMark() {
+    if (typeof localStorage === "undefined") return false;
+    try {
+      return localStorage.getItem(STORAGE_KEY) === "1";
+    } catch {
+      return false;
+    }
+  }
+  function setCloseMark() {
+    if (typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(STORAGE_KEY, "1");
+    } catch {
+    }
+  }
+  function isRenderableAd(ad) {
+    var _a;
+    return Boolean(ad && typeof ad === "object" && ((_a = ad.src) == null ? void 0 : _a.trim()));
+  }
+  function resolveOptions(options) {
+    var _a, _b, _c, _d, _e, _f;
+    const raw = Array.isArray(options.ads) ? options.ads : [];
+    return {
+      ads: raw.filter(isRenderableAd),
+      // 移动端缺省落在左下角（不挡右侧阅读区/返回顶部按钮）
+      position: (_a = options.position) != null ? _a : isMobile() ? "left-bottom" : "left-center",
+      closePersistence: (_b = options.closePersistence) != null ? _b : false,
+      hideOnMobile: (_c = options.hideOnMobile) != null ? _c : false,
+      zIndex: (_d = options.zIndex) != null ? _d : 9999,
+      adLabel: options.adLabel === void 0 ? false : options.adLabel,
+      imageFit: options.imageFit === "contain" ? "contain" : "cover",
+      sizeOverrides: {
+        width: Number.isFinite(options.width) ? Math.max(80, Number(options.width)) : void 0,
+        offset: Number.isFinite(options.offset) ? Math.max(0, Number(options.offset)) : void 0,
+        imageSize: Number.isFinite(options.imageSize) ? Math.max(40, Number(options.imageSize)) : void 0
+      },
+      theme: { ...DEFAULT_THEME, ...(_e = options.theme) != null ? _e : {} },
+      themeOverrides: (_f = options.theme) != null ? _f : {},
+      onClick: options.onClick
+    };
+  }
+  var FloatingAd = class {
+    constructor(options = {}, container = document.body) {
+      this.el = null;
+      this.closeBtn = null;
+      /** 本次渲染的广告列表（与 DOM 上的 data-index 一一对应） */
+      this.rendered = [];
+      this.handleClose = () => {
+        this.close();
+      };
+      this.handleImageError = (event) => {
+        const img = event.target;
+        if (!img || img.tagName !== "IMG" || !img.classList.contains("fa-img")) return;
+        const media = img.closest(".fa-media");
+        if (!media) return;
+        media.classList.add("fa-media--failed");
+        const item = media.closest(".fa-item");
+        if (item && !item.querySelector(".fa-body")) item.classList.add("fa-item--failed");
+      };
+      this.handleItemClick = (event) => {
+        var _a;
+        if (!this.opts.onClick) return;
+        const target = event.target;
+        const item = (_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, ".fa-item");
+        if (!item) return;
+        const index = Number(item.dataset.index);
+        const ad = this.rendered[index];
+        if (!ad) return;
+        this.opts.onClick(ad, event);
+      };
+      this.opts = resolveOptions(options);
+      this.container = container;
+      if (this.opts.hideOnMobile && isMobile()) return;
+      if (this.opts.closePersistence && hasCloseMark()) return;
+      this.render();
+    }
+    /** 是否已挂载到页面 */
+    isMounted() {
+      return this.el !== null && this.el.isConnected;
+    }
+    /** 打开（已关闭后再次显示，忽略 localStorage 关闭标记） */
+    open() {
+      if (this.isMounted()) return;
+      this.render();
+    }
+    /** 关闭浮窗（完全移除）。默认不记住状态，刷新后重新出现 */
+    close() {
+      if (this.opts.closePersistence) {
+        setCloseMark();
+      }
+      this.destroy();
+    }
+    /** 从页面移除并解绑 */
+    destroy() {
+      var _a, _b, _c, _d;
+      (_a = this.closeBtn) == null ? void 0 : _a.removeEventListener("click", this.handleClose);
+      this.closeBtn = null;
+      (_b = this.el) == null ? void 0 : _b.removeEventListener("click", this.handleItemClick);
+      (_c = this.el) == null ? void 0 : _c.removeEventListener("error", this.handleImageError, true);
+      (_d = this.el) == null ? void 0 : _d.remove();
+      this.el = null;
+      this.rendered = [];
+    }
+    /** 用新配置重渲染（保留原容器） */
+    update(options) {
+      this.destroy();
+      this.opts = resolveOptions(options);
+      if (this.opts.hideOnMobile && isMobile()) return;
+      if (this.opts.closePersistence && hasCloseMark()) return;
+      this.render();
+    }
+    render() {
+      var _a;
+      const { ads, position, zIndex, themeOverrides, adLabel, imageFit, sizeOverrides } = this.opts;
+      if (ads.length === 0) return;
+      const root = document.createElement("div");
+      root.className = "fa-widget";
+      root.dataset.position = position;
+      root.style.zIndex = String(zIndex);
+      root.style.setProperty("--fa-img-fit", imageFit);
+      if (sizeOverrides.width !== void 0) {
+        root.style.setProperty("--fa-width", `${sizeOverrides.width}px`);
+      }
+      if (sizeOverrides.offset !== void 0) {
+        root.style.setProperty("--fa-offset", `${sizeOverrides.offset}px`);
+      }
+      if (sizeOverrides.imageSize !== void 0) {
+        root.style.setProperty("--fa-img-size", `${sizeOverrides.imageSize}px`);
+      }
+      const overrides = [
+        ["--fa-bg", themeOverrides.bg],
+        ["--fa-accent", themeOverrides.accent],
+        ["--fa-radius", themeOverrides.radius],
+        ["--fa-border", themeOverrides.border]
+      ];
+      for (const [key, value] of overrides) {
+        if (value !== void 0) root.style.setProperty(key, value);
+      }
+      const label = adLabel ? escapeHtml(String(adLabel)) : "";
+      root.innerHTML = `
+      <button class="fa-close" type="button" aria-label="\u5173\u95ED\u5E7F\u544A">${CLOSE_SVG}</button>
+      ${ads.map((ad, index) => this.renderItem(ad, index, index === 0 ? label : "")).join('<div class="fa-divider" role="separator"></div>')}
+    `;
+      this.closeBtn = root.querySelector(".fa-close");
+      (_a = this.closeBtn) == null ? void 0 : _a.addEventListener("click", this.handleClose);
+      root.addEventListener("click", this.handleItemClick);
+      root.addEventListener("error", this.handleImageError, true);
+      this.rendered = ads;
+      this.container.appendChild(root);
+      this.el = root;
+    }
+    renderItem(ad, index, label) {
+      var _a, _b;
+      const media = `<span class="fa-media">
+        <img class="fa-img" src="${escapeAttr(ad.src)}" alt="${escapeAttr((_b = (_a = ad.alt) != null ? _a : ad.title) != null ? _b : "")}" loading="lazy" decoding="async" />
+        ${ad.badge ? `<span class="fa-tag">${escapeHtml(ad.badge)}</span>` : ""}
+        ${label ? `<span class="fa-label">${label}</span>` : ""}
+      </span>`;
+      const body = ad.title || ad.desc ? `<span class="fa-body">
+            ${ad.title ? `<span class="fa-title">${escapeHtml(ad.title)}</span>` : ""}
+            ${ad.desc ? `<span class="fa-desc">${escapeHtml(ad.desc)}</span>` : ""}
+          </span>` : "";
+      const inner = `${media}${body}`;
+      const href = ad.href ? safeHref(ad.href) : null;
+      if (href) {
+        const target = ad.target === "_self" ? "_self" : "_blank";
+        const rel = target === "_blank" ? ' rel="noopener noreferrer nofollow sponsored"' : ' rel="nofollow sponsored"';
+        return `<a class="fa-item" href="${escapeAttr(href)}" target="${target}"${rel} data-index="${index}">${inner}</a>`;
+      }
+      return `<div class="fa-item" data-index="${index}">${inner}</div>`;
+    }
+  };
+  var CLOSE_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+  function safeHref(href) {
+    const trimmed = href.trim();
+    if (!trimmed) return null;
+    const compact = trimmed.replace(/[\s\u0000-\u001f]/g, "").toLowerCase();
+    if (/^(javascript|data|vbscript|file):/.test(compact)) return null;
+    return trimmed;
+  }
+  function escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  function escapeAttr(value) {
+    return escapeHtml(value);
+  }
+
+  // src/index.ts
+  var index_default = FloatingAd;
+  return __toCommonJS(index_exports);
+})();
+
+if (typeof FloatingAd !== "undefined") {
+  FloatingAd = FloatingAd.default || FloatingAd;
+  var faDoc = document.documentElement;
+  var faDisabled = faDoc && faDoc.getAttribute("data-fa-auto") === "false";
+  if (!faDisabled && window.__FLOATING_AD_OPTIONS__ && !window.__floatingAdAutoInit__) {
+    window.__floatingAdAutoInit__ = true;
+    new FloatingAd(window.__FLOATING_AD_OPTIONS__);
+  }
+}

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@wu529778790/floating-ad",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.3",
+  "description": "A minimal, zero-dependency floating ad slot widget for any website: image or text ads on the left/right edge, closable, themeable via CSS variables.",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./style.css": "./dist/floating-ad.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "floating",
+    "widget",
+    "ad",
+    "ads",
+    "adslot",
+    "banner",
+    "promotion",
+    "sponsor"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wu529778790/components.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup && node -e \"require('fs').copyFileSync('src/styles.css','dist/floating-ad.css')\"",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  }
+}