{"_id":"@bennowu/hotbox","name":"@bennowu/hotbox","dist-tags":{"latest":"1.1.15"},"versions":{"1.1.15":{"name":"@bennowu/hotbox","title":"Hot Box UI","description":"Efficiency And Flexible Editor UI","version":"1.1.15","homepage":"https://github.com/Benno-Wu/hotbox","author":{"name":"BennoWu"},"repository":{"type":"git","url":"git+https://github.com/Benno-Wu/hotbox.git"},"keywords":["ui","hotbox","efficiency","flexible","javascript","library"],"bugs":{"url":"https://github.com/Benno-Wu/hotbox/issues"},"license":"MIT","dependencies":{},"devDependencies":{"grunt":"^0.4.5","grunt-autoprefixer":"^2.0.0","grunt-contrib-concat":"^0.5.0","grunt-contrib-less":"^0.12.0","grunt-contrib-uglify":"~0.4.0","grunt-contrib-watch":"^0.6.1","grunt-module-dependence":"~0.2.0","grunt-replace":"^0.8.0","less":"~2.1.1","watch":"~0.13.0"},"scripts":{"build":"grunt build","prepublishOnly":"npm run build","watch-less":"watch \"lessc --source-map less/hotbox.less hotbox.css\" \"less\""},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"gitHead":"e35bbf618742da096827732a6bfee9e57e05674b","_id":"@bennowu/hotbox@1.1.15","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-oefM3bxjqrQhjilcrThAu+Rygub02Pp8OAPfGwIJUedFAOCH5P6s3kWzQV9U+c9OmJgnpQrcxq0laq9svp65xQ==","shasum":"5a22cc9d38f5a8238dbeff8a65738d2896ee70ae","tarball":"https://registry.npmjs.org/@bennowu/hotbox/-/hotbox-1.1.15.tgz","fileCount":6,"unpackedSize":50930,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD875wF0VxSEbZizgaphHye5eWz+/IvxZJga0fUjcF2DwIgbL/HBN8aXYw2qhPa3fFZE1vUxStWtKPv+/2ZDgzDik0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJim6GKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHaw//aifO6Je5jOtOH+Qabi+0u4XR574Wy0xtZa+wkWWOjDXaab43\r\njpbjlWmnK+bUBYNkxGE1Coh92XYxcKLJ7WLqDFnvDjAb0Qk5pm+st+z+qqNP\r\nZikSL13UDgZlneYRCh4+z8PgqaHh/9HUi3viAGhEElW7U/+/2kos1RvuTI9K\r\nwuJaTb7ma90xrD9yA9IQG46vBUu4u8FzZJhfdsc8ZU0UByRI50TgTU2hnEA8\r\nmUly7qlwQiz27XQSbAE9dlI9rMg0Svr3j8ulrdydBIkcUAnLaSee8vz5ig8J\r\njW62iXPZ6f0qpxA6CVFoha5FmmKOK/SGzorKnaaUmLnclyRRRmGjoFO1qVlo\r\neOYlzw2fG6BPVsnVg5VYj7Nt9Sh2pDho+ppF4hew/hO0BZ5puXun5oYU+0nJ\r\nu7T+d23unPe8MjxPPucywklYBEC8hDzUAaHdkNygQKyEqYk5Tq8z6OHTYbMo\r\n59qjcditocAmLH7dH+xDZaIfUildt+3onM4ZnKTVb2mDwkS1xOT5wI63lM73\r\nCI58hSY/u5bfGYxVBy+eaCFc4LSekPE4zboOvQTaH5PgLR95rS3LLQqIG5mR\r\njnIaPTuZhJhFTeIuy9l6yi+QkiAqwBFDr9/CC4bb2qGGKtZmM9U6/CEcSw9z\r\nGLBpy823XlOHzvSRVgTi0JLDC1fJjltKDcU=\r\n=l9VY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bennowu","email":"648418123@outlook.com"},"directories":{},"maintainers":[{"name":"bennowu","email":"648418123@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hotbox_1.1.15_1654366602278_0.3263738477847602"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-04T18:16:42.206Z","1.1.15":"2022-06-04T18:16:42.464Z","modified":"2022-06-04T18:16:42.591Z"},"maintainers":[{"name":"bennowu","email":"648418123@outlook.com"}],"description":"Efficiency And Flexible Editor UI","homepage":"https://github.com/Benno-Wu/hotbox","keywords":["ui","hotbox","efficiency","flexible","javascript","library"],"repository":{"type":"git","url":"git+https://github.com/Benno-Wu/hotbox.git"},"author":{"name":"BennoWu"},"bugs":{"url":"https://github.com/Benno-Wu/hotbox/issues"},"license":"MIT","readme":"热盒 UI\n====\n\n热盒 UI 是一种高效的上下文交互方式，在最大化编辑区域的同时（再也不需要臃肿的工具栏了）允许全键盘操作。\n\n\n\n## 使用示例\n\n```js\nvar hotbox = new HotBox('#editor');\n\nvar main = hotbox.state('main');\nmain.button({\n position: 'center',\n action: function() {\n // 编辑动作\n },\n label: '编辑',\n key: 'F2',\n next: 'idle'\n});\n\nhotbox.active('main', { x: 300, y: 300 });\n```\n\n## HotBox 类\n\n用于构建热盒 UI。\n\n### 构造函数 `HotBox.constructor`\n\n直接使用 `new` 关键字创建 HotBox 实例。\n\n```js\nvar hotbox = new HotBox(selector);\n```\n\n构造函数接受一个**「必须」**的参数 `selector`，表示热盒渲染的位置。热盒创建之后的状态是 `idle`，这个状态下热盒是不可见的。\n\n### 定义和获取状态 `state()` 方法\n\n热盒在某个时刻有且只有一个状态（`state`），默认状态为 `idle`，此时热盒空闲，不会渲染，并且监听着按键，准备着进行定义的动作。用户需要通过 `state()` 方法来定义状态。\n\n```js\nvar main = hotbox.state('main');\n```\n\n该方法需要指定一个状态名称，返回指定名称的 `HotBoxState` 对象，该对象可以用于进一步定义状态。\n\n热盒会自动把 `main` 状态作为主要状态，会在 `idle` 状态下监听 `main` 状态定义的按键。建议用户定义并使用 `main` 状态。\n\n### 设置热盒当前状态 `active()` 方法\n\n热盒默认在 `idle` 状态上，使用 `active` 方法，使热盒进入指定的状态。\n\n```js\nhotbox.active('main', {x: 400, y: 400});\n```\n\n方法的完整签名为 `active(name, position)`。表示让热盒在 `position` 焦点位置渲染指定的状态。`position` 需要有 `x` 和 `y` 属性。\n\n## HotBoxState 类\n\n`HotBoxState` 类用户无法创建，调用 `HotBox` 的 `.state()` 方法时返回。\n\n### 为状态添加按钮 `button()`\n\n使用 `button()` 方法为状态添加一个按钮。\n\n```js\nvar main = hotbox.state('main');\nmain.button({\n label: '编辑',\n key: 'F2',\n action: function() { /* 执行的动作 */ }\n next: 'idle'\n});\n```\n\n下面是 `option` 对象支持的字段：\n\n 配置 | 类型 | 说明\n --- | --- | ---\n option.position | `String` | 按钮的位置。允许在以下位置：
`center` - 按钮在圆心处，只能定义一个
`ring` - 按钮在圆环处，能定义多个
`top` - 按钮在上栏，能定义多个
`bottom` - 按钮在下栏，能定义多个\n option.label | `String` / `Function` | 按钮的标签文本, 也可以通过函数返回值确定\n option.key | `String` | 按钮的快捷键\n option.render | `Function` | 按钮的渲染器，如果指定，将使用指定的渲染器。如果不指定，将渲染标签。
渲染器需要返回按钮的 HTML 代码。\n option.enable | `Function` | 按钮是否可用的查询函数，如果不指定，则按钮始终可用。函数需要返回一个 `bool` 类型的值，来决定按钮是否可用。\n option.action | `Function` | 按钮执行的操作\n option.next | `string` | 操作执行之后热盒到达的状态。如不指定，默认到达 `idle`。可使用该参数来跳转到多级热盒。可以取值为 `back`\n\n### 下次激活时重新渲染button `rerender()`\n\n使用 `rerender()` 方法为使得该状态在下次激活时重新渲染button。\n\n```js\nvar main = hotbox.state('main');\nmain.rerender();\nhotbox.active('main', {x: 400, y: 400});\n```\n","readmeFilename":"README.md"}