adalo-pdf-viewer 1.2.2

package/src/components/PDFViewer/index.js

@@ -0,0 +1,506 @@
+/**
+ * PDFViewer — Web / Editor / Previewer component
+ *
+ * Toolbar: liquid-glass floating pill at the bottom (mobile only).
+ *   - Share: fetches the PDF as a Blob → shares it as a FILE via Web Share
+ *     API Level 2 (iOS/Android shows "Save to Files", AirDrop, etc.).
+ *     Falls back to URL share if CORS blocks the fetch.
+ *   - Search: expands an inline text field; on submit reloads the iframe
+ *     with #search=term (Chrome PDF viewer highlights matches).
+ *
+ * Fit-to-width: appends #zoom=FitH on non-iOS browsers (Chrome/Edge).
+ * Height: uses Adalo's _height / _width internal props for exact sizing.
+ */
+
+import React, { Component } from 'react'
+
+// ─── Global styles ───────────────────────────────────────────────────────────
+
+function ensureGlobalStyles() {
+  if (typeof document === 'undefined') return
+  const id = 'adalo-pdf-viewer-styles'
+  if (document.getElementById(id)) return
+  const el = document.createElement('style')
+  el.id = id
+  el.textContent = `
+    @keyframes adalo-pdf-spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes adalo-pdf-fadein {
+      from { opacity: 0; transform: translateY(6px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes adalo-pdf-toolbar-in {
+      from { opacity: 0; transform: translateX(-50%) translateY(12px); }
+      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+    }
+  `
+  document.head.appendChild(el)
+}
+
+// ─── Platform helpers ────────────────────────────────────────────────────────
+
+const isIOS = () =>
+  typeof navigator !== 'undefined' &&
+  /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+  !window.MSStream
+
+const isMobileBrowser = () =>
+  typeof navigator !== 'undefined' &&
+  /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+// ─── SVG icons ───────────────────────────────────────────────────────────────
+
+// SF-style "square.and.arrow.up"
+const ShareSVG = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none">
+    <path d="M8.5 10.5V1.5" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
+    <path d="M5.5 4.5l3-3 3 3" stroke="white" strokeWidth="1.6"
+      strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M4.5 7.5H3a1 1 0 00-1 1v6a1 1 0 001 1h11a1 1 0 001-1v-6a1 1 0 00-1-1h-1.5"
+      stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
+  </svg>
+)
+
+// SF-style magnifying glass
+const SearchSVG = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none">
+    <circle cx="7.5" cy="7.5" r="5" stroke="white" strokeWidth="1.6"/>
+    <path d="M11.5 11.5l3 3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
+  </svg>
+)
+
+// X / close
+const CloseSVG = () => (
+  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+    <path d="M1.5 1.5l10 10M11.5 1.5l-10 10" stroke="rgba(255,255,255,0.7)"
+      strokeWidth="1.6" strokeLinecap="round"/>
+  </svg>
+)
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+class PDFViewerWeb extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loading: true,
+      error: false,
+      searchActive: false,
+      searchQuery: '',
+      sharing: false,
+    }
+    this.containerRef = null
+    this.iframeRef    = null
+    ensureGlobalStyles()
+  }
+
+  // ── iframe events ──────────────────────────────────────────────────────────
+
+  handleLoad = () => {
+    const { onLoadComplete } = this.props
+    this.setState({ loading: false, error: false })
+    if (onLoadComplete) onLoadComplete(0)
+  }
+
+  handleError = () => {
+    const { onError } = this.props
+    this.setState({ loading: false, error: true })
+    if (onError) onError()
+  }
+
+  // ── Share (file, not link) ─────────────────────────────────────────────────
+
+  handleShare = async () => {
+    const { pdfUrl } = this.props
+    if (!pdfUrl || this.state.sharing) return
+    this.setState({ sharing: true })
+
+    try {
+      // Attempt to fetch the PDF as a Blob so we share a FILE, not just a URL.
+      // This triggers "Save to Files", AirDrop, etc. on iOS.
+      let shared = false
+
+      if (navigator.share) {
+        try {
+          const resp = await fetch(pdfUrl)
+          const blob = await resp.blob()
+          const rawName = decodeURIComponent(pdfUrl.split('/').pop().split('?')[0]) || 'document'
+          const fileName = rawName.endsWith('.pdf') ? rawName : rawName + '.pdf'
+          const file = new File([blob], fileName, { type: 'application/pdf' })
+
+          if (navigator.canShare && navigator.canShare({ files: [file] })) {
+            await navigator.share({ files: [file], title: 'PDF Document' })
+            shared = true
+          }
+        } catch (_) {
+          // CORS error or canShare not supported — fall through to URL share
+        }
+
+        if (!shared) {
+          try {
+            await navigator.share({ url: pdfUrl, title: 'PDF Document' })
+            shared = true
+          } catch (e) {
+            if (e.name === 'AbortError') { shared = true } // user cancelled
+          }
+        }
+      }
+
+      if (!shared) window.open(pdfUrl, '_blank')
+    } finally {
+      this.setState({ sharing: false })
+    }
+  }
+
+  // ── Search ─────────────────────────────────────────────────────────────────
+
+  handleSearchToggle = () => {
+    this.setState(prev => ({
+      searchActive: !prev.searchActive,
+      searchQuery: '',
+    }), () => {
+      // If closing search, reset iframe to non-search URL
+      if (!this.state.searchActive && this.iframeRef) {
+        this.iframeRef.src = this.buildEmbedUrl(this.props.pdfUrl)
+      }
+    })
+  }
+
+  handleSearchChange = (e) => {
+    this.setState({ searchQuery: e.target.value })
+  }
+
+  handleSearchSubmit = (e) => {
+    e.preventDefault()
+    const { pdfUrl } = this.props
+    const { searchQuery } = this.state
+    if (!pdfUrl || !this.iframeRef) return
+
+    const base = this.buildEmbedUrl(pdfUrl)
+    const sep  = base.includes('#') ? '&' : '#'
+    // Chrome PDF viewer supports #search=term to highlight first match
+    this.iframeRef.src = searchQuery
+      ? `${base}${sep}search=${encodeURIComponent(searchQuery)}`
+      : base
+  }
+
+  // ── URL builder ────────────────────────────────────────────────────────────
+
+  buildEmbedUrl = (url) => {
+    if (!url) return null
+    // FitH scales the PDF to fill the iframe width in Chrome / Edge.
+    // iOS Safari ignores PDF open parameters — the share button is the
+    // better path for iOS users who want to view at full quality.
+    if (!isIOS()) {
+      const sep = url.includes('#') ? '&' : '#'
+      return `${url}${sep}zoom=FitH`
+    }
+    return url
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  render() {
+    const {
+      pdfUrl,
+      backgroundColor,
+      controlColor,
+      loadingText,
+      loadingTextColor,
+      errorText,
+      errorTextColor,
+      _height,
+      _width,
+    } = this.props
+
+    const { loading, error, searchActive, searchQuery, sharing } = this.state
+    const accent = controlColor || '#0066CC'
+    const bg     = backgroundColor || '#FFFFFF'
+    const mobile = isMobileBrowser()
+
+    const explicitW = _width  ? `${_width}px`  : '100%'
+    const explicitH = _height ? `${_height}px` : '100%'
+
+    // ── Styles ──────────────────────────────────────────────────────────────
+
+    const root = {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      width: explicitW,
+      height: explicitH,
+      backgroundColor: bg,
+      overflow: 'hidden',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    }
+
+    const overlay = {
+      position: 'absolute',
+      top: 0, left: 0, right: 0, bottom: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: bg,
+      zIndex: 2,
+      animation: 'adalo-pdf-fadein 0.2s ease both',
+    }
+
+    // Liquid-glass pill — dark, blurred, very iOS 26
+    const pill = {
+      position: 'absolute',
+      bottom: 18,
+      left: '50%',
+      transform: 'translateX(-50%)',
+      zIndex: 10,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2,
+      // Liquid glass: dark translucent, heavy blur, subtle inner rim light
+      background: 'rgba(20, 20, 22, 0.72)',
+      backdropFilter: 'blur(28px) saturate(1.8)',
+      WebkitBackdropFilter: 'blur(28px) saturate(1.8)',
+      borderRadius: 40,
+      border: '0.5px solid rgba(255,255,255,0.16)',
+      boxShadow: [
+        '0 8px 32px rgba(0,0,0,0.28)',
+        'inset 0 1px 0 rgba(255,255,255,0.10)',
+        'inset 0 -1px 0 rgba(0,0,0,0.20)',
+      ].join(', '),
+      padding: '5px 5px',
+      animation: 'adalo-pdf-toolbar-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both',
+      // Prevent layout from extending beyond component
+      maxWidth: 'calc(100% - 32px)',
+    }
+
+    const iconBtn = (pressed) => ({
+      width: 38,
+      height: 38,
+      borderRadius: 19,
+      border: 'none',
+      background: pressed ? 'rgba(255,255,255,0.14)' : 'transparent',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 0,
+      flexShrink: 0,
+      transition: 'background 0.12s',
+    })
+
+    // ── No URL: placeholder ────────────────────────────────────────────────
+    if (!pdfUrl) {
+      return (
+        <div ref={el => { this.containerRef = el }} style={root}>
+          <div style={{
+            ...overlay,
+            border: '1.5px dashed',
+            borderColor: accent + '55',
+            borderRadius: 10,
+            top: 4, left: 4, right: 4, bottom: 4,
+          }}>
+            <svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+              style={{ marginBottom: 12, opacity: 0.75 }}>
+              <rect x="8" y="4" width="28" height="36" rx="3" fill={accent} opacity="0.12"/>
+              <rect x="8" y="4" width="28" height="36" rx="3" stroke={accent} strokeWidth="1.5"/>
+              <path d="M28 4v9h9" stroke={accent} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M16 20h16M16 26h10" stroke={accent} strokeWidth="1.5" strokeLinecap="round"/>
+            </svg>
+            <span style={{ fontSize: 15, fontWeight: 600, color: '#1A1A1A', marginBottom: 4 }}>
+              PDF Viewer
+            </span>
+            <span style={{ fontSize: 13, color: loadingTextColor || '#8E8E93',
+              textAlign: 'center', lineHeight: '18px' }}>
+              Set a PDF URL to preview
+            </span>
+          </div>
+        </div>
+      )
+    }
+
+    const embedUrl = this.buildEmbedUrl(pdfUrl)
+
+    return (
+      <div ref={el => { this.containerRef = el }} style={root}>
+
+        {/* ── Loading overlay ───────────────────────────────────────────── */}
+        {loading && (
+          <div style={overlay}>
+            <div style={{
+              width: 36, height: 36, borderRadius: '50%',
+              border: `3px solid ${accent}22`,
+              borderTopColor: accent,
+              animation: 'adalo-pdf-spin 0.75s linear infinite',
+              marginBottom: 14,
+            }}/>
+            <span style={{ fontSize: 13, color: loadingTextColor || '#8E8E93' }}>
+              {loadingText || 'Loading PDF…'}
+            </span>
+          </div>
+        )}
+
+        {/* ── Error overlay ─────────────────────────────────────────────── */}
+        {error && (
+          <div style={overlay}>
+            <div style={{
+              width: 44, height: 44, borderRadius: '50%',
+              backgroundColor: (errorTextColor || '#FF3B30') + '15',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              marginBottom: 12,
+            }}>
+              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+                <circle cx="11" cy="11" r="10" stroke={errorTextColor || '#FF3B30'} strokeWidth="1.5"/>
+                <path d="M11 7v5M11 15v.5" stroke={errorTextColor || '#FF3B30'}
+                  strokeWidth="1.75" strokeLinecap="round"/>
+              </svg>
+            </div>
+            <span style={{ fontSize: 14, color: errorTextColor || '#FF3B30',
+              textAlign: 'center', lineHeight: '20px', maxWidth: 220 }}>
+              {errorText || 'Could not load PDF.\nPlease check the URL.'}
+            </span>
+          </div>
+        )}
+
+        {/* ── PDF iframe ────────────────────────────────────────────────── */}
+        {!error && (() => {
+          const iosDevice = isIOS()
+          // iOS Safari ignores PDF open parameters like #zoom=FitH.
+          // Workaround: render the iframe at natural PDF page width (612pt),
+          // then scale it down so it fits our component width exactly.
+          // Standard A4/Letter pages are 612pt wide; we scale to component width.
+          const compW     = parseInt(_width || '400', 10) || 400
+          const compH     = parseInt(_height || '687', 10) || 687
+          const PDF_PAGE_W = 612            // standard letter/A4 PDF width in points
+          const iosScale  = compW / PDF_PAGE_W  // e.g. 400/612 ≈ 0.65
+          const scaledW   = PDF_PAGE_W           // render at natural width
+          const scaledH   = Math.round(compH / iosScale)
+
+          return (
+            // Wrapper clips the scaled iframe to the component bounds
+            <div style={{
+              position: 'relative',
+              flexGrow: 1, flexShrink: 1, flexBasis: '0%',
+              overflow: 'hidden',
+              minHeight: 0,
+            }}>
+              <iframe
+                ref={el => { this.iframeRef = el }}
+                src={embedUrl}
+                onLoad={this.handleLoad}
+                onError={this.handleError}
+                title="PDF Viewer"
+                allow="fullscreen"
+                style={iosDevice ? {
+                  // Render at the PDF's natural width, then scale to fit
+                  display: 'block',
+                  border: 'none',
+                  width: `${scaledW}px`,
+                  height: `${scaledH}px`,
+                  transform: `scale(${iosScale})`,
+                  transformOrigin: '0 0',
+                } : {
+                  // Chrome / desktop: FitH handles width; just fill the box
+                  display: 'block',
+                  border: 'none',
+                  width: '100%',
+                  height: '100%',
+                  position: 'absolute',
+                  top: 0, left: 0,
+                }}
+              />
+            </div>
+          )
+        })()}
+
+        {/* ── Liquid-glass toolbar (mobile, after load) ─────────────────── */}
+        {mobile && !loading && !error && (
+          <div style={pill}>
+
+            {/* Search toggle / close */}
+            <button
+              onClick={this.handleSearchToggle}
+              style={iconBtn(false)}
+              title={searchActive ? 'Close search' : 'Search PDF'}
+              aria-label={searchActive ? 'Close search' : 'Search PDF'}
+            >
+              {searchActive ? <CloseSVG /> : <SearchSVG />}
+            </button>
+
+            {/* Expandable search input */}
+            {searchActive && (
+              <form
+                onSubmit={this.handleSearchSubmit}
+                style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}
+              >
+                <input
+                  type="text"
+                  autoFocus
+                  placeholder="Search…"
+                  value={searchQuery}
+                  onChange={this.handleSearchChange}
+                  style={{
+                    width: 160,
+                    height: 30,
+                    background: 'rgba(255,255,255,0.10)',
+                    border: 'none',
+                    borderRadius: 8,
+                    color: 'white',
+                    fontSize: 15,
+                    padding: '0 10px',
+                    outline: 'none',
+                    caretColor: 'white',
+                    // placeholder colour via CSS class isn't possible inline;
+                    // it'll default to the browser's placeholder style
+                  }}
+                />
+              </form>
+            )}
+
+            {/* Divider */}
+            {!searchActive && (
+              <div style={{
+                width: 0.5,
+                height: 22,
+                background: 'rgba(255,255,255,0.18)',
+                margin: '0 2px',
+                flexShrink: 0,
+              }}/>
+            )}
+
+            {/* Share */}
+            <button
+              onClick={this.handleShare}
+              disabled={sharing}
+              style={{
+                ...iconBtn(false),
+                opacity: sharing ? 0.5 : 1,
+                cursor: sharing ? 'default' : 'pointer',
+              }}
+              title="Share PDF"
+              aria-label="Share PDF"
+            >
+              {sharing
+                ? (
+                  <div style={{
+                    width: 16, height: 16, borderRadius: '50%',
+                    border: '2px solid rgba(255,255,255,0.3)',
+                    borderTopColor: 'white',
+                    animation: 'adalo-pdf-spin 0.7s linear infinite',
+                  }}/>
+                )
+                : <ShareSVG />
+              }
+            </button>
+
+          </div>
+        )}
+
+      </div>
+    )
+  }
+}
+
+export { PDFViewerWeb as PDFViewer }
+export default PDFViewerWeb