dictate-button 1.1.2 → 1.3.0
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/README.md +49 -3
- package/dist/dictate-button.js +348 -315
- package/dist/dictate-button.styles.d.ts +1 -1
- package/dist/inject-exclusive.d.ts +1 -1
- package/dist/inject-exclusive.js +6 -62
- package/dist/inject-inclusive.d.ts +1 -1
- package/dist/inject-inclusive.js +6 -62
- package/dist/libs/index.d.ts +2 -0
- package/dist/libs/injectDictateButton.d.ts +20 -0
- package/dist/libs/injectDictateButton.js +81 -0
- package/dist/libs/injectDictateButtonOnLoad.d.ts +20 -0
- package/dist/libs/injectDictateButtonOnLoad.js +12 -0
- package/dist/libs.d.ts +2 -0
- package/dist/libs.js +6 -0
- package/package.json +17 -2
package/README.md
CHANGED
|
@@ -15,13 +15,14 @@ Developed for [dictate-button.io](https://dictate-button.io).
|
|
|
15
15
|
- Dark and light theme support
|
|
16
16
|
- Event-based API for interaction with your application
|
|
17
17
|
- Built with SolidJS for optimal performance
|
|
18
|
+
- Accessibility is ensured with ARIA attributes, high-contrast mode support, and clear keyboard focus states
|
|
18
19
|
|
|
19
20
|
## Supported tags (by our inject scripts)
|
|
20
21
|
|
|
21
22
|
- textarea
|
|
22
23
|
- input[type="text"]
|
|
23
24
|
- input[type="search"]
|
|
24
|
-
- input
|
|
25
|
+
- input (without a type; defaults to text)
|
|
25
26
|
|
|
26
27
|
## Usage
|
|
27
28
|
|
|
@@ -34,6 +35,11 @@ Choose the auto-inject mode that best suits your needs:
|
|
|
34
35
|
| Exclusive | Enables for text fields with the `data-dictate-button-on` attribute only. | `inject-exclusive.js` |
|
|
35
36
|
| Inclusive | Enables for text fields without the `data-dictate-button-off` attribute. | `inject-inclusive.js` |
|
|
36
37
|
|
|
38
|
+
Both auto-inject modes:
|
|
39
|
+
- Automatically run on DOMContentLoaded (or immediately if the DOM is already loaded).
|
|
40
|
+
- Watch for DOM changes to apply the dictate button to newly added elements.
|
|
41
|
+
- Set the button’s language from `document.documentElement.lang` (if present). Long codes like `en-GB` are normalized to `en`.
|
|
42
|
+
|
|
37
43
|
### From CDN
|
|
38
44
|
|
|
39
45
|
#### Option 1: Using the exclusive auto-inject script
|
|
@@ -45,11 +51,13 @@ In your HTML `<head>` tag, add the following script tags:
|
|
|
45
51
|
<script type="module" crossorigin src="https://cdn.dictate-button.io/inject-exclusive.js"></script>
|
|
46
52
|
```
|
|
47
53
|
|
|
48
|
-
Add the `data-dictate-button-on` attribute to any `textarea
|
|
54
|
+
Add the `data-dictate-button-on` attribute to any `textarea`, `input[type="text"]`, `input[type="search"]`, or `input` without a `type` attribute:
|
|
49
55
|
|
|
50
56
|
```html
|
|
51
57
|
<textarea data-dictate-button-on></textarea>
|
|
52
58
|
<input type="text" data-dictate-button-on />
|
|
59
|
+
<input type="search" data-dictate-button-on />
|
|
60
|
+
<input data-dictate-button-on />
|
|
53
61
|
```
|
|
54
62
|
|
|
55
63
|
#### Option 2: Using the inclusive auto-inject script
|
|
@@ -61,13 +69,15 @@ In your HTML `<head>` tag, add the following script tags:
|
|
|
61
69
|
<script type="module" crossorigin src="https://cdn.dictate-button.io/inject-inclusive.js"></script>
|
|
62
70
|
```
|
|
63
71
|
|
|
64
|
-
All `textarea
|
|
72
|
+
All `textarea`, `input[type="text"]`, `input[type="search"]`, and `input` elements without a `type` attribute that lack `data-dictate-button-off` will be automatically enhanced by default.
|
|
65
73
|
|
|
66
74
|
To disable that for a specific field, add the `data-dictate-button-off` attribute to it this way:
|
|
67
75
|
|
|
68
76
|
```html
|
|
69
77
|
<textarea data-dictate-button-off></textarea>
|
|
70
78
|
<input type="text" data-dictate-button-off />
|
|
79
|
+
<input type="search" data-dictate-button-off />
|
|
80
|
+
<input data-dictate-button-off />
|
|
71
81
|
```
|
|
72
82
|
|
|
73
83
|
#### Option 3: Manual integration
|
|
@@ -101,6 +111,42 @@ import 'dictate-button/inject-inclusive'
|
|
|
101
111
|
|
|
102
112
|
To choose between **exclusive** and **inclusive** auto-inject modes, see the [Auto-inject modes](#auto-inject-modes) section.
|
|
103
113
|
|
|
114
|
+
### Advanced usage with library functions
|
|
115
|
+
|
|
116
|
+
If you need more control over when and how the dictate buttons are injected, you can use the library functions directly:
|
|
117
|
+
|
|
118
|
+
Tip: You can also import from subpaths (e.g., 'dictate-button/libs/injectDictateButton')
|
|
119
|
+
for smaller bundles, if your bundler resolves package subpath exports.
|
|
120
|
+
|
|
121
|
+
```js
|
|
122
|
+
import { injectDictateButton, injectDictateButtonOnLoad } from 'dictate-button/libs'
|
|
123
|
+
|
|
124
|
+
// Inject dictate buttons immediately to matching elements
|
|
125
|
+
injectDictateButton(
|
|
126
|
+
'textarea.custom-selector', // CSS selector for target elements
|
|
127
|
+
{
|
|
128
|
+
buttonSize: 30, // Button size in pixels (optional; default: 30)
|
|
129
|
+
verbose: false, // Log events to console (optional; default: false)
|
|
130
|
+
customApiEndpoint: 'https://api.example.com/transcribe' // Optional custom API endpoint
|
|
131
|
+
}
|
|
132
|
+
)
|
|
133
|
+
|
|
134
|
+
// Inject on DOM load with mutation observer to catch dynamically added elements
|
|
135
|
+
injectDictateButtonOnLoad(
|
|
136
|
+
'input.custom-selector', // CSS selector for target elements
|
|
137
|
+
{
|
|
138
|
+
buttonSize: 30, // Button size in pixels (optional; default: 30)
|
|
139
|
+
watchDomChanges: true, // Watch for DOM changes (optional; default: false)
|
|
140
|
+
verbose: false, // Log events to console (optional; default: false)
|
|
141
|
+
customApiEndpoint: 'https://api.example.com/transcribe' // Optional custom API endpoint
|
|
142
|
+
}
|
|
143
|
+
)
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Note: the injector mirrors the target field’s display/margins into the wrapper,
|
|
147
|
+
sets wrapper width to 100% for block-level fields, and adds padding to avoid the button overlapping text.
|
|
148
|
+
The wrapper also has the `dictate-button-wrapper` class for easy styling.
|
|
149
|
+
|
|
104
150
|
## Events
|
|
105
151
|
|
|
106
152
|
The dictate-button component emits the following events:
|