umaki 0.3.0 → 0.3.2
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 +209 -197
- package/dist/_virtual/_commonjsHelpers.cjs.js +1 -1
- package/dist/_virtual/_commonjsHelpers.es.js +1 -1
- package/dist/_virtual/isBetween.cjs.js +1 -1
- package/dist/_virtual/isBetween.es.js +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +1 -1
- package/dist/libs/control/bgScrollStop.cjs.js +1 -1
- package/dist/libs/control/bgScrollStop.es.js +1 -1
- package/dist/libs/control/pd.cjs.js +1 -1
- package/dist/libs/control/pd.es.js +1 -1
- package/dist/libs/control/scrollToHash.cjs.js +1 -1
- package/dist/libs/control/scrollToHash.es.js +1 -1
- package/dist/libs/control/videoPlayControl.cjs.js +3 -3
- package/dist/libs/control/videoPlayControl.d.ts +1 -1
- package/dist/libs/control/videoPlayControl.es.js +3 -3
- package/dist/libs/convert/changeDateStringToSpecificFormat.cjs.js +1 -1
- package/dist/libs/convert/changeDateStringToSpecificFormat.es.js +1 -1
- package/dist/libs/convert/jsonStringToJsonObject.cjs.js +1 -1
- package/dist/libs/convert/jsonStringToJsonObject.es.js +1 -1
- package/dist/libs/eventControl/debounce.cjs.js +1 -1
- package/dist/libs/eventControl/debounce.es.js +1 -1
- package/dist/libs/eventControl/throttle.cjs.js +1 -1
- package/dist/libs/eventControl/throttle.es.js +1 -1
- package/dist/libs/get/getAspectRatio.cjs.js +1 -1
- package/dist/libs/get/getAspectRatio.es.js +1 -1
- package/dist/libs/get/getClassNames.cjs.js +1 -1
- package/dist/libs/get/getClassNames.es.js +1 -1
- package/dist/libs/get/getDocumentHeight.cjs.js +1 -1
- package/dist/libs/get/getDocumentHeight.es.js +1 -1
- package/dist/libs/get/getEventPaths.cjs.js +1 -1
- package/dist/libs/get/getEventPaths.es.js +1 -1
- package/dist/libs/get/getGcd.cjs.js +1 -1
- package/dist/libs/get/getGcd.es.js +1 -1
- package/dist/libs/get/getOrientation.cjs.js +1 -1
- package/dist/libs/get/getOrientation.es.js +1 -1
- package/dist/libs/get/getParentList.cjs.js +1 -1
- package/dist/libs/get/getParentList.es.js +1 -1
- package/dist/libs/get/getQueryParams.cjs.js +5 -4
- package/dist/libs/get/getQueryParams.d.ts +6 -2
- package/dist/libs/get/getQueryParams.es.js +5 -4
- package/dist/libs/get/getRem.cjs.js +1 -1
- package/dist/libs/get/getRem.es.js +1 -1
- package/dist/libs/get/getScrollbarWidth.cjs.js +1 -1
- package/dist/libs/get/getScrollbarWidth.es.js +1 -1
- package/dist/libs/get/getSessionStorage.cjs.js +1 -1
- package/dist/libs/get/getSessionStorage.es.js +1 -1
- package/dist/libs/get/getStringLength.cjs.js +1 -1
- package/dist/libs/get/getStringLength.es.js +1 -1
- package/dist/libs/get/getStylePropertyValue.cjs.js +1 -1
- package/dist/libs/get/getStylePropertyValue.es.js +1 -1
- package/dist/libs/get/getStylePropertyValueToNumber.cjs.js +1 -1
- package/dist/libs/get/getStylePropertyValueToNumber.es.js +1 -1
- package/dist/libs/get/getUaData.cjs.js +1 -1
- package/dist/libs/get/getUaData.es.js +1 -1
- package/dist/libs/is/isBetweenDateTime.cjs.js +1 -1
- package/dist/libs/is/isBetweenDateTime.es.js +1 -1
- package/dist/libs/is/isExistAllElements.cjs.js +1 -1
- package/dist/libs/is/isExistAllElements.es.js +1 -1
- package/dist/libs/is/isIpad.cjs.js +1 -1
- package/dist/libs/is/isIpad.es.js +1 -1
- package/dist/libs/is/isKeyExists.cjs.js +1 -1
- package/dist/libs/is/isKeyExists.es.js +1 -1
- package/dist/libs/is/isSafari.cjs.js +1 -1
- package/dist/libs/is/isSafari.es.js +1 -1
- package/dist/libs/is/isScrollable.cjs.js +1 -1
- package/dist/libs/is/isScrollable.es.js +1 -1
- package/dist/libs/is/isTouchSupport.cjs.js +1 -1
- package/dist/libs/is/isTouchSupport.es.js +1 -1
- package/dist/libs/remove/removeAllHtmlTags.cjs.js +1 -1
- package/dist/libs/remove/removeAllHtmlTags.es.js +1 -1
- package/dist/libs/remove/removeAttribute.cjs.js +1 -1
- package/dist/libs/remove/removeAttribute.es.js +1 -1
- package/dist/libs/remove/removeSessionStorage.cjs.js +1 -1
- package/dist/libs/remove/removeSessionStorage.es.js +1 -1
- package/dist/libs/remove/removeStylePropertyValue.cjs.js +1 -1
- package/dist/libs/remove/removeStylePropertyValue.es.js +1 -1
- package/dist/libs/set/set100vh.cjs.js +1 -1
- package/dist/libs/set/set100vh.es.js +1 -1
- package/dist/libs/set/set100vw.cjs.js +1 -1
- package/dist/libs/set/set100vw.es.js +1 -1
- package/dist/libs/set/setAttribute.cjs.js +1 -1
- package/dist/libs/set/setAttribute.es.js +1 -1
- package/dist/libs/set/setScrollPositionToCenter.cjs.js +1 -1
- package/dist/libs/set/setScrollPositionToCenter.es.js +1 -1
- package/dist/libs/set/setSessionStorage.cjs.js +1 -1
- package/dist/libs/set/setSessionStorage.es.js +1 -1
- package/dist/libs/set/setStylePropertyValue.cjs.js +1 -1
- package/dist/libs/set/setStylePropertyValue.es.js +1 -1
- package/dist/libs/to/toBoolean.cjs.js +1 -1
- package/dist/libs/to/toBoolean.es.js +1 -1
- package/dist/libs/to/toPositiveNumber.cjs.js +1 -1
- package/dist/libs/to/toPositiveNumber.es.js +1 -1
- package/dist/libs/transform/wrapTextWithSpans.cjs.js +1 -1
- package/dist/libs/transform/wrapTextWithSpans.es.js +1 -1
- package/dist/libs/wait/sleep.cjs.js +1 -1
- package/dist/libs/wait/sleep.es.js +1 -1
- package/dist/libs/wait/waitForAllMediaLoaded.cjs.js +1 -1
- package/dist/libs/wait/waitForAllMediaLoaded.es.js +1 -1
- package/dist/node_modules/dayjs/plugin/isBetween.cjs.js +1 -1
- package/dist/node_modules/dayjs/plugin/isBetween.es.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,8 +12,8 @@ A package that allows you to import frequently used utilities for web developmen
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
```
|
|
16
|
-
import { foo } from
|
|
15
|
+
```ts
|
|
16
|
+
import { foo } from "umaki";
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## List of Utilities
|
|
@@ -80,11 +80,11 @@ import { foo } from 'umaki'
|
|
|
80
80
|
|
|
81
81
|
A function that stops scrolling.
|
|
82
82
|
|
|
83
|
-
```
|
|
84
|
-
import { bgScrollStop } from
|
|
83
|
+
```ts
|
|
84
|
+
import { bgScrollStop } from "umaki";
|
|
85
85
|
|
|
86
|
-
bgScrollStop() // scroll stop
|
|
87
|
-
bgScrollStop(false) // scroll start
|
|
86
|
+
bgScrollStop(); // scroll stop
|
|
87
|
+
bgScrollStop(false); // scroll start
|
|
88
88
|
```
|
|
89
89
|
|
|
90
90
|
[View file →](src/libs/control/bgScrollStop.ts)
|
|
@@ -93,10 +93,10 @@ bgScrollStop(false) // scroll start
|
|
|
93
93
|
|
|
94
94
|
A function that prevents the default event behavior.
|
|
95
95
|
|
|
96
|
-
```
|
|
97
|
-
import { pd } from
|
|
96
|
+
```ts
|
|
97
|
+
import { pd } from "umaki";
|
|
98
98
|
|
|
99
|
-
document.getElementById(
|
|
99
|
+
document.getElementById("myElement").addEventListener("click", pd);
|
|
100
100
|
```
|
|
101
101
|
|
|
102
102
|
[View file →](src/libs/control/pd.ts)
|
|
@@ -105,19 +105,18 @@ document.getElementById('myElement').addEventListener('click', pd)
|
|
|
105
105
|
|
|
106
106
|
A function that scrolls to a specific hash position.
|
|
107
107
|
|
|
108
|
-
```
|
|
109
|
-
import { scrollToHash } from
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
console.log('Scrolled!')
|
|
108
|
+
```ts
|
|
109
|
+
import { scrollToHash } from "umaki";
|
|
110
|
+
(async () => {
|
|
111
|
+
await scrollToHash("#target");
|
|
112
|
+
console.log("Scrolled!");
|
|
114
113
|
|
|
115
114
|
// smooth scroll
|
|
116
|
-
await scrollToHash(
|
|
115
|
+
await scrollToHash("#target", true);
|
|
117
116
|
|
|
118
117
|
// smooth scroll + offset
|
|
119
|
-
await scrollToHash(
|
|
120
|
-
})()
|
|
118
|
+
await scrollToHash("#target", true, 100);
|
|
119
|
+
})();
|
|
121
120
|
```
|
|
122
121
|
|
|
123
122
|
[View file →](src/libs/control/scrollToHash.ts)
|
|
@@ -126,12 +125,15 @@ import { scrollToHash } from 'umaki'
|
|
|
126
125
|
|
|
127
126
|
A function that controls the playback of a video element.
|
|
128
127
|
|
|
129
|
-
```
|
|
130
|
-
import { videoPlayControl } from
|
|
128
|
+
```ts
|
|
129
|
+
import { videoPlayControl } from "umaki";
|
|
130
|
+
|
|
131
|
+
const videoElement = document.getElementById("myVideo");
|
|
132
|
+
videoPlayControl(videoElement, true); // play
|
|
133
|
+
videoPlayControl(videoElement, false); // pause
|
|
131
134
|
|
|
132
|
-
|
|
133
|
-
videoPlayControl(videoElement, true) // play
|
|
134
|
-
videoPlayControl(videoElement, false) // pause
|
|
135
|
+
// set currentTime
|
|
136
|
+
videoPlayControl(videoElement, true, 10); // play and set currentTime to 10
|
|
135
137
|
```
|
|
136
138
|
|
|
137
139
|
[View file →](src/libs/control/videoPlayControl.ts)
|
|
@@ -143,11 +145,11 @@ videoPlayControl(videoElement, false) // pause
|
|
|
143
145
|
A function that converts a date string to a specific format.
|
|
144
146
|
|
|
145
147
|
```ts
|
|
146
|
-
import { changeDateStringToSpecificFormat } from
|
|
148
|
+
import { changeDateStringToSpecificFormat } from "umaki";
|
|
147
149
|
|
|
148
|
-
const date =
|
|
149
|
-
const formattedDate = changeDateStringToSpecificFormat(date,
|
|
150
|
-
console.log(formattedDate) // '10/05/2023'
|
|
150
|
+
const date = "2023-10-05";
|
|
151
|
+
const formattedDate = changeDateStringToSpecificFormat(date, "MM/DD/YYYY");
|
|
152
|
+
console.log(formattedDate); // '10/05/2023'
|
|
151
153
|
```
|
|
152
154
|
|
|
153
155
|
[View file →](src/libs/convert/changeDateStringToSpecificFormat.ts)
|
|
@@ -157,11 +159,11 @@ console.log(formattedDate) // '10/05/2023'
|
|
|
157
159
|
A function that converts a JSON string to a JSON object.
|
|
158
160
|
|
|
159
161
|
```ts
|
|
160
|
-
import { jsonStringToJsonObject } from
|
|
162
|
+
import { jsonStringToJsonObject } from "umaki";
|
|
161
163
|
|
|
162
|
-
const jsonString = '{"name": "John", "age": 30}'
|
|
163
|
-
const jsonObject = jsonStringToJsonObject(jsonString)
|
|
164
|
-
console.log(jsonObject) // { name: 'John', age: 30 }
|
|
164
|
+
const jsonString = '{"name": "John", "age": 30}';
|
|
165
|
+
const jsonObject = jsonStringToJsonObject(jsonString);
|
|
166
|
+
console.log(jsonObject); // { name: 'John', age: 30 }
|
|
165
167
|
```
|
|
166
168
|
|
|
167
169
|
[View file →](src/libs/convert/jsonStringToJsonObject.ts)
|
|
@@ -173,13 +175,13 @@ console.log(jsonObject) // { name: 'John', age: 30 }
|
|
|
173
175
|
A function that limits the number of times a function is called to at most one time over a specified time period.
|
|
174
176
|
|
|
175
177
|
```ts
|
|
176
|
-
import { debounce } from
|
|
178
|
+
import { debounce } from "umaki";
|
|
177
179
|
|
|
178
180
|
const debouncedFunction = debounce(() => {
|
|
179
|
-
console.log(
|
|
180
|
-
}, 300)
|
|
181
|
+
console.log("Debounced!");
|
|
182
|
+
}, 300);
|
|
181
183
|
|
|
182
|
-
window.addEventListener(
|
|
184
|
+
window.addEventListener("resize", debouncedFunction);
|
|
183
185
|
```
|
|
184
186
|
|
|
185
187
|
[View file →](src/libs/eventControl/debounce.ts)
|
|
@@ -189,13 +191,13 @@ window.addEventListener('resize', debouncedFunction)
|
|
|
189
191
|
A function that limits the number of times a function is called to a maximum of once in a specified period.
|
|
190
192
|
|
|
191
193
|
```ts
|
|
192
|
-
import { throttle } from
|
|
194
|
+
import { throttle } from "umaki";
|
|
193
195
|
|
|
194
196
|
const throttledFunction = throttle(() => {
|
|
195
|
-
console.log(
|
|
196
|
-
}, 300)
|
|
197
|
+
console.log("Throttled!");
|
|
198
|
+
}, 300);
|
|
197
199
|
|
|
198
|
-
window.addEventListener(
|
|
200
|
+
window.addEventListener("scroll", throttledFunction);
|
|
199
201
|
```
|
|
200
202
|
|
|
201
203
|
[View file →](src/libs/eventControl/throttle.ts)
|
|
@@ -207,10 +209,10 @@ window.addEventListener('scroll', throttledFunction)
|
|
|
207
209
|
A function that returns the aspect ratio of the specified width and height.
|
|
208
210
|
|
|
209
211
|
```ts
|
|
210
|
-
import { getAspectRatio } from
|
|
212
|
+
import { getAspectRatio } from "umaki";
|
|
211
213
|
|
|
212
|
-
const aspectRatio = getAspectRatio(1920, 1080)
|
|
213
|
-
console.log(aspectRatio) // { w: 16, h: 9 }
|
|
214
|
+
const aspectRatio = getAspectRatio(1920, 1080);
|
|
215
|
+
console.log(aspectRatio); // { w: 16, h: 9 }
|
|
214
216
|
```
|
|
215
217
|
|
|
216
218
|
[View file →](src/libs/get/getAspectRatio.ts)
|
|
@@ -220,12 +222,12 @@ console.log(aspectRatio) // { w: 16, h: 9 }
|
|
|
220
222
|
A function that retrieves the class names of the specified HTML element as an array.
|
|
221
223
|
|
|
222
224
|
```ts
|
|
223
|
-
import { getClassNames } from
|
|
225
|
+
import { getClassNames } from "umaki";
|
|
224
226
|
|
|
225
|
-
const element = document.createElement(
|
|
226
|
-
element.className =
|
|
227
|
-
const classNames = getClassNames(element)
|
|
228
|
-
console.log(classNames) // ['class1', 'class2', 'class3']
|
|
227
|
+
const element = document.createElement("div");
|
|
228
|
+
element.className = "class1 class2 class3";
|
|
229
|
+
const classNames = getClassNames(element);
|
|
230
|
+
console.log(classNames); // ['class1', 'class2', 'class3']
|
|
229
231
|
```
|
|
230
232
|
|
|
231
233
|
[View file →](src/libs/get/getClassNames.ts)
|
|
@@ -235,10 +237,10 @@ console.log(classNames) // ['class1', 'class2', 'class3']
|
|
|
235
237
|
A function that retrieves the height of the document.
|
|
236
238
|
|
|
237
239
|
```ts
|
|
238
|
-
import { getDocumentHeight } from
|
|
240
|
+
import { getDocumentHeight } from "umaki";
|
|
239
241
|
|
|
240
|
-
const height = getDocumentHeight()
|
|
241
|
-
console.log(height)
|
|
242
|
+
const height = getDocumentHeight();
|
|
243
|
+
console.log(height);
|
|
242
244
|
```
|
|
243
245
|
|
|
244
246
|
[View file →](src/libs/get/getDocumentHeight.ts)
|
|
@@ -248,12 +250,12 @@ console.log(height)
|
|
|
248
250
|
A function that retrieves the event paths.
|
|
249
251
|
|
|
250
252
|
```ts
|
|
251
|
-
import { getEventPaths } from
|
|
253
|
+
import { getEventPaths } from "umaki";
|
|
252
254
|
|
|
253
|
-
document.addEventListener(
|
|
254
|
-
const paths = getEventPaths(event)
|
|
255
|
-
console.log(paths)
|
|
256
|
-
})
|
|
255
|
+
document.addEventListener("click", (event) => {
|
|
256
|
+
const paths = getEventPaths(event);
|
|
257
|
+
console.log(paths);
|
|
258
|
+
});
|
|
257
259
|
```
|
|
258
260
|
|
|
259
261
|
[View file →](src/libs/get/getEventPaths.ts)
|
|
@@ -263,10 +265,10 @@ document.addEventListener('click', (event) => {
|
|
|
263
265
|
A function that calculates the greatest common divisor of two numbers.
|
|
264
266
|
|
|
265
267
|
```ts
|
|
266
|
-
import { getGcd } from
|
|
268
|
+
import { getGcd } from "umaki";
|
|
267
269
|
|
|
268
|
-
const gcd = getGcd(48, 18)
|
|
269
|
-
console.log(gcd) // 6
|
|
270
|
+
const gcd = getGcd(48, 18);
|
|
271
|
+
console.log(gcd); // 6
|
|
270
272
|
```
|
|
271
273
|
|
|
272
274
|
[View file →](src/libs/get/getGcd.ts)
|
|
@@ -276,10 +278,10 @@ console.log(gcd) // 6
|
|
|
276
278
|
A function that retrieves the current orientation of the device.
|
|
277
279
|
|
|
278
280
|
```ts
|
|
279
|
-
import { getOrientation } from
|
|
281
|
+
import { getOrientation } from "umaki";
|
|
280
282
|
|
|
281
|
-
const orientation = getOrientation()
|
|
282
|
-
console.log(orientation) // 'landscape' or 'portrait'
|
|
283
|
+
const orientation = getOrientation();
|
|
284
|
+
console.log(orientation); // 'landscape' or 'portrait'
|
|
283
285
|
```
|
|
284
286
|
|
|
285
287
|
[View file →](src/libs/get/getOrientation.ts)
|
|
@@ -289,29 +291,38 @@ console.log(orientation) // 'landscape' or 'portrait'
|
|
|
289
291
|
A function that recursively retrieves the parent elements of the specified HTML element.
|
|
290
292
|
|
|
291
293
|
```ts
|
|
292
|
-
import { getParentList } from
|
|
294
|
+
import { getParentList } from "umaki";
|
|
293
295
|
|
|
294
|
-
const element = document.createElement(
|
|
295
|
-
const parentList = getParentList(element)
|
|
296
|
-
console.log(parentList)
|
|
296
|
+
const element = document.createElement("div");
|
|
297
|
+
const parentList = getParentList(element);
|
|
298
|
+
console.log(parentList);
|
|
297
299
|
```
|
|
298
300
|
|
|
299
301
|
[View file →](src/libs/get/getParentList.ts)
|
|
300
302
|
|
|
301
303
|
### getQueryParams
|
|
302
304
|
|
|
303
|
-
A function that retrieves the query
|
|
304
|
-
This is a wrapper around query-string, so you can specify [options](https://github.com/sindresorhus/query-string) in the second argument.
|
|
305
|
+
A function that retrieves the value of a specified query parameter from the URL.
|
|
305
306
|
|
|
306
307
|
```ts
|
|
307
|
-
import { getQueryParams } from
|
|
308
|
+
import { getQueryParams } from "umaki";
|
|
309
|
+
|
|
310
|
+
// Basic usage
|
|
311
|
+
const param = getQueryParams("id"); // returns value from window.location.search
|
|
312
|
+
|
|
313
|
+
// With custom search string
|
|
314
|
+
const customParam = getQueryParams("id", { searchString: "?id=123" });
|
|
308
315
|
|
|
309
|
-
|
|
310
|
-
|
|
316
|
+
// With parse options
|
|
317
|
+
const paramWithOptions = getQueryParams("id", {
|
|
318
|
+
parseOptions: { arrayFormat: "bracket" },
|
|
319
|
+
});
|
|
311
320
|
|
|
312
|
-
//
|
|
313
|
-
const
|
|
314
|
-
|
|
321
|
+
// With both custom search string and parse options
|
|
322
|
+
const customParamWithOptions = getQueryParams("id", {
|
|
323
|
+
searchString: "?id=123",
|
|
324
|
+
parseOptions: { arrayFormat: "bracket" },
|
|
325
|
+
});
|
|
315
326
|
```
|
|
316
327
|
|
|
317
328
|
[View file →](src/libs/get/getQueryParams.ts)
|
|
@@ -321,10 +332,10 @@ console.log(params) // '123'
|
|
|
321
332
|
A function that converts a pixel value to rem units.
|
|
322
333
|
|
|
323
334
|
```ts
|
|
324
|
-
import { getRem } from
|
|
335
|
+
import { getRem } from "umaki";
|
|
325
336
|
|
|
326
|
-
const remValue = getRem(16)
|
|
327
|
-
console.log(remValue) // '1rem'
|
|
337
|
+
const remValue = getRem(16);
|
|
338
|
+
console.log(remValue); // '1rem'
|
|
328
339
|
```
|
|
329
340
|
|
|
330
341
|
[View file →](src/libs/get/getRem.ts)
|
|
@@ -334,10 +345,10 @@ console.log(remValue) // '1rem'
|
|
|
334
345
|
A function that retrieves the width of the scrollbar.
|
|
335
346
|
|
|
336
347
|
```ts
|
|
337
|
-
import { getScrollbarWidth } from
|
|
348
|
+
import { getScrollbarWidth } from "umaki";
|
|
338
349
|
|
|
339
|
-
const scrollbarWidth = getScrollbarWidth()
|
|
340
|
-
console.log(scrollbarWidth) // 15
|
|
350
|
+
const scrollbarWidth = getScrollbarWidth();
|
|
351
|
+
console.log(scrollbarWidth); // 15
|
|
341
352
|
```
|
|
342
353
|
|
|
343
354
|
[View file →](src/libs/get/getScrollbarWidth.ts)
|
|
@@ -347,10 +358,10 @@ console.log(scrollbarWidth) // 15
|
|
|
347
358
|
A function that retrieves a value from session storage.
|
|
348
359
|
|
|
349
360
|
```ts
|
|
350
|
-
import { getSessionStorage } from
|
|
361
|
+
import { getSessionStorage } from "umaki";
|
|
351
362
|
|
|
352
|
-
const value = getSessionStorage(
|
|
353
|
-
console.log(value) // 'testValue'
|
|
363
|
+
const value = getSessionStorage("testKey");
|
|
364
|
+
console.log(value); // 'testValue'
|
|
354
365
|
```
|
|
355
366
|
|
|
356
367
|
[View file →](src/libs/get/getSessionStorage.ts)
|
|
@@ -360,10 +371,10 @@ console.log(value) // 'testValue'
|
|
|
360
371
|
A function that retrieves the length of a string (considering Unicode characters).
|
|
361
372
|
|
|
362
373
|
```ts
|
|
363
|
-
import { getStringLength } from
|
|
374
|
+
import { getStringLength } from "umaki";
|
|
364
375
|
|
|
365
|
-
const length = getStringLength(
|
|
366
|
-
console.log(length) // 5
|
|
376
|
+
const length = getStringLength("こんにちは");
|
|
377
|
+
console.log(length); // 5
|
|
367
378
|
```
|
|
368
379
|
|
|
369
380
|
[View file →](src/libs/get/getStringLength.ts)
|
|
@@ -373,10 +384,10 @@ console.log(length) // 5
|
|
|
373
384
|
A function that retrieves the value of the specified CSS custom property.
|
|
374
385
|
|
|
375
386
|
```ts
|
|
376
|
-
import { getStylePropertyValue } from
|
|
387
|
+
import { getStylePropertyValue } from "umaki";
|
|
377
388
|
|
|
378
|
-
const value = getStylePropertyValue(
|
|
379
|
-
console.log(value)
|
|
389
|
+
const value = getStylePropertyValue("--custom-property");
|
|
390
|
+
console.log(value);
|
|
380
391
|
```
|
|
381
392
|
|
|
382
393
|
[View file →](src/libs/get/getStylePropertyValue.ts)
|
|
@@ -386,10 +397,10 @@ console.log(value)
|
|
|
386
397
|
A function that retrieves the value of the specified CSS custom property as a number.
|
|
387
398
|
|
|
388
399
|
```ts
|
|
389
|
-
import { getStylePropertyValueToNumber } from
|
|
400
|
+
import { getStylePropertyValueToNumber } from "umaki";
|
|
390
401
|
|
|
391
|
-
const value = getStylePropertyValueToNumber(
|
|
392
|
-
console.log(value)
|
|
402
|
+
const value = getStylePropertyValueToNumber("--custom-property");
|
|
403
|
+
console.log(value);
|
|
393
404
|
```
|
|
394
405
|
|
|
395
406
|
[View file →](src/libs/get/getStylePropertyValueToNumber.ts)
|
|
@@ -399,10 +410,10 @@ console.log(value)
|
|
|
399
410
|
A function that retrieves user agent information.
|
|
400
411
|
|
|
401
412
|
```ts
|
|
402
|
-
import { getUaData } from
|
|
413
|
+
import { getUaData } from "umaki";
|
|
403
414
|
|
|
404
|
-
const uaData = getUaData()
|
|
405
|
-
console.log(uaData)
|
|
415
|
+
const uaData = getUaData();
|
|
416
|
+
console.log(uaData);
|
|
406
417
|
// {
|
|
407
418
|
// browserName: 'chrome',
|
|
408
419
|
// browserVersion: '91.0.4472.124',
|
|
@@ -422,12 +433,12 @@ console.log(uaData)
|
|
|
422
433
|
A function that checks if the current date is between two specified dates.
|
|
423
434
|
|
|
424
435
|
```ts
|
|
425
|
-
import { isBetweenDateTime } from
|
|
436
|
+
import { isBetweenDateTime } from "umaki";
|
|
426
437
|
|
|
427
|
-
const dateA =
|
|
428
|
-
const dateB =
|
|
429
|
-
const result = isBetweenDateTime(dateA, dateB)
|
|
430
|
-
console.log(result) // true or false
|
|
438
|
+
const dateA = "2023-10-01";
|
|
439
|
+
const dateB = "2023-10-10";
|
|
440
|
+
const result = isBetweenDateTime(dateA, dateB);
|
|
441
|
+
console.log(result); // true or false
|
|
431
442
|
```
|
|
432
443
|
|
|
433
444
|
[View file →](src/libs/is/isBetweenDateTime.ts)
|
|
@@ -437,11 +448,14 @@ console.log(result) // true or false
|
|
|
437
448
|
A function that checks if all elements exist.
|
|
438
449
|
|
|
439
450
|
```ts
|
|
440
|
-
import { isExistAllElements } from
|
|
451
|
+
import { isExistAllElements } from "umaki";
|
|
441
452
|
|
|
442
|
-
const elements = [
|
|
443
|
-
|
|
444
|
-
|
|
453
|
+
const elements = [
|
|
454
|
+
document.createElement("div"),
|
|
455
|
+
document.createElement("span"),
|
|
456
|
+
];
|
|
457
|
+
const result = isExistAllElements(elements);
|
|
458
|
+
console.log(result); // true or false
|
|
445
459
|
```
|
|
446
460
|
|
|
447
461
|
[View file →](src/libs/is/isExistAllElements.ts)
|
|
@@ -451,10 +465,10 @@ console.log(result) // true or false
|
|
|
451
465
|
A function that checks if the device is an iPad.
|
|
452
466
|
|
|
453
467
|
```ts
|
|
454
|
-
import { isIpad } from
|
|
468
|
+
import { isIpad } from "umaki";
|
|
455
469
|
|
|
456
|
-
const result = isIpad()
|
|
457
|
-
console.log(result) // true or false
|
|
470
|
+
const result = isIpad();
|
|
471
|
+
console.log(result); // true or false
|
|
458
472
|
```
|
|
459
473
|
|
|
460
474
|
[View file →](src/libs/is/isIpad.ts)
|
|
@@ -464,11 +478,11 @@ console.log(result) // true or false
|
|
|
464
478
|
A function that checks if a specific key exists in an object.
|
|
465
479
|
|
|
466
480
|
```ts
|
|
467
|
-
import { isKeyExists } from
|
|
481
|
+
import { isKeyExists } from "umaki";
|
|
468
482
|
|
|
469
|
-
const obj = { a: 1, b: 2 }
|
|
470
|
-
const result = isKeyExists(obj,
|
|
471
|
-
console.log(result) // true or false
|
|
483
|
+
const obj = { a: 1, b: 2 };
|
|
484
|
+
const result = isKeyExists(obj, "a");
|
|
485
|
+
console.log(result); // true or false
|
|
472
486
|
```
|
|
473
487
|
|
|
474
488
|
[View file →](src/libs/is/isKeyExists.ts)
|
|
@@ -478,10 +492,10 @@ console.log(result) // true or false
|
|
|
478
492
|
A function that checks if the browser is Safari.
|
|
479
493
|
|
|
480
494
|
```ts
|
|
481
|
-
import { isSafari } from
|
|
495
|
+
import { isSafari } from "umaki";
|
|
482
496
|
|
|
483
|
-
const result = isSafari()
|
|
484
|
-
console.log(result) // true or false
|
|
497
|
+
const result = isSafari();
|
|
498
|
+
console.log(result); // true or false
|
|
485
499
|
```
|
|
486
500
|
|
|
487
501
|
[View file →](src/libs/is/isSafari.ts)
|
|
@@ -491,13 +505,13 @@ console.log(result) // true or false
|
|
|
491
505
|
A function that checks if an element is scrollable.
|
|
492
506
|
|
|
493
507
|
```ts
|
|
494
|
-
import { isScrollable } from
|
|
508
|
+
import { isScrollable } from "umaki";
|
|
495
509
|
|
|
496
|
-
const element = document.createElement(
|
|
497
|
-
element.style.overflow =
|
|
498
|
-
element.innerHTML = '<div style="height: 200px;"></div>'
|
|
499
|
-
const result = isScrollable(element)
|
|
500
|
-
console.log(result) // true or false
|
|
510
|
+
const element = document.createElement("div");
|
|
511
|
+
element.style.overflow = "auto";
|
|
512
|
+
element.innerHTML = '<div style="height: 200px;"></div>';
|
|
513
|
+
const result = isScrollable(element);
|
|
514
|
+
console.log(result); // true or false
|
|
501
515
|
```
|
|
502
516
|
|
|
503
517
|
[View file →](src/libs/is/isScrollable.ts)
|
|
@@ -507,10 +521,10 @@ console.log(result) // true or false
|
|
|
507
521
|
A function that checks if the device supports touch.
|
|
508
522
|
|
|
509
523
|
```ts
|
|
510
|
-
import { isTouchSupport } from
|
|
524
|
+
import { isTouchSupport } from "umaki";
|
|
511
525
|
|
|
512
|
-
const result = isTouchSupport()
|
|
513
|
-
console.log(result) // true or false
|
|
526
|
+
const result = isTouchSupport();
|
|
527
|
+
console.log(result); // true or false
|
|
514
528
|
```
|
|
515
529
|
|
|
516
530
|
[View file →](src/libs/is/isTouchSupport.ts)
|
|
@@ -522,11 +536,11 @@ console.log(result) // true or false
|
|
|
522
536
|
A function that removes all HTML tags from a string.
|
|
523
537
|
|
|
524
538
|
```ts
|
|
525
|
-
import { removeAllHtmlTags } from
|
|
539
|
+
import { removeAllHtmlTags } from "umaki";
|
|
526
540
|
|
|
527
|
-
const input =
|
|
528
|
-
const output = removeAllHtmlTags(input)
|
|
529
|
-
console.log(output) // 'Hello World!'
|
|
541
|
+
const input = "<p>Hello <strong>World</strong>!</p>";
|
|
542
|
+
const output = removeAllHtmlTags(input);
|
|
543
|
+
console.log(output); // 'Hello World!'
|
|
530
544
|
```
|
|
531
545
|
|
|
532
546
|
[View file →](src/libs/remove/removeAllHtmlTags.ts)
|
|
@@ -536,12 +550,12 @@ console.log(output) // 'Hello World!'
|
|
|
536
550
|
A function that removes an attribute from the specified HTML element.
|
|
537
551
|
|
|
538
552
|
```ts
|
|
539
|
-
import { removeAttribute } from
|
|
553
|
+
import { removeAttribute } from "umaki";
|
|
540
554
|
|
|
541
|
-
const element = document.createElement(
|
|
542
|
-
element.setAttribute(
|
|
543
|
-
removeAttribute(element,
|
|
544
|
-
console.log(element.hasAttribute(
|
|
555
|
+
const element = document.createElement("div");
|
|
556
|
+
element.setAttribute("data-test", "value");
|
|
557
|
+
removeAttribute(element, "data-test");
|
|
558
|
+
console.log(element.hasAttribute("data-test")); // false
|
|
545
559
|
```
|
|
546
560
|
|
|
547
561
|
[View file →](src/libs/remove/removeAttribute.ts)
|
|
@@ -551,11 +565,11 @@ console.log(element.hasAttribute('data-test')) // false
|
|
|
551
565
|
A function that removes an item with the specified key from session storage.
|
|
552
566
|
|
|
553
567
|
```ts
|
|
554
|
-
import { removeSessionStorage } from
|
|
568
|
+
import { removeSessionStorage } from "umaki";
|
|
555
569
|
|
|
556
|
-
const key =
|
|
557
|
-
removeSessionStorage(key)
|
|
558
|
-
console.log(sessionStorage.getItem(key)) // null
|
|
570
|
+
const key = "testKey";
|
|
571
|
+
removeSessionStorage(key);
|
|
572
|
+
console.log(sessionStorage.getItem(key)); // null
|
|
559
573
|
```
|
|
560
574
|
|
|
561
575
|
[View file →](src/libs/remove/removeSessionStorage.ts)
|
|
@@ -565,11 +579,11 @@ console.log(sessionStorage.getItem(key)) // null
|
|
|
565
579
|
A function that removes the specified CSS custom property.
|
|
566
580
|
|
|
567
581
|
```ts
|
|
568
|
-
import { removeStylePropertyValue } from
|
|
582
|
+
import { removeStylePropertyValue } from "umaki";
|
|
569
583
|
|
|
570
|
-
const key =
|
|
571
|
-
removeStylePropertyValue(key)
|
|
572
|
-
console.log(getComputedStyle(document.documentElement).getPropertyValue(key)) // ''
|
|
584
|
+
const key = "--custom-property";
|
|
585
|
+
removeStylePropertyValue(key);
|
|
586
|
+
console.log(getComputedStyle(document.documentElement).getPropertyValue(key)); // ''
|
|
573
587
|
```
|
|
574
588
|
|
|
575
589
|
[View file →](src/libs/remove/removeStylePropertyValue.ts)
|
|
@@ -581,9 +595,9 @@ console.log(getComputedStyle(document.documentElement).getPropertyValue(key)) //
|
|
|
581
595
|
A function that sets a CSS variable to 100vh to address viewport unit issues on mobile devices.
|
|
582
596
|
|
|
583
597
|
```ts
|
|
584
|
-
import { set100vh } from
|
|
598
|
+
import { set100vh } from "umaki";
|
|
585
599
|
|
|
586
|
-
set100vh()
|
|
600
|
+
set100vh();
|
|
587
601
|
```
|
|
588
602
|
|
|
589
603
|
[View file →](src/libs/set/set100vh.ts)
|
|
@@ -593,9 +607,9 @@ set100vh()
|
|
|
593
607
|
A function that sets a CSS variable to 100vw minus the scrollbar width.
|
|
594
608
|
|
|
595
609
|
```ts
|
|
596
|
-
import { set100vw } from
|
|
610
|
+
import { set100vw } from "umaki";
|
|
597
611
|
|
|
598
|
-
set100vw()
|
|
612
|
+
set100vw();
|
|
599
613
|
```
|
|
600
614
|
|
|
601
615
|
[View file →](src/libs/set/set100vw.ts)
|
|
@@ -605,11 +619,11 @@ set100vw()
|
|
|
605
619
|
A function that sets an attribute on the specified HTML element.
|
|
606
620
|
|
|
607
621
|
```ts
|
|
608
|
-
import { setAttribute } from
|
|
622
|
+
import { setAttribute } from "umaki";
|
|
609
623
|
|
|
610
|
-
const element = document.createElement(
|
|
611
|
-
setAttribute(element,
|
|
612
|
-
console.log(element.getAttribute(
|
|
624
|
+
const element = document.createElement("div");
|
|
625
|
+
setAttribute(element, "data-test", "value");
|
|
626
|
+
console.log(element.getAttribute("data-test")); // 'value'
|
|
613
627
|
```
|
|
614
628
|
|
|
615
629
|
[View file →](src/libs/set/setAttribute.ts)
|
|
@@ -619,11 +633,11 @@ console.log(element.getAttribute('data-test')) // 'value'
|
|
|
619
633
|
A function that adjusts the horizontal scroll position of the root element to center the target element.
|
|
620
634
|
|
|
621
635
|
```ts
|
|
622
|
-
import { setScrollPositionToCenter } from
|
|
636
|
+
import { setScrollPositionToCenter } from "umaki";
|
|
623
637
|
|
|
624
|
-
const rootElement = document.getElementById(
|
|
625
|
-
const targetElement = document.getElementById(
|
|
626
|
-
setScrollPositionToCenter(rootElement, targetElement)
|
|
638
|
+
const rootElement = document.getElementById("root");
|
|
639
|
+
const targetElement = document.getElementById("target");
|
|
640
|
+
setScrollPositionToCenter(rootElement, targetElement);
|
|
627
641
|
```
|
|
628
642
|
|
|
629
643
|
[View file →](src/libs/set/setScrollPositionToCenter.ts)
|
|
@@ -633,12 +647,12 @@ setScrollPositionToCenter(rootElement, targetElement)
|
|
|
633
647
|
A function that sets a value in session storage.
|
|
634
648
|
|
|
635
649
|
```ts
|
|
636
|
-
import { setSessionStorage } from
|
|
650
|
+
import { setSessionStorage } from "umaki";
|
|
637
651
|
|
|
638
|
-
const key =
|
|
639
|
-
const value =
|
|
640
|
-
setSessionStorage(key, value)
|
|
641
|
-
console.log(sessionStorage.getItem(key)) // 'testValue'
|
|
652
|
+
const key = "testKey";
|
|
653
|
+
const value = "testValue";
|
|
654
|
+
setSessionStorage(key, value);
|
|
655
|
+
console.log(sessionStorage.getItem(key)); // 'testValue'
|
|
642
656
|
```
|
|
643
657
|
|
|
644
658
|
[View file →](src/libs/set/setSessionStorage.ts)
|
|
@@ -648,12 +662,12 @@ console.log(sessionStorage.getItem(key)) // 'testValue'
|
|
|
648
662
|
A function that sets a CSS custom property on the root element.
|
|
649
663
|
|
|
650
664
|
```ts
|
|
651
|
-
import { setStylePropertyValue } from
|
|
665
|
+
import { setStylePropertyValue } from "umaki";
|
|
652
666
|
|
|
653
|
-
const key =
|
|
654
|
-
const value =
|
|
655
|
-
setStylePropertyValue(key, value)
|
|
656
|
-
console.log(getComputedStyle(document.documentElement).getPropertyValue(key)) // 'blue'
|
|
667
|
+
const key = "--custom-color";
|
|
668
|
+
const value = "blue";
|
|
669
|
+
setStylePropertyValue(key, value);
|
|
670
|
+
console.log(getComputedStyle(document.documentElement).getPropertyValue(key)); // 'blue'
|
|
657
671
|
```
|
|
658
672
|
|
|
659
673
|
[View file →](src/libs/set/setStylePropertyValue.ts)
|
|
@@ -665,11 +679,11 @@ console.log(getComputedStyle(document.documentElement).getPropertyValue(key)) //
|
|
|
665
679
|
A function that converts a string to a boolean value.
|
|
666
680
|
|
|
667
681
|
```ts
|
|
668
|
-
import { toBoolean } from
|
|
682
|
+
import { toBoolean } from "umaki";
|
|
669
683
|
|
|
670
|
-
console.log(toBoolean(
|
|
671
|
-
console.log(toBoolean(
|
|
672
|
-
console.log(toBoolean(
|
|
684
|
+
console.log(toBoolean("true")); // true
|
|
685
|
+
console.log(toBoolean("false")); // false
|
|
686
|
+
console.log(toBoolean("random")); // false
|
|
673
687
|
```
|
|
674
688
|
|
|
675
689
|
[View file →](src/libs/to/toBoolean.ts)
|
|
@@ -679,13 +693,13 @@ console.log(toBoolean('random')) // false
|
|
|
679
693
|
A function that converts a number to a positive number. Returns the absolute value if the number is negative.
|
|
680
694
|
|
|
681
695
|
```ts
|
|
682
|
-
import { toPositiveNumber } from
|
|
696
|
+
import { toPositiveNumber } from "umaki";
|
|
683
697
|
|
|
684
|
-
console.log(toPositiveNumber(5)) // 5
|
|
685
|
-
console.log(toPositiveNumber(-5)) // 5
|
|
686
|
-
console.log(toPositiveNumber(0)) // 0
|
|
687
|
-
console.log(toPositiveNumber(-3.14)) // 3.14
|
|
688
|
-
console.log(toPositiveNumber(3.14)) // 3.14
|
|
698
|
+
console.log(toPositiveNumber(5)); // 5
|
|
699
|
+
console.log(toPositiveNumber(-5)); // 5
|
|
700
|
+
console.log(toPositiveNumber(0)); // 0
|
|
701
|
+
console.log(toPositiveNumber(-3.14)); // 3.14
|
|
702
|
+
console.log(toPositiveNumber(3.14)); // 3.14
|
|
689
703
|
```
|
|
690
704
|
|
|
691
705
|
[View file →](src/libs/to/toPositiveNumber.ts)
|
|
@@ -697,12 +711,12 @@ console.log(toPositiveNumber(3.14)) // 3.14
|
|
|
697
711
|
A function that wraps each character of the text content of an HTML element with individual `<span>` elements.
|
|
698
712
|
|
|
699
713
|
```ts
|
|
700
|
-
import { wrapTextWithSpans } from
|
|
714
|
+
import { wrapTextWithSpans } from "umaki";
|
|
701
715
|
|
|
702
|
-
const element = document.createElement(
|
|
703
|
-
element.textContent =
|
|
704
|
-
wrapTextWithSpans(element)
|
|
705
|
-
console.log(element.innerHTML) // '<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>'
|
|
716
|
+
const element = document.createElement("div");
|
|
717
|
+
element.textContent = "hello";
|
|
718
|
+
wrapTextWithSpans(element);
|
|
719
|
+
console.log(element.innerHTML); // '<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>'
|
|
706
720
|
```
|
|
707
721
|
|
|
708
722
|
[View file →](src/libs/transform/wrapTextWithSpans.ts)
|
|
@@ -714,13 +728,12 @@ console.log(element.innerHTML) // '<span>h</span><span>e</span><span>l</span><sp
|
|
|
714
728
|
A function that pauses execution for a specified amount of time.
|
|
715
729
|
|
|
716
730
|
```ts
|
|
717
|
-
import { sleep } from
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
})()
|
|
731
|
+
import { sleep } from "umaki";
|
|
732
|
+
(async () => {
|
|
733
|
+
console.log("Start");
|
|
734
|
+
await sleep(1); // 1s wait
|
|
735
|
+
console.log("End");
|
|
736
|
+
})();
|
|
724
737
|
```
|
|
725
738
|
|
|
726
739
|
[View file →](src/libs/wait/sleep.ts)
|
|
@@ -730,16 +743,15 @@ import { sleep } from 'umaki'
|
|
|
730
743
|
A function that waits until all images and videos in the document are fully loaded.
|
|
731
744
|
|
|
732
745
|
```ts
|
|
733
|
-
import { waitForAllMediaLoaded } from
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
console.log(allMediaLoaded) // true or false
|
|
746
|
+
import { waitForAllMediaLoaded } from "umaki";
|
|
747
|
+
(async () => {
|
|
748
|
+
const allMediaLoaded = await waitForAllMediaLoaded();
|
|
749
|
+
console.log(allMediaLoaded); // true or false
|
|
738
750
|
|
|
739
751
|
// first view only
|
|
740
|
-
const firstViewMediaLoaded = await waitForAllMediaLoaded(true)
|
|
741
|
-
console.log(firstViewMediaLoaded) // true or false
|
|
742
|
-
})()
|
|
752
|
+
const firstViewMediaLoaded = await waitForAllMediaLoaded(true);
|
|
753
|
+
console.log(firstViewMediaLoaded); // true or false
|
|
754
|
+
})();
|
|
743
755
|
```
|
|
744
756
|
|
|
745
757
|
[View file →](src/libs/wait/waitForAllMediaLoaded.ts)
|
|
@@ -752,15 +764,15 @@ Specific usage for frameworks or various tools is described below.
|
|
|
752
764
|
|
|
753
765
|
When using with Astro for SSR, add `umaki` to `vite.ssr.noExternal.`
|
|
754
766
|
|
|
755
|
-
```
|
|
767
|
+
```ts
|
|
756
768
|
// astro.config.ts
|
|
757
769
|
export default defineConfig(({ mode }) => {
|
|
758
770
|
return {
|
|
759
771
|
vite: {
|
|
760
772
|
ssr: {
|
|
761
|
-
noExternal: [
|
|
762
|
-
}
|
|
763
|
-
}
|
|
764
|
-
}
|
|
765
|
-
})
|
|
773
|
+
noExternal: ["umaki"],
|
|
774
|
+
},
|
|
775
|
+
},
|
|
776
|
+
};
|
|
777
|
+
});
|
|
766
778
|
```
|