https://github.com/agence-webup/dropmic

A lightweight dropdown plugin
https://github.com/agence-webup/dropmic

dropdown es6 js lightweight vanilla

Last synced: about 1 month ago
JSON representation

A lightweight dropdown plugin

• Host: GitHub
• URL: https://github.com/agence-webup/dropmic
• Owner: agence-webup
• License: mit
• Created: 2016-08-31T15:59:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T02:55:28.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T18:48:24.601Z (about 2 months ago)
• Topics: dropdown, es6, js, lightweight, vanilla
• Language: JavaScript
• Homepage:
• Size: 681 KB
• Stars: 34
• Watchers: 8
• Forks: 4
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Logo dropmic](logo.svg)

## Introduction

**dropmic** is a lightweight dropdown plugin written in pure javascript

- No dependencies required

- No extra files to download

- Fully customizable via CSS

- Simple API

## Documentation

### Installation

Method                     | Procedure

-------------------------- | ---------

Bower                      | bower install dropmic --save

NPM                        | npm install dropmic

Yarn (obsolete since npm5) | yarn add dropmic

Download                   | [Download zip](https://github.com/agence-webup/dropmic/archive/master.zip)

Then dropmic have some css you will have to add (feel free to custom it for a better integration in your UI):

```html

```

Finally just link the dropmic's code at the end of your document:

```html

```

Or as a JS module:

```js

// ES6 module build

import dropmic from 'dropmic'

```

### Use

#### Create the base layout for your button

1. Add `data-dropmic-btn` attribute to your button

2. Create a div with a `dropmic` css class

3. Add a `data-dropmic-direction` attribute to the div (default behavior: `bottom-right`):

  - `data-dropmic-direction="top-left"`

  - `data-dropmic-direction="top-right"`

  - `data-dropmic-direction="top-middle"`

  - `data-dropmic-direction="bottom-left"`

  - `data-dropmic-direction="bottom-right"`

  - `data-dropmic-direction="bottom-middle"`

4. You can also add a `data-dropmic` attribute to you div for target it.

Example:

```html



  click me

  
quality content



```


#### Instantiate your new dropdown

```javascript

var dropmic = new Dropmic(document.querySelector('[data-dropmic="42"]'));

```

#### Add content

  You can create the content by yourself or use the API (cf. below)

  Use this template (`
` is needed, otherwise you can completely customize his content)


  ```html

  


      click me

      


          
Custom content

          


              


                  label link

              

              


                  label button

              

          

      

  

  ```


## API

You can use the API to generate content and open or close your dropdown with JS:

  Name                      | Parameter type(s)       | Description

  ------------------------- | ----------------------- | ----------

  addLink(label, url)       | string or int, string   | Add a link

  addBtn(label, callback)   | string or int, function | Add a button

  addLabel(label)           | string or int           | Add a text label

  setCustomContent(content) | string                  | Set a custom content

  updateTargetBtn(content)  | string                  | Update target button content

  open()                    |                         | Open your dropdown

  close()                   |                         | Close your dropdown

  Example:

  ```javascript

dropmic.setCustomContent("toto custom");

dropmic.addLink('link label', 'http://example.com');

dropmic.addBtn('close dropdown', function() {

    dropmic.close();

});

dropmic.addLabel('text label');

  ```

## Options

  Name        | Type     | Description

------------- | -------- | -----------------------------------------

  onOpen      | function | Callback to execute when dropmic is open

  onClose     | function | Callback to execute when dropmic is closed

  beforeOpen  | function | Callback to execute before opening dropmic

  beforeClose | function | Callback to execute before closing dropmic

  Example:

  ```javascript

var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'), {

    onOpen: function() {

        dropmic.updateTargetBtn("Click to close");

    },

    onClose: function() {

        dropmic.updateTargetBtn("Bottom right (default)");

    }

});

  ```

## Modify dropmic

 1. Setup dependencies: `npm i` (or `npm ci` if you don't want to impact package-lock)

 2. Run hot-reloads server for development `npm run dev`

 3. (Build for production `npm run build`)

## Roadmap

- [x] Add open and close public method in the API

- [x] Add top-middle and bottom-middle direction

- [x] A11y friendly (with keyboard navigation)

- [x] Permit to update button content with dropdown is open

- [ ] Instantiate severals dropmic with one initialization command

- [ ] Permit to update a list item value

## Licence

Released under the [MIT LICENSE](http://opensource.org/licenses/MIT)