From 2a4bfd4b9bc6dcfdbfdcacdc885e624664b781c4 Mon Sep 17 00:00:00 2001 From: luncheon Date: Sun, 24 Jul 2022 18:01:34 +0900 Subject: [PATCH] feat: #10: support keyboard --- README.md | 16 +- build.mjs | 35 + index.html | 24 +- index.js | 66 +- index.min.js | 1 - package-lock.json | 4521 ++++----------------------------------------- package.json | 23 +- src/index.ts | 70 +- src/keyboard.ts | 34 + src/mover.ts | 45 + src/pointer.ts | 34 + styles.min.css | 2 +- styles2.min.css | 2 +- tsconfig.json | 4 +- 14 files changed, 578 insertions(+), 4299 deletions(-) create mode 100644 build.mjs delete mode 100644 index.min.js create mode 100644 src/keyboard.ts create mode 100644 src/mover.ts create mode 100644 src/pointer.ts diff --git a/README.md b/README.md index 0640ee2..9b3ba55 100644 --- a/README.md +++ b/README.md @@ -7,10 +7,7 @@ Dead simple panes splitter control based on flexbox. * **Declarative.** Just add an attribute to the DOM element. Don't need to write any JavaScript. * **Lightweight.** - JS + CSS ~ 1kB (gzipped) with no dependencies. -* **Maintainable.** Ah, maybe. - The source code contains only [69 lines of TypeScript](https://github.com/luncheon/flex-splitter-directive/blob/main/src/index.ts) and [49 lines of CSS](https://github.com/luncheon/flex-splitter-directive/blob/main/styles.css). - If you don't like it partially, you can clone it and make changes. + JS + CSS ~ 1.2kB (gzipped) with no dependencies. ## Installation @@ -29,21 +26,22 @@ import "flex-splitter-directive/styles.min.css" ### CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/flex-splitter-directive)) ```html - - + + ``` ### Download Directly -* [index.min.js](https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.3.1/index.min.js) -* [styles.min.css](https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.3.1/styles.min.css) +* [index.js](https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.4.0/index.js) +* [styles.min.css](https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.4.0/styles.min.css) ## Usage 1. Load CSS and JS. 2. Set `data-flex-splitter-horizontal` (or `data-flex-splitter-vertical` for vertical) attribute to the parent element of the panes. -3. Insert `
` between each pane. + * Optionally, specify the `keyboard-movement` option, as in `data-flex-splitter-horizontal="keyboard-movement:10"`. +3. Insert `
` between each pane. 4. Set the following styles for each pane as required: * `width` / `height` for the initial size. * `min-width` / `min-height` for the minimum size. diff --git a/build.mjs b/build.mjs new file mode 100644 index 0000000..d708f64 --- /dev/null +++ b/build.mjs @@ -0,0 +1,35 @@ +import esbuild from 'esbuild' +import fs from 'node:fs/promises' +import { promisify } from 'node:util' +import { gzip as _gzip } from 'node:zlib' +const gzip = promisify(_gzip) +const gzipSize = async (filename) => (await gzip(await fs.readFile(filename))).byteLength + +/** @type esbuild.BuildOptions */ +const options = { + entryPoints: { + 'index': 'src/index.ts', + 'styles.min': 'styles.css', + 'styles2.min': 'styles2.css', + }, + outdir: '.', + bundle: true, + minify: true, + plugins: [{ + name: 'gzip-size', + setup(build) { + build.onEnd(async () => { + const [index, styles, styles2] = await Promise.all(['index.js', 'styles.min.css', 'styles2.min.css'].map(gzipSize)) + console.log(` index.js: ${index} bytes`) + console.log(` styles.min.css: ${styles} bytes`) + console.log(`styles2.min.css: ${styles2} bytes`) + }) + }, + }], +} + +if (process.argv.includes('--serve')) { + esbuild.serve({ servedir: '.' }, options).then(({ port }) => console.log(`http://localhost:${port}`)) +} else { + esbuild.build(options) +} diff --git a/index.html b/index.html index 5ab305c..86ab20b 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@ padding: .5em 1em; } - +
@@ -92,7 +92,7 @@

flex-splitter-directive

Dead simple panes splitter control based on flexbox.

-
+
-
+
@@ -112,15 +112,7 @@

Introduction

flex-splitter-directive is a flexbox-based panes splitter control.

  • Declarative.
    You don't need to write any JavaScript. Just add an attribute to the DOM element.
    • -
  • Lightweight.
    JS + CSS < 1kB (gzipped) with no dependencies.
    • -
  • - Maintainable. Ah, maybe.
    - The source code contains only - 65 lines of TypeScript code - and - 43 lines of Stylus code. - If you don't like it partially, you can clone it and make changes. -
    • +
  • Lightweight.
    JS + CSS ~ 1.2kB (gzipped) with no dependencies.
@@ -131,8 +123,8 @@

npm (with a module bundler)

import "flex-splitter-directive"
 import "flex-splitter-directive/styles.min.css"

CDN

- 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.3.1/styles.min.css">
-<script src="https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.3.1"></script>
+ 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.4.0/styles.min.css">
+<script src="https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.4.0"></script>
@@ -140,7 +132,7 @@

Usage

  1. Load CSS and JS.
  2. Set data-flex-splitter-horizontal / data-flex-splitter-vertical attribute to the parent element of the panes.
    3. -
  3. Insert <div role="separator"></div> between each pane.
    4. +
  4. Insert <div role="separator" tabindex="1"></div> between each pane.
  5. Set the following styles for each pane as required:
    • width / height for the initial size.
      • @@ -159,7 +151,7 @@

      License

-
+