https://github.com/knovour/basic-trigger

https://github.com/knovour/basic-trigger

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/knovour/basic-trigger
• Owner: Knovour
• Created: 2021-06-28T18:50:37.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-24T07:56:03.000Z (over 2 years ago)
• Last Synced: 2024-04-14T10:50:42.825Z (10 months ago)
• Language: TypeScript
• Size: 309 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Basic Trigger

Some html toggle event implementation.

**Bind all elements**

```js

import { bindAll } 'basic-trigger'

bindAll()

```

## Dialog

#### Basic structure

```html

open dialog

	 

	reset 

	confirm 

	confirm 

```

#### Custom Events

```js

import { bind } 'basic-trigger'

bind('dialog')

const $dialog = document.querySelector('dialog')

$dialog.addEventListener('dialog:show', () => {

	console.info('This will trigger when dialog appear')

})

$dialog.addEventListener('dialog:CUSTOM_NAME', () => {

	console.info('data-dialog-event will be your CUSTOM_NAME, except close')

})

```

## Tablist

Basic structure

```html



	
first tab

	
second tab

	
third tab



first panel

second panel

third panel

```


#### Custom Events

```js

import { bind } from 'basic-trigger'

bind('tablist')

const $tablist = document.querySelector('[role=tablist]')

$tablist.addEventListener('tab:selected', ({ detail }) => {

	const { $tab, $panel } = detail

})

```

## Press Button

Basic structure

```html

button

```

#### Custom Events

```js

import { bind } from 'basic-trigger'

bind('pressButton')

const $btn = document.querySelector('button')

$btn.addEventListener('btn:pressed', () => {})

$btn.addEventListener('btn:unpressed', () => {})

```

## Checklist

Basic structure

```html



	

		

		checkbox 1

	

	

		

		checkbox 2

	

	

		

		checkbox 3

	

	

		

		checkbox 4

	

	

		

		checkbox 5

	



```


#### Custom Events

```js

import { bind } from 'basic-trigger'

bind('checklist')

const $checklist = document.querySelector('[role=checklist]')

$checklist.addEventListener('checklist:change', ({ detail }) => {

	const { value, checked } = detail

})

```