vikingowl/snippets-ts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: vikingowl:db05f99c964482a5a34870c357be1dc13f327006
Branches Tags
vikingowl:main
...
compare: vikingowl:d6eb60edccf4154b4ea9909dae07c9ab83f33911
Branches Tags
vikingowl:main

5 Commits
db05f99c96 ... d6eb60edcc

Author SHA1 Message Date
vikingowl
d6eb60edcc update to version 0.0.3 2022-04-05 14:55:26 +02:00
vikingowl
60e85dc16a added README.md 2022-04-05 14:55:15 +02:00
vikingowl
f259e1cdb9 updated all functions to use the "const fn = () => {}" syntax 2022-04-05 14:55:03 +02:00
vikingowl
ca7a4942fb added index.html for testing 2022-04-05 14:54:22 +02:00
vikingowl
0fe58e3ccf updated tsconfig to use "ESNext" 2022-04-05 14:54:00 +02:00
8 changed files with 170 additions and 30 deletions
Expand all files Collapse all files

106
README.md Normal file
View File

@@ -0,0 +1,106 @@
# vikingowls-ts-snippets
## A collection of often used typescript snippets
---
### Utils
#### sleep()
The sleep function takes the time to sleep in milliseconds.
```ts
import { sleep } from "vikingowls-ts-snippets";
sleep(2000).then(any => {
// do-something
})
```
---
### Dom Utils
#### addGlobalEventListener()
The addGlobalEventListener function takes a type (string), a selector (string), a callback function, options (boolean or AddEventListenerOptions), and a parent (DOM or querySelector, etc)
```ts
import {addGlobalEventListener, qs} from "./domUtils";
addGlobalEventListener(
"click",
".btn",
() => console.log("Run once"),
{once: true}
)
addGlobalEventListener(
"click",
".btn",
() => console.log("Only works inside the wrapper class"),
{},
qs(".wrapper")
)
```
#### qs()
The qs function takes a selector (string) and a parent (DOM etc)
```ts
import {qs} from "./domUtils";
// instead of document.querySelector(".btn")
qs(".btn")
```
#### qsa()
The qsa function takes a selector (string) and a parent (DOM etc) and returns an Array of Elements
```ts
import {qsa} from "./domUtils";
// instead of document.querySelectorAll(".btn")
qsa(".btn")
```
---
### Formatters
#### formatCurrency()
The formatCurrency function takes a number and a currency (as shown).
The output defaults to the locale set in the browser but can be set manually.
```ts
import { formatCurrency } from "vikingowls-ts-snippets";
formatCurrency(9_123_456.789123, "EUR", "de-de")
// prints in germany "9.123.456,79 €"
formatCurrency(9_123_456.789123, "USD")
// prints in usa "$9,123,456.79"
```
#### formatNumber()
The formatNumber function takes a number.
The output defaults to the locale set in the browser but can be set manually.
```ts
import { formatNumber } from "vikingowls-ts-snippets";
formatNumber(9_123_456.789123, "de-de")
// prints in germany "9.123.456,789"
formatNumber(9_123_456.789123)
// prints in usa "9,123,456.789"
```
#### formatCompactNumber()
The formatCompactNumber function takes a number.
The output defaults to the locale set in the browser but can be set manually.
```ts
import { formatCompactNumber } from "vikingowls-ts-snippets";
formatCompactNumber(9_123_456.789123, "de-de")
// prints in germany "9,1 Mio."
formatCompactNumber(9_123_456.789123)
// prints in usa "9.1M"
```
#### formatRelativeDate()
The formatRelativeDate function takes a Date (end Date).
You also can set a default 'start Date'.
The output defaults to the locale set in the browser but can be set manually.
```ts
import { formatRelativeDate } from "vikingowls-ts-snippets";
formatRelativeDate(new Date().getSeconds() - 20000, new Date().getSeconds(), "de-de")
// prints in germany "vor 20 Sekunden"
formatRelativeDate(new Date().getSeconds() - 20000, new Date().getSeconds())
// prints in usa "20 seconds ago"
```

20
index.html Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="dist/index.js" type="module"></script>
</head>
<body>
<button class="tester">test</button>
<script type="module">
import {formatRelativeDate} from "./dist";
console.log(formatRelativeDate(new Date().getSeconds() - 20000, new Date().getSeconds()))
</script>
</body>
</html>

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "vikingowls-ts-snippets", "name": "vikingowls-ts-snippets",
"version": "0.0.2", "version": "0.0.3",
"description": "Vikingowls typescript snippets library", "description": "Vikingowls typescript snippets library",
"main": "./dist/index.js", "main": "./dist/index.js",
"scripts": { "scripts": {

8
src/domUtils.ts
View File

@@ -1,10 +1,10 @@
export function addGlobalEventListener( export const addGlobalEventListener = (
type: string, type: string,
selector: string, selector: string,
callback: (arg0: Event) => void, callback: (arg0: Event) => void,
options: boolean | AddEventListenerOptions, options: boolean | AddEventListenerOptions,
parent = document parent = document
): void { ): void => {
parent.addEventListener( parent.addEventListener(
type, type,
e => { e => {
@@ -15,10 +15,10 @@ export function addGlobalEventListener(
) )
} }
export function qs(selector: string, parent = document): Element { export const qs = (selector: string, parent = document): Element => {
return parent.querySelector(selector) return parent.querySelector(selector)
} }
export function qsa(selector: string, parent = document): Element[] { export const qsa = (selector: string, parent = document): Element[] => {
return [...parent.querySelectorAll(selector)] return [...parent.querySelectorAll(selector)]
} }

46
src/formatters.ts
View File

@@ -1,20 +1,30 @@
const CURRENCY_FORMATTER = new Intl.NumberFormat(undefined, { export const formatCurrency = (
currency: "EUR", number: number,
currency: string,
locale: string | undefined = undefined
): string => {
const CURRENCY_FORMATTER = new Intl.NumberFormat(locale, {
currency: currency,
style: "currency", style: "currency",
}) })
export function formatCurrency (number: number): string {
return CURRENCY_FORMATTER.format(number) return CURRENCY_FORMATTER.format(number)
} }
const NUMBER_FORMATTER = new Intl.NumberFormat(undefined) export const formatNumber = (
export function formatNumber (number: number): string { number: number,
locale: string | undefined = undefined
): string => {
const NUMBER_FORMATTER = new Intl.NumberFormat(locale)
return NUMBER_FORMATTER.format(number) return NUMBER_FORMATTER.format(number)
} }
const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat(undefined, { export const formatCompactNumber = (
number: number,
locale: string | undefined = undefined
): string => {
const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat(locale, {
notation: "compact" notation: "compact"
}) })
export function formatCompactNumber (number: number): string {
return COMPACT_NUMBER_FORMATTER.format(number) return COMPACT_NUMBER_FORMATTER.format(number)
} }
@@ -30,7 +40,7 @@ type DivisionsT = {
"minute" | "minutes" | "minute" | "minutes" |
"second" | "seconds" "second" | "seconds"
} }
const DIVISTIONS: DivisionsT[] = [ const DIVISIONS: DivisionsT[] = [
{ amount: 60, name: "seconds" }, { amount: 60, name: "seconds" },
{ amount: 60, name: "minutes" }, { amount: 60, name: "minutes" },
{ amount: 24, name: "hours" }, { amount: 24, name: "hours" },
@@ -39,14 +49,18 @@ const DIVISTIONS: DivisionsT[] = [
{ amount: 12, name: "months" }, { amount: 12, name: "months" },
{ amount: Number.POSITIVE_INFINITY, name: "years" }, { amount: Number.POSITIVE_INFINITY, name: "years" },
] ]
const RELATIVE_DATE_FORMATTER = new Intl.RelativeTimeFormat(undefined, { export const formatRelativeDate = (
toDate: number,
fromDate: number = new Date().getSeconds(),
locale: string | undefined = undefined
): string => {
const RELATIVE_DATE_FORMATTER = new Intl.RelativeTimeFormat(locale, {
numeric: "auto" numeric: "auto"
}) })
export function formatRelativeDate(toDate: Date, fromDate: Date = new Date()) { let duration = (toDate - fromDate) / 1000
let duration = (toDate.getSeconds() - fromDate.getSeconds()) / 1000
for (let i = 0; i <= DIVISTIONS.length; i++) { for (let i = 0; i <= DIVISIONS.length; i++) {
const division = DIVISTIONS[i] const division = DIVISIONS[i]
if (Math.abs(duration) < division.amount) { if (Math.abs(duration) < division.amount) {
return RELATIVE_DATE_FORMATTER.format(Math.round(duration), division.name) return RELATIVE_DATE_FORMATTER.format(Math.round(duration), division.name)
} }

6
src/index.ts
View File

@@ -1,3 +1,3 @@
export * from "./utils" export * from "./utils.js"
export * from "./domUtils" export * from "./domUtils.js"
export * from "./formatters" export * from "./formatters.js"

2
src/utils.ts
View File

@@ -1,3 +1,3 @@
export function sleep (time: number): Promise<unknown> { export const sleep = (time: number): Promise<unknown> => {
return new Promise((resolve => setTimeout(resolve, time))) return new Promise((resolve => setTimeout(resolve, time)))
} }

4
tsconfig.json
View File

@@ -1,7 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"module": "umd", "module": "ESNext",
"target": "es2021", "target": "ESNext",
"declaration": true, "declaration": true,
"outDir": "./dist", "outDir": "./dist",
}, },