aile-capacitor-aiff
Version:
AIFF WebView plugin for Capacitor with iframe-based web implementation
3 lines (2 loc) • 8.62 kB
JavaScript
"use strict";var e,t=require("@capacitor/core");exports.ToolBarType=void 0,(e=exports.ToolBarType||(exports.ToolBarType={})).ACTIVITY="activity",e.NAVIGATION="navigation",e.BLANK="blank",e.DEFAULT="";const n=t.registerPlugin("AiffWebView",{web:()=>Promise.resolve().then(function(){return s}).then(e=>new e.AiffWebViewWeb)});var s=Object.freeze({__proto__:null,AiffWebViewWeb:class{constructor(){this.modalElement=null,this.iframeElement=null,this.urlChangeListeners=[],this.closeListeners=[],this.messageListeners=[]}async openWebView(e){this.modalElement&&this.closeWebView(),this.createModal(e),this.setupEventListeners()}async executeScript(e){var t;(null===(t=this.iframeElement)||void 0===t?void 0:t.contentWindow)&&this.iframeElement.contentWindow.eval(e.code)}async postMessage(e){var t;if(null===(t=this.iframeElement)||void 0===t?void 0:t.contentWindow){const t=`window.postMessageToJS(${JSON.stringify(e.detail)});`;this.executeScript({code:t})}}async setUrl(e){this.iframeElement&&(this.iframeElement.src=e.url)}async reload(){this.iframeElement&&(this.iframeElement.src=this.iframeElement.src)}async addListener(e,t){switch(e){case"urlChangeEvent":this.urlChangeListeners.push(t);break;case"closeEvent":this.closeListeners.push(t);break;case"messageFromWebview":this.messageListeners.push(t)}return{remove:async()=>{switch(e){case"urlChangeEvent":this.urlChangeListeners=this.urlChangeListeners.filter(e=>e!==t);break;case"closeEvent":this.closeListeners=this.closeListeners.filter(e=>e!==t);break;case"messageFromWebview":this.messageListeners=this.messageListeners.filter(e=>e!==t)}}}}createModal(e){this.modalElement=document.createElement("div"),this.modalElement.className="aiff-webview-modal",this.modalElement.style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 300ms ease-in-out;\n ";const t=document.createElement("div");t.className="aiff-webview-container",t.style.cssText="\n width: 90%;\n height: 80%;\n max-width: 1200px;\n background: white;\n border-radius: 8px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n transform: scale(0.9);\n transition: transform 300ms ease-in-out;\n ";const n=this.createToolbar(e);t.appendChild(n),this.iframeElement=document.createElement("iframe"),this.iframeElement.src=e.url,this.iframeElement.style.cssText="\n flex: 1;\n width: 100%;\n border: none;\n background: white;\n ",e.iframeSandbox?this.iframeElement.sandbox.add(...e.iframeSandbox):this.iframeElement.sandbox.add("allow-scripts","allow-same-origin","allow-forms"),t.appendChild(this.iframeElement),this.modalElement.appendChild(t),document.body.appendChild(this.modalElement),requestAnimationFrame(()=>{this.modalElement.style.opacity="1",t.style.transform="scale(1)"})}createToolbar(e){const t=document.createElement("div");t.className="aiff-webview-toolbar",t.style.cssText=`\n height: 44px;\n background: ${e.toolbarColor||"#ffffff"};\n border-bottom: 1px solid #e0e0e0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n flex-shrink: 0;\n `;const n=document.createElement("button");n.innerHTML="×",n.style.cssText="\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n ",n.onclick=()=>this.closeWebView();const s=document.createElement("div");s.textContent=e.title||"WebView",s.style.cssText="\n font-size: 16px;\n font-weight: 600;\n flex: 1;\n text-align: center;\n margin: 0 16px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n ";const i=document.createElement("button");return i.innerHTML="↻",i.style.cssText="\n background: none;\n border: none;\n font-size: 16px;\n cursor: pointer;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n ",i.onclick=()=>this.reload(),t.appendChild(n),t.appendChild(s),e.showReloadButton?t.appendChild(i):t.appendChild(document.createElement("div")),t}setupEventListeners(){this.iframeElement&&(this.iframeElement.addEventListener("load",()=>{var e;const t=(null===(e=this.iframeElement)||void 0===e?void 0:e.src)||"";this.urlChangeListeners.forEach(e=>e({url:t})),this.injectAiffJavaScriptInterface()}),window.addEventListener("message",e=>{var t,n;e.source===(null===(t=this.iframeElement)||void 0===t?void 0:t.contentWindow)&&("aiff-mobile-app-message"===(null===(n=e.data)||void 0===n?void 0:n.type)?this.messageListeners.forEach(t=>t({detail:e.data.payload,rawMessage:JSON.stringify(e.data.payload)})):this.messageListeners.forEach(t=>t({detail:e.data,rawMessage:JSON.stringify(e.data)})))}))}injectAiffJavaScriptInterface(){var e;if(!(null===(e=this.iframeElement)||void 0===e?void 0:e.contentWindow))return;this.executeScript({code:"\n (function() {\n if (!window.mobileApp) {\n window.mobileApp = {\n postMessage: function(message) {\n if (window.parent && window.parent !== window) {\n window.parent.postMessage({\n type: 'aiff-mobile-app-message',\n payload: message\n }, '*');\n }\n }\n };\n }\n\n // 向页面发送消息的方法\n if (!window.postMessageToJS) {\n window.postMessageToJS = function(detail) {\n window.dispatchEvent(new CustomEvent('messageFromNative', { detail }));\n };\n }\n\n // 兼容性别名\n if (!window.AIFF) {\n window.AIFF = {\n postMessage: window.mobileApp.postMessage,\n receiveMessage: function(callback) {\n window.addEventListener('messageFromNative', callback);\n }\n };\n }\n })();\n "})}closeWebView(){var e;if(this.modalElement){const t=(null===(e=this.iframeElement)||void 0===e?void 0:e.src)||"";this.closeListeners.forEach(e=>e({url:t})),document.body.removeChild(this.modalElement),this.modalElement=null,this.iframeElement=null}}}});exports.AiffIntegration=class{static async openAiffPage(e,t,n={}){const s=Object.assign({url:t,title:"AIFF应用",toolbarType:"activity",theme:"auto",allowPopups:!0},n);e.addListener("messageFromWebview",t=>{console.log("收到来自AIFF页面的消息:",t.detail),this.handleAiffMessage(t.detail,e)}),e.addListener("urlChangeEvent",e=>{console.log("AIFF页面URL变化:",e.url)}),e.addListener("closeEvent",e=>{console.log("AIFF页面关闭:",e.url)}),await e.openWebView(s)}static async sendMessageToAiff(e,t){await e.postMessage({detail:t})}static async sendDataToAiff(e,t,n="data"){await this.sendMessageToAiff(e,{type:n,data:t})}static handleAiffMessage(e,t){switch(e.type){case"ready":console.log("AIFF页面已准备就绪");break;case"request":console.log("AIFF页面请求数据:",e.data),this.handleAiffRequest(e.data,e.id,t);break;case"action":console.log("AIFF页面执行操作:",e.data),this.handleAiffAction(e.data,t);break;default:console.log("未知消息类型:",e.type,e)}}static async handleAiffRequest(e,t,n){let s=null;switch(e.type){case"user-info":s=await this.getUserInfo();break;case"device-info":s=await this.getDeviceInfo();break;case"app-config":s=await this.getAppConfig();break;default:console.warn("未知的请求类型:",e.type)}t&&n&&await this.sendMessageToAiff(n,{type:"response",data:s,id:t})}static async handleAiffAction(e,t){switch(e.type){case"close":break;case"reload":await t.reload();break;case"navigate":e.url&&await t.setUrl({url:e.url});break;default:console.warn("未知的操作类型:",e.type)}}static async getUserInfo(){return{id:"user123",name:"张三",email:"zhangsan@example.com",avatar:"https://example.com/avatar.jpg"}}static async getDeviceInfo(){return{platform:"web",version:"1.0.0",userAgent:navigator.userAgent,screen:{width:window.screen.width,height:window.screen.height}}}static async getAppConfig(){return{theme:"light",language:"zh-CN",apiEndpoint:"https://api.example.com",features:{notifications:!0,analytics:!0,cache:!0}}}},exports.AiffWebView=n;
//# sourceMappingURL=plugin.cjs.js.map