mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 02:51:20 -08:00
add prettier
This commit is contained in:
Harvey Zack committed
1 parent
4092b51c4e
commit
1593a4a528
76 files changed
+25259
-25110
No files matched your search
@@ -14,9 +14,7 @@
|
|||||||
"ecmaVersion": "latest",
|
"ecmaVersion": "latest",
|
||||||
"requireConfigFile": false,
|
"requireConfigFile": false,
|
||||||
"babelOptions": {
|
"babelOptions": {
|
||||||
"presets": [
|
"presets": ["@babel/preset-react"]
|
||||||
"@babel/preset-react"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
node_modules
|
||||||
|
.docusaurus
|
||||||
|
.parcel-cache
|
||||||
|
.github
|
||||||
|
*.log
|
||||||
|
*.lock
|
||||||
|
test
|
||||||
|
docs
|
||||||
|
scripts
|
||||||
|
packages/*/dist
|
||||||
|
packages/*/node_modules
|
||||||
|
packages/*/.parcel-cache
|
||||||
|
packages/artplayer-template/*/.next
|
||||||
|
packages/artplayer-template/*/.nuxt
|
||||||
+86
-69
@@ -1,34 +1,38 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
|
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
## [Unreleased]
|
## [Unreleased]
|
||||||
- 添加 `art.type` 属性，用于获取和设置视频类型
|
|
||||||
- 添加 `art.video` 属性，用于获取 `video` 元素
|
- 添加 `art.type` 属性，用于获取和设置视频类型
|
||||||
- 添加 `artplayer-plugin-iframe` 插件，用于控制 `iframe` 里的播放器
|
- 添加 `art.video` 属性，用于获取 `video` 元素
|
||||||
- 添加 `artplayer-plugin-hls-quality` 插件，用于添加 `Hls` 画质列表到播放器
|
- 添加 `artplayer-plugin-iframe` 插件，用于控制 `iframe` 里的播放器
|
||||||
- 新增 `Artplayer.PLAYBACK_RATE` 用于设置默认播放速度，默认 `[0.5, 0.75, 1, 1.25, 1.5, 2]`
|
- 添加 `artplayer-plugin-hls-quality` 插件，用于添加 `Hls` 画质列表到播放器
|
||||||
- 新增 `Artplayer.ASPECT_RATIO` 用于设置默认长宽比，默认 `['default', '4:3', '16:9']`
|
- 新增 `Artplayer.PLAYBACK_RATE` 用于设置默认播放速度，默认 `[0.5, 0.75, 1, 1.25, 1.5, 2]`
|
||||||
- 新增 `Artplayer.FLIP` 用于设置默认翻转功能，默认 `['normal', 'horizontal', 'vertical']`
|
- 新增 `Artplayer.ASPECT_RATIO` 用于设置默认长宽比，默认 `['default', '4:3', '16:9']`
|
||||||
- 新增 `Artplayer.PROGRESS_HEIGHT` 用于设置进度条高度，默认为 `4`
|
- 新增 `Artplayer.FLIP` 用于设置默认翻转功能，默认 `['normal', 'horizontal', 'vertical']`
|
||||||
- 添加 `legacy.js` 版本，用于兼容更老的浏览器，但相对体积较大
|
- 新增 `Artplayer.PROGRESS_HEIGHT` 用于设置进度条高度，默认为 `4`
|
||||||
- 移除 `examples` 目录，不再提供 `vue.js` 和 `react.js` 的例子文件
|
- 添加 `legacy.js` 版本，用于兼容更老的浏览器，但相对体积较大
|
||||||
|
- 移除 `examples` 目录，不再提供 `vue.js` 和 `react.js` 的例子文件
|
||||||
|
|
||||||
## [4.5.8] - 2022-10-9
|
## [4.5.8] - 2022-10-9
|
||||||
- 添加 `farsi` 语言
|
|
||||||
- 新增 `Artplayer.DEGUG` 用于打印 `debug` 信息，默认为 `false`
|
- 添加 `farsi` 语言
|
||||||
- 新增 `art.setting.update()` 用于动态更新设置面板
|
- 新增 `Artplayer.DEGUG` 用于打印 `debug` 信息，默认为 `false`
|
||||||
- 优化 `artplayer.d.ts`
|
- 新增 `art.setting.update()` 用于动态更新设置面板
|
||||||
|
- 优化 `artplayer.d.ts`
|
||||||
|
|
||||||
## [4.5.7] - 2022-9-28
|
## [4.5.7] - 2022-9-28
|
||||||
- 新增 `Artplayer.VOLUME_STEP` 用于控制调整 `音量` 的步长，默认为 `0.1`
|
|
||||||
- 新增 `Artplayer.SEEK_STEP` 用于控制调整 `快进/快退` 的步长，默认为 `5` 秒
|
- 新增 `Artplayer.VOLUME_STEP` 用于控制调整 `音量` 的步长，默认为 `0.1`
|
||||||
- 修复部分 `svg` 图标在移动端不显示的问题
|
- 新增 `Artplayer.SEEK_STEP` 用于控制调整 `快进/快退` 的步长，默认为 `5` 秒
|
||||||
- 修复在桌面端进度条不能同时点击和拖动的问题
|
- 修复部分 `svg` 图标在移动端不显示的问题
|
||||||
- 修复在移动端进度条不能点击和拖动的问题
|
- 修复在桌面端进度条不能同时点击和拖动的问题
|
||||||
- 新增 `art.isRotate` 属性，用于识别是否自动全屏旋转
|
- 修复在移动端进度条不能点击和拖动的问题
|
||||||
- 设置面板 `range` 添加 `onChange` 选项，可以实时获取当前值
|
- 新增 `art.isRotate` 属性，用于识别是否自动全屏旋转
|
||||||
|
- 设置面板 `range` 添加 `onChange` 选项，可以实时获取当前值
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var art = new Artplayer({
|
var art = new Artplayer({
|
||||||
@@ -49,27 +53,31 @@ var art = new Artplayer({
|
|||||||
```
|
```
|
||||||
|
|
||||||
## [4.5.6] - 2022-9-19
|
## [4.5.6] - 2022-9-19
|
||||||
- 修复 `hls.js` 在 `Safari` 播放失效的问题
|
|
||||||
|
- 修复 `hls.js` 在 `Safari` 播放失效的问题
|
||||||
|
|
||||||
## [4.5.5] - 2022-9-19
|
## [4.5.5] - 2022-9-19
|
||||||
- 广告插件添加 `option.muted` 选项，用于静音自动播放广告
|
|
||||||
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.reset()` 方法，用于清空当前弹幕显示
|
- 广告插件添加 `option.muted` 选项，用于静音自动播放广告
|
||||||
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.option` 属性，用于获取当前弹幕配置
|
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.reset()` 方法，用于清空当前弹幕显示
|
||||||
- 修复在 `IOS` 全屏模式下，字幕失效的问题
|
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.option` 属性，用于获取当前弹幕配置
|
||||||
- 添加西班牙语支持
|
- 修复在 `IOS` 全屏模式下，字幕失效的问题
|
||||||
|
- 添加西班牙语支持
|
||||||
|
|
||||||
## [4.5.4] - 2022-8-1
|
## [4.5.4] - 2022-8-1
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 新增 `Artplayer.AUTO_PLAYBACK_MIN` 用于控制最小可以记忆播放的进度值，默认为 `5` 秒
|
|
||||||
- 新增 `Artplayer.TOUCH_MOVE_RATIO` 用于控制移动端进度条拖放比例，默认为 `0.5`
|
- 新增 `Artplayer.AUTO_PLAYBACK_MIN` 用于控制最小可以记忆播放的进度值，默认为 `5` 秒
|
||||||
- `option.thumbnails` 添加可选的 `width` 和 `height`
|
- 新增 `Artplayer.TOUCH_MOVE_RATIO` 用于控制移动端进度条拖放比例，默认为 `0.5`
|
||||||
- 新增播放器编号选项 `option.id`，可用于记忆播放时的唯一标识
|
- `option.thumbnails` 添加可选的 `width` 和 `height`
|
||||||
|
- 新增播放器编号选项 `option.id`，可用于记忆播放时的唯一标识
|
||||||
|
|
||||||
## [4.5.3] - 2022-7-13
|
## [4.5.3] - 2022-7-13
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- `url` 选项允许传空字符串，可用于异步设置 `art.url`
|
|
||||||
|
- `url` 选项允许传空字符串，可用于异步设置 `art.url`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const art = new Artplayer({
|
const art = new Artplayer({
|
||||||
@@ -82,7 +90,7 @@ setTimeout(() => {
|
|||||||
}, 1000);
|
}, 1000);
|
||||||
```
|
```
|
||||||
|
|
||||||
- `art.play()` 方法统一返回 `Promise`, `play` 事件也改为异步触发
|
- `art.play()` 方法统一返回 `Promise`, `play` 事件也改为异步触发
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const art = new Artplayer({
|
const art = new Artplayer({
|
||||||
@@ -97,10 +105,10 @@ art.on('ready', async () => {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('播放失败', error.message);
|
console.log('播放失败', error.message);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
- 新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
|
- 新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const art = new Artplayer({
|
const art = new Artplayer({
|
||||||
@@ -113,69 +121,78 @@ const art = new Artplayer({
|
|||||||
## [4.5.2] - 2022-6-22
|
## [4.5.2] - 2022-6-22
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 优化自动回放功能，让用户自行选择
|
|
||||||
|
- 优化自动回放功能，让用户自行选择
|
||||||
|
|
||||||
## [4.5.0] - 2022-6-21
|
## [4.5.0] - 2022-6-21
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 移除内置广告功能
|
|
||||||
- 新增广告插件
|
- 移除内置广告功能
|
||||||
|
- 新增广告插件
|
||||||
|
|
||||||
## [4.4.7] - 2022-6-13
|
## [4.4.7] - 2022-6-13
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 兼容弹幕库 d.ts
|
|
||||||
- 更新依赖库
|
- 兼容弹幕库 d.ts
|
||||||
|
- 更新依赖库
|
||||||
|
|
||||||
## [4.4.6] - 2022-6-11
|
## [4.4.6] - 2022-6-11
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 添加弹幕库 d.ts
|
|
||||||
- 调整字幕字体大小参数
|
- 添加弹幕库 d.ts
|
||||||
- 优化正则解析xml弹幕
|
- 调整字幕字体大小参数
|
||||||
|
- 优化正则解析 xml 弹幕
|
||||||
|
|
||||||
## [4.4.5] - 2022-6-2
|
## [4.4.5] - 2022-6-2
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 修复迷你模式时，主题色缺失的bug
|
|
||||||
|
- 修复迷你模式时，主题色缺失的 bug
|
||||||
|
|
||||||
## [4.4.3] - 2022-05-26
|
## [4.4.3] - 2022-05-26
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 修复弹幕库销毁时，自定义挂载输入框的残留
|
|
||||||
- 修复迷你模式的尺寸计算错误
|
- 修复弹幕库销毁时，自定义挂载输入框的残留
|
||||||
|
- 修复迷你模式的尺寸计算错误
|
||||||
|
|
||||||
## [4.4.2] - 2022-05-20
|
## [4.4.2] - 2022-05-20
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 移除播放器 UI 初始化的 video:loadedmetadata 事件
|
|
||||||
- 弹幕库暴露 load 方法，用于切换弹幕源
|
- 移除播放器 UI 初始化的 video:loadedmetadata 事件
|
||||||
- 添加 error 图标，出现于视频加载错误达到上限后
|
- 弹幕库暴露 load 方法，用于切换弹幕源
|
||||||
- 修复 setting 多次初始化时产生的 bug
|
- 添加 error 图标，出现于视频加载错误达到上限后
|
||||||
|
- 修复 setting 多次初始化时产生的 bug
|
||||||
|
|
||||||
## [4.4.1] - 2022-05-17
|
## [4.4.1] - 2022-05-17
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 添加 art.isInput 属性，当为 true 的时候不自动隐藏控制栏，如弹幕正在输入时
|
|
||||||
- 添加 art.isLock 属性，在移动端当为 true 的时候不能操作快进、开始和暂停
|
- 添加 art.isInput 属性，当为 true 的时候不自动隐藏控制栏，如弹幕正在输入时
|
||||||
- 修复弹幕输入框的固定宽度 bug
|
- 添加 art.isLock 属性，在移动端当为 true 的时候不能操作快进、开始和暂停
|
||||||
- 设置面板支持 range 和 onRange 选项
|
- 修复弹幕输入框的固定宽度 bug
|
||||||
- 添加 isAndroid 和 isIOS 工具函数
|
- 设置面板支持 range 和 onRange 选项
|
||||||
- 弹幕库添加 lockTime 选项，可自定义输入框的锁定时间
|
- 添加 isAndroid 和 isIOS 工具函数
|
||||||
- 弹幕库添加 maxLength 选项，控制输入最大可输入字数
|
- 弹幕库添加 lockTime 选项，可自定义输入框的锁定时间
|
||||||
- 弹幕库添加 minWidth 选项，控制输入框最小宽度
|
- 弹幕库添加 maxLength 选项，控制输入最大可输入字数
|
||||||
- 弹幕库添加 maxWidth 选项，控制输入框最大宽度
|
- 弹幕库添加 minWidth 选项，控制输入框最小宽度
|
||||||
- 弹幕库添加 mount 选项，控制输入框自定义挂载位置
|
- 弹幕库添加 maxWidth 选项，控制输入框最大宽度
|
||||||
- 弹幕库添加 beforeEmit 选项，控制弹幕发送前的校验
|
- 弹幕库添加 mount 选项，控制输入框自定义挂载位置
|
||||||
- 弹幕库添加 theme 选项，控制输入框自定义挂载的主题色
|
- 弹幕库添加 beforeEmit 选项，控制弹幕发送前的校验
|
||||||
|
- 弹幕库添加 theme 选项，控制输入框自定义挂载的主题色
|
||||||
|
|
||||||
## [4.4.0] - 2022-05-15
|
## [4.4.0] - 2022-05-15
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
- 设置面板支持 switch 和 onSwitch 选项
|
|
||||||
- 弹幕库插件添加设置面板和弹幕发送
|
- 设置面板支持 switch 和 onSwitch 选项
|
||||||
- 弹幕库的选项添加默认模式和默认字号
|
- 弹幕库插件添加设置面板和弹幕发送
|
||||||
- 弹幕库字号支持按播放器的百分百
|
- 弹幕库的选项添加默认模式和默认字号
|
||||||
- 修复翻转设置的图标缺失
|
- 弹幕库字号支持按播放器的百分百
|
||||||
- 默认播放器获取了焦点后，不会自动隐藏控制栏
|
- 修复翻转设置的图标缺失
|
||||||
- 删除字幕开关按钮，需要自行配置字幕开关
|
- 默认播放器获取了焦点后，不会自动隐藏控制栏
|
||||||
|
- 删除字幕开关按钮，需要自行配置字幕开关
|
||||||
@@ -31,9 +31,11 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
## Home Page
|
## Home Page
|
||||||
|
|
||||||
[https://artplayer.org](https://artplayer.org)
|
[https://artplayer.org](https://artplayer.org)
|
||||||
|
|
||||||
## Mobile Demo
|
## Mobile Demo
|
||||||
|
|
||||||
<img src="./images/qrcode.png" width="250">
|
<img src="./images/qrcode.png" width="250">
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|||||||
+3
-5
@@ -1,7 +1,5 @@
|
|||||||
{
|
{
|
||||||
"lerna": "4.0.0",
|
"lerna": "4.0.0",
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"packages": [
|
"packages": ["packages/*"]
|
||||||
"packages/*"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
+64
-59
@@ -1,61 +1,66 @@
|
|||||||
{
|
{
|
||||||
"name": "artplayer-packages",
|
"name": "artplayer-packages",
|
||||||
"version": "4.4.0",
|
"version": "4.4.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "ArtPlayer.js is a modern and full featured HTML5 video player",
|
"description": "ArtPlayer.js is a modern and full featured HTML5 video player",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build:all": "npm run build all && npm run build:sw && npm run build:ts",
|
"build:all": "npm run build all && npm run build:sw && npm run build:ts",
|
||||||
"bootstrap": "npx lerna bootstrap --hoist",
|
"bootstrap": "npx lerna bootstrap --hoist",
|
||||||
"lint": "npx eslint packages/*/src",
|
"lint": "npx eslint packages/*/src",
|
||||||
"build:sw": "node ./scripts/build-sw.js",
|
"build:sw": "node ./scripts/build-sw.js",
|
||||||
"build:ts": "node ./scripts/build-ts.js",
|
"build:ts": "node ./scripts/build-ts.js",
|
||||||
"test:create": "node ./scripts/createTests.js",
|
"test:create": "node ./scripts/createTests.js",
|
||||||
"dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
|
"dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
|
||||||
"build": "npx cross-env NODE_ENV=production node ./scripts/build.js",
|
"build": "npx cross-env NODE_ENV=production node ./scripts/build.js",
|
||||||
"test": "npx cross-env NODE_ENV=test mocha-chrome ./test/index.html --mocha '{\"ui\":\"bdd\"}'",
|
"test": "npx cross-env NODE_ENV=test mocha-chrome ./test/index.html --mocha '{\"ui\":\"bdd\"}'",
|
||||||
"postinstall": "npm run bootstrap"
|
"prettier": "npx prettier --write .",
|
||||||
},
|
"postinstall": "npm run bootstrap"
|
||||||
"repository": {
|
},
|
||||||
"type": "git",
|
"repository": {
|
||||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
"type": "git",
|
||||||
},
|
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||||
"keywords": [
|
},
|
||||||
"video",
|
"keywords": [
|
||||||
"player"
|
"video",
|
||||||
],
|
"player"
|
||||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
],
|
||||||
"license": "MIT",
|
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||||
"bugs": {
|
"license": "MIT",
|
||||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
"bugs": {
|
||||||
},
|
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||||
"homepage": "https://artplayer.org",
|
},
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"homepage": "https://artplayer.org",
|
||||||
"dependencies": {
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"@babel/eslint-parser": "^7.19.1",
|
"dependencies": {
|
||||||
"@babel/preset-react": "^7.18.6",
|
"@babel/eslint-parser": "^7.19.1",
|
||||||
"@parcel/config-default": "^2.7.0",
|
"@babel/preset-react": "^7.18.6",
|
||||||
"@parcel/core": "^2.7.0",
|
"@parcel/config-default": "^2.7.0",
|
||||||
"@parcel/optimizer-data-url": "^2.7.0",
|
"@parcel/core": "^2.7.0",
|
||||||
"@parcel/reporter-cli": "^2.7.0",
|
"@parcel/optimizer-data-url": "^2.7.0",
|
||||||
"@parcel/transformer-inline-string": "^2.7.0",
|
"@parcel/reporter-cli": "^2.7.0",
|
||||||
"@parcel/transformer-less": "^2.7.0",
|
"@parcel/transformer-inline-string": "^2.7.0",
|
||||||
"@parcel/transformer-vue": "^2.7.0",
|
"@parcel/transformer-less": "^2.7.0",
|
||||||
"artplayer": "latest",
|
"@parcel/transformer-vue": "^2.7.0",
|
||||||
"chai": "^4.3.6",
|
"artplayer": "latest",
|
||||||
"cpy": "^9.0.1",
|
"chai": "^4.3.6",
|
||||||
"cross-env": "^7.0.3",
|
"cpy": "^9.0.1",
|
||||||
"eslint": "^8.25.0",
|
"cross-env": "^7.0.3",
|
||||||
"glob": "^8.0.3",
|
"eslint": "^8.25.0",
|
||||||
"lerna": "^6.0.0",
|
"glob": "^8.0.3",
|
||||||
"mocha": "^10.0.0",
|
"lerna": "^6.0.0",
|
||||||
"mocha-chrome": "^2.2.0",
|
"mocha": "^10.0.0",
|
||||||
"node-html-parser": "^6.1.1",
|
"mocha-chrome": "^2.2.0",
|
||||||
"prettier": "^2.7.1",
|
"node-html-parser": "^6.1.1",
|
||||||
"prompts": "^2.4.2",
|
"pre-commit": "^1.2.2",
|
||||||
"servor": "^4.0.2",
|
"prettier": "^2.7.1",
|
||||||
"workbox-build": "^6.5.4"
|
"prompts": "^2.4.2",
|
||||||
},
|
"servor": "^4.0.2",
|
||||||
"engines": {
|
"workbox-build": "^6.5.4"
|
||||||
"node": ">= 16.0.0"
|
},
|
||||||
}
|
"engines": {
|
||||||
|
"node": ">= 16.0.0"
|
||||||
|
},
|
||||||
|
"pre-commit": [
|
||||||
|
"prettier"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||||
};
|
};
|
||||||
+22921
-22921
File diff suppressed because it is too large.
Load diff
@@ -1,39 +1,39 @@
|
|||||||
{
|
{
|
||||||
"name": "artplayer-document",
|
"name": "artplayer-document",
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"docusaurus": "docusaurus",
|
"docusaurus": "docusaurus",
|
||||||
"start": "docusaurus start",
|
"start": "docusaurus start",
|
||||||
"build": "docusaurus build && npm run copy",
|
"build": "docusaurus build && npm run copy",
|
||||||
"copy": "rm -rf ../../docs/document && mv build ../../docs/document",
|
"copy": "rm -rf ../../docs/document && mv build ../../docs/document",
|
||||||
"swizzle": "docusaurus swizzle",
|
"swizzle": "docusaurus swizzle",
|
||||||
"deploy": "docusaurus deploy",
|
"deploy": "docusaurus deploy",
|
||||||
"clear": "docusaurus clear",
|
"clear": "docusaurus clear",
|
||||||
"serve": "docusaurus serve",
|
"serve": "docusaurus serve",
|
||||||
"write-translations": "docusaurus write-translations",
|
"write-translations": "docusaurus write-translations",
|
||||||
"write-heading-ids": "docusaurus write-heading-ids"
|
"write-heading-ids": "docusaurus write-heading-ids"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@docusaurus/core": "2.0.0-beta.20",
|
"@docusaurus/core": "2.0.0-beta.20",
|
||||||
"@docusaurus/preset-classic": "2.0.0-beta.20",
|
"@docusaurus/preset-classic": "2.0.0-beta.20",
|
||||||
"@mdx-js/react": "^1.6.22",
|
"@mdx-js/react": "^1.6.22",
|
||||||
"clsx": "^1.1.1",
|
"clsx": "^1.1.1",
|
||||||
"docusaurus-lunr-search": "^2.1.15",
|
"docusaurus-lunr-search": "^2.1.15",
|
||||||
"prism-react-renderer": "^1.3.1",
|
"prism-react-renderer": "^1.3.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2"
|
"react-dom": "^17.0.2"
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
"production": [
|
"production": [
|
||||||
">0.5%",
|
">0.5%",
|
||||||
"not dead",
|
"not dead",
|
||||||
"not op_mini all"
|
"not op_mini all"
|
||||||
],
|
],
|
||||||
"development": [
|
"development": [
|
||||||
"last 1 chrome version",
|
"last 1 chrome version",
|
||||||
"last 1 firefox version",
|
"last 1 firefox version",
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
en: [{ type: "autogenerated", dirName: "en" }],
|
en: [{ type: 'autogenerated', dirName: 'en' }],
|
||||||
"zh-cn": [{ type: "autogenerated", dirName: "zh-cn" }],
|
'zh-cn': [{ type: 'autogenerated', dirName: 'zh-cn' }],
|
||||||
};
|
};
|
||||||
@@ -7,65 +7,65 @@
|
|||||||
|
|
||||||
/* You can override the default Infima variables here. */
|
/* You can override the default Infima variables here. */
|
||||||
:root {
|
:root {
|
||||||
--ifm-color-primary: #25c2a0;
|
--ifm-color-primary: #25c2a0;
|
||||||
--ifm-color-primary-dark: rgb(33, 175, 144);
|
--ifm-color-primary-dark: rgb(33, 175, 144);
|
||||||
--ifm-color-primary-darker: rgb(31, 165, 136);
|
--ifm-color-primary-darker: rgb(31, 165, 136);
|
||||||
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
--ifm-color-primary-darkest: rgb(26, 136, 112);
|
||||||
--ifm-color-primary-light: rgb(70, 203, 174);
|
--ifm-color-primary-light: rgb(70, 203, 174);
|
||||||
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
--ifm-color-primary-lighter: rgb(102, 212, 189);
|
||||||
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
--ifm-color-primary-lightest: rgb(146, 224, 208);
|
||||||
--ifm-code-font-size: 95%;
|
--ifm-code-font-size: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docusaurus-highlight-code-line {
|
.docusaurus-highlight-code-line {
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||||
padding: 0 var(--ifm-pre-padding);
|
padding: 0 var(--ifm-pre-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] .docusaurus-highlight-code-line {
|
html[data-theme='dark'] .docusaurus-highlight-code-line {
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
display: table;
|
display: table;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th {
|
table th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
table thead tr {
|
table thead tr {
|
||||||
border-bottom-width: 1px !important;
|
border-bottom-width: 1px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table p {
|
table p {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown li > p {
|
.markdown li > p {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown > p {
|
.markdown > p {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__search {
|
.navbar__search {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-left: var(--ifm-navbar-padding-horizontal);
|
padding-left: var(--ifm-navbar-padding-horizontal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.run-code {
|
.run-code {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: #25c2a0;
|
background-color: #25c2a0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -7,527 +7,515 @@
|
|||||||
|
|
||||||
/* Bottom border of each suggestion */
|
/* Bottom border of each suggestion */
|
||||||
.algolia-docsearch-suggestion {
|
.algolia-docsearch-suggestion {
|
||||||
border-bottom-color: #3a3dd1;
|
border-bottom-color: #3a3dd1;
|
||||||
}
|
}
|
||||||
/* Main category headers */
|
/* Main category headers */
|
||||||
.algolia-docsearch-suggestion--category-header {
|
.algolia-docsearch-suggestion--category-header {
|
||||||
background-color: #4b54de;
|
background-color: #4b54de;
|
||||||
}
|
}
|
||||||
/* Highlighted search terms */
|
/* Highlighted search terms */
|
||||||
.algolia-docsearch-suggestion--highlight {
|
.algolia-docsearch-suggestion--highlight {
|
||||||
color: #3a33d1;
|
color: #3a33d1;
|
||||||
}
|
}
|
||||||
/* Highligted search terms in the main category headers */
|
/* Highligted search terms in the main category headers */
|
||||||
.algolia-docsearch-suggestion--category-header
|
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
||||||
.algolia-docsearch-suggestion--highlight {
|
background-color: #4d47d5;
|
||||||
background-color: #4d47d5;
|
|
||||||
}
|
}
|
||||||
/* Currently selected suggestion */
|
/* Currently selected suggestion */
|
||||||
.aa-cursor .algolia-docsearch-suggestion--content {
|
.aa-cursor .algolia-docsearch-suggestion--content {
|
||||||
color: #272296;
|
color: #272296;
|
||||||
}
|
}
|
||||||
.aa-cursor .algolia-docsearch-suggestion {
|
.aa-cursor .algolia-docsearch-suggestion {
|
||||||
background: #ebebfb;
|
background: #ebebfb;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* For bigger screens, when displaying results in two columns */
|
/* For bigger screens, when displaying results in two columns */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
/* Bottom border of each suggestion */
|
/* Bottom border of each suggestion */
|
||||||
.algolia-docsearch-suggestion {
|
.algolia-docsearch-suggestion {
|
||||||
border-bottom-color: #7671df;
|
border-bottom-color: #7671df;
|
||||||
}
|
}
|
||||||
/* Left column, with secondary category header */
|
/* Left column, with secondary category header */
|
||||||
.algolia-docsearch-suggestion--subcategory-column {
|
.algolia-docsearch-suggestion--subcategory-column {
|
||||||
border-right-color: #7671df;
|
border-right-color: #7671df;
|
||||||
color: #4e4726;
|
color: #4e4726;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox {
|
.searchbox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 32px !important;
|
height: 32px !important;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox .algolia-autocomplete {
|
.searchbox .algolia-autocomplete {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__wrapper {
|
.searchbox__wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input {
|
.searchbox__input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-transition: box-shadow 0.4s ease, background 0.4s ease;
|
-webkit-transition: box-shadow 0.4s ease, background 0.4s ease;
|
||||||
transition: box-shadow 0.4s ease, background 0.4s ease;
|
transition: box-shadow 0.4s ease, background 0.4s ease;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: inset 0 0 0 1px #cccccc;
|
box-shadow: inset 0 0 0 1px #cccccc;
|
||||||
background: #ffffff !important;
|
background: #ffffff !important;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-right: 26px;
|
padding-right: 26px;
|
||||||
padding-left: 32px;
|
padding-left: 32px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input::-webkit-search-decoration,
|
.searchbox__input::-webkit-search-decoration,
|
||||||
.searchbox__input::-webkit-search-cancel-button,
|
.searchbox__input::-webkit-search-cancel-button,
|
||||||
.searchbox__input::-webkit-search-results-button,
|
.searchbox__input::-webkit-search-results-button,
|
||||||
.searchbox__input::-webkit-search-results-decoration {
|
.searchbox__input::-webkit-search-results-decoration {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input:hover {
|
.searchbox__input:hover {
|
||||||
box-shadow: inset 0 0 0 1px #b3b3b3;
|
box-shadow: inset 0 0 0 1px #b3b3b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input:focus,
|
.searchbox__input:focus,
|
||||||
.searchbox__input:active {
|
.searchbox__input:active {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: inset 0 0 0 1px #aaaaaa;
|
box-shadow: inset 0 0 0 1px #aaaaaa;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input::-webkit-input-placeholder {
|
.searchbox__input::-webkit-input-placeholder {
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input::-moz-placeholder {
|
.searchbox__input::-moz-placeholder {
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input:-ms-input-placeholder {
|
.searchbox__input:-ms-input-placeholder {
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input::placeholder {
|
.searchbox__input::placeholder {
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__submit {
|
.searchbox__submit {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 16px 0 0 16px;
|
border-radius: 16px 0 0 16px;
|
||||||
background-color: rgba(69, 142, 225, 0);
|
background-color: rgba(69, 142, 225, 0);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
right: inherit;
|
right: inherit;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__submit::before {
|
.searchbox__submit::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: -4px;
|
margin-right: -4px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__submit:hover,
|
.searchbox__submit:hover,
|
||||||
.searchbox__submit:active {
|
.searchbox__submit:active {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__submit:focus {
|
.searchbox__submit:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__submit svg {
|
.searchbox__submit svg {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
fill: #6d7e96;
|
fill: #6d7e96;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__reset {
|
.searchbox__reset {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: none;
|
background: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
fill: rgba(0, 0, 0, 0.5);
|
fill: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__reset.hide {
|
.searchbox__reset.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__reset:focus {
|
.searchbox__reset:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__reset svg {
|
.searchbox__reset svg {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbox__input:valid ~ .searchbox__reset {
|
.searchbox__input:valid ~ .searchbox__reset {
|
||||||
display: block;
|
display: block;
|
||||||
-webkit-animation-name: sbx-reset-in;
|
-webkit-animation-name: sbx-reset-in;
|
||||||
animation-name: sbx-reset-in;
|
animation-name: sbx-reset-in;
|
||||||
-webkit-animation-duration: 0.15s;
|
-webkit-animation-duration: 0.15s;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes sbx-reset-in {
|
@-webkit-keyframes sbx-reset-in {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: translate3d(-20%, 0, 0);
|
-webkit-transform: translate3d(-20%, 0, 0);
|
||||||
transform: translate3d(-20%, 0, 0);
|
transform: translate3d(-20%, 0, 0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: none;
|
-webkit-transform: none;
|
||||||
transform: none;
|
transform: none;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes sbx-reset-in {
|
@keyframes sbx-reset-in {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: translate3d(-20%, 0, 0);
|
-webkit-transform: translate3d(-20%, 0, 0);
|
||||||
transform: translate3d(-20%, 0, 0);
|
transform: translate3d(-20%, 0, 0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: none;
|
-webkit-transform: none;
|
||||||
transform: none;
|
transform: none;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu:before {
|
.algolia-autocomplete .ds-dropdown-menu:before {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '';
|
content: '';
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background: #373940;
|
background: #373940;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
top: -7px;
|
top: -7px;
|
||||||
border-top: 1px solid #373940;
|
border-top: 1px solid #373940;
|
||||||
border-right: 1px solid #373940;
|
border-right: 1px solid #373940;
|
||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu {
|
.algolia-autocomplete .ds-dropdown-menu {
|
||||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 601px) {
|
@media (min-width: 601px) {
|
||||||
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
|
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
|
||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
left: inherit !important;
|
left: inherit !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
|
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
|
||||||
right: 48px;
|
right: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu {
|
.algolia-autocomplete .ds-dropdown-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -6px;
|
top: -6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 6px 0 0;
|
margin: 6px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.algolia-autocomplete .ds-dropdown-menu {
|
.algolia-autocomplete .ds-dropdown-menu {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
top: 50px !important;
|
top: 50px !important;
|
||||||
left: auto !important;
|
left: auto !important;
|
||||||
right: 1rem !important;
|
right: 1rem !important;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
max-width: calc(100% - 2rem);
|
max-width: calc(100% - 2rem);
|
||||||
max-height: calc(100% - 5rem);
|
max-height: calc(100% - 5rem);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu:before {
|
.algolia-autocomplete .ds-dropdown-menu:before {
|
||||||
right: 6rem;
|
right: 6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
|
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion {
|
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {
|
.algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-dropdown-menu * {
|
.algolia-autocomplete .ds-dropdown-menu * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion {
|
.algolia-autocomplete .algolia-docsearch-suggestion {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--wrapper {
|
.algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--wrapper {
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
box-shadow: inset -2px 0 0 #61dafb;
|
box-shadow: inset -2px 0 0 #61dafb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
|
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
|
||||||
background: #ffe564;
|
background: #ffe564;
|
||||||
padding: 0.1em 0.05em;
|
padding: 0.1em 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete
|
||||||
.algolia-docsearch-suggestion--category-header
|
.algolia-docsearch-suggestion--category-header
|
||||||
.algolia-docsearch-suggestion--category-header-lvl0
|
.algolia-docsearch-suggestion--category-header-lvl0
|
||||||
.algolia-docsearch-suggestion--highlight,
|
.algolia-docsearch-suggestion--highlight,
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete
|
||||||
.algolia-docsearch-suggestion--category-header
|
.algolia-docsearch-suggestion--category-header
|
||||||
.algolia-docsearch-suggestion--category-header-lvl1
|
.algolia-docsearch-suggestion--category-header-lvl1
|
||||||
.algolia-docsearch-suggestion--highlight {
|
.algolia-docsearch-suggestion--highlight {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
|
||||||
.algolia-docsearch-suggestion--text
|
padding: 0 0 1px;
|
||||||
.algolia-docsearch-suggestion--highlight {
|
background: inherit;
|
||||||
padding: 0 0 1px;
|
box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
|
||||||
background: inherit;
|
color: inherit;
|
||||||
box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
|
|
||||||
color: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--content {
|
.algolia-autocomplete .algolia-docsearch-suggestion--content {
|
||||||
display: block;
|
display: block;
|
||||||
float: right;
|
float: right;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5.33333px 0 5.33333px 10.66667px;
|
padding: 5.33333px 0 5.33333px 10.66667px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
|
.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
background: #ececec;
|
background: #ececec;
|
||||||
left: -1px;
|
left: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
|
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background-color: #373940;
|
background-color: #373940;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
|
.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 8px 0 0 0;
|
padding: 8px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
|
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
|
||||||
float: left;
|
float: left;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
display: none;
|
display: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5.33333px 10.66667px;
|
padding: 5.33333px 10.66667px;
|
||||||
color: #777;
|
color: #777;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
|
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
background: #ececec;
|
background: #ececec;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete
|
||||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
|
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
|
||||||
.algolia-docsearch-suggestion--category-header,
|
.algolia-docsearch-suggestion--category-header,
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
|
||||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
|
display: block;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
|
||||||
.algolia-docsearch-suggestion--subcategory-column
|
background-color: inherit;
|
||||||
.algolia-docsearch-suggestion--highlight {
|
color: inherit;
|
||||||
background-color: inherit;
|
|
||||||
color: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
|
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--title {
|
.algolia-autocomplete .algolia-docsearch-suggestion--title {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: #02060c;
|
color: #02060c;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--text {
|
.algolia-autocomplete .algolia-docsearch-suggestion--text {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
color: #63676d;
|
color: #63676d;
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--no-results {
|
.algolia-autocomplete .algolia-docsearch-suggestion--no-results {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
background-color: #373940;
|
background-color: #373940;
|
||||||
margin-top: -8px;
|
margin-top: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete .algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
|
||||||
.algolia-docsearch-suggestion--no-results
|
color: #ffffff;
|
||||||
.algolia-docsearch-suggestion--text {
|
margin-top: 4px;
|
||||||
color: #ffffff;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
|
.algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-suggestion code {
|
.algolia-autocomplete .algolia-docsearch-suggestion code {
|
||||||
padding: 1px 5px;
|
padding: 1px 5px;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
border: none;
|
border: none;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
background-color: #ebebeb;
|
background-color: #ebebeb;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
monospace;
|
}
|
||||||
|
|
||||||
|
.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {
|
||||||
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete
|
||||||
.algolia-docsearch-suggestion
|
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
|
||||||
code
|
.algolia-docsearch-suggestion--category-header {
|
||||||
.algolia-docsearch-suggestion--highlight {
|
color: white;
|
||||||
background: none;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete
|
.algolia-autocomplete
|
||||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
|
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary
|
||||||
.algolia-docsearch-suggestion--category-header {
|
.algolia-docsearch-suggestion--subcategory-column {
|
||||||
color: white;
|
display: block;
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.algolia-autocomplete
|
|
||||||
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary
|
|
||||||
.algolia-docsearch-suggestion--subcategory-column {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-footer {
|
.algolia-autocomplete .algolia-docsearch-footer {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.algolia-autocomplete .algolia-docsearch-footer--logo {
|
.algolia-autocomplete .algolia-docsearch-footer--logo {
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 18'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-36.87%25' x2='129.43%25' y1='134.94%25' y2='-27.7%25'%3E%3Cstop stop-color='%252300AEFF' offset='0%25'/%3E%3Cstop stop-color='%25233369E7' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%2523a)' d='M59.4.02h13.3a2.37 2.37 0 0 1 2.38 2.37V15.6a2.37 2.37 0 0 1-2.38 2.36H59.4a2.37 2.37 0 0 1-2.38-2.36V2.38A2.37 2.37 0 0 1 59.4.02z'/%3E%3Cpath fill='%2523FFF' d='M66.26 4.56c-2.82 0-5.1 2.27-5.1 5.08 0 2.8 2.28 5.07 5.1 5.07 2.8 0 5.1-2.26 5.1-5.07 0-2.8-2.28-5.07-5.1-5.07zm0 8.65c-2 0-3.6-1.6-3.6-3.56 0-1.97 1.6-3.58 3.6-3.58 1.98 0 3.6 1.6 3.6 3.58a3.58 3.58 0 0 1-3.6 3.57zm0-6.4v2.66c0 .07.08.13.15.1l2.4-1.24c.04-.02.06-.1.03-.14a2.96 2.96 0 0 0-2.46-1.5c-.06 0-.1.05-.1.1zm-3.33-1.96l-.3-.3a.78.78 0 0 0-1.12 0l-.36.36a.77.77 0 0 0 0 1.1l.3.3c.05.05.13.04.17 0 .2-.25.4-.5.6-.7.23-.23.46-.43.7-.6.07-.04.07-.1.03-.16zm5-.8V3.4a.78.78 0 0 0-.78-.78h-1.83a.78.78 0 0 0-.78.78v.63c0 .07.06.12.14.1a5.74 5.74 0 0 1 1.58-.22c.52 0 1.04.07 1.54.2a.1.1 0 0 0 .13-.1z'/%3E%3Cpath fill='%2523182359' d='M102.16 13.76c0 1.46-.37 2.52-1.12 3.2-.75.67-1.9 1-3.44 1-.56 0-1.74-.1-2.67-.3l.34-1.7c.78.17 1.82.2 2.36.2.86 0 1.48-.16 1.84-.5.37-.36.55-.88.55-1.57v-.35a6.37 6.37 0 0 1-.84.3 4.15 4.15 0 0 1-1.2.17 4.5 4.5 0 0 1-1.6-.28 3.38 3.38 0 0 1-1.26-.82 3.74 3.74 0 0 1-.8-1.35c-.2-.54-.3-1.5-.3-2.2 0-.67.1-1.5.3-2.06a3.92 3.92 0 0 1 .9-1.43 4.12 4.12 0 0 1 1.45-.92 5.3 5.3 0 0 1 1.94-.37c.7 0 1.35.1 1.97.2a15.86 15.86 0 0 1 1.6.33v8.46zm-5.95-4.2c0 .9.2 1.88.6 2.3.4.4.9.62 1.53.62.34 0 .66-.05.96-.15a2.75 2.75 0 0 0 .73-.33V6.7a8.53 8.53 0 0 0-1.42-.17c-.76-.02-1.36.3-1.77.8-.4.5-.62 1.4-.62 2.23zm16.13 0c0 .72-.1 1.26-.32 1.85a4.4 4.4 0 0 1-.9 1.53c-.38.42-.85.75-1.4.98-.54.24-1.4.37-1.8.37-.43 0-1.27-.13-1.8-.36a4.1 4.1 0 0 1-1.4-.97 4.5 4.5 0 0 1-.92-1.52 5.04 5.04 0 0 1-.33-1.84c0-.72.1-1.4.32-2 .22-.6.53-1.1.92-1.5.4-.43.86-.75 1.4-.98a4.55 4.55 0 0 1 1.78-.34 4.7 4.7 0 0 1 1.8.34c.54.23 1 .55 1.4.97.38.42.68.92.9 1.5.23.6.35 1.3.35 2zm-2.2 0c0-.92-.2-1.7-.6-2.22-.38-.54-.94-.8-1.64-.8-.72 0-1.27.26-1.67.8-.4.54-.58 1.3-.58 2.22 0 .93.2 1.56.6 2.1.38.54.94.8 1.64.8s1.25-.26 1.65-.8c.4-.55.6-1.17.6-2.1zm6.97 4.7c-3.5.02-3.5-2.8-3.5-3.27L113.57.92l2.15-.34v10c0 .25 0 1.87 1.37 1.88v1.8zm3.77 0h-2.15v-9.2l2.15-.33v9.54zM119.8 3.74c.7 0 1.3-.58 1.3-1.3 0-.7-.58-1.3-1.3-1.3-.73 0-1.3.6-1.3 1.3 0 .72.58 1.3 1.3 1.3zm6.43 1c.7 0 1.3.1 1.78.27.5.18.88.42 1.17.73.28.3.5.74.6 1.18.13.46.2.95.2 1.5v5.47a25.24 25.24 0 0 1-1.5.25c-.67.1-1.42.15-2.25.15a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.37-.27-.9-.27-1.44 0-.52.1-.85.3-1.2.2-.37.48-.67.83-.9a3.6 3.6 0 0 1 1.23-.5 7.07 7.07 0 0 1 2.2-.1l.83.16v-.35c0-.25-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.18-.34-.3-.58-.4a2.54 2.54 0 0 0-.92-.17c-.5 0-.94.06-1.35.13-.4.08-.75.16-1 .25l-.27-1.74c.27-.1.67-.18 1.2-.28a9.34 9.34 0 0 1 1.65-.14zm.18 7.74c.66 0 1.15-.04 1.5-.1V10.2a5.1 5.1 0 0 0-2-.1c-.23.03-.45.1-.64.2a1.17 1.17 0 0 0-.47.38c-.13.17-.18.26-.18.52 0 .5.17.8.5.98.32.2.74.3 1.3.3zM84.1 4.8c.72 0 1.3.08 1.8.26.48.17.87.42 1.15.73.3.3.5.72.6 1.17.14.45.2.94.2 1.47v5.48a25.24 25.24 0 0 1-1.5.26c-.67.1-1.42.14-2.25.14a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.38-.27-.9-.27-1.44 0-.53.1-.86.3-1.22.2-.36.5-.65.84-.88a3.6 3.6 0 0 1 1.24-.5 7.07 7.07 0 0 1 2.2-.1c.26.03.54.08.84.15v-.35c0-.24-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.17-.34-.3-.58-.4a2.54 2.54 0 0 0-.9-.15c-.5 0-.96.05-1.37.12-.4.07-.75.15-1 .24l-.26-1.75c.27-.08.67-.17 1.18-.26a8.9 8.9 0 0 1 1.66-.15zm.2 7.73c.65 0 1.14-.04 1.48-.1v-2.17a5.1 5.1 0 0 0-1.98-.1c-.24.03-.46.1-.65.18a1.17 1.17 0 0 0-.47.4c-.12.17-.17.26-.17.52 0 .5.18.8.5.98.32.2.75.3 1.3.3zm8.68 1.74c-3.5 0-3.5-2.82-3.5-3.28L89.45.92 91.6.6v10c0 .25 0 1.87 1.38 1.88v1.8z'/%3E%3Cpath fill='%25231D3657' d='M5.03 11.03c0 .7-.26 1.24-.76 1.64-.5.4-1.2.6-2.1.6-.88 0-1.6-.14-2.17-.42v-1.2c.36.16.74.3 1.14.38.4.1.78.15 1.13.15.5 0 .88-.1 1.12-.3a.94.94 0 0 0 .35-.77.98.98 0 0 0-.33-.74c-.22-.2-.68-.44-1.37-.72-.72-.3-1.22-.62-1.52-1C.23 8.27.1 7.82.1 7.3c0-.65.22-1.17.7-1.55.46-.37 1.08-.56 1.86-.56.76 0 1.5.16 2.25.48l-.4 1.05c-.7-.3-1.32-.44-1.87-.44-.4 0-.73.08-.94.26a.9.9 0 0 0-.33.72c0 .2.04.38.12.52.08.15.22.3.42.4.2.14.55.3 1.06.52.58.24 1 .47 1.27.67.27.2.47.44.6.7.12.26.18.57.18.92zM9 13.27c-.92 0-1.64-.27-2.16-.8-.52-.55-.78-1.3-.78-2.24 0-.97.24-1.73.72-2.3.5-.54 1.15-.82 2-.82.78 0 1.4.25 1.85.72.46.48.7 1.14.7 1.97v.67H7.35c0 .58.17 1.02.46 1.33.3.3.7.47 1.24.47.36 0 .68-.04.98-.1a5.1 5.1 0 0 0 .98-.33v1.02a3.87 3.87 0 0 1-.94.32 5.72 5.72 0 0 1-1.08.1zm-.22-5.2c-.4 0-.73.12-.97.38s-.37.62-.42 1.1h2.7c0-.48-.13-.85-.36-1.1-.23-.26-.54-.38-.94-.38zm7.7 5.1l-.26-.84h-.05c-.28.36-.57.6-.86.74-.28.13-.65.2-1.1.2-.6 0-1.05-.16-1.38-.48-.32-.32-.5-.77-.5-1.34 0-.62.24-1.08.7-1.4.45-.3 Line truncated
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 18'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-36.87%25' x2='129.43%25' y1='134.94%25' y2='-27.7%25'%3E%3Cstop stop-color='%252300AEFF' offset='0%25'/%3E%3Cstop stop-color='%25233369E7' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%2523a)' d='M59.4.02h13.3a2.37 2.37 0 0 1 2.38 2.37V15.6a2.37 2.37 0 0 1-2.38 2.36H59.4a2.37 2.37 0 0 1-2.38-2.36V2.38A2.37 2.37 0 0 1 59.4.02z'/%3E%3Cpath fill='%2523FFF' d='M66.26 4.56c-2.82 0-5.1 2.27-5.1 5.08 0 2.8 2.28 5.07 5.1 5.07 2.8 0 5.1-2.26 5.1-5.07 0-2.8-2.28-5.07-5.1-5.07zm0 8.65c-2 0-3.6-1.6-3.6-3.56 0-1.97 1.6-3.58 3.6-3.58 1.98 0 3.6 1.6 3.6 3.58a3.58 3.58 0 0 1-3.6 3.57zm0-6.4v2.66c0 .07.08.13.15.1l2.4-1.24c.04-.02.06-.1.03-.14a2.96 2.96 0 0 0-2.46-1.5c-.06 0-.1.05-.1.1zm-3.33-1.96l-.3-.3a.78.78 0 0 0-1.12 0l-.36.36a.77.77 0 0 0 0 1.1l.3.3c.05.05.13.04.17 0 .2-.25.4-.5.6-.7.23-.23.46-.43.7-.6.07-.04.07-.1.03-.16zm5-.8V3.4a.78.78 0 0 0-.78-.78h-1.83a.78.78 0 0 0-.78.78v.63c0 .07.06.12.14.1a5.74 5.74 0 0 1 1.58-.22c.52 0 1.04.07 1.54.2a.1.1 0 0 0 .13-.1z'/%3E%3Cpath fill='%2523182359' d='M102.16 13.76c0 1.46-.37 2.52-1.12 3.2-.75.67-1.9 1-3.44 1-.56 0-1.74-.1-2.67-.3l.34-1.7c.78.17 1.82.2 2.36.2.86 0 1.48-.16 1.84-.5.37-.36.55-.88.55-1.57v-.35a6.37 6.37 0 0 1-.84.3 4.15 4.15 0 0 1-1.2.17 4.5 4.5 0 0 1-1.6-.28 3.38 3.38 0 0 1-1.26-.82 3.74 3.74 0 0 1-.8-1.35c-.2-.54-.3-1.5-.3-2.2 0-.67.1-1.5.3-2.06a3.92 3.92 0 0 1 .9-1.43 4.12 4.12 0 0 1 1.45-.92 5.3 5.3 0 0 1 1.94-.37c.7 0 1.35.1 1.97.2a15.86 15.86 0 0 1 1.6.33v8.46zm-5.95-4.2c0 .9.2 1.88.6 2.3.4.4.9.62 1.53.62.34 0 .66-.05.96-.15a2.75 2.75 0 0 0 .73-.33V6.7a8.53 8.53 0 0 0-1.42-.17c-.76-.02-1.36.3-1.77.8-.4.5-.62 1.4-.62 2.23zm16.13 0c0 .72-.1 1.26-.32 1.85a4.4 4.4 0 0 1-.9 1.53c-.38.42-.85.75-1.4.98-.54.24-1.4.37-1.8.37-.43 0-1.27-.13-1.8-.36a4.1 4.1 0 0 1-1.4-.97 4.5 4.5 0 0 1-.92-1.52 5.04 5.04 0 0 1-.33-1.84c0-.72.1-1.4.32-2 .22-.6.53-1.1.92-1.5.4-.43.86-.75 1.4-.98a4.55 4.55 0 0 1 1.78-.34 4.7 4.7 0 0 1 1.8.34c.54.23 1 .55 1.4.97.38.42.68.92.9 1.5.23.6.35 1.3.35 2zm-2.2 0c0-.92-.2-1.7-.6-2.22-.38-.54-.94-.8-1.64-.8-.72 0-1.27.26-1.67.8-.4.54-.58 1.3-.58 2.22 0 .93.2 1.56.6 2.1.38.54.94.8 1.64.8s1.25-.26 1.65-.8c.4-.55.6-1.17.6-2.1zm6.97 4.7c-3.5.02-3.5-2.8-3.5-3.27L113.57.92l2.15-.34v10c0 .25 0 1.87 1.37 1.88v1.8zm3.77 0h-2.15v-9.2l2.15-.33v9.54zM119.8 3.74c.7 0 1.3-.58 1.3-1.3 0-.7-.58-1.3-1.3-1.3-.73 0-1.3.6-1.3 1.3 0 .72.58 1.3 1.3 1.3zm6.43 1c.7 0 1.3.1 1.78.27.5.18.88.42 1.17.73.28.3.5.74.6 1.18.13.46.2.95.2 1.5v5.47a25.24 25.24 0 0 1-1.5.25c-.67.1-1.42.15-2.25.15a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.37-.27-.9-.27-1.44 0-.52.1-.85.3-1.2.2-.37.48-.67.83-.9a3.6 3.6 0 0 1 1.23-.5 7.07 7.07 0 0 1 2.2-.1l.83.16v-.35c0-.25-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.18-.34-.3-.58-.4a2.54 2.54 0 0 0-.92-.17c-.5 0-.94.06-1.35.13-.4.08-.75.16-1 .25l-.27-1.74c.27-.1.67-.18 1.2-.28a9.34 9.34 0 0 1 1.65-.14zm.18 7.74c.66 0 1.15-.04 1.5-.1V10.2a5.1 5.1 0 0 0-2-.1c-.23.03-.45.1-.64.2a1.17 1.17 0 0 0-.47.38c-.13.17-.18.26-.18.52 0 .5.17.8.5.98.32.2.74.3 1.3.3zM84.1 4.8c.72 0 1.3.08 1.8.26.48.17.87.42 1.15.73.3.3.5.72.6 1.17.14.45.2.94.2 1.47v5.48a25.24 25.24 0 0 1-1.5.26c-.67.1-1.42.14-2.25.14a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.38-.27-.9-.27-1.44 0-.53.1-.86.3-1.22.2-.36.5-.65.84-.88a3.6 3.6 0 0 1 1.24-.5 7.07 7.07 0 0 1 2.2-.1c.26.03.54.08.84.15v-.35c0-.24-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.17-.34-.3-.58-.4a2.54 2.54 0 0 0-.9-.15c-.5 0-.96.05-1.37.12-.4.07-.75.15-1 .24l-.26-1.75c.27-.08.67-.17 1.18-.26a8.9 8.9 0 0 1 1.66-.15zm.2 7.73c.65 0 1.14-.04 1.48-.1v-2.17a5.1 5.1 0 0 0-1.98-.1c-.24.03-.46.1-.65.18a1.17 1.17 0 0 0-.47.4c-.12.17-.17.26-.17.52 0 .5.18.8.5.98.32.2.75.3 1.3.3zm8.68 1.74c-3.5 0-3.5-2.82-3.5-3.28L89.45.92 91.6.6v10c0 .25 0 1.87 1.38 1.88v1.8z'/%3E%3Cpath fill='%25231D3657' d='M5.03 11.03c0 .7-.26 1.24-.76 1.64-.5.4-1.2.6-2.1.6-.88 0-1.6-.14-2.17-.42v-1.2c.36.16.74.3 1.14.38.4.1.78.15 1.13.15.5 0 .88-.1 1.12-.3a.94.94 0 0 0 .35-.77.98.98 0 0 0-.33-.74c-.22-.2-.68-.44-1.37-.72-.72-.3-1.22-.62-1.52-1C.23 8.27.1 7.82.1 7.3c0-.65.22-1.17.7-1.55.46-.37 1.08-.56 1.86-.56.76 0 1.5.16 2.25.48l-.4 1.05c-.7-.3-1.32-.44-1.87-.44-.4 0-.73.08-.94.26a.9.9 0 0 0-.33.72c0 .2.04.38.12.52.08.15.22.3.42.4.2.14.55.3 1.06.52.58.24 1 .47 1.27.67.27.2.47.44.6.7.12.26.18.57.18.92zM9 13.27c-.92 0-1.64-.27-2.16-.8-.52-.55-.78-1.3-.78-2.24 0-.97.24-1.73.72-2.3.5-.54 1.15-.82 2-.82.78 0 1.4.25 1.85.72.46.48.7 1.14.7 1.97v.67H7.35c0 .58.17 1.02.46 1.33.3.3.7.47 1.24.47.36 0 .68-.04.98-.1a5.1 5.1 0 0 0 .98-.33v1.02a3.87 3.87 0 0 1-.94.32 5.72 5.72 0 0 1-1.08.1zm-.22-5.2c-.4 0-.73.12-.97.38s-.37.62-.42 1.1h2.7c0-.48-.13-.85-.36-1.1-.23-.26-.54-.38-.94-.38zm7.7 5.1l-.26-.84h-.05c-.28.36-.57.6-.86.74-.28.13-.65.2-1.1.2-.6 0-1.05-.16-1.38-.48-.32-.32-.5-.77-.5-1.34 0-.62.24-1.08.7-1.4.45-.Line truncated
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-indent: -9000px;
|
text-indent: -9000px;
|
||||||
width: 110px;
|
width: 110px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
@@ -7,106 +7,103 @@
|
|||||||
* LICENSE file in the root directory of this source tree.
|
* LICENSE file in the root directory of this source tree.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useRef, useCallback } from "react";
|
import React, { useRef, useCallback } from 'react';
|
||||||
import classnames from "classnames";
|
import classnames from 'classnames';
|
||||||
import { useHistory } from "@docusaurus/router";
|
import { useHistory } from '@docusaurus/router';
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||||
import { usePluginData } from '@docusaurus/useGlobalData';
|
import { usePluginData } from '@docusaurus/useGlobalData';
|
||||||
const Search = props => {
|
const Search = (props) => {
|
||||||
const initialized = useRef(false);
|
const initialized = useRef(false);
|
||||||
const searchBarRef = useRef(null);
|
const searchBarRef = useRef(null);
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const { siteConfig = {} } = useDocusaurusContext();
|
const { siteConfig = {} } = useDocusaurusContext();
|
||||||
const { baseUrl } = siteConfig;
|
const { baseUrl } = siteConfig;
|
||||||
const initAlgolia = (searchDocs, searchIndex, DocSearch) => {
|
const initAlgolia = (searchDocs, searchIndex, DocSearch) => {
|
||||||
new DocSearch({
|
new DocSearch({
|
||||||
searchDocs,
|
searchDocs,
|
||||||
searchIndex,
|
searchIndex,
|
||||||
inputSelector: "#search_input_react",
|
inputSelector: '#search_input_react',
|
||||||
// Override algolia's default selection event, allowing us to do client-side
|
// Override algolia's default selection event, allowing us to do client-side
|
||||||
// navigation and avoiding a full page refresh.
|
// navigation and avoiding a full page refresh.
|
||||||
handleSelected: (_input, _event, suggestion) => {
|
handleSelected: (_input, _event, suggestion) => {
|
||||||
const url = baseUrl + suggestion.url;
|
const url = baseUrl + suggestion.url;
|
||||||
// Use an anchor tag to parse the absolute url into a relative url
|
// Use an anchor tag to parse the absolute url into a relative url
|
||||||
// Alternatively, we can use new URL(suggestion.url) but its not supported in IE
|
// Alternatively, we can use new URL(suggestion.url) but its not supported in IE
|
||||||
const a = document.createElement("a");
|
const a = document.createElement('a');
|
||||||
a.href = url;
|
a.href = url;
|
||||||
// Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
|
// Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
|
||||||
// So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details.
|
// So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details.
|
||||||
|
|
||||||
history.push(url);
|
history.push(url);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const pluginData = usePluginData('docusaurus-lunr-search');
|
||||||
|
const getSearchDoc = () =>
|
||||||
|
process.env.NODE_ENV === 'production'
|
||||||
|
? fetch(`${baseUrl}${pluginData.fileNames.searchDoc}`).then((content) => content.json())
|
||||||
|
: Promise.resolve([]);
|
||||||
|
|
||||||
|
const getLunrIndex = () =>
|
||||||
|
process.env.NODE_ENV === 'production'
|
||||||
|
? fetch(`${baseUrl}${pluginData.fileNames.lunrIndex}`).then((content) => content.json())
|
||||||
|
: Promise.resolve([]);
|
||||||
|
|
||||||
|
const loadAlgolia = () => {
|
||||||
|
if (!initialized.current) {
|
||||||
|
Promise.all([getSearchDoc(), getLunrIndex(), import('./lib/DocSearch'), import('./algolia.css')]).then(
|
||||||
|
([searchDocs, searchIndex, { default: DocSearch }]) => {
|
||||||
|
if (searchDocs.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
initAlgolia(searchDocs, searchIndex, DocSearch);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
initialized.current = true;
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
};
|
|
||||||
|
|
||||||
const pluginData = usePluginData('docusaurus-lunr-search');
|
const toggleSearchIconClick = useCallback(
|
||||||
const getSearchDoc = () =>
|
(e) => {
|
||||||
process.env.NODE_ENV === "production"
|
if (!searchBarRef.current.contains(e.target)) {
|
||||||
? fetch(`${baseUrl}${pluginData.fileNames.searchDoc}`).then((content) => content.json())
|
searchBarRef.current.focus();
|
||||||
: Promise.resolve([]);
|
}
|
||||||
|
props.handleSearchBarToggle && props.handleSearchBarToggle(!props.isSearchBarExpanded);
|
||||||
|
},
|
||||||
|
[props.isSearchBarExpanded],
|
||||||
|
);
|
||||||
|
|
||||||
const getLunrIndex = () =>
|
return (
|
||||||
process.env.NODE_ENV === "production"
|
<div className="navbar__search" key="search-box">
|
||||||
? fetch(`${baseUrl}${pluginData.fileNames.lunrIndex}`).then((content) => content.json())
|
<span
|
||||||
: Promise.resolve([]);
|
aria-label="expand searchbar"
|
||||||
|
role="button"
|
||||||
const loadAlgolia = () => {
|
className={classnames('search-icon', {
|
||||||
if (!initialized.current) {
|
'search-icon-hidden': props.isSearchBarExpanded,
|
||||||
Promise.all([
|
})}
|
||||||
getSearchDoc(),
|
onClick={toggleSearchIconClick}
|
||||||
getLunrIndex(),
|
onKeyDown={toggleSearchIconClick}
|
||||||
import("./lib/DocSearch"),
|
tabIndex={0}
|
||||||
import("./algolia.css")
|
/>
|
||||||
]).then(([searchDocs, searchIndex, { default: DocSearch }]) => {
|
<input
|
||||||
if( searchDocs.length === 0) {
|
id="search_input_react"
|
||||||
return;
|
type="search"
|
||||||
}
|
placeholder="Search"
|
||||||
initAlgolia(searchDocs, searchIndex, DocSearch);
|
aria-label="Search"
|
||||||
});
|
className={classnames(
|
||||||
initialized.current = true;
|
'navbar__search-input',
|
||||||
}
|
{ 'search-bar-expanded': props.isSearchBarExpanded },
|
||||||
};
|
{ 'search-bar': !props.isSearchBarExpanded },
|
||||||
|
)}
|
||||||
const toggleSearchIconClick = useCallback(
|
onClick={loadAlgolia}
|
||||||
e => {
|
onMouseOver={loadAlgolia}
|
||||||
if (!searchBarRef.current.contains(e.target)) {
|
onFocus={toggleSearchIconClick}
|
||||||
searchBarRef.current.focus();
|
onBlur={toggleSearchIconClick}
|
||||||
}
|
ref={searchBarRef}
|
||||||
props.handleSearchBarToggle && props.handleSearchBarToggle(!props.isSearchBarExpanded);
|
/>
|
||||||
},
|
</div>
|
||||||
[props.isSearchBarExpanded]
|
);
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="navbar__search" key="search-box">
|
|
||||||
<span
|
|
||||||
aria-label="expand searchbar"
|
|
||||||
role="button"
|
|
||||||
className={classnames("search-icon", {
|
|
||||||
"search-icon-hidden": props.isSearchBarExpanded
|
|
||||||
})}
|
|
||||||
onClick={toggleSearchIconClick}
|
|
||||||
onKeyDown={toggleSearchIconClick}
|
|
||||||
tabIndex={0}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="search_input_react"
|
|
||||||
type="search"
|
|
||||||
placeholder="Search"
|
|
||||||
aria-label="Search"
|
|
||||||
className={classnames(
|
|
||||||
"navbar__search-input",
|
|
||||||
{ "search-bar-expanded": props.isSearchBarExpanded },
|
|
||||||
{ "search-bar": !props.isSearchBarExpanded }
|
|
||||||
)}
|
|
||||||
onClick={loadAlgolia}
|
|
||||||
onMouseOver={loadAlgolia}
|
|
||||||
onFocus={toggleSearchIconClick}
|
|
||||||
onBlur={toggleSearchIconClick}
|
|
||||||
ref={searchBarRef}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Search;
|
export default Search;
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import Hogan from "hogan.js";
|
import Hogan from 'hogan.js';
|
||||||
import LunrSearchAdapter from "./lunar-search";
|
import LunrSearchAdapter from './lunar-search';
|
||||||
import autocomplete from "autocomplete.js";
|
import autocomplete from 'autocomplete.js';
|
||||||
import templates from "./templates";
|
import templates from './templates';
|
||||||
import utils from "./utils";
|
import utils from './utils';
|
||||||
import $ from "autocomplete.js/zepto";
|
import $ from 'autocomplete.js/zepto';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds an autocomplete dropdown to an input field
|
* Adds an autocomplete dropdown to an input field
|
||||||
@@ -26,35 +26,27 @@ class DocSearch {
|
|||||||
autocompleteOptions = {
|
autocompleteOptions = {
|
||||||
debug: false,
|
debug: false,
|
||||||
hint: false,
|
hint: false,
|
||||||
autoselect: true
|
autoselect: true,
|
||||||
},
|
},
|
||||||
transformData = false,
|
transformData = false,
|
||||||
queryHook = false,
|
queryHook = false,
|
||||||
handleSelected = false,
|
handleSelected = false,
|
||||||
enhancedSearchInput = false,
|
enhancedSearchInput = false,
|
||||||
layout = "collumns"
|
layout = 'collumns',
|
||||||
}) {
|
}) {
|
||||||
this.input = DocSearch.getInputFromSelector(inputSelector);
|
this.input = DocSearch.getInputFromSelector(inputSelector);
|
||||||
this.queryDataCallback = queryDataCallback || null;
|
this.queryDataCallback = queryDataCallback || null;
|
||||||
const autocompleteOptionsDebug =
|
const autocompleteOptionsDebug =
|
||||||
autocompleteOptions && autocompleteOptions.debug
|
autocompleteOptions && autocompleteOptions.debug ? autocompleteOptions.debug : false;
|
||||||
? autocompleteOptions.debug
|
|
||||||
: false;
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
// eslint-disable-next-line no-param-reassign
|
||||||
autocompleteOptions.debug = debug || autocompleteOptionsDebug;
|
autocompleteOptions.debug = debug || autocompleteOptionsDebug;
|
||||||
this.autocompleteOptions = autocompleteOptions;
|
this.autocompleteOptions = autocompleteOptions;
|
||||||
this.autocompleteOptions.cssClasses =
|
this.autocompleteOptions.cssClasses = this.autocompleteOptions.cssClasses || {};
|
||||||
this.autocompleteOptions.cssClasses || {};
|
this.autocompleteOptions.cssClasses.prefix = this.autocompleteOptions.cssClasses.prefix || 'ds';
|
||||||
this.autocompleteOptions.cssClasses.prefix =
|
const inputAriaLabel = this.input && typeof this.input.attr === 'function' && this.input.attr('aria-label');
|
||||||
this.autocompleteOptions.cssClasses.prefix || "ds";
|
this.autocompleteOptions.ariaLabel = this.autocompleteOptions.ariaLabel || inputAriaLabel || 'search input';
|
||||||
const inputAriaLabel =
|
|
||||||
this.input &&
|
|
||||||
typeof this.input.attr === "function" &&
|
|
||||||
this.input.attr("aria-label");
|
|
||||||
this.autocompleteOptions.ariaLabel =
|
|
||||||
this.autocompleteOptions.ariaLabel || inputAriaLabel || "search input";
|
|
||||||
|
|
||||||
this.isSimpleLayout = layout === "simple";
|
this.isSimpleLayout = layout === 'simple';
|
||||||
|
|
||||||
this.client = new LunrSearchAdapter(searchDocs, searchIndex);
|
this.client = new LunrSearchAdapter(searchDocs, searchIndex);
|
||||||
|
|
||||||
@@ -67,9 +59,9 @@ class DocSearch {
|
|||||||
templates: {
|
templates: {
|
||||||
suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
|
suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
|
||||||
footer: templates.footer,
|
footer: templates.footer,
|
||||||
empty: DocSearch.getEmptyTemplate()
|
empty: DocSearch.getEmptyTemplate(),
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const customHandleSelected = handleSelected;
|
const customHandleSelected = handleSelected;
|
||||||
@@ -77,20 +69,14 @@ class DocSearch {
|
|||||||
|
|
||||||
// We prevent default link clicking if a custom handleSelected is defined
|
// We prevent default link clicking if a custom handleSelected is defined
|
||||||
if (customHandleSelected) {
|
if (customHandleSelected) {
|
||||||
$(".algolia-autocomplete").on("click", ".ds-suggestions a", event => {
|
$('.algolia-autocomplete').on('click', '.ds-suggestions a', (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.autocomplete.on(
|
this.autocomplete.on('autocomplete:selected', this.handleSelected.bind(null, this.autocomplete.autocomplete));
|
||||||
"autocomplete:selected",
|
|
||||||
this.handleSelected.bind(null, this.autocomplete.autocomplete)
|
|
||||||
);
|
|
||||||
|
|
||||||
this.autocomplete.on(
|
this.autocomplete.on('autocomplete:shown', this.handleShown.bind(null, this.input));
|
||||||
"autocomplete:shown",
|
|
||||||
this.handleShown.bind(null, this.input)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (enhancedSearchInput) {
|
if (enhancedSearchInput) {
|
||||||
DocSearch.bindSearchBoxEvent();
|
DocSearch.bindSearchBoxEvent();
|
||||||
@@ -99,27 +85,24 @@ class DocSearch {
|
|||||||
|
|
||||||
static injectSearchBox(input) {
|
static injectSearchBox(input) {
|
||||||
input.before(templates.searchBox);
|
input.before(templates.searchBox);
|
||||||
const newInput = input
|
const newInput = input.prev().prev().find('input');
|
||||||
.prev()
|
|
||||||
.prev()
|
|
||||||
.find("input");
|
|
||||||
input.remove();
|
input.remove();
|
||||||
return newInput;
|
return newInput;
|
||||||
}
|
}
|
||||||
|
|
||||||
static bindSearchBoxEvent() {
|
static bindSearchBoxEvent() {
|
||||||
$('.searchbox [type="reset"]').on("click", function () {
|
$('.searchbox [type="reset"]').on('click', function () {
|
||||||
$("input#docsearch").focus();
|
$('input#docsearch').focus();
|
||||||
$(this).addClass("hide");
|
$(this).addClass('hide');
|
||||||
autocomplete.autocomplete.setVal("");
|
autocomplete.autocomplete.setVal('');
|
||||||
});
|
});
|
||||||
|
|
||||||
$("input#docsearch").on("keyup", () => {
|
$('input#docsearch').on('keyup', () => {
|
||||||
const searchbox = document.querySelector("input#docsearch");
|
const searchbox = document.querySelector('input#docsearch');
|
||||||
const reset = document.querySelector('.searchbox [type="reset"]');
|
const reset = document.querySelector('.searchbox [type="reset"]');
|
||||||
reset.className = "searchbox__reset";
|
reset.className = 'searchbox__reset';
|
||||||
if (searchbox.value.length === 0) {
|
if (searchbox.value.length === 0) {
|
||||||
reset.className += " hide";
|
reset.className += ' hide';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -132,7 +115,7 @@ class DocSearch {
|
|||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
static getInputFromSelector(selector) {
|
static getInputFromSelector(selector) {
|
||||||
const input = $(selector).filter("input");
|
const input = $(selector).filter('input');
|
||||||
return input.length ? $(input[0]) : null;
|
return input.length ? $(input[0]) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -151,11 +134,8 @@ class DocSearch {
|
|||||||
// eslint-disable-next-line no-param-reassign
|
// eslint-disable-next-line no-param-reassign
|
||||||
query = queryHook(query) || query;
|
query = queryHook(query) || query;
|
||||||
}
|
}
|
||||||
this.client.search(query).then(hits => {
|
this.client.search(query).then((hits) => {
|
||||||
if (
|
if (this.queryDataCallback && typeof this.queryDataCallback == 'function') {
|
||||||
this.queryDataCallback &&
|
|
||||||
typeof this.queryDataCallback == "function"
|
|
||||||
) {
|
|
||||||
this.queryDataCallback(hits);
|
this.queryDataCallback(hits);
|
||||||
}
|
}
|
||||||
if (transformData) {
|
if (transformData) {
|
||||||
@@ -170,56 +150,43 @@ class DocSearch {
|
|||||||
// a Hogan template
|
// a Hogan template
|
||||||
static formatHits(receivedHits) {
|
static formatHits(receivedHits) {
|
||||||
const clonedHits = utils.deepClone(receivedHits);
|
const clonedHits = utils.deepClone(receivedHits);
|
||||||
const hits = clonedHits.map(hit => {
|
const hits = clonedHits.map((hit) => {
|
||||||
if (hit._highlightResult) {
|
if (hit._highlightResult) {
|
||||||
// eslint-disable-next-line no-param-reassign
|
// eslint-disable-next-line no-param-reassign
|
||||||
hit._highlightResult = utils.mergeKeyWithParent(
|
hit._highlightResult = utils.mergeKeyWithParent(hit._highlightResult, 'hierarchy');
|
||||||
hit._highlightResult,
|
|
||||||
"hierarchy"
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return utils.mergeKeyWithParent(hit, "hierarchy");
|
return utils.mergeKeyWithParent(hit, 'hierarchy');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Group hits by category / subcategory
|
// Group hits by category / subcategory
|
||||||
let groupedHits = utils.groupBy(hits, "lvl0");
|
let groupedHits = utils.groupBy(hits, 'lvl0');
|
||||||
$.each(groupedHits, (level, collection) => {
|
$.each(groupedHits, (level, collection) => {
|
||||||
const groupedHitsByLvl1 = utils.groupBy(collection, "lvl1");
|
const groupedHitsByLvl1 = utils.groupBy(collection, 'lvl1');
|
||||||
const flattenedHits = utils.flattenAndFlagFirst(
|
const flattenedHits = utils.flattenAndFlagFirst(groupedHitsByLvl1, 'isSubCategoryHeader');
|
||||||
groupedHitsByLvl1,
|
|
||||||
"isSubCategoryHeader"
|
|
||||||
);
|
|
||||||
groupedHits[level] = flattenedHits;
|
groupedHits[level] = flattenedHits;
|
||||||
});
|
});
|
||||||
groupedHits = utils.flattenAndFlagFirst(groupedHits, "isCategoryHeader");
|
groupedHits = utils.flattenAndFlagFirst(groupedHits, 'isCategoryHeader');
|
||||||
|
|
||||||
// Translate hits into smaller objects to be send to the template
|
// Translate hits into smaller objects to be send to the template
|
||||||
return groupedHits.map(hit => {
|
return groupedHits.map((hit) => {
|
||||||
const url = DocSearch.formatURL(hit);
|
const url = DocSearch.formatURL(hit);
|
||||||
const category = utils.getHighlightedValue(hit, "lvl0");
|
const category = utils.getHighlightedValue(hit, 'lvl0');
|
||||||
const subcategory = utils.getHighlightedValue(hit, "lvl1") || category;
|
const subcategory = utils.getHighlightedValue(hit, 'lvl1') || category;
|
||||||
const displayTitle = utils
|
const displayTitle = utils
|
||||||
.compact([
|
.compact([
|
||||||
utils.getHighlightedValue(hit, "lvl2") || subcategory,
|
utils.getHighlightedValue(hit, 'lvl2') || subcategory,
|
||||||
utils.getHighlightedValue(hit, "lvl3"),
|
utils.getHighlightedValue(hit, 'lvl3'),
|
||||||
utils.getHighlightedValue(hit, "lvl4"),
|
utils.getHighlightedValue(hit, 'lvl4'),
|
||||||
utils.getHighlightedValue(hit, "lvl5"),
|
utils.getHighlightedValue(hit, 'lvl5'),
|
||||||
utils.getHighlightedValue(hit, "lvl6")
|
utils.getHighlightedValue(hit, 'lvl6'),
|
||||||
])
|
])
|
||||||
.join(
|
.join('<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>');
|
||||||
'<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'
|
const text = utils.getSnippetedValue(hit, 'content');
|
||||||
);
|
|
||||||
const text = utils.getSnippetedValue(hit, "content");
|
|
||||||
const isTextOrSubcategoryNonEmpty =
|
const isTextOrSubcategoryNonEmpty =
|
||||||
(subcategory && subcategory !== "") ||
|
(subcategory && subcategory !== '') || (displayTitle && displayTitle !== '');
|
||||||
(displayTitle && displayTitle !== "");
|
const isLvl1EmptyOrDuplicate = !subcategory || subcategory === '' || subcategory === category;
|
||||||
const isLvl1EmptyOrDuplicate =
|
const isLvl2 = displayTitle && displayTitle !== '' && displayTitle !== subcategory;
|
||||||
!subcategory || subcategory === "" || subcategory === category;
|
const isLvl1 = !isLvl2 && subcategory && subcategory !== '' && subcategory !== category;
|
||||||
const isLvl2 =
|
|
||||||
displayTitle && displayTitle !== "" && displayTitle !== subcategory;
|
|
||||||
const isLvl1 =
|
|
||||||
!isLvl2 &&
|
|
||||||
(subcategory && subcategory !== "" && subcategory !== category);
|
|
||||||
const isLvl0 = !isLvl1 && !isLvl2;
|
const isLvl0 = !isLvl1 && !isLvl2;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -234,7 +201,7 @@ class DocSearch {
|
|||||||
subcategory,
|
subcategory,
|
||||||
title: displayTitle,
|
title: displayTitle,
|
||||||
text,
|
text,
|
||||||
url
|
url,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -242,38 +209,36 @@ class DocSearch {
|
|||||||
static formatURL(hit) {
|
static formatURL(hit) {
|
||||||
const { url, anchor } = hit;
|
const { url, anchor } = hit;
|
||||||
if (url) {
|
if (url) {
|
||||||
const containsAnchor = url.indexOf("#") !== -1;
|
const containsAnchor = url.indexOf('#') !== -1;
|
||||||
if (containsAnchor) return url;
|
if (containsAnchor) return url;
|
||||||
else if (anchor) return `${hit.url}#${hit.anchor}`;
|
else if (anchor) return `${hit.url}#${hit.anchor}`;
|
||||||
return url;
|
return url;
|
||||||
} else if (anchor) return `#${hit.anchor}`;
|
} else if (anchor) return `#${hit.anchor}`;
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
console.warn("no anchor nor url for : ", JSON.stringify(hit));
|
console.warn('no anchor nor url for : ', JSON.stringify(hit));
|
||||||
/* eslint-enable */
|
/* eslint-enable */
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
static getEmptyTemplate() {
|
static getEmptyTemplate() {
|
||||||
return args => Hogan.compile(templates.empty).render(args);
|
return (args) => Hogan.compile(templates.empty).render(args);
|
||||||
}
|
}
|
||||||
|
|
||||||
static getSuggestionTemplate(isSimpleLayout) {
|
static getSuggestionTemplate(isSimpleLayout) {
|
||||||
const stringTemplate = isSimpleLayout
|
const stringTemplate = isSimpleLayout ? templates.suggestionSimple : templates.suggestion;
|
||||||
? templates.suggestionSimple
|
|
||||||
: templates.suggestion;
|
|
||||||
const template = Hogan.compile(stringTemplate);
|
const template = Hogan.compile(stringTemplate);
|
||||||
return suggestion => template.render(suggestion);
|
return (suggestion) => template.render(suggestion);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSelected(input, event, suggestion, datasetNumber, context = {}) {
|
handleSelected(input, event, suggestion, datasetNumber, context = {}) {
|
||||||
// Do nothing if click on the suggestion, as it's already a <a href>, the
|
// Do nothing if click on the suggestion, as it's already a <a href>, the
|
||||||
// browser will take care of it. This allow Ctrl-Clicking on results and not
|
// browser will take care of it. This allow Ctrl-Clicking on results and not
|
||||||
// having the main window being redirected as well
|
// having the main window being redirected as well
|
||||||
if (context.selectionMethod === "click") {
|
if (context.selectionMethod === 'click') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.setVal("");
|
input.setVal('');
|
||||||
window.location.assign(suggestion.url);
|
window.location.assign(suggestion.url);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -286,14 +251,10 @@ class DocSearch {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const alignClass =
|
const alignClass =
|
||||||
middleOfInput - middleOfWindow >= 0
|
middleOfInput - middleOfWindow >= 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
|
||||||
? "algolia-autocomplete-right"
|
|
||||||
: "algolia-autocomplete-left";
|
|
||||||
const otherAlignClass =
|
const otherAlignClass =
|
||||||
middleOfInput - middleOfWindow < 0
|
middleOfInput - middleOfWindow < 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
|
||||||
? "algolia-autocomplete-right"
|
const autocompleteWrapper = $('.algolia-autocomplete');
|
||||||
: "algolia-autocomplete-left";
|
|
||||||
const autocompleteWrapper = $(".algolia-autocomplete");
|
|
||||||
if (!autocompleteWrapper.hasClass(alignClass)) {
|
if (!autocompleteWrapper.hasClass(alignClass)) {
|
||||||
autocompleteWrapper.addClass(alignClass);
|
autocompleteWrapper.addClass(alignClass);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import lunr from "@generated/lunr.client";
|
import lunr from '@generated/lunr.client';
|
||||||
lunr.tokenizer.separator = /[\s\-/]+/;
|
lunr.tokenizer.separator = /[\s\-/]+/;
|
||||||
|
|
||||||
class LunrSearchAdapter {
|
class LunrSearchAdapter {
|
||||||
@@ -12,10 +12,10 @@ class LunrSearchAdapter {
|
|||||||
return this.lunrIndex.query(function (query) {
|
return this.lunrIndex.query(function (query) {
|
||||||
const tokens = lunr.tokenizer(input);
|
const tokens = lunr.tokenizer(input);
|
||||||
query.term(tokens, {
|
query.term(tokens, {
|
||||||
boost: 10
|
boost: 10,
|
||||||
});
|
});
|
||||||
query.term(tokens, {
|
query.term(tokens, {
|
||||||
wildcard: lunr.Query.wildcard.TRAILING
|
wildcard: lunr.Query.wildcard.TRAILING,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -24,15 +24,17 @@ class LunrSearchAdapter {
|
|||||||
return {
|
return {
|
||||||
hierarchy: {
|
hierarchy: {
|
||||||
lvl0: doc.pageTitle || doc.title,
|
lvl0: doc.pageTitle || doc.title,
|
||||||
lvl1: doc.type === 0 ? null : doc.title
|
lvl1: doc.type === 0 ? null : doc.title,
|
||||||
},
|
},
|
||||||
url: doc.url,
|
url: doc.url,
|
||||||
_snippetResult: formattedContent ? {
|
_snippetResult: formattedContent
|
||||||
content: {
|
? {
|
||||||
value: formattedContent,
|
content: {
|
||||||
matchLevel: "full"
|
value: formattedContent,
|
||||||
}
|
matchLevel: 'full',
|
||||||
} : null,
|
},
|
||||||
|
}
|
||||||
|
: null,
|
||||||
_highlightResult: {
|
_highlightResult: {
|
||||||
hierarchy: {
|
hierarchy: {
|
||||||
lvl0: {
|
lvl0: {
|
||||||
@@ -42,24 +44,37 @@ class LunrSearchAdapter {
|
|||||||
doc.type === 0
|
doc.type === 0
|
||||||
? null
|
? null
|
||||||
: {
|
: {
|
||||||
value: formattedTitle || doc.title
|
value: formattedTitle || doc.title,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
getTitleHit(doc, position, length) {
|
getTitleHit(doc, position, length) {
|
||||||
const start = position[0];
|
const start = position[0];
|
||||||
const end = position[0] + length;
|
const end = position[0] + length;
|
||||||
let formattedTitle = doc.title.substring(0, start) + '<span class="algolia-docsearch-suggestion--highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length);
|
let formattedTitle =
|
||||||
return this.getHit(doc, formattedTitle)
|
doc.title.substring(0, start) +
|
||||||
|
'<span class="algolia-docsearch-suggestion--highlight">' +
|
||||||
|
doc.title.substring(start, end) +
|
||||||
|
'</span>' +
|
||||||
|
doc.title.substring(end, doc.title.length);
|
||||||
|
return this.getHit(doc, formattedTitle);
|
||||||
}
|
}
|
||||||
|
|
||||||
getKeywordHit(doc, position, length) {
|
getKeywordHit(doc, position, length) {
|
||||||
const start = position[0];
|
const start = position[0];
|
||||||
const end = position[0] + length;
|
const end = position[0] + length;
|
||||||
let formattedTitle = doc.title + '<br /><i>Keywords: ' + doc.keywords.substring(0, start) + '<span class="algolia-docsearch-suggestion--highlight">' + doc.keywords.substring(start, end) + '</span>' + doc.keywords.substring(end, doc.keywords.length) + '</i>'
|
let formattedTitle =
|
||||||
return this.getHit(doc, formattedTitle)
|
doc.title +
|
||||||
|
'<br /><i>Keywords: ' +
|
||||||
|
doc.keywords.substring(0, start) +
|
||||||
|
'<span class="algolia-docsearch-suggestion--highlight">' +
|
||||||
|
doc.keywords.substring(start, end) +
|
||||||
|
'</span>' +
|
||||||
|
doc.keywords.substring(end, doc.keywords.length) +
|
||||||
|
'</i>';
|
||||||
|
return this.getHit(doc, formattedTitle);
|
||||||
}
|
}
|
||||||
|
|
||||||
getContentHit(doc, position) {
|
getContentHit(doc, position) {
|
||||||
@@ -72,7 +87,7 @@ class LunrSearchAdapter {
|
|||||||
for (let k = 0; k < 3; k++) {
|
for (let k = 0; k < 3; k++) {
|
||||||
const nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
|
const nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
|
||||||
const nextDot = doc.content.lastIndexOf('.', previewStart - 2);
|
const nextDot = doc.content.lastIndexOf('.', previewStart - 2);
|
||||||
if ((nextDot > 0) && (nextDot > nextSpace)) {
|
if (nextDot > 0 && nextDot > nextSpace) {
|
||||||
previewStart = nextDot + 1;
|
previewStart = nextDot + 1;
|
||||||
ellipsesBefore = false;
|
ellipsesBefore = false;
|
||||||
break;
|
break;
|
||||||
@@ -87,7 +102,7 @@ class LunrSearchAdapter {
|
|||||||
for (let k = 0; k < 10; k++) {
|
for (let k = 0; k < 10; k++) {
|
||||||
const nextSpace = doc.content.indexOf(' ', previewEnd + 1);
|
const nextSpace = doc.content.indexOf(' ', previewEnd + 1);
|
||||||
const nextDot = doc.content.indexOf('.', previewEnd + 1);
|
const nextDot = doc.content.indexOf('.', previewEnd + 1);
|
||||||
if ((nextDot > 0) && (nextDot < nextSpace)) {
|
if (nextDot > 0 && nextDot < nextSpace) {
|
||||||
previewEnd = nextDot;
|
previewEnd = nextDot;
|
||||||
ellipsesAfter = false;
|
ellipsesAfter = false;
|
||||||
break;
|
break;
|
||||||
@@ -103,36 +118,36 @@ class LunrSearchAdapter {
|
|||||||
if (ellipsesBefore) {
|
if (ellipsesBefore) {
|
||||||
preview = '... ' + preview;
|
preview = '... ' + preview;
|
||||||
}
|
}
|
||||||
preview += '<span class="algolia-docsearch-suggestion--highlight">' + doc.content.substring(start, end) + '</span>';
|
preview +=
|
||||||
|
'<span class="algolia-docsearch-suggestion--highlight">' + doc.content.substring(start, end) + '</span>';
|
||||||
preview += doc.content.substring(end, previewEnd);
|
preview += doc.content.substring(end, previewEnd);
|
||||||
if (ellipsesAfter) {
|
if (ellipsesAfter) {
|
||||||
preview += ' ...';
|
preview += ' ...';
|
||||||
}
|
}
|
||||||
return this.getHit(doc, null, preview);
|
return this.getHit(doc, null, preview);
|
||||||
|
|
||||||
}
|
}
|
||||||
search(input) {
|
search(input) {
|
||||||
return new Promise((resolve, rej) => {
|
return new Promise((resolve, rej) => {
|
||||||
const results = this.getLunrResult(input);
|
const results = this.getLunrResult(input);
|
||||||
const hits = [];
|
const hits = [];
|
||||||
results.length > 5 && (results.length = 5);
|
results.length > 5 && (results.length = 5);
|
||||||
this.titleHitsRes = []
|
this.titleHitsRes = [];
|
||||||
this.contentHitsRes = []
|
this.contentHitsRes = [];
|
||||||
results.forEach(result => {
|
results.forEach((result) => {
|
||||||
const doc = this.searchDocs[result.ref];
|
const doc = this.searchDocs[result.ref];
|
||||||
const { metadata } = result.matchData;
|
const { metadata } = result.matchData;
|
||||||
for (let i in metadata) {
|
for (let i in metadata) {
|
||||||
if (metadata[i].title) {
|
if (metadata[i].title) {
|
||||||
if (!this.titleHitsRes.includes(result.ref)) {
|
if (!this.titleHitsRes.includes(result.ref)) {
|
||||||
const position = metadata[i].title.position[0]
|
const position = metadata[i].title.position[0];
|
||||||
hits.push(this.getTitleHit(doc, position, input.length));
|
hits.push(this.getTitleHit(doc, position, input.length));
|
||||||
this.titleHitsRes.push(result.ref);
|
this.titleHitsRes.push(result.ref);
|
||||||
}
|
}
|
||||||
} else if (metadata[i].content) {
|
} else if (metadata[i].content) {
|
||||||
const position = metadata[i].content.position[0]
|
const position = metadata[i].content.position[0];
|
||||||
hits.push(this.getContentHit(doc, position))
|
hits.push(this.getContentHit(doc, position));
|
||||||
} else if (metadata[i].keywords) {
|
} else if (metadata[i].keywords) {
|
||||||
const position = metadata[i].keywords.position[0]
|
const position = metadata[i].keywords.position[0];
|
||||||
hits.push(this.getKeywordHit(doc, position, input.length));
|
hits.push(this.getKeywordHit(doc, position, input.length));
|
||||||
this.titleHitsRes.push(result.ref);
|
this.titleHitsRes.push(result.ref);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ const footerPrefix = `${prefix}-footer`;
|
|||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
|
||||||
const templates = {
|
const templates = {
|
||||||
suggestion: `
|
suggestion: `
|
||||||
<a class="${suggestionPrefix}
|
<a class="${suggestionPrefix}
|
||||||
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
|
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
|
||||||
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
|
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
|
||||||
@@ -31,7 +31,7 @@ const templates = {
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
`,
|
`,
|
||||||
suggestionSimple: `
|
suggestionSimple: `
|
||||||
<div class="${suggestionPrefix}
|
<div class="${suggestionPrefix}
|
||||||
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
|
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
|
||||||
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
|
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
|
||||||
@@ -69,11 +69,11 @@ const templates = {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
footer: `
|
footer: `
|
||||||
<div class="${footerPrefix}">
|
<div class="${footerPrefix}">
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
empty: `
|
empty: `
|
||||||
<div class="${suggestionPrefix}">
|
<div class="${suggestionPrefix}">
|
||||||
<div class="${suggestionPrefix}--wrapper">
|
<div class="${suggestionPrefix}--wrapper">
|
||||||
<div class="${suggestionPrefix}--content ${suggestionPrefix}--no-results">
|
<div class="${suggestionPrefix}--content ${suggestionPrefix}--no-results">
|
||||||
@@ -86,7 +86,7 @@ const templates = {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
searchBox: `
|
searchBox: `
|
||||||
<form novalidate="novalidate" onsubmit="return false;" class="searchbox">
|
<form novalidate="novalidate" onsubmit="return false;" class="searchbox">
|
||||||
<div role="search" class="searchbox__wrapper">
|
<div role="search" class="searchbox__wrapper">
|
||||||
<input id="docsearch" type="search" name="search" placeholder="Search the docs" autocomplete="off" required="required" class="searchbox__input"/>
|
<input id="docsearch" type="search" name="search" placeholder="Search the docs" autocomplete="off" required="required" class="searchbox__input"/>
|
||||||
|
|||||||
@@ -1,271 +1,267 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import $ from "autocomplete.js/zepto";
|
import $ from 'autocomplete.js/zepto';
|
||||||
|
|
||||||
const utils = {
|
const utils = {
|
||||||
/*
|
/*
|
||||||
* Move the content of an object key one level higher.
|
* Move the content of an object key one level higher.
|
||||||
* eg.
|
* eg.
|
||||||
* {
|
* {
|
||||||
* name: 'My name',
|
* name: 'My name',
|
||||||
* hierarchy: {
|
* hierarchy: {
|
||||||
* lvl0: 'Foo',
|
* lvl0: 'Foo',
|
||||||
* lvl1: 'Bar'
|
* lvl1: 'Bar'
|
||||||
* }
|
* }
|
||||||
* }
|
* }
|
||||||
* Will be converted to
|
* Will be converted to
|
||||||
* {
|
* {
|
||||||
* name: 'My name',
|
* name: 'My name',
|
||||||
* lvl0: 'Foo',
|
* lvl0: 'Foo',
|
||||||
* lvl1: 'Bar'
|
* lvl1: 'Bar'
|
||||||
* }
|
* }
|
||||||
* @param {Object} object Main object
|
* @param {Object} object Main object
|
||||||
* @param {String} property Main object key to move up
|
* @param {String} property Main object key to move up
|
||||||
* @return {Object}
|
* @return {Object}
|
||||||
* @throws Error when key is not an attribute of Object or is not an object itself
|
* @throws Error when key is not an attribute of Object or is not an object itself
|
||||||
*/
|
*/
|
||||||
mergeKeyWithParent(object, property) {
|
mergeKeyWithParent(object, property) {
|
||||||
if (object[property] === undefined) {
|
if (object[property] === undefined) {
|
||||||
return object;
|
return object;
|
||||||
}
|
}
|
||||||
if (typeof object[property] !== 'object') {
|
if (typeof object[property] !== 'object') {
|
||||||
return object;
|
return object;
|
||||||
}
|
}
|
||||||
const newObject = $.extend({}, object, object[property]);
|
const newObject = $.extend({}, object, object[property]);
|
||||||
delete newObject[property];
|
delete newObject[property];
|
||||||
return newObject;
|
return newObject;
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Group all objects of a collection by the value of the specified attribute
|
* Group all objects of a collection by the value of the specified attribute
|
||||||
* If the attribute is a string, use the lowercase form.
|
* If the attribute is a string, use the lowercase form.
|
||||||
*
|
*
|
||||||
* eg.
|
* eg.
|
||||||
* groupBy([
|
* groupBy([
|
||||||
* {name: 'Tim', category: 'dev'},
|
* {name: 'Tim', category: 'dev'},
|
||||||
* {name: 'Vincent', category: 'dev'},
|
* {name: 'Vincent', category: 'dev'},
|
||||||
* {name: 'Ben', category: 'sales'},
|
* {name: 'Ben', category: 'sales'},
|
||||||
* {name: 'Jeremy', category: 'sales'},
|
* {name: 'Jeremy', category: 'sales'},
|
||||||
* {name: 'AlexS', category: 'dev'},
|
* {name: 'AlexS', category: 'dev'},
|
||||||
* {name: 'AlexK', category: 'sales'}
|
* {name: 'AlexK', category: 'sales'}
|
||||||
* ], 'category');
|
* ], 'category');
|
||||||
* =>
|
* =>
|
||||||
* {
|
* {
|
||||||
* 'devs': [
|
* 'devs': [
|
||||||
* {name: 'Tim', category: 'dev'},
|
* {name: 'Tim', category: 'dev'},
|
||||||
* {name: 'Vincent', category: 'dev'},
|
* {name: 'Vincent', category: 'dev'},
|
||||||
* {name: 'AlexS', category: 'dev'}
|
* {name: 'AlexS', category: 'dev'}
|
||||||
* ],
|
* ],
|
||||||
* 'sales': [
|
* 'sales': [
|
||||||
* {name: 'Ben', category: 'sales'},
|
* {name: 'Ben', category: 'sales'},
|
||||||
* {name: 'Jeremy', category: 'sales'},
|
* {name: 'Jeremy', category: 'sales'},
|
||||||
* {name: 'AlexK', category: 'sales'}
|
* {name: 'AlexK', category: 'sales'}
|
||||||
* ]
|
* ]
|
||||||
* }
|
* }
|
||||||
* @param {array} collection Array of objects to group
|
* @param {array} collection Array of objects to group
|
||||||
* @param {String} property The attribute on which apply the grouping
|
* @param {String} property The attribute on which apply the grouping
|
||||||
* @return {array}
|
* @return {array}
|
||||||
* @throws Error when one of the element does not have the specified property
|
* @throws Error when one of the element does not have the specified property
|
||||||
*/
|
*/
|
||||||
groupBy(collection, property) {
|
groupBy(collection, property) {
|
||||||
const newCollection = {};
|
const newCollection = {};
|
||||||
$.each(collection, (index, item) => {
|
$.each(collection, (index, item) => {
|
||||||
if (item[property] === undefined) {
|
if (item[property] === undefined) {
|
||||||
throw new Error(`[groupBy]: Object has no key ${property}`);
|
throw new Error(`[groupBy]: Object has no key ${property}`);
|
||||||
}
|
}
|
||||||
let key = item[property];
|
let key = item[property];
|
||||||
if (typeof key === 'string') {
|
if (typeof key === 'string') {
|
||||||
key = key.toLowerCase();
|
key = key.toLowerCase();
|
||||||
}
|
}
|
||||||
// fix #171 the given data type of docsearch hits might be conflict with the properties of the native Object,
|
// fix #171 the given data type of docsearch hits might be conflict with the properties of the native Object,
|
||||||
// such as the constructor, so we need to do this check.
|
// such as the constructor, so we need to do this check.
|
||||||
if (!Object.prototype.hasOwnProperty.call(newCollection, key)) {
|
if (!Object.prototype.hasOwnProperty.call(newCollection, key)) {
|
||||||
newCollection[key] = [];
|
newCollection[key] = [];
|
||||||
}
|
}
|
||||||
newCollection[key].push(item);
|
newCollection[key].push(item);
|
||||||
});
|
});
|
||||||
return newCollection;
|
return newCollection;
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Return an array of all the values of the specified object
|
* Return an array of all the values of the specified object
|
||||||
* eg.
|
* eg.
|
||||||
* values({
|
* values({
|
||||||
* foo: 42,
|
* foo: 42,
|
||||||
* bar: true,
|
* bar: true,
|
||||||
* baz: 'yep'
|
* baz: 'yep'
|
||||||
* })
|
* })
|
||||||
* =>
|
* =>
|
||||||
* [42, true, yep]
|
* [42, true, yep]
|
||||||
* @param {object} object Object to extract values from
|
* @param {object} object Object to extract values from
|
||||||
* @return {array}
|
* @return {array}
|
||||||
*/
|
*/
|
||||||
values(object) {
|
values(object) {
|
||||||
return Object.keys(object).map(key => object[key]);
|
return Object.keys(object).map((key) => object[key]);
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Flattens an array
|
* Flattens an array
|
||||||
* eg.
|
* eg.
|
||||||
* flatten([1, 2, [3, 4], [5, 6]])
|
* flatten([1, 2, [3, 4], [5, 6]])
|
||||||
* =>
|
* =>
|
||||||
* [1, 2, 3, 4, 5, 6]
|
* [1, 2, 3, 4, 5, 6]
|
||||||
* @param {array} array Array to flatten
|
* @param {array} array Array to flatten
|
||||||
* @return {array}
|
* @return {array}
|
||||||
*/
|
*/
|
||||||
flatten(array) {
|
flatten(array) {
|
||||||
const results = [];
|
const results = [];
|
||||||
array.forEach(value => {
|
array.forEach((value) => {
|
||||||
if (!Array.isArray(value)) {
|
if (!Array.isArray(value)) {
|
||||||
results.push(value);
|
results.push(value);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
value.forEach(subvalue => {
|
value.forEach((subvalue) => {
|
||||||
results.push(subvalue);
|
results.push(subvalue);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return results;
|
return results;
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Flatten all values of an object into an array, marking each first element of
|
* Flatten all values of an object into an array, marking each first element of
|
||||||
* each group with a specific flag
|
* each group with a specific flag
|
||||||
* eg.
|
* eg.
|
||||||
* flattenAndFlagFirst({
|
* flattenAndFlagFirst({
|
||||||
* 'devs': [
|
* 'devs': [
|
||||||
* {name: 'Tim', category: 'dev'},
|
* {name: 'Tim', category: 'dev'},
|
||||||
* {name: 'Vincent', category: 'dev'},
|
* {name: 'Vincent', category: 'dev'},
|
||||||
* {name: 'AlexS', category: 'dev'}
|
* {name: 'AlexS', category: 'dev'}
|
||||||
* ],
|
* ],
|
||||||
* 'sales': [
|
* 'sales': [
|
||||||
* {name: 'Ben', category: 'sales'},
|
* {name: 'Ben', category: 'sales'},
|
||||||
* {name: 'Jeremy', category: 'sales'},
|
* {name: 'Jeremy', category: 'sales'},
|
||||||
* {name: 'AlexK', category: 'sales'}
|
* {name: 'AlexK', category: 'sales'}
|
||||||
* ]
|
* ]
|
||||||
* , 'isTop');
|
* , 'isTop');
|
||||||
* =>
|
* =>
|
||||||
* [
|
* [
|
||||||
* {name: 'Tim', category: 'dev', isTop: true},
|
* {name: 'Tim', category: 'dev', isTop: true},
|
||||||
* {name: 'Vincent', category: 'dev', isTop: false},
|
* {name: 'Vincent', category: 'dev', isTop: false},
|
||||||
* {name: 'AlexS', category: 'dev', isTop: false},
|
* {name: 'AlexS', category: 'dev', isTop: false},
|
||||||
* {name: 'Ben', category: 'sales', isTop: true},
|
* {name: 'Ben', category: 'sales', isTop: true},
|
||||||
* {name: 'Jeremy', category: 'sales', isTop: false},
|
* {name: 'Jeremy', category: 'sales', isTop: false},
|
||||||
* {name: 'AlexK', category: 'sales', isTop: false}
|
* {name: 'AlexK', category: 'sales', isTop: false}
|
||||||
* ]
|
* ]
|
||||||
* @param {object} object Object to flatten
|
* @param {object} object Object to flatten
|
||||||
* @param {string} flag Flag to set to true on first element of each group
|
* @param {string} flag Flag to set to true on first element of each group
|
||||||
* @return {array}
|
* @return {array}
|
||||||
*/
|
*/
|
||||||
flattenAndFlagFirst(object, flag) {
|
flattenAndFlagFirst(object, flag) {
|
||||||
const values = this.values(object).map(collection =>
|
const values = this.values(object).map((collection) =>
|
||||||
collection.map((item, index) => {
|
collection.map((item, index) => {
|
||||||
// eslint-disable-next-line no-param-reassign
|
// eslint-disable-next-line no-param-reassign
|
||||||
item[flag] = index === 0;
|
item[flag] = index === 0;
|
||||||
return item;
|
return item;
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
return this.flatten(values);
|
return this.flatten(values);
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Removes all empty strings, null, false and undefined elements array
|
* Removes all empty strings, null, false and undefined elements array
|
||||||
* eg.
|
* eg.
|
||||||
* compact([42, false, null, undefined, '', [], 'foo']);
|
* compact([42, false, null, undefined, '', [], 'foo']);
|
||||||
* =>
|
* =>
|
||||||
* [42, [], 'foo']
|
* [42, [], 'foo']
|
||||||
* @param {array} array Array to compact
|
* @param {array} array Array to compact
|
||||||
* @return {array}
|
* @return {array}
|
||||||
*/
|
*/
|
||||||
compact(array) {
|
compact(array) {
|
||||||
const results = [];
|
const results = [];
|
||||||
array.forEach(value => {
|
array.forEach((value) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
results.push(value);
|
results.push(value);
|
||||||
});
|
});
|
||||||
return results;
|
return results;
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Returns the highlighted value of the specified key in the specified object.
|
* Returns the highlighted value of the specified key in the specified object.
|
||||||
* If no highlighted value is available, will return the key value directly
|
* If no highlighted value is available, will return the key value directly
|
||||||
* eg.
|
* eg.
|
||||||
* getHighlightedValue({
|
* getHighlightedValue({
|
||||||
* _highlightResult: {
|
* _highlightResult: {
|
||||||
* text: {
|
* text: {
|
||||||
* value: '<mark>foo</mark>'
|
* value: '<mark>foo</mark>'
|
||||||
* }
|
* }
|
||||||
* },
|
* },
|
||||||
* text: 'foo'
|
* text: 'foo'
|
||||||
* }, 'text');
|
* }, 'text');
|
||||||
* =>
|
* =>
|
||||||
* '<mark>foo</mark>'
|
* '<mark>foo</mark>'
|
||||||
* @param {object} object Hit object returned by the Algolia API
|
* @param {object} object Hit object returned by the Algolia API
|
||||||
* @param {string} property Object key to look for
|
* @param {string} property Object key to look for
|
||||||
* @return {string}
|
* @return {string}
|
||||||
**/
|
**/
|
||||||
getHighlightedValue(object, property) {
|
getHighlightedValue(object, property) {
|
||||||
if (
|
if (
|
||||||
object._highlightResult &&
|
object._highlightResult &&
|
||||||
object._highlightResult.hierarchy_camel &&
|
object._highlightResult.hierarchy_camel &&
|
||||||
object._highlightResult.hierarchy_camel[property] &&
|
object._highlightResult.hierarchy_camel[property] &&
|
||||||
object._highlightResult.hierarchy_camel[property].matchLevel &&
|
object._highlightResult.hierarchy_camel[property].matchLevel &&
|
||||||
object._highlightResult.hierarchy_camel[property].matchLevel !== 'none' &&
|
object._highlightResult.hierarchy_camel[property].matchLevel !== 'none' &&
|
||||||
object._highlightResult.hierarchy_camel[property].value
|
object._highlightResult.hierarchy_camel[property].value
|
||||||
) {
|
) {
|
||||||
return object._highlightResult.hierarchy_camel[property].value;
|
return object._highlightResult.hierarchy_camel[property].value;
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
object._highlightResult &&
|
object._highlightResult &&
|
||||||
object._highlightResult &&
|
object._highlightResult &&
|
||||||
object._highlightResult[property] &&
|
object._highlightResult[property] &&
|
||||||
object._highlightResult[property].value
|
object._highlightResult[property].value
|
||||||
) {
|
) {
|
||||||
return object._highlightResult[property].value;
|
return object._highlightResult[property].value;
|
||||||
}
|
}
|
||||||
return object[property];
|
return object[property];
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Returns the snippeted value of the specified key in the specified object.
|
* Returns the snippeted value of the specified key in the specified object.
|
||||||
* If no highlighted value is available, will return the key value directly.
|
* If no highlighted value is available, will return the key value directly.
|
||||||
* Will add starting and ending ellipsis (…) if we detect that a sentence is
|
* Will add starting and ending ellipsis (…) if we detect that a sentence is
|
||||||
* incomplete
|
* incomplete
|
||||||
* eg.
|
* eg.
|
||||||
* getSnippetedValue({
|
* getSnippetedValue({
|
||||||
* _snippetResult: {
|
* _snippetResult: {
|
||||||
* text: {
|
* text: {
|
||||||
* value: '<mark>This is an unfinished sentence</mark>'
|
* value: '<mark>This is an unfinished sentence</mark>'
|
||||||
* }
|
* }
|
||||||
* },
|
* },
|
||||||
* text: 'This is an unfinished sentence'
|
* text: 'This is an unfinished sentence'
|
||||||
* }, 'text');
|
* }, 'text');
|
||||||
* =>
|
* =>
|
||||||
* '<mark>This is an unfinished sentence</mark>…'
|
* '<mark>This is an unfinished sentence</mark>…'
|
||||||
* @param {object} object Hit object returned by the Algolia API
|
* @param {object} object Hit object returned by the Algolia API
|
||||||
* @param {string} property Object key to look for
|
* @param {string} property Object key to look for
|
||||||
* @return {string}
|
* @return {string}
|
||||||
**/
|
**/
|
||||||
getSnippetedValue(object, property) {
|
getSnippetedValue(object, property) {
|
||||||
if (
|
if (!object._snippetResult || !object._snippetResult[property] || !object._snippetResult[property].value) {
|
||||||
!object._snippetResult ||
|
return object[property];
|
||||||
!object._snippetResult[property] ||
|
}
|
||||||
!object._snippetResult[property].value
|
let snippet = object._snippetResult[property].value;
|
||||||
) {
|
|
||||||
return object[property];
|
|
||||||
}
|
|
||||||
let snippet = object._snippetResult[property].value;
|
|
||||||
|
|
||||||
if (snippet[0] !== snippet[0].toUpperCase()) {
|
if (snippet[0] !== snippet[0].toUpperCase()) {
|
||||||
snippet = `…${snippet}`;
|
snippet = `…${snippet}`;
|
||||||
}
|
}
|
||||||
if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
|
if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
|
||||||
snippet = `${snippet}…`;
|
snippet = `${snippet}…`;
|
||||||
}
|
}
|
||||||
return snippet;
|
return snippet;
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* Deep clone an object.
|
* Deep clone an object.
|
||||||
* Note: This will not clone functions and dates
|
* Note: This will not clone functions and dates
|
||||||
* @param {object} object Object to clone
|
* @param {object} object Object to clone
|
||||||
* @return {object}
|
* @return {object}
|
||||||
*/
|
*/
|
||||||
deepClone(object) {
|
deepClone(object) {
|
||||||
return JSON.parse(JSON.stringify(object));
|
return JSON.parse(JSON.stringify(object));
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default utils;
|
export default utils;
|
||||||
@@ -6,35 +6,35 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
background-image: var(--ifm-navbar-search-input-icon);
|
background-image: var(--ifm-navbar-search-input-icon);
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon-hidden {
|
.search-icon-hidden {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 360px) {
|
@media (max-width: 360px) {
|
||||||
.search-bar {
|
.search-bar {
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
background: none !important;
|
background: none !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar-expanded {
|
.search-bar-expanded {
|
||||||
width: 9rem !important;
|
width: 9rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
display: inline;
|
display: inline;
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,24 +1,24 @@
|
|||||||
{
|
{
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"name": "artplayer-plugin-ads",
|
"name": "artplayer-plugin-ads",
|
||||||
"types": "types/artplayer-plugin-ads.d.ts",
|
"types": "types/artplayer-plugin-ads.d.ts",
|
||||||
"description": "Ads plugin for ArtPlayer",
|
"description": "Ads plugin for ArtPlayer",
|
||||||
"main": "dist/artplayer-plugin-ads.js",
|
"main": "dist/artplayer-plugin-ads.js",
|
||||||
"legacy": "dist/artplayer-plugin-ads.legacy.js",
|
"legacy": "dist/artplayer-plugin-ads.legacy.js",
|
||||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"homepage": "https://artplayer.org",
|
"homepage": "https://artplayer.org",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"html5",
|
"html5",
|
||||||
"video",
|
"video",
|
||||||
"player"
|
"player"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -32,7 +32,7 @@ type Option = {
|
|||||||
/**
|
/**
|
||||||
* 视频广告是否默认静音
|
* 视频广告是否默认静音
|
||||||
*/
|
*/
|
||||||
muted?: boolean;
|
muted?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Ads = {
|
type Ads = {
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
{
|
{
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "4.4.11",
|
"version": "4.4.11",
|
||||||
"name": "artplayer-plugin-danmuku",
|
"name": "artplayer-plugin-danmuku",
|
||||||
"types": "types/artplayer-plugin-danmuku.d.ts",
|
"types": "types/artplayer-plugin-danmuku.d.ts",
|
||||||
"description": "Danmuku plugin for ArtPlayer",
|
"description": "Danmuku plugin for ArtPlayer",
|
||||||
"main": "dist/artplayer-plugin-danmuku.js",
|
"main": "dist/artplayer-plugin-danmuku.js",
|
||||||
"legacy": "dist/artplayer-plugin-danmuku.legacy.js",
|
"legacy": "dist/artplayer-plugin-danmuku.legacy.js",
|
||||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"homepage": "https://artplayer.org",
|
"homepage": "https://artplayer.org",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"html5",
|
"html5",
|
||||||
"video",
|
"video",
|
||||||
"player"
|
"player"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -14,7 +14,9 @@
|
|||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
-ms-high-contrast-adjust: none;
|
-ms-high-contrast-adjust: none;
|
||||||
|
|
||||||
*, *::before, *::after {
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -106,7 +108,7 @@
|
|||||||
height: 20px;
|
height: 20px;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
|
|
||||||
&.art-current{
|
&.art-current {
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 0 2px #fff;
|
box-shadow: 0 0 2px #fff;
|
||||||
&::before {
|
&::before {
|
||||||
@@ -122,12 +124,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .art-danmuku-style-panel{
|
&:hover .art-danmuku-style-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -151,7 +152,8 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
&::placeholder, &::-webkit-input-placeholder {
|
&::placeholder,
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
color: rgb(255 255 255 / 50%);
|
color: rgb(255 255 255 / 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -204,7 +206,8 @@
|
|||||||
.art-danmuku-input {
|
.art-danmuku-input {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|
||||||
&::placeholder, &::-webkit-input-placeholder {
|
&::placeholder,
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
color: rgb(0 0 0 / 50%);
|
color: rgb(0 0 0 / 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
{
|
{
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"name": "artplayer-plugin-hls-quality",
|
"name": "artplayer-plugin-hls-quality",
|
||||||
"types": "types/artplayer-plugin-hls-quality.d.ts",
|
"types": "types/artplayer-plugin-hls-quality.d.ts",
|
||||||
"description": "Iframe plugin for ArtPlayer",
|
"description": "Iframe plugin for ArtPlayer",
|
||||||
"main": "dist/artplayer-plugin-hls-quality.js",
|
"main": "dist/artplayer-plugin-hls-quality.js",
|
||||||
"legacy": "dist/artplayer-plugin-hls-quality.legacy.js",
|
"legacy": "dist/artplayer-plugin-hls-quality.legacy.js",
|
||||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"homepage": "https://artplayer.org",
|
"homepage": "https://artplayer.org",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"html5",
|
"html5",
|
||||||
"video",
|
"video",
|
||||||
"player"
|
"player"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -1,24 +1,24 @@
|
|||||||
{
|
{
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"name": "artplayer-plugin-iframe",
|
"name": "artplayer-plugin-iframe",
|
||||||
"types": "types/artplayer-plugin-iframe.d.ts",
|
"types": "types/artplayer-plugin-iframe.d.ts",
|
||||||
"description": "Iframe plugin for ArtPlayer",
|
"description": "Iframe plugin for ArtPlayer",
|
||||||
"main": "dist/artplayer-plugin-iframe.js",
|
"main": "dist/artplayer-plugin-iframe.js",
|
||||||
"legacy": "dist/artplayer-plugin-iframe.legacy.js",
|
"legacy": "dist/artplayer-plugin-iframe.legacy.js",
|
||||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"homepage": "https://artplayer.org",
|
"homepage": "https://artplayer.org",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"html5",
|
"html5",
|
||||||
"video",
|
"video",
|
||||||
"player"
|
"player"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"extends": "next/core-web-vitals"
|
"extends": "next/core-web-vitals"
|
||||||
}
|
}
|
||||||
@@ -22,8 +22,8 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
|
|||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
reactStrictMode: true,
|
reactStrictMode: true,
|
||||||
}
|
};
|
||||||
|
|
||||||
module.exports = nextConfig
|
module.exports = nextConfig;
|
||||||
@@ -1,21 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "next.js",
|
"name": "next.js",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"artplayer": "latest",
|
"artplayer": "latest",
|
||||||
"next": "12.1.6",
|
"next": "12.1.6",
|
||||||
"react": "18.1.0",
|
"react": "18.1.0",
|
||||||
"react-dom": "18.1.0"
|
"react-dom": "18.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "8.14.0",
|
"eslint": "8.14.0",
|
||||||
"eslint-config-next": "12.1.6"
|
"eslint-config-next": "12.1.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import '../styles/globals.css'
|
import '../styles/globals.css';
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return <Component {...pageProps} />
|
return <Component {...pageProps} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp;
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||||
|
|
||||||
export default function handler(req, res) {
|
export default function handler(req, res) {
|
||||||
res.status(200).json({ name: 'John Doe' })
|
res.status(200).json({ name: 'John Doe' });
|
||||||
}
|
}
|
||||||
@@ -1,116 +1,116 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 4rem 0;
|
padding: 4rem 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
border-top: 1px solid #eaeaea;
|
border-top: 1px solid #eaeaea;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer a {
|
.footer a {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title a {
|
.title a {
|
||||||
color: #0070f3;
|
color: #0070f3;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title a:hover,
|
.title a:hover,
|
||||||
.title a:focus,
|
.title a:focus,
|
||||||
.title a:active {
|
.title a:active {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title,
|
.title,
|
||||||
.description {
|
.description {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
margin: 4rem 0;
|
margin: 4rem 0;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code {
|
.code {
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
transition: color 0.15s ease, border-color 0.15s ease;
|
transition: color 0.15s ease, border-color 0.15s ease;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover,
|
.card:hover,
|
||||||
.card:focus,
|
.card:focus,
|
||||||
.card:active {
|
.card:active {
|
||||||
color: #0070f3;
|
color: #0070f3;
|
||||||
border-color: #0070f3;
|
border-color: #0070f3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h2 {
|
.card h2 {
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card p {
|
.card p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
height: 1em;
|
height: 1em;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.grid {
|
.grid {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,16 +1,16 @@
|
|||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
Helvetica Neue, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,4 @@
|
|||||||
import { defineNuxtConfig } from 'nuxt'
|
import { defineNuxtConfig } from 'nuxt';
|
||||||
|
|
||||||
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
// https://v3.nuxtjs.org/api/configuration/nuxt.config
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({});
|
||||||
|
|
||||||
})
|
|
||||||
@@ -1,15 +1,15 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "nuxt build",
|
"build": "nuxt build",
|
||||||
"dev": "nuxt dev",
|
"dev": "nuxt dev",
|
||||||
"generate": "nuxt generate",
|
"generate": "nuxt generate",
|
||||||
"preview": "nuxt preview"
|
"preview": "nuxt preview"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"nuxt": "3.0.0-rc.1"
|
"nuxt": "3.0.0-rc.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"artplayer": "latest"
|
"artplayer": "latest"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
// https://v3.nuxtjs.org/concepts/typescript
|
// https://v3.nuxtjs.org/concepts/typescript
|
||||||
"extends": "./.nuxt/tsconfig.json"
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
}
|
}
|
||||||
@@ -1,39 +1,39 @@
|
|||||||
{
|
{
|
||||||
"name": "react.js",
|
"name": "react.js",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@testing-library/jest-dom": "^5.16.4",
|
"@testing-library/jest-dom": "^5.16.4",
|
||||||
"@testing-library/react": "^13.1.1",
|
"@testing-library/react": "^13.1.1",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"artplayer": "latest",
|
"artplayer": "latest",
|
||||||
"react": "^18.1.0",
|
"react": "^18.1.0",
|
||||||
"react-dom": "^18.1.0",
|
"react-dom": "^18.1.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
"react-app",
|
"react-app",
|
||||||
"react-app/jest"
|
"react-app/jest"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
"production": [
|
"production": [
|
||||||
">0.2%",
|
">0.2%",
|
||||||
"not dead",
|
"not dead",
|
||||||
"not op_mini all"
|
"not op_mini all"
|
||||||
],
|
],
|
||||||
"development": [
|
"development": [
|
||||||
"last 1 chrome version",
|
"last 1 chrome version",
|
||||||
"last 1 firefox version",
|
"last 1 firefox version",
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,21 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta name="description" content="Web site created using create-react-app" />
|
||||||
name="description"
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
content="Web site created using create-react-app"
|
<!--
|
||||||
/>
|
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
||||||
<!--
|
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
-->
|
-->
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
<!--
|
<!--
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
Only files inside the `public` folder can be referenced from the HTML.
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
@@ -24,12 +21,12 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
<!--
|
||||||
This HTML file is a template.
|
This HTML file is a template.
|
||||||
If you open it directly in the browser, you will see an empty page.
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
@@ -38,6 +35,5 @@
|
|||||||
|
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
-->
|
--></body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,25 +1,25 @@
|
|||||||
{
|
{
|
||||||
"short_name": "React App",
|
"short_name": "React App",
|
||||||
"name": "Create React App Sample",
|
"name": "Create React App Sample",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "favicon.ico",
|
"src": "favicon.ico",
|
||||||
"sizes": "64x64 32x32 24x24 16x16",
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
"type": "image/x-icon"
|
"type": "image/x-icon"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "logo192.png",
|
"src": "logo192.png",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"sizes": "192x192"
|
"sizes": "192x192"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "logo512.png",
|
"src": "logo512.png",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"sizes": "512x512"
|
"sizes": "512x512"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"theme_color": "#000000",
|
"theme_color": "#000000",
|
||||||
"background_color": "#ffffff"
|
"background_color": "#ffffff"
|
||||||
}
|
}
|
||||||
@@ -1,38 +1,38 @@
|
|||||||
.App {
|
.App {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-logo {
|
.App-logo {
|
||||||
height: 40vmin;
|
height: 40vmin;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
.App-logo {
|
.App-logo {
|
||||||
animation: App-logo-spin infinite 20s linear;
|
animation: App-logo-spin infinite 20s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-header {
|
.App-header {
|
||||||
background-color: #282c34;
|
background-color: #282c34;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: calc(10px + 2vmin);
|
font-size: calc(10px + 2vmin);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-link {
|
.App-link {
|
||||||
color: #61dafb;
|
color: #61dafb;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
@keyframes App-logo-spin {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,23 +1,23 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import Artplayer from "./ArtPlayer";
|
import Artplayer from './ArtPlayer';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Artplayer
|
<Artplayer
|
||||||
option={{
|
option={{
|
||||||
url: "https://artplayer.org/assets/sample/video.mp4",
|
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||||
autoSize: true,
|
autoSize: true,
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
width: "600px",
|
width: '600px',
|
||||||
height: "400px",
|
height: '400px',
|
||||||
margin: "60px auto 0",
|
margin: '60px auto 0',
|
||||||
}}
|
}}
|
||||||
getInstance={(art) => console.log(art)}
|
getInstance={(art) => console.log(art)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
|
|||||||
import App from './App';
|
import App from './App';
|
||||||
|
|
||||||
test('renders learn react link', () => {
|
test('renders learn react link', () => {
|
||||||
render(<App />);
|
render(<App />);
|
||||||
const linkElement = screen.getByText(/learn react/i);
|
const linkElement = screen.getByText(/learn react/i);
|
||||||
expect(linkElement).toBeInTheDocument();
|
expect(linkElement).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -1,13 +1,11 @@
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
sans-serif;
|
-webkit-font-smoothing: antialiased;
|
||||||
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
monospace;
|
|
||||||
}
|
}
|
||||||
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
|
|||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>
|
</React.StrictMode>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
// If you want to start measuring performance in your app, pass a function
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
const reportWebVitals = onPerfEntry => {
|
const reportWebVitals = (onPerfEntry) => {
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||||
getCLS(onPerfEntry);
|
getCLS(onPerfEntry);
|
||||||
getFID(onPerfEntry);
|
getFID(onPerfEntry);
|
||||||
getFCP(onPerfEntry);
|
getFCP(onPerfEntry);
|
||||||
getLCP(onPerfEntry);
|
getLCP(onPerfEntry);
|
||||||
getTTFB(onPerfEntry);
|
getTTFB(onPerfEntry);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default reportWebVitals;
|
export default reportWebVitals;
|
||||||
@@ -1,24 +1,29 @@
|
|||||||
# hello-world
|
# hello-world
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compiles and hot-reloads for development
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run serve
|
npm run serve
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### Compiles and minifies for production
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
### Lints and fixes files
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
### Customize configuration
|
### Customize configuration
|
||||||
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
@@ -1,5 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: ['@vue/cli-plugin-babel/preset'],
|
||||||
'@vue/cli-plugin-babel/preset'
|
};
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,19 +1,12 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": ["src/*"]
|
||||||
"src/*"
|
},
|
||||||
]
|
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||||
},
|
}
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,44 +1,44 @@
|
|||||||
{
|
{
|
||||||
"name": "hello-world",
|
"name": "hello-world",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"artplayer": "^4.4.7",
|
|
||||||
"core-js": "^3.8.3",
|
|
||||||
"vue": "^2.6.14"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@babel/core": "^7.12.16",
|
|
||||||
"@babel/eslint-parser": "^7.12.16",
|
|
||||||
"@vue/cli-plugin-babel": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
|
||||||
"@vue/cli-service": "~5.0.0",
|
|
||||||
"eslint": "^7.32.0",
|
|
||||||
"eslint-plugin-vue": "^8.0.3",
|
|
||||||
"vue-template-compiler": "^2.6.14"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"root": true,
|
|
||||||
"env": {
|
|
||||||
"node": true
|
|
||||||
},
|
},
|
||||||
"extends": [
|
"dependencies": {
|
||||||
"plugin:vue/essential",
|
"artplayer": "^4.4.7",
|
||||||
"eslint:recommended"
|
"core-js": "^3.8.3",
|
||||||
],
|
"vue": "^2.6.14"
|
||||||
"parserOptions": {
|
|
||||||
"parser": "@babel/eslint-parser"
|
|
||||||
},
|
},
|
||||||
"rules": {}
|
"devDependencies": {
|
||||||
},
|
"@babel/core": "^7.12.16",
|
||||||
"browserslist": [
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
"> 1%",
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
"last 2 versions",
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
"not dead"
|
"@vue/cli-service": "~5.0.0",
|
||||||
]
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
@@ -1,17 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong
|
||||||
</noscript>
|
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
|
||||||
<div id="app"></div>
|
enabled. Please enable it to continue.</strong
|
||||||
<!-- built files will be auto injected -->
|
>
|
||||||
</body>
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,58 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hello">
|
<div class="hello">
|
||||||
<h1>{{ msg }}</h1>
|
<h1>{{ msg }}</h1>
|
||||||
<p>
|
<p>
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
For a guide and recipes on how to configure / customize this project,<br />
|
||||||
check out the
|
check out the
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||||
</p>
|
</p>
|
||||||
<h3>Installed CLI Plugins</h3>
|
<h3>Installed CLI Plugins</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
<li>
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
<a
|
||||||
</ul>
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||||
<h3>Essential Links</h3>
|
target="_blank"
|
||||||
<ul>
|
rel="noopener"
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
>babel</a
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
>
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
</li>
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
<li>
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
<a
|
||||||
</ul>
|
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||||
<h3>Ecosystem</h3>
|
target="_blank"
|
||||||
<ul>
|
rel="noopener"
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
>eslint</a
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
>
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
</li>
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
</ul>
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
<h3>Essential Links</h3>
|
||||||
</ul>
|
<ul>
|
||||||
</div>
|
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||||
|
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||||
|
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||||
|
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||||
|
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Ecosystem</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||||
|
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
|
||||||
|
>vue-devtools</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'HelloWorld',
|
name: 'HelloWorld',
|
||||||
props: {
|
props: {
|
||||||
msg: String
|
msg: String,
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style scoped>
|
<style scoped>
|
||||||
h3 {
|
h3 {
|
||||||
margin: 40px 0 0;
|
margin: 40px 0 0;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: #42b983;
|
color: #42b983;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue';
|
||||||
import App from './App.vue'
|
import App from './App.vue';
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
render: h => h(App),
|
render: (h) => h(App),
|
||||||
}).$mount('#app')
|
}).$mount('#app');
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,17 +1,17 @@
|
|||||||
{
|
{
|
||||||
"name": "vue.js",
|
"name": "vue.js",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview --port 5050"
|
"preview": "vite preview --port 5050"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"artplayer": "latest",
|
"artplayer": "latest",
|
||||||
"vue": "^3.2.33"
|
"vue": "^3.2.33"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^2.3.1",
|
"@vitejs/plugin-vue": "^2.3.1",
|
||||||
"vite": "^2.9.5"
|
"vite": "^2.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,74 +1,74 @@
|
|||||||
/* color palette from <https://github.com/vuejs/theme> */
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
:root {
|
:root {
|
||||||
--vt-c-white: #ffffff;
|
--vt-c-white: #ffffff;
|
||||||
--vt-c-white-soft: #f8f8f8;
|
--vt-c-white-soft: #f8f8f8;
|
||||||
--vt-c-white-mute: #f2f2f2;
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
--vt-c-black: #181818;
|
--vt-c-black: #181818;
|
||||||
--vt-c-black-soft: #222222;
|
--vt-c-black-soft: #222222;
|
||||||
--vt-c-black-mute: #282828;
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
--vt-c-indigo: #2c3e50;
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
--vt-c-text-dark-1: var(--vt-c-white);
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* semantic color variables for this project */
|
/* semantic color variables for this project */
|
||||||
:root {
|
:root {
|
||||||
--color-background: var(--vt-c-white);
|
--color-background: var(--vt-c-white);
|
||||||
--color-background-soft: var(--vt-c-white-soft);
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
--color-background-mute: var(--vt-c-white-mute);
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
--color-border: var(--vt-c-divider-light-2);
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
--color-border-hover: var(--vt-c-divider-light-1);
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
--color-heading: var(--vt-c-text-light-1);
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
--color-text: var(--vt-c-text-light-1);
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
--section-gap: 160px;
|
--section-gap: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--color-background: var(--vt-c-black);
|
--color-background: var(--vt-c-black);
|
||||||
--color-background-soft: var(--vt-c-black-soft);
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
--color-background-mute: var(--vt-c-black-mute);
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
--color-border: var(--vt-c-divider-dark-2);
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
--color-heading: var(--vt-c-text-dark-1);
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
--color-text: var(--vt-c-text-dark-2);
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background: var(--color-background);
|
background: var(--color-background);
|
||||||
transition: color 0.5s, background-color 0.5s;
|
transition: color 0.5s, background-color 0.5s;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
|
||||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
@@ -1,43 +1,43 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
defineProps({
|
defineProps({
|
||||||
msg: {
|
msg: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="greetings">
|
<div class="greetings">
|
||||||
<h1 class="green">{{ msg }}</h1>
|
<h1 class="green">{{ msg }}</h1>
|
||||||
<h3>
|
<h3>
|
||||||
You’ve successfully created a project with
|
You’ve successfully created a project with
|
||||||
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
|
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
|
||||||
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
|
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 2.6rem;
|
font-size: 2.6rem;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.greetings h1,
|
.greetings h1,
|
||||||
.greetings h3 {
|
.greetings h3 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.greetings h1,
|
.greetings h1,
|
||||||
.greetings h3 {
|
.greetings h3 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,84 +1,81 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import WelcomeItem from './WelcomeItem.vue'
|
import WelcomeItem from './WelcomeItem.vue';
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
import DocumentationIcon from './icons/IconDocumentation.vue';
|
||||||
import ToolingIcon from './icons/IconTooling.vue'
|
import ToolingIcon from './icons/IconTooling.vue';
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
import EcosystemIcon from './icons/IconEcosystem.vue';
|
||||||
import CommunityIcon from './icons/IconCommunity.vue'
|
import CommunityIcon from './icons/IconCommunity.vue';
|
||||||
import SupportIcon from './icons/IconSupport.vue'
|
import SupportIcon from './icons/IconSupport.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<DocumentationIcon />
|
<DocumentationIcon />
|
||||||
</template>
|
</template>
|
||||||
<template #heading>Documentation</template>
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
Vue’s
|
Vue’s
|
||||||
<a target="_blank" href="https://vuejs.org/">official documentation</a>
|
<a target="_blank" href="https://vuejs.org/">official documentation</a>
|
||||||
provides you with all information you need to get started.
|
provides you with all information you need to get started.
|
||||||
</WelcomeItem>
|
</WelcomeItem>
|
||||||
|
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<ToolingIcon />
|
<ToolingIcon />
|
||||||
</template>
|
</template>
|
||||||
<template #heading>Tooling</template>
|
<template #heading>Tooling</template>
|
||||||
|
|
||||||
This project is served and bundled with
|
This project is served and bundled with
|
||||||
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
|
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE setup is
|
||||||
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
|
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
|
||||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
|
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test your components
|
||||||
your components and web pages, check out
|
and web pages, check out <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
|
||||||
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
|
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
|
||||||
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
|
>Cypress Component Testing</a
|
||||||
>Cypress Component Testing</a
|
>.
|
||||||
>.
|
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
More instructions are available in <code>README.md</code>.
|
More instructions are available in <code>README.md</code>.
|
||||||
</WelcomeItem>
|
</WelcomeItem>
|
||||||
|
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<EcosystemIcon />
|
<EcosystemIcon />
|
||||||
</template>
|
</template>
|
||||||
<template #heading>Ecosystem</template>
|
<template #heading>Ecosystem</template>
|
||||||
|
|
||||||
Get official tools and libraries for your project:
|
Get official tools and libraries for your project:
|
||||||
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
|
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
|
||||||
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
|
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
|
||||||
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
|
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
|
||||||
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
|
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more resources, we
|
||||||
resources, we suggest paying
|
suggest paying
|
||||||
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
|
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
|
||||||
a visit.
|
a visit.
|
||||||
</WelcomeItem>
|
</WelcomeItem>
|
||||||
|
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CommunityIcon />
|
<CommunityIcon />
|
||||||
</template>
|
</template>
|
||||||
<template #heading>Community</template>
|
<template #heading>Community</template>
|
||||||
|
|
||||||
Got stuck? Ask your question on
|
Got stuck? Ask your question on
|
||||||
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
|
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
|
||||||
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
|
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>. You should also
|
||||||
You should also subscribe to
|
subscribe to <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
|
||||||
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
|
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
|
||||||
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
|
twitter account for latest news in the Vue world.
|
||||||
twitter account for latest news in the Vue world.
|
</WelcomeItem>
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<SupportIcon />
|
<SupportIcon />
|
||||||
</template>
|
</template>
|
||||||
<template #heading>Support Vue</template>
|
<template #heading>Support Vue</template>
|
||||||
|
|
||||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
As an independent project, Vue relies on community backing for its sustainability. You can help us by
|
||||||
us by
|
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
|
||||||
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
|
</WelcomeItem>
|
||||||
</WelcomeItem>
|
|
||||||
</template>
|
</template>
|
||||||
@@ -1,86 +1,86 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<i>
|
<i>
|
||||||
<slot name="icon"></slot>
|
<slot name="icon"></slot>
|
||||||
</i>
|
</i>
|
||||||
<div class="details">
|
<div class="details">
|
||||||
<h3>
|
<h3>
|
||||||
<slot name="heading"></slot>
|
<slot name="heading"></slot>
|
||||||
</h3>
|
</h3>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.item {
|
.item {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 0.4rem;
|
margin-bottom: 0.4rem;
|
||||||
color: var(--color-heading);
|
color: var(--color-heading);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.item {
|
.item {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
top: calc(50% - 25px);
|
top: calc(50% - 25px);
|
||||||
left: -26px;
|
left: -26px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
background: var(--color-background);
|
background: var(--color-background);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:before {
|
.item:before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
border-left: 1px solid var(--color-border);
|
border-left: 1px solid var(--color-border);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: calc(50% + 25px);
|
bottom: calc(50% + 25px);
|
||||||
height: calc(50% - 25px);
|
height: calc(50% - 25px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:after {
|
.item:after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
border-left: 1px solid var(--color-border);
|
border-left: 1px solid var(--color-border);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: calc(50% + 25px);
|
top: calc(50% + 25px);
|
||||||
height: calc(50% - 25px);
|
height: calc(50% - 25px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:first-of-type:before {
|
.item:first-of-type:before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:last-of-type:after {
|
.item:last-of-type:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
<path
|
<path
|
||||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
<path
|
<path
|
||||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
<path
|
<path
|
||||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
<path
|
<path
|
||||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,19 +1,19 @@
|
|||||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
<template>
|
<template>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
role="img"
|
role="img"
|
||||||
class="iconify iconify--mdi"
|
class="iconify iconify--mdi"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
preserveAspectRatio="xMidYMid meet"
|
preserveAspectRatio="xMidYMid meet"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue';
|
||||||
import App from './App.vue'
|
import App from './App.vue';
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app');
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
import { fileURLToPath, URL } from 'url'
|
import { fileURLToPath, URL } from 'url';
|
||||||
|
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite';
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
@@ -1,23 +1,23 @@
|
|||||||
{
|
{
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "4.3.12",
|
"version": "4.3.12",
|
||||||
"name": "artplayer-tool-thumbnail",
|
"name": "artplayer-tool-thumbnail",
|
||||||
"description": "Thumbnail tool for ArtPlayer",
|
"description": "Thumbnail tool for ArtPlayer",
|
||||||
"main": "dist/artplayer-tool-thumbnail.js",
|
"main": "dist/artplayer-tool-thumbnail.js",
|
||||||
"legacy": "dist/artplayer-tool-thumbnail.legacy.js",
|
"legacy": "dist/artplayer-tool-thumbnail.legacy.js",
|
||||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"homepage": "https://artplayer.org",
|
"homepage": "https://artplayer.org",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"html5",
|
"html5",
|
||||||
"video",
|
"video",
|
||||||
"player"
|
"player"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
export function sleep(ms) {
|
export function sleep(ms) {
|
||||||
return new Promise(resolve => setTimeout(resolve, ms));
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
|
|
||||||
export function runPromisesInSeries(ps) {
|
export function runPromisesInSeries(ps) {
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
|
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
|
||||||
|
|
||||||
## Github
|
## Github
|
||||||
|
|
||||||
[https://github.com/zhw2590582/ArtPlayer](https://github.com/zhw2590582/ArtPlayer)
|
[https://github.com/zhw2590582/ArtPlayer](https://github.com/zhw2590582/ArtPlayer)
|
||||||
|
|
||||||
## Home Page
|
## Home Page
|
||||||
|
|||||||
@@ -30,13 +30,7 @@ export default {
|
|||||||
'videoTracks',
|
'videoTracks',
|
||||||
'volume',
|
'volume',
|
||||||
],
|
],
|
||||||
methods: [
|
methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'],
|
||||||
'addTextTrack',
|
|
||||||
'canPlayType',
|
|
||||||
'load',
|
|
||||||
'play',
|
|
||||||
'pause'
|
|
||||||
],
|
|
||||||
events: [
|
events: [
|
||||||
'abort',
|
'abort',
|
||||||
'canplay',
|
'canplay',
|
||||||
@@ -62,26 +56,26 @@ export default {
|
|||||||
'waiting',
|
'waiting',
|
||||||
],
|
],
|
||||||
prototypes: [
|
prototypes: [
|
||||||
"width",
|
'width',
|
||||||
"height",
|
'height',
|
||||||
"videoWidth",
|
'videoWidth',
|
||||||
"videoHeight",
|
'videoHeight',
|
||||||
"poster",
|
'poster',
|
||||||
"webkitDecodedFrameCount",
|
'webkitDecodedFrameCount',
|
||||||
"webkitDroppedFrameCount",
|
'webkitDroppedFrameCount',
|
||||||
"playsInline",
|
'playsInline',
|
||||||
"webkitSupportsFullscreen",
|
'webkitSupportsFullscreen',
|
||||||
"webkitDisplayingFullscreen",
|
'webkitDisplayingFullscreen',
|
||||||
"onenterpictureinpicture",
|
'onenterpictureinpicture',
|
||||||
"onleavepictureinpicture",
|
'onleavepictureinpicture',
|
||||||
"disablePictureInPicture",
|
'disablePictureInPicture',
|
||||||
"cancelVideoFrameCallback",
|
'cancelVideoFrameCallback',
|
||||||
"requestVideoFrameCallback",
|
'requestVideoFrameCallback',
|
||||||
"getVideoPlaybackQuality",
|
'getVideoPlaybackQuality',
|
||||||
"requestPictureInPicture",
|
'requestPictureInPicture',
|
||||||
"webkitEnterFullScreen",
|
'webkitEnterFullScreen',
|
||||||
"webkitEnterFullscreen",
|
'webkitEnterFullscreen',
|
||||||
"webkitExitFullScreen",
|
'webkitExitFullScreen',
|
||||||
"webkitExitFullscreen",
|
'webkitExitFullscreen',
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
export default function close(option) {
|
export default function close(option) {
|
||||||
return art => ({
|
return (art) => ({
|
||||||
...option,
|
...option,
|
||||||
html: art.i18n.get('Close'),
|
html: art.i18n.get('Close'),
|
||||||
click: contextmenu => {
|
click: (contextmenu) => {
|
||||||
contextmenu.show = false;
|
contextmenu.show = false;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
export default function info(option) {
|
export default function info(option) {
|
||||||
return art => ({
|
return (art) => ({
|
||||||
...option,
|
...option,
|
||||||
html: art.i18n.get('Video Info'),
|
html: art.i18n.get('Video Info'),
|
||||||
click: contextmenu => {
|
click: (contextmenu) => {
|
||||||
art.info.show = true;
|
art.info.show = true;
|
||||||
contextmenu.show = false;
|
contextmenu.show = false;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -19,7 +19,9 @@
|
|||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
-ms-high-contrast-adjust: none;
|
-ms-high-contrast-adjust: none;
|
||||||
|
|
||||||
*, *::before, *::after {
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
.art-video-player {
|
.art-video-player {
|
||||||
&[data-flip="horizontal"] .art-video{
|
&[data-flip='horizontal'] .art-video {
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-flip="vertical"] .art-video{
|
&[data-flip='vertical'] .art-video {
|
||||||
transform: scaleY(-1);
|
transform: scaleY(-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large.
Load diff
@@ -1,4 +1,14 @@
|
|||||||
import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle, inverseClass, createElement } from './dom';
|
import {
|
||||||
|
hasClass,
|
||||||
|
addClass,
|
||||||
|
removeClass,
|
||||||
|
append,
|
||||||
|
setStyles,
|
||||||
|
tooltip,
|
||||||
|
getStyle,
|
||||||
|
inverseClass,
|
||||||
|
createElement,
|
||||||
|
} from './dom';
|
||||||
import validator from 'option-validator';
|
import validator from 'option-validator';
|
||||||
import { ComponentOption } from '../scheme';
|
import { ComponentOption } from '../scheme';
|
||||||
import { has, def } from './property';
|
import { has, def } from './property';
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export function sleep(ms = 0) {
|
export function sleep(ms = 0) {
|
||||||
return new Promise(resolve => setTimeout(resolve, ms));
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
|
|
||||||
export function debounce(func, wait, context) {
|
export function debounce(func, wait, context) {
|
||||||
|
|||||||
@@ -1,12 +1,7 @@
|
|||||||
{
|
{
|
||||||
"include": [
|
"include": ["types/*"],
|
||||||
"types/*"
|
|
||||||
],
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"lib": [
|
"lib": ["es2018", "dom"],
|
||||||
"es2018",
|
|
||||||
"dom"
|
|
||||||
],
|
|
||||||
"strict": true
|
"strict": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user