unicode-input-toolconverter 0.2.0 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.nyc_output/out.json +8980 -1849
- package/CHANGES.md +15 -1
- package/README.md +6 -11
- package/_locales/en-US/messages.json +153 -6
- package/_locales/hu-HU/messages.json +153 -6
- package/_locales/pt-BR/messages.json +153 -6
- package/_locales/sv-SE/messages.json +153 -6
- package/babel.config.json +0 -1
- package/browser_action/characterSelection.js +18 -11
- package/browser_action/charrefConverters.js +286 -79
- package/browser_action/chartBuild.js +97 -27
- package/browser_action/encodingBehaviors.js +10 -7
- package/browser_action/entityBehaviors.js +42 -16
- package/browser_action/index-es.html +13 -1
- package/browser_action/index-instrumented.html +13 -1
- package/browser_action/index-pages.html +13 -1
- package/browser_action/index.html +13 -1
- package/browser_action/index.iife.min.js +9 -1
- package/browser_action/index.iife.min.js.map +1 -1
- package/browser_action/index.instrumented.iife.min.js +1 -1
- package/browser_action/index.instrumented.iife.min.js.map +1 -1
- package/browser_action/index.js +5 -5
- package/browser_action/preferences/prefDefaults.js +12 -3
- package/browser_action/service-worker/sw-activateCallback.js +1 -2
- package/browser_action/service-worker/sw-resources.json +6 -4
- package/browser_action/templateUtils/elements.js +12 -1
- package/browser_action/templateUtils/fill.js +6 -0
- package/browser_action/templateUtils/validation.js +4 -1
- package/browser_action/templates/chartBuild.js +167 -102
- package/browser_action/templates/index.js +227 -53
- package/browser_action/templatesElementCustomization/widgets.js +40 -15
- package/browser_action/unicode/UnicodeConverter.js +99 -73
- package/browser_action/unicode/charrefunicodeDb.js +100 -50
- package/browser_action/unicode/getScriptInfoForCodePoint.js +13 -4
- package/browser_action/unicode/hangul.js +27 -20
- package/browser_action/unicode/lastScriptNames.json +1 -1
- package/browser_action/unicode/parseUnihanFromTextFileStrings.js +44 -25
- package/browser_action/unicode/unicodeFieldInfo.js +112 -90
- package/browser_action/unicode/unicodeScripts.js +409 -35
- package/browser_action/unicode/unihan.js +4 -3
- package/browser_action/unicode/unihanDbPopulate.js +7 -2
- package/browser_action/unicode/unihanFields.js +34 -0
- package/browser_action/unicodecharref.js +353 -190
- package/browser_action/utils/DOMUtils.js +95 -34
- package/browser_action/utils/FetchUtils.js +7 -6
- package/browser_action/utils/TextUtils.js +4 -4
- package/browser_action/utils/TypedArrayUtils.js +9 -5
- package/browser_action/utils/semicolonSeparatedToArray.js +3 -3
- package/browser_action/utils/setupServiceWorker.js +2 -2
- package/eslint.config.js +11 -0
- package/icons/openWindow16.png +0 -0
- package/icons/openWindow24.png +0 -0
- package/lib/background.html +7 -0
- package/lib/background.js +2 -2
- package/package.json +80 -70
- package/pnpm-workspace.yaml +8 -0
- package/server.js +66 -51
- package/sw.js +97 -56
- package/tools/entities-import.js +4 -1
- package/tools/findEsResources.js +33 -10
- package/tools/fix-sw-resources-vendor-paths.js +60 -0
- package/tools/list-locales.js +2 -2
- package/tools/parseUnicodeCharts.js +126 -60
- package/tools/ucd-import.js +1 -10
- package/tools/unicode-charts.html +49 -20
- package/tools/unihan-import.js +45 -15
- package/tools/write-sw-version.js +16 -0
- package/tsconfig.json +23 -0
- package/typings/__coverage__.d.ts +5 -0
- package/typings/apple-system-profiler.d.ts +17 -0
- package/typings/commands.d.ts +19 -0
- package/typings/json-6.d.ts +4 -0
- package/typings/rollup-plugin-istanbul.d.ts +3 -0
- package/vendor/camelcase/index.d.ts +154 -0
- package/vendor/camelcase/index.js +137 -23
- package/vendor/fflate/esm/browser.d.ts +1539 -0
- package/vendor/fflate/esm/browser.js +82 -55
- package/vendor/intl-dom/dist/Formatter.d.ts +120 -0
- package/vendor/intl-dom/dist/Formatter.d.ts.map +1 -0
- package/vendor/intl-dom/dist/collation.d.ts +42 -0
- package/vendor/intl-dom/dist/collation.d.ts.map +1 -0
- package/vendor/intl-dom/dist/defaultAllSubstitutions.d.ts +52 -0
- package/vendor/intl-dom/dist/defaultAllSubstitutions.d.ts.map +1 -0
- package/vendor/intl-dom/dist/defaultInsertNodes.d.ts +96 -0
- package/vendor/intl-dom/dist/defaultInsertNodes.d.ts.map +1 -0
- package/vendor/intl-dom/dist/defaultKeyCheckerConverter.d.ts +17 -0
- package/vendor/intl-dom/dist/defaultKeyCheckerConverter.d.ts.map +1 -0
- package/vendor/intl-dom/dist/defaultLocaleResolver.d.ts +285 -0
- package/vendor/intl-dom/dist/defaultLocaleResolver.d.ts.map +1 -0
- package/vendor/intl-dom/dist/findLocaleStrings.d.ts +88 -0
- package/vendor/intl-dom/dist/findLocaleStrings.d.ts.map +1 -0
- package/vendor/intl-dom/dist/getDOMForLocaleString.d.ts +67 -0
- package/vendor/intl-dom/dist/getDOMForLocaleString.d.ts.map +1 -0
- package/vendor/intl-dom/dist/getMessageForKeyByStyle.d.ts +73 -0
- package/vendor/intl-dom/dist/getMessageForKeyByStyle.d.ts.map +1 -0
- package/vendor/intl-dom/dist/getStringFromMessageAndDefaults.d.ts +26 -0
- package/vendor/intl-dom/dist/getStringFromMessageAndDefaults.d.ts.map +1 -0
- package/vendor/intl-dom/dist/i18n.d.ts +113 -0
- package/vendor/intl-dom/dist/i18n.d.ts.map +1 -0
- package/vendor/intl-dom/dist/index.d.ts +92 -0
- package/vendor/intl-dom/dist/index.d.ts.map +1 -0
- package/vendor/intl-dom/dist/index.esm.d.ts +34 -0
- package/vendor/intl-dom/dist/index.esm.js +854 -896
- package/vendor/intl-dom/dist/index.esm.min.js +4 -0
- package/vendor/intl-dom/dist/index.esm.min.js.map +1 -0
- package/vendor/intl-dom/dist/index.umd.js +2953 -0
- package/vendor/intl-dom/dist/index.umd.min.js +4 -0
- package/vendor/intl-dom/dist/index.umd.min.js.map +1 -0
- package/vendor/intl-dom/dist/promiseChainForValues.d.ts +34 -0
- package/vendor/intl-dom/dist/promiseChainForValues.d.ts.map +1 -0
- package/vendor/intl-dom/dist/shared.d.ts +20 -0
- package/vendor/intl-dom/dist/shared.d.ts.map +1 -0
- package/vendor/intl-dom/dist/utils.d.ts +53 -0
- package/vendor/intl-dom/dist/utils.d.ts.map +1 -0
- package/vendor/jamilih/dist/jml.d.mts +468 -0
- package/vendor/jamilih/dist/{jml-es.js → jml.mjs} +1489 -343
- package/vendor/jquery/dist/jquery.js +1677 -2713
- package/vendor/json-6/dist/index.mjs +2 -0
- package/vendor/miller-columns/CHANGES.md +185 -0
- package/vendor/miller-columns/LICENSE-MIT.txt +21 -0
- package/vendor/miller-columns/README.md +249 -0
- package/vendor/miller-columns/demos/index.html +69 -0
- package/vendor/miller-columns/demos/index.js +72 -0
- package/vendor/miller-columns/dist/index-es.js +748 -0
- package/vendor/miller-columns/dist/index-es.min.d.ts +25 -0
- package/vendor/miller-columns/dist/index-es.min.js +7 -1
- package/vendor/miller-columns/dist/index-umd.js +757 -0
- package/vendor/miller-columns/dist/index-umd.min.js +7 -0
- package/vendor/miller-columns/dist/index.d.ts +25 -0
- package/vendor/miller-columns/dist/millerColumns.d.ts +10 -0
- package/vendor/miller-columns/eslint.config.js +46 -0
- package/vendor/miller-columns/fix-declarations.js +18 -0
- package/vendor/miller-columns/miller-columns.css +24 -1
- package/vendor/miller-columns/package.json +73 -0
- package/vendor/miller-columns/pnpm-workspace.yaml +2 -0
- package/vendor/miller-columns/src/index.js +642 -0
- package/vendor/miller-columns/src/millerColumns.ts +12 -0
- package/vendor/miller-columns/tsconfig-prod.json +23 -0
- package/vendor/miller-columns/tsconfig.json +21 -0
- package/vendor/simple-prefs/dist/index.esm.d.ts +1 -0
- package/vendor/simple-prefs/dist/index.esm.js +164 -216
- package/vendor/simple-prefs/dist/simple-prefs.d.ts +117 -0
- package/lgtm.yml +0 -5
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
# miller-columns
|
|
2
|
+
|
|
3
|
+
## 0.17.0
|
|
4
|
+
|
|
5
|
+
- feat: pass `resetByUser` boolean as second argument to `reset` callback
|
|
6
|
+
|
|
7
|
+
## 0.16.0
|
|
8
|
+
|
|
9
|
+
- fix: scroll preview pane into view upon selection
|
|
10
|
+
- feat: `onPreview` callback
|
|
11
|
+
|
|
12
|
+
## 0.15.0
|
|
13
|
+
|
|
14
|
+
- feat: add `breadcrumbRoot` to define a clickable breadcrumb entry leading back to root
|
|
15
|
+
- feat: add styling to breadcrumbs
|
|
16
|
+
|
|
17
|
+
## 0.14.0
|
|
18
|
+
|
|
19
|
+
- feat: add `refreshChildren`
|
|
20
|
+
|
|
21
|
+
## 0.13.2
|
|
22
|
+
|
|
23
|
+
- fix: bad meta/cmd and alt/option key detection
|
|
24
|
+
|
|
25
|
+
## 0.13.1
|
|
26
|
+
|
|
27
|
+
- fix: prevent selection of text when meta/cmd or alt/option keys are in use
|
|
28
|
+
|
|
29
|
+
## 0.13.0
|
|
30
|
+
|
|
31
|
+
- feat: rename `resetOnOutsideClick` to `outsideClickBehavior` and add behaviors
|
|
32
|
+
|
|
33
|
+
## 0.12.1
|
|
34
|
+
|
|
35
|
+
- fix: `scrollIntoView()`
|
|
36
|
+
|
|
37
|
+
## 0.12.0
|
|
38
|
+
|
|
39
|
+
- feat `destroy` method
|
|
40
|
+
|
|
41
|
+
## 0.11.0
|
|
42
|
+
|
|
43
|
+
- feat: `addItem`
|
|
44
|
+
- fix: prevent left arrow from going up when reaching root
|
|
45
|
+
|
|
46
|
+
## 0.10.4
|
|
47
|
+
|
|
48
|
+
- fix(typescript): global import for millerColumns.d.ts
|
|
49
|
+
|
|
50
|
+
## 0.10.3
|
|
51
|
+
|
|
52
|
+
### User-impacting
|
|
53
|
+
|
|
54
|
+
- fix(typescript): proper `stylesheets` export for `addMillerColumnPlugin`
|
|
55
|
+
|
|
56
|
+
## 0.10.2
|
|
57
|
+
|
|
58
|
+
### User-impacting
|
|
59
|
+
|
|
60
|
+
- fix(typescript): export `millerColumns` type
|
|
61
|
+
|
|
62
|
+
## 0.10.1
|
|
63
|
+
|
|
64
|
+
### User-impacting
|
|
65
|
+
|
|
66
|
+
- fix: proper module URL for CSS
|
|
67
|
+
- fix(demo): ensure `load-stylesheets` is in import map
|
|
68
|
+
|
|
69
|
+
## 0.10.0
|
|
70
|
+
|
|
71
|
+
### User-impacting
|
|
72
|
+
|
|
73
|
+
- feat: TypeScript
|
|
74
|
+
- docs: Group features for easier discovery; add mention of ability to type initial letter(s)
|
|
75
|
+
|
|
76
|
+
### Dev-impacting
|
|
77
|
+
|
|
78
|
+
- chore: update devDeps, switch to native ESM, lint
|
|
79
|
+
|
|
80
|
+
## 0.9.0
|
|
81
|
+
|
|
82
|
+
### User-impacting
|
|
83
|
+
|
|
84
|
+
- Build: As per latest devDeps/linting
|
|
85
|
+
- Docs: Add screenshot
|
|
86
|
+
|
|
87
|
+
### Dev-impacting
|
|
88
|
+
|
|
89
|
+
- Linting (ESLint): Per latest ash-nazg / ESLint 7
|
|
90
|
+
- Linting (Remark): Remove `remarkrc`
|
|
91
|
+
- Testing: Update testcafe API
|
|
92
|
+
- npm: Make separate test script for "testcafe"
|
|
93
|
+
- npm: Switch to non-deprecated `@rollup/plugin-node-resolve`
|
|
94
|
+
- npm: Remove unused `rollup-plugin-commonjs`
|
|
95
|
+
- npm: Update `rollup-plugin-babel` to `@rollup/plugin-babel`
|
|
96
|
+
and make explicit `babelHelpers` value of `bundled`
|
|
97
|
+
- npm: Update devDeps.
|
|
98
|
+
|
|
99
|
+
## 0.8.1
|
|
100
|
+
|
|
101
|
+
- npm: Include `package-lock.json` updates
|
|
102
|
+
|
|
103
|
+
## 0.8.0
|
|
104
|
+
|
|
105
|
+
- Linting (ESLint): Add a recommended extension (js); lint MD and HTML; apply ash-nazg
|
|
106
|
+
- Maintenance: Add `.editorconfig`
|
|
107
|
+
- Testing: Update Axe API (though now failing)
|
|
108
|
+
- npm: Update opn-cli->open-cli, devDeps
|
|
109
|
+
|
|
110
|
+
## 0.7.0
|
|
111
|
+
|
|
112
|
+
- Breaking change: Dropped reporting of resets to `current` settings handler
|
|
113
|
+
and instead report to a new `reset` settings handler (which takes a single
|
|
114
|
+
argument only of the columns object).
|
|
115
|
+
- Fix: Ensure scrolling to furthermost column
|
|
116
|
+
- Enhancement: Add `preview` setting callback to allow shaping of a preview
|
|
117
|
+
pane
|
|
118
|
+
- Enhancement: Add `scroll` setting callback to be informed of scrolling
|
|
119
|
+
|
|
120
|
+
## 0.6.0
|
|
121
|
+
|
|
122
|
+
- Breaking change: Remove `yarn.lock`
|
|
123
|
+
- Fix (and simplify) key selection (had been selecting items in
|
|
124
|
+
non-highlighted columns)
|
|
125
|
+
- npm: Update devDeps; remove unused
|
|
126
|
+
- Linting (ESLint): "Standard" update; testcafe
|
|
127
|
+
- Build: Update to terser for current minification support
|
|
128
|
+
- Testing: Add testcafe skeleton for UI (and accessibility) testing
|
|
129
|
+
- Docs: Remove outdated info
|
|
130
|
+
|
|
131
|
+
## 0.5.0
|
|
132
|
+
|
|
133
|
+
- Breaking change: Namespace all classes and jQuery's internal `data`
|
|
134
|
+
with `miller-`.
|
|
135
|
+
- Breaking change: Switch from `breadcrumb` to `breadcrumbs` though
|
|
136
|
+
loosen need for this to be on a `<div>` and add a `breadcrumb`
|
|
137
|
+
class to the `<span>`'s representing individual breadcrumbs
|
|
138
|
+
- Refactoring: Consistent CSS spacing
|
|
139
|
+
|
|
140
|
+
## 0.4.0
|
|
141
|
+
|
|
142
|
+
- Enhancement: Use `loadStylesheets` to give option to load the CSS (along
|
|
143
|
+
with other user-related styles) dynamically and modularly (though in
|
|
144
|
+
parallel).
|
|
145
|
+
|
|
146
|
+
## 0.3.1
|
|
147
|
+
|
|
148
|
+
- Fix: Avoid adding special keys like modifiers to buffer
|
|
149
|
+
|
|
150
|
+
## 0.3.0
|
|
151
|
+
|
|
152
|
+
- Enhancement: Support jumping (case-insensitively) alphabetically by typing
|
|
153
|
+
letters (with a buffer to allow selection based on multiple characters)
|
|
154
|
+
|
|
155
|
+
## 0.2.3
|
|
156
|
+
|
|
157
|
+
- Fix: Display quirk with unselected column still taking up space
|
|
158
|
+
- Breaking change: Allow use of `<ol>` (as well as `<ul>`).
|
|
159
|
+
- Enhancement: Allow avoiding of `<ul>` (or `<ol>`) if a
|
|
160
|
+
`no-columns` class is applied.
|
|
161
|
+
|
|
162
|
+
## 0.2.2
|
|
163
|
+
|
|
164
|
+
- Fix: Ensure reset scrolls back horizontally
|
|
165
|
+
|
|
166
|
+
## 0.2.1
|
|
167
|
+
|
|
168
|
+
- Breaking change: Rename UMD global from `MillerColumns` to
|
|
169
|
+
`addMillerColumnPlugin`. (No global needed for ES6)
|
|
170
|
+
|
|
171
|
+
## 0.2.0
|
|
172
|
+
|
|
173
|
+
- Breaking change: Call `animation` with column first then columns for
|
|
174
|
+
parity with new `current` behavior
|
|
175
|
+
- Breaking change: Pass `null` instead of `undefined` as first argument to
|
|
176
|
+
`current` upon reset
|
|
177
|
+
- Enhancement: Pass columns object as second argument to `current` (even for
|
|
178
|
+
`reset`)
|
|
179
|
+
- Enhancement: Make `resetOnOutsideClick` (default: true) option to avoid
|
|
180
|
+
reset behavior
|
|
181
|
+
|
|
182
|
+
## 0.1.0
|
|
183
|
+
|
|
184
|
+
- Initial commit: ES6 Modules adaptation of
|
|
185
|
+
<http://jsfiddle.net/yckart/cbtnemc7/>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Brett Zamir
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
# miller-columns
|
|
2
|
+
|
|
3
|
+
ES6 Modules adaptation and expansion of
|
|
4
|
+
<http://jsfiddle.net/yckart/cbtnemc7/>
|
|
5
|
+
|
|
6
|
+
## Screenshots
|
|
7
|
+
|
|
8
|
+

|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- **Good output for styling control**
|
|
13
|
+
- Works with semantically correct `<ul>` (or `<ol>`) lists
|
|
14
|
+
- Well-namespaced CSS classes and `data-*` attributes ("miller-" by default).
|
|
15
|
+
- Available stylesheet for basic styling
|
|
16
|
+
- **Keyboard control**
|
|
17
|
+
- Using up/down/right/left arrows for navigation
|
|
18
|
+
- Using escape key for resetting to beginning
|
|
19
|
+
- Type not only first letter, but buffering to allow multiple keystrokes
|
|
20
|
+
rapidly after one another for items sharing the same initial letters
|
|
21
|
+
- **Mouse control**
|
|
22
|
+
- Click listeners for navigation, including on any breadcrumbs
|
|
23
|
+
- **Complementary navigation controls**
|
|
24
|
+
- Default ability to display breadcrumbs (overridable)
|
|
25
|
+
- **Reasonable ancillary behaviors/features**
|
|
26
|
+
- Auto-selection of first item if none chosen
|
|
27
|
+
- Default ability to reset the column browser when clicking within the browser
|
|
28
|
+
area but not on a column
|
|
29
|
+
- Default ability for animation (or overridable), including setting the delay
|
|
30
|
+
- Ability to register callback to be triggered with current selection
|
|
31
|
+
(or upon reset)
|
|
32
|
+
|
|
33
|
+
## Installation
|
|
34
|
+
|
|
35
|
+
`npm install miller-columns --save`
|
|
36
|
+
|
|
37
|
+
## Set-up
|
|
38
|
+
|
|
39
|
+
### ES6 Module-supporting browsers
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<!-- See comment in JavaScript example on current need for this here-->
|
|
43
|
+
<script src="node_modules/jquery/dist/jquery.js"></script>
|
|
44
|
+
<!-- Let your main.js do the imports as in the example below -->
|
|
45
|
+
<script type="module" src="main.js"></script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Older browsers
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<script src="node_modules/jquery/dist/jquery.js"></script>
|
|
52
|
+
<script src="node_modules/miller-columns/dist/index-umd.js"></script>
|
|
53
|
+
<script src="main.js"></script>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Expected HTML data format
|
|
57
|
+
|
|
58
|
+
In order to take advantage of the default stylesheet, you should:
|
|
59
|
+
|
|
60
|
+
1. Put the class `miller-columns` on the element on which you will invoke
|
|
61
|
+
our jQuery plug-in for adding Miller columns. The nestable `<ul>` or
|
|
62
|
+
`<ol>` lists you create (with `<li>` children) will be automatically
|
|
63
|
+
given the `miller-column` and possibly the `miller-collapse` class
|
|
64
|
+
and its `<li>` any of these classes: `miller-parent` or `miller-selected`.
|
|
65
|
+
If you do not wish one of the lists within `miller-columns` to be
|
|
66
|
+
treated as part of the Miller columns, give it a `miller-no-selected`
|
|
67
|
+
class.
|
|
68
|
+
1. Add `miller-breadcrumbs` for whichever element you want to be the
|
|
69
|
+
container for breadcrumbs. Those individual breadcrumbs will be given
|
|
70
|
+
the `miller-breadcrumb` class and will be added automatically.
|
|
71
|
+
|
|
72
|
+
Note that `miller-breadcrumbs` is the only class expected to be present by
|
|
73
|
+
our JavaScript code, and that is only if you are not overriding the
|
|
74
|
+
`breadcrumbs` option, and also if you have not changed the default
|
|
75
|
+
`namespace` to something other than "miller".
|
|
76
|
+
|
|
77
|
+
(Also as far as namespacing, the library uses jQuery's `.data()` with
|
|
78
|
+
`miller-ancestor` and `miller-child` (which can also be altered by the
|
|
79
|
+
`namespace` option), but these are stored internally by jQuery).)
|
|
80
|
+
|
|
81
|
+
## Example (ES6)
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
// Though on Roadmap for 3.4.0 (see https://github.com/jquery/jquery/wiki/Roadmap),
|
|
85
|
+
// jQuery doesn't have ES6 either as source or in a distribution, so you
|
|
86
|
+
// currently have to use Rollup with CommonJS plugins to get this next line
|
|
87
|
+
// working (or just add the script non-modularly to HTML and use the global `$`)
|
|
88
|
+
import $ from 'jquery';
|
|
89
|
+
|
|
90
|
+
import addMillerColumnPlugin from './node_modules/miller-columns/dist/index-es.min.js';
|
|
91
|
+
|
|
92
|
+
// The second options argument is optional
|
|
93
|
+
await addMillerColumnPlugin($, {stylesheets: ['path/to/extra-stylesheet.css', '@default']});
|
|
94
|
+
|
|
95
|
+
$('div.miller-columns').millerColumns({
|
|
96
|
+
// Options:
|
|
97
|
+
current ($item, $cols) {
|
|
98
|
+
console.log('User selected:', $item);
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Constructor
|
|
104
|
+
|
|
105
|
+
Returns a promise resolving when all supplied stylesheets (if any) have
|
|
106
|
+
been loaded.
|
|
107
|
+
|
|
108
|
+
- `$` - The instance of jQuery to which you are adding the plug-in.
|
|
109
|
+
- `options`
|
|
110
|
+
- `stylesheets` - An optional array of stylesheet paths to be loaded in
|
|
111
|
+
parallel. Is meant for this plug-in, but you could include any
|
|
112
|
+
stylesheets to benefit from them loading together in parallel. Using
|
|
113
|
+
`@default` will provide (an attempt to) load the default stylesheet.
|
|
114
|
+
Due to current browser limitations, we can only guess the location of
|
|
115
|
+
our module URL.
|
|
116
|
+
- `namespace` - Defaults to `miller`. The default must be kept if one
|
|
117
|
+
wishes to use the provided `miller-columns.css` stylesheet without
|
|
118
|
+
modification.
|
|
119
|
+
|
|
120
|
+
## Plugin options
|
|
121
|
+
|
|
122
|
+
- `animation` - Optional callback for ensuring the viewport shows the
|
|
123
|
+
entire newly expanded item. Defaults to an internal method. Passed the
|
|
124
|
+
column item and columns jQuery objects as arguments.
|
|
125
|
+
- `breadcrumb` - Optional callback for adding the breadcrumb path using the
|
|
126
|
+
chain of selected items. Defaults to an internal method. Optionally passed
|
|
127
|
+
the columns jQuery object as an argument.
|
|
128
|
+
- `breadcrumbRoot` - Optional string that defines the text to display as the
|
|
129
|
+
root link at the start of the breadcrumb path. Clicking this link resets
|
|
130
|
+
the column browser. Set to an empty string to disable the root link.
|
|
131
|
+
Defaults to `"Root"`.
|
|
132
|
+
- `current` - Optional callback; defaults to a noop. Called upon selection.
|
|
133
|
+
Passed the column item and columns jQuery object as arguments.
|
|
134
|
+
- `reset` - Optional callback; defaults to a noop. Called upon reset (by
|
|
135
|
+
user hitting escape key or any time clicking an element). Passed the
|
|
136
|
+
columns jQuery object and `resetByUser` boolean indicating whether
|
|
137
|
+
this reset was user-initiated (`true`) or an internally-generated rebuild (`false`) as arguments
|
|
138
|
+
- `preview` - Optional callback; defaults to `null`. Passed the column
|
|
139
|
+
item and columns jQuery object as arguments. The return result should be
|
|
140
|
+
an HTML string which is used to fill the list item which functions as the
|
|
141
|
+
preview pane when selecting a final item (an item without children).
|
|
142
|
+
- `onPreview` - Optional callback; defaults to `null`. Passed the event object
|
|
143
|
+
and the `<ul>` and columns jQuery objects as arguments. Called upon
|
|
144
|
+
clicking the preview pane.
|
|
145
|
+
- `delay` - Optional integer indicating animation delay. Defaults to 500ms.
|
|
146
|
+
- `outsideClickBehavior` - Optionally set to "reset" to have the
|
|
147
|
+
column browser reset to the beginning upon clicking within the columns
|
|
148
|
+
area where it is not a column. If set to `select-parent`, will select the
|
|
149
|
+
parent column where the node was clicked. If set to `none`, will do nothing.
|
|
150
|
+
Defaults to `"select-parent"`.
|
|
151
|
+
|
|
152
|
+
## Dynamic Item Management
|
|
153
|
+
|
|
154
|
+
After initializing the miller-columns plugin, you can dynamically add new items:
|
|
155
|
+
|
|
156
|
+
### addItem(item, $parent)
|
|
157
|
+
|
|
158
|
+
Adds a new item to the column browser. The item can contain nested lists which will be automatically unnested and integrated into the column structure.
|
|
159
|
+
|
|
160
|
+
**Parameters:**
|
|
161
|
+
- `item` (string | jQuery) - An HTML string or jQuery element representing the new list item (`<li>`). Can include nested `<ul>` or `<ol>` elements.
|
|
162
|
+
- `$parent` (jQuery, optional) - A jQuery object representing the parent item to which this item should be added as a child. If omitted, the item is added to the root level (first column).
|
|
163
|
+
|
|
164
|
+
**Returns:** jQuery object representing the newly added item.
|
|
165
|
+
|
|
166
|
+
**Example:**
|
|
167
|
+
|
|
168
|
+
```js
|
|
169
|
+
const $columns = $('div.miller-columns').millerColumns({
|
|
170
|
+
current ($item, $cols) {
|
|
171
|
+
console.log('User selected:', $item);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// Add a simple item to the root level
|
|
176
|
+
$columns.addItem('<li><a href="#">New Root Item</a></li>');
|
|
177
|
+
|
|
178
|
+
// Add an item with nested children (automatically unnested)
|
|
179
|
+
$columns.addItem(`
|
|
180
|
+
<li><a href="#">Parent Item</a>
|
|
181
|
+
<ul>
|
|
182
|
+
<li><a href="#">Child 1</a></li>
|
|
183
|
+
<li><a href="#">Child 2</a>
|
|
184
|
+
<ul>
|
|
185
|
+
<li><a href="#">Grandchild</a></li>
|
|
186
|
+
</ul>
|
|
187
|
+
</li>
|
|
188
|
+
</ul>
|
|
189
|
+
</li>
|
|
190
|
+
`);
|
|
191
|
+
|
|
192
|
+
// Add a child to an existing item
|
|
193
|
+
const $existingParent = $('.miller-column li').first();
|
|
194
|
+
$columns.addItem('<li><a href="#">New Child</a></li>', $existingParent);
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
The `addItem` method automatically:
|
|
198
|
+
- Unnests any nested lists within the new item
|
|
199
|
+
- Preserves hierarchy through data attributes
|
|
200
|
+
- Sets up proper parent-child relationships
|
|
201
|
+
- Adds appropriate CSS classes
|
|
202
|
+
- Registers click event handlers
|
|
203
|
+
- Integrates seamlessly with existing column navigation
|
|
204
|
+
|
|
205
|
+
### destroy()
|
|
206
|
+
|
|
207
|
+
Destroys the miller-columns instance and restores the original structure. This method removes all event handlers, data attributes, CSS classes, and structural changes made by the plugin.
|
|
208
|
+
|
|
209
|
+
**Returns:** jQuery object with the original structure restored.
|
|
210
|
+
|
|
211
|
+
**Example:**
|
|
212
|
+
|
|
213
|
+
```js
|
|
214
|
+
const $columns = $('div.miller-columns').millerColumns({
|
|
215
|
+
current ($item, $cols) {
|
|
216
|
+
console.log('User selected:', $item);
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
// Use the columns...
|
|
221
|
+
|
|
222
|
+
// Later, clean up and restore original structure
|
|
223
|
+
$columns.destroy();
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
The `destroy` method:
|
|
227
|
+
- Removes all event handlers (click, keydown)
|
|
228
|
+
- Restores the original nested HTML structure
|
|
229
|
+
- Removes all CSS classes (`miller-column`, `miller-collapse`, `miller-parent`, `miller-selected`)
|
|
230
|
+
- Removes all data attributes (`miller-ancestor`, `miller-child`)
|
|
231
|
+
- Removes preview columns
|
|
232
|
+
- Removes the `addItem` and `destroy` methods themselves
|
|
233
|
+
|
|
234
|
+
## To-dos
|
|
235
|
+
|
|
236
|
+
1. Stop jolting when switching between those with preview panes at same
|
|
237
|
+
level and which are already scrolled (new `scrollIntoView` code?)
|
|
238
|
+
1. Any way to avoid restructuring of DOM for sake of accessibility?
|
|
239
|
+
1. Support JSON (as with routine for converting internally to HTML)
|
|
240
|
+
1. Parse lazily from JSON (or HTML) data sources (using ES6 generator)
|
|
241
|
+
1. Allow for Preview column for `<ul>`/`<ol>`
|
|
242
|
+
1. Support `<dl>` parsing with `<dt>` as text that shows and `<dd>` as
|
|
243
|
+
meta-data to show in where the Mac Finder would show its preview area
|
|
244
|
+
1. Editing
|
|
245
|
+
1. Option to create
|
|
246
|
+
1. Option to delete
|
|
247
|
+
1. Option to rename (and trigger event) by clicking into cell
|
|
248
|
+
1. Option to move (by drag and drop and cut-paste key commands)
|
|
249
|
+
1. Adapt from <https://bitbucket.org/brettz9/colbrowser>?
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Miller Columns Demo</title>
|
|
6
|
+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
|
7
|
+
<script type="importmap">
|
|
8
|
+
{
|
|
9
|
+
"imports": {
|
|
10
|
+
"load-stylesheets": "../node_modules/load-stylesheets/dist/index-es.js"
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
<!--
|
|
15
|
+
Switch to ES6 Modules format when jQuery ready
|
|
16
|
+
-->
|
|
17
|
+
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
18
|
+
<script type="module" src="index.js"></script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<button id="destroy-btn" style="margin: 10px; padding: 10px; font-size: 14px;">Destroy Plugin</button>
|
|
22
|
+
<div class="miller-breadcrumbs"></div>
|
|
23
|
+
|
|
24
|
+
<div class="miller-columns" tabindex="1">
|
|
25
|
+
<ul>
|
|
26
|
+
<li><a href="#">First 1</a></li>
|
|
27
|
+
<li><a href="#">First 2</a></li>
|
|
28
|
+
<li><a href="#">xFirst 3</a></li>
|
|
29
|
+
<li><a href="#">zFirst 4</a>
|
|
30
|
+
<ul>
|
|
31
|
+
<li><a href="#">Second 1</a>
|
|
32
|
+
<ul>
|
|
33
|
+
<li><a href="#">Third 1</a>
|
|
34
|
+
<ul>
|
|
35
|
+
<li><a href="#">Fourth 1</a></li>
|
|
36
|
+
<li><a href="#">Fourth 2</a></li>
|
|
37
|
+
<li><a href="#">Fourth 3</a></li>
|
|
38
|
+
<li><a href="#">Fourth 4</a></li>
|
|
39
|
+
</ul>
|
|
40
|
+
</li>
|
|
41
|
+
<li><a href="#">Third 2</a></li>
|
|
42
|
+
<li><a href="#">Third 3</a></li>
|
|
43
|
+
<li><a href="#">Third 4</a>
|
|
44
|
+
<ul>
|
|
45
|
+
<li><a href="#">Fourth 1</a></li>
|
|
46
|
+
<li><a href="#">Fourth 2</a></li>
|
|
47
|
+
<li><a href="#">Fourth 3</a></li>
|
|
48
|
+
<li><a href="#">Fourth 4</a></li>
|
|
49
|
+
<li><a href="#">Fourth 5</a>
|
|
50
|
+
<ul>
|
|
51
|
+
<li><a href="#">Fifth 1</a></li>
|
|
52
|
+
<li><a href="#">Fifth 2</a></li>
|
|
53
|
+
<li><a href="#">Fifth 3</a></li>
|
|
54
|
+
<li><a href="#">Fifth 4</a></li>
|
|
55
|
+
</ul>
|
|
56
|
+
</li>
|
|
57
|
+
</ul>
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</li>
|
|
61
|
+
<li><a href="#">bSecond 2</a></li>
|
|
62
|
+
<li><a href="#">vSecond 3</a></li>
|
|
63
|
+
<li><a href="#">wSecond 4</a></li>
|
|
64
|
+
</ul>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/* globals $ -- jQuery doesn't support ESM currently */
|
|
2
|
+
/* eslint-disable no-unused-vars -- Convenient */
|
|
3
|
+
/* eslint-disable no-console -- Logging for demo */
|
|
4
|
+
import addMillerColumnPlugin from '../src/index.js';
|
|
5
|
+
|
|
6
|
+
await addMillerColumnPlugin($, {stylesheets: ['../miller-columns.css']});
|
|
7
|
+
|
|
8
|
+
const $columns = $('div.miller-columns').millerColumns({
|
|
9
|
+
current ($item, $cols) {
|
|
10
|
+
console.log('User selected:', $item);
|
|
11
|
+
},
|
|
12
|
+
reset ($cols, resetByUser) {
|
|
13
|
+
console.log('Reset called', 'reset by user:', resetByUser);
|
|
14
|
+
},
|
|
15
|
+
preview ($item) {
|
|
16
|
+
return 'Preview: ' + $item.text();
|
|
17
|
+
},
|
|
18
|
+
scroll ($item, $cols) {
|
|
19
|
+
console.log('Scrolling...');
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// Demo: Add dynamic items programmatically
|
|
24
|
+
// Add a simple item to the root level
|
|
25
|
+
setTimeout(() => {
|
|
26
|
+
console.log('Adding dynamic root item...');
|
|
27
|
+
if ($columns.addItem) {
|
|
28
|
+
$columns.addItem('<li><a href="#">Dynamically Added Root Item</a></li>');
|
|
29
|
+
}
|
|
30
|
+
}, 2000);
|
|
31
|
+
|
|
32
|
+
// Add an item with nested children (they will be automatically unnested)
|
|
33
|
+
setTimeout(() => {
|
|
34
|
+
console.log('Adding dynamic item with nested children...');
|
|
35
|
+
if ($columns.addItem) {
|
|
36
|
+
$columns.addItem(`
|
|
37
|
+
<li><a href="#">Dynamic Item with Children</a>
|
|
38
|
+
<ul>
|
|
39
|
+
<li><a href="#">Dynamic Child 1</a></li>
|
|
40
|
+
<li><a href="#">Dynamic Child 2</a>
|
|
41
|
+
<ul>
|
|
42
|
+
<li><a href="#">Dynamic Grandchild 1</a></li>
|
|
43
|
+
<li><a href="#">Dynamic Grandchild 2</a></li>
|
|
44
|
+
</ul>
|
|
45
|
+
</li>
|
|
46
|
+
</ul>
|
|
47
|
+
</li>
|
|
48
|
+
`);
|
|
49
|
+
}
|
|
50
|
+
}, 4000);
|
|
51
|
+
|
|
52
|
+
// Add a child to an existing item
|
|
53
|
+
setTimeout(() => {
|
|
54
|
+
console.log('Adding child to existing item...');
|
|
55
|
+
// Find the "First 2" item and add a child to it
|
|
56
|
+
const $parent = /** @type {JQuery<HTMLLIElement>} */ ($('.miller-column li').filter(function () {
|
|
57
|
+
return $(this).text().trim().startsWith('First 2');
|
|
58
|
+
}).first());
|
|
59
|
+
|
|
60
|
+
if ($parent.length && $columns.addItem) {
|
|
61
|
+
$columns.addItem('<li><a href="#">Dynamically Added Child</a></li>', $parent);
|
|
62
|
+
}
|
|
63
|
+
}, 6000);
|
|
64
|
+
|
|
65
|
+
// Destroy button handler
|
|
66
|
+
$('#destroy-btn').on('click', () => {
|
|
67
|
+
console.log('Destroying miller-columns...');
|
|
68
|
+
if ($columns.destroy) {
|
|
69
|
+
$columns.destroy();
|
|
70
|
+
console.log('Miller-columns destroyed and original structure restored');
|
|
71
|
+
}
|
|
72
|
+
});
|