{"id":19640112,"url":"https://github.com/chimeejs/chimee-plugin-popup","last_synced_at":"2025-04-28T11:31:02.860Z","repository":{"id":57198031,"uuid":"96964910","full_name":"Chimeejs/chimee-plugin-popup","owner":"Chimeejs","description":"PopupPlugin for chimee","archived":false,"fork":false,"pushed_at":"2019-10-28T07:34:26.000Z","size":159,"stargazers_count":3,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-27T11:05:37.359Z","etag":null,"topics":["chimee","h5","plugin","popup","popup-factory-function","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chimeejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-12T04:23:02.000Z","updated_at":"2019-10-28T07:34:27.000Z","dependencies_parsed_at":"2022-09-16T13:12:24.650Z","dependency_job_id":null,"html_url":"https://github.com/Chimeejs/chimee-plugin-popup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee-plugin-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chimeejs","download_url":"https://codeload.github.com/Chimeejs/chimee-plugin-popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251304769,"owners_count":21567935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chimee","h5","plugin","popup","popup-factory-function","video"],"created_at":"2024-11-11T14:04:42.436Z","updated_at":"2025-04-28T11:31:01.328Z","avatar_url":"https://github.com/Chimeejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# popup plugin of Chimee\n\n\u003e 本插件提供了一个工厂方法，可用于实现模态框需求，适当UI和CSS重写后也可以用于实现各种挂件，效果参见[Demo](https://github.com/Chimeejs/chimee-plugin-popup/tree/master/demo)\n\n## 开始\n开始使用前，需要先在页面中引入`popup.js`插件模块。\n```html\n\u003cscript type=\"text/javascript\" src=\"./lib/index.browser.js\"\u003e\u003c/script\u003e\n```\n\u003e JS模块引入后，将在全局产生一个用来生成popup `pluginConfig` 的工厂函数 `window.chimeePluginPopup`，调用该函数传入相应参数即可得到目标`popupPluginConfig`。\n\n或者JS代码中\n```javascript\nimport chimeePluginPopup from './lib/index.js';\n```\n\n如果是基于node构建环境开发，建议使用`npm install chimee-plugin-popup --save`，需要的业务页import就好了\n```javascript\nimport chimeePluginPopup from 'chimee-plugin-popup';\n```\n\n\u003e 通过`Chimee.install(popupPluginConfig)`把插件注册到`Chimee`类，即可在实例化播放器时在`option.plugin`数组上设定`popupPlugin`对应的name来启用UI组件。\n\n我们用来实现一个居中弹层，使用方式示例：\n```javascript\nChimee.install(chimeePluginPopup({\n  name: 'cc_popup',\n  title: '这是一个居中信息框',\n  body: '这里是信息内容',\n  offset: '50% 50%',\n  width: '200px'\n}));\nconst player = new Chimee({\n  src: 'http://cdn.toxicjohann.com/lostStar.mp4',\n  type: 'vod',\n  box: 'mp4',\n  wrapper: '#wrapper',\n  plugin: ['cc_popup'],\n  auto: true\n});\n```\n\n## 效果\n  \n  ![](http://p6.qhimg.com/dr/600__/t01c55babd4ae6974e5.png)\n  \n## 基本参数说明\n  \n可以配置设定的参数除了`pluginConfig`包含内容之外，你可能会比较容易用到的几组参数：\n \n### 声明\n  1. **name** 用来绑定实例化后的插件到Chimee实例上。\u003cbr\u003e*比如上面代码示例中使用了`cc_popup`作为插件名字，那么在接下来就可以通过 `player.ccPopup` 来访问插件实例（注册时自动驼峰化）。*\n### 坐标尺寸控制\n  1. **offset** 控制popup的展示位置。 \u003cbr\u003e*相对播放器区域四个边界的距离，可设定内容`像素:123px`或`百分比:12.3%`值，如：`0px 0px`、`10% 20%`。\u003cbr\u003e设定方式支持: `'leftAndTop'`或`'left top'`或`'top right bottom left'`*\n  2. **translate** 控制popup的偏移坐标。\u003cbr\u003e*基于offset设定后的位置进行偏移，比如当offset的top或left为50%时，将默认translate相应方向为-50，以实现居中展示，数值设定规则与offset相同。*\n  3. **width** 控制popup宽度，不设置则为auto，参数值必须带有单位\n  4. **height** 控制popup高度，同上\n### 展现内容\n  1. **title** 默认浮层标题\n  2. **body** 默认浮层展示的内容\n  3. **html** 浮层UI对应的HTML模板，默认为：\n    \n```\n\u003cvs-pp-close class=\"_close\"\u003e×\u003c/vs-pp-close\u003e\n\u003cvs-pp-head\u003e${title}\u003c/vs-pp-head\u003e\n\u003cvs-pp-body\u003e${body}\u003c/vs-pp-body\u003e\n```\n\n### 状态控制\n  1. **penetrate** 是否将交互事件同步到video元素(事件交互同步给video)，默认值false\n  2. **operable** 是否启用事件交互（false则设置CSS事件穿透），默认 true\n  3. **hide** 插件装载后是否默认为不展示（预先创建后，自行控制open时机），默认值 false\n### 事件交互 \n  **events** 用来实现交互控制，比如我们要通过右键控制popup的展示隐藏、位置移动，可以这么写：\n\n```javascript\nChimee.install(chimeePluginPopup({\n  name: 'menu_popup',\n  ...\n  hide: true,\n  events: {\n    contextmenu: function(e) {\n      this.offset(e.offsetX + 'px ' + e.offsetY + 'px').open(e);\n      e.preventDefault();\n    },\n    mousedown: function(e){\n      e.button !==2 \u0026\u0026 this.close(e)\n    }\n  }\n}));\n```\n\n比如我们要感知popup的开启关闭，做相应后续逻辑执行，可以使用popup实现时新增的生命周期钩子：\n\n```javascript\nChimee.install(chimeePluginPopup({\n  name: 'my_popup',\n  ...\n  opened(e, pluginTarget) {\n    ...\n  },\n  closed (e, pluginTarget) {\n    ...\n  }\n}));\n```\n\n如果想监听任意弹层组件的关闭，可以使用事件监听这么写：\n\n```javascript\nChimee.install(chimeePluginPopup({\n  name: 'my_popup',\n  ...\n  events: {\n    popupOpen: function (e, pluginTarget) {\n      if(this.__id === pluginTarget.__id){\n        console.log('popupOpen:', e, this, pluginTarget);\n      }\n    },\n    popupClose: function (e, pluginTarget) {\n      if (this.__id === pluginTarget.__id) {\n        console.log('popupClose:', e, this, pluginTarget);\n      }\n    }\n  }\n}));\n```\n\n也许你已经留意到了上面`if(this.__id === pluginTarget.__id)`的判断，这里因为 **events** 是针对全局范围任意插件或系统事件的监听（包括播放器本身的play、ended、pause、volumechange...），所以这里可以通过判断确定事件发出自哪个插件。\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee-plugin-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchimeejs%2Fchimee-plugin-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee-plugin-popup/lists"}