Skip to content

Commit

Permalink
feat: #10: support keyboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@luncheon
luncheon committed Jul 24, 2022
1 parent ce42a08 commit 2a4bfd4
Show file tree
Hide file tree
Showing 14 changed files with 578 additions and 4,299 deletions.
16 changes: 7 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -29,21 +26,22 @@ import "flex-splitter-directive/styles.min.css"
### CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/flex-splitter-directive))

```html
<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>
```

### 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 `<div role="separator"></div>` between each pane.
* Optionally, specify the `keyboard-movement` option, as in `data-flex-splitter-horizontal="keyboard-movement:10"`.
3. Insert `<div role="separator" tabindex="1"></div>` 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.
Expand Down
35 changes: 35 additions & 0 deletions build.mjs
View file
Original file line number Diff line number Diff line change
@@ -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)
}
24 changes: 8 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
padding: .5em 1em;
}
</style>
<script src="index.min.js"></script>
<script src="index.js"></script>
</head>
<body data-flex-splitter-vertical>
<header>
Expand All @@ -92,7 +92,7 @@ <h1>flex-splitter-directive</h1>
<p>Dead simple panes splitter control based on flexbox.</p>
</header>

<div role="separator"></div>
<div role="separator" tabindex="1"></div>

<main data-flex-splitter-horizontal style="flex: auto;">
<nav style="width: 160px;">
Expand All @@ -104,23 +104,15 @@ <h1>flex-splitter-directive</h1>
</ul>
</nav>

<div role="separator"></div>
<div role="separator" tabindex="1"></div>

<article style="flex: auto;">
<section id="Introduction">
<h2>Introduction</h2>
<p><code>flex-splitter-directive</code> is a flexbox-based panes splitter control.</p>
<ul>
<li><strong>Declarative.</strong><br>You don't need to write any JavaScript. Just add an attribute to the DOM element.</li>
<li><strong>Lightweight.</strong><br>JS + CSS &lt; 1kB (gzipped) with no dependencies.</li>
<li>
<strong>Maintainable.</strong> Ah, maybe.<br>
The source code contains only
<a href="https://github.com/luncheon/flex-splitter-directive/blob/master/src/index.ts">65 lines of TypeScript code</a>
and
<a href="https://github.com/luncheon/flex-splitter-directive/blob/master/src/styles.styl">43 lines of Stylus code</a>.
If you don't like it partially, you can clone it and make changes.
</li>
<li><strong>Lightweight.</strong><br>JS + CSS ~ 1.2kB (gzipped) with no dependencies.</li>
</ul>
</section>

Expand All @@ -131,16 +123,16 @@ <h3>npm <span style="font-weight: 400">(with a module bundler)</span></h3>
<pre><code class="hljs"><span class="hljs-keyword">import</span> <span class="hljs-string">"flex-splitter-directive"</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">"flex-splitter-directive/styles.min.css"</span></code></pre>
<h3>CDN</h3>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.3.1/styles.min.css"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.3.1"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">/script</span>&gt;</span></code></pre>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.4.0/styles.min.css"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.4.0"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">/script</span>&gt;</span></code></pre>
</section>

<section id="Usage">
<h2>Usage</h2>
<ol>
<li>Load CSS and JS.</li>
<li>Set <code>data-flex-splitter-horizontal</code> / <code>data-flex-splitter-vertical</code> attribute to the parent element of the panes.</li>
<li>Insert <code>&lt;div role="separator"&gt;&lt;/div&gt;</code> between each pane.</li>
<li>Insert <code>&lt;div role="separator" tabindex="1"&gt;&lt;/div&gt;</code> between each pane.</li>
<li>Set the following styles for each pane as required:
<ul>
<li><code>width</code> / <code>height</code> for the initial size.</li>
Expand All @@ -159,7 +151,7 @@ <h2>License</h2>
</article>
</main>

<div role="separator"></div>
<div role="separator" tabindex="1"></div>

<footer style="height: 320px; display: flex; flex-direction: column;">
<h2>Demo</h2>
Expand Down
66 changes: 1 addition & 65 deletions index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion index.min.js
View file

This file was deleted.

Loading

0 comments on commit 2a4bfd4

Please sign in to comment.