Chamaileon 插件接口
此工程是创建和维护窗口对象之间通信的后Message接口就像网页和里面的iframe.
Chamaileon.io 建造和维护了这个开源项目,以提供使用其插件的安全而标准化的方法。我们在插件中使用它:电子邮件编辑器、预览、画廊等。 您可以访问我们的网站了解更多信息: (原始内容存档于2018-09-21). chamaileon.io。 。 。 .
安装和初始化
npm i @chamaileon-sdk/plugin-interface
该软件包提供三种功能, initFullscreenPlugin, (中文(简体) ), initInlinePlugin 财务报告和审定财务报表 providePlugin。 。 。 .
插件自发化由两个部分组成:
-
在父母一方,你必须运行
initFullscreenPlugin或者说initInlinePlugin,基于用法。 此函数创建了 iframe, 并开始根据给它的 src 加载插件 . -
在插件内,您必须调用
providePlugin函数。 此函数响应父侧输入机制, 并返回接口 .
全屏插件
初始化
要初始化全屏插件, 您必须调用 initFullscreenPlugin 函数,参数如下:
initFullscreenPlugin(
{
data: Object,
settings: Object,
hooks: Object,
},
{
id: String,
src: String,
parentElem: String | HTMLElement,
beforeInit: Function,
timeout: Number,
}
);
第一个对象中的参数
第一个对象中的参数将直接发送到插件.
- 数据 : 您可以将静态数据传递到您的插件.
- 设置 : 您可以通过修改插件外观和操作的自定义设置.
- 钩子 : 您可以通过插件在特定动作或事件时调用的函数.
第二个对象中的参数
这个 initFullscreenPlugin 基于 src 提供,并附在 parentElem。第二个参数对象包含信息,供库创建iframe并附加到您的应用程序 DOM 中.
-
编号 : 是代表 iframe 的 id .
-
弧 : 这是 iframe 源作为字符串 .
-
父文件夹 : 这是一个查询选择器或 HTML 元素, 您想要插入插件 iframe 。 默认是
document.body -
输入前 : 此函数将在iframe创建后运行,并且可以在此内部到达容器和iframe.
beforeInit({ container, iframe }) { // your code here } -
超时 : 这是以毫秒计的数字。 这定义了 init 函数等待 production 的回答后, 才能丢出错误 .
接口
在返回的对象中,您将获得以下属性:
{
_container: HTMLElement,
_src: String,
methods: Object,
showSplashScreen: Function,
hideSplashScreen: Function,
show: Function,
hide: Function,
destroy: Function,
}
- 容器( c): 和包含插件 iframe 的 HTML 元素
- 弧: 是插件 iframe 的来源
- 方法: 通过方法对象可以到达插件声明的方法
- 销毁 : 3⁄4 ̄ ̧漯b
喷出屏幕
如果 settings 初始化对象中提供的参数包含 a splashScreenUrl,插件将有一个单独的iframe 附加在容器上,您可以显示并隐藏所提供的 showSplashScreen 财务报告和审定财务报表 hideSplashScreen 函数.
显示 / 隐藏
您可以使用提供的插件显示并隐藏您创建的插件 show 财务报告和审定财务报表 hide。在使用这些功能时,插件将不会被销毁,而是会隐藏状态.
动画
这个 show 可使用下列参数调用:
show({ x = "-100vw", y = "0px", opacity = 0.5, scale = 1, time = 500 })
这个 show 函数提供了自定义显示动画的简单方法。 通过提供的参数,您可以设定默认的隐藏状态,通过插件的坐标,不透明,和比例,以及动画的时间来描述. 当函数被调用时,插件会从该隐藏位置移动到全屏视图. 动画使用 translate3d cs函数. 同样 hide 函数将插件移回其设置的隐藏状态.
默认隐藏状态被移到左边,所以 show 函数将移动插件以查看左侧。 见 内容编辑器示例 用于更多的配置.
内置插件
要初始化内置插件, 您必须调用 initInlinePlugin 函数,参数如下:
initInlinePlugin(
{
data: Object,
settings: Object,
hooks: Object,
},
{
src: String,
container: String | HTMLElement,
beforeInit: Function,
timeout: Number,
}
)
第一个对象中的参数
第一个对象中的参数将直接发送到插件.
- 数据 : 您可以将静态数据传递到您的插件.
- 设置 : 您可以通过修改插件外观和操作的自定义设置.
- 钩子 : 您可以通过插件在特定动作或事件时调用的函数.
第二个对象中的参数
第二个对象包含用于库创建iframe的信息并附加到您的应用程序 DOM 中.
-
弧 : 这是 iframe 源作为字符串 .
-
容器 : 您想要插件附加的元素.
-
输入前 : 此函数将在iframe创建后运行,并且可以在此内部到达容器和iframe.
beforeInit({ container, iframe }) { // your code here } -
超时 : 这是以毫秒计的数字。 这定义了 init 函数等待 production 的回答后, 才能丢出错误 .
接口
在返回的对象中,您将获得以下属性:
{
_container: HTMLElement,
methods: Object,
destroy: Function,
}
- 容器( c): 和包含插件 iframe 的 HTML 元素
- 方法: 通过方法对象可以到达插件声明的方法
- 销毁 : 3⁄4 ̄ ̧漯b
提供管道
当您的插件从提供的 src 装入时, 您在 iframe 中的脚本必须调用 providePlugin 函数,以响应插件界面初始化
providePlugin({
hooks: Array,
methods: Object,
validator: Function,
});
- 钩子 : 这是插件接受和使用的一系列钩子名称
- 方法: 这些功能可以从外部调用, 并用来直接从外部调用插件
- 验证符 : 是在提供
data, (中文(简体) ),settings财务报告和审定财务报表hooks从母方到达
接口
提供Plugin函数应解决包含这些字段的对象:
{
data: Object,
settings: Object,
hooks: Object,
terminate: Function,
}
- 数据 : 输入阶段发送的数据
- 设置 : Init 阶段发送的设置
- 钩子 : 在init阶段发送并被过滤的钩子列表被插件接受
- 终止 : 用于终止窗口对象之间通信的函数.
更新钩子
更新Hooks的方法可以在插件侧被定义. 它可用于更新初始化时定义的钩子. 我们提供了以下两个选项.
开始上下文
const onSave = () => {};
const onDelete = () => {};
const onFail = () => {};
const activeHooks = [];
const pluginInterface = await initFullscreenPlugin(...);
// For this example let's say that we sent
// the "onFail" hook with the init function
const pluginInstance = await providePlugin({
hooks: ["onSave", "onDelete", "onFail" ],
methods: {
updateHooks(hooks) {
activeHooks = hooks;
},
},
validator: () => {},
})
pluginInstanceMethods.updateHooks = (hooks) => {
activeHooks = hooks;
}
保存已定义的钩子的同时更新钩子
await pluginInterface.methods.updateHooks({ hooks: { onSave } });
// after the method call the activeHooks should be equal with ["onSave", "onFail", "error"];
更新钩子,只保留新钩子
await pluginInterface.methods.updateHooks({ hooks: { onDelete }, resetHooks: true });
// after the method call the activeHooks should be equal with ["onDelete", "error"];
示例
你可以运行 实例,带有静态服务器
$ npm -g install static-server
$ static-server -c "*" -zp 8080