# Class: Popin

## Popin

#### new Popin(userOptions)

  Create a simple popin

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `userOptions` | Object | ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `modal` | Boolean | <optional> | false |
  `marginHeight` | Number | <optional> | 20 |
  `autoResize` | Boolean | <optional> | false |
  `errorMessage` | String | <optional> | Error while loading... |
  `enableKeyboard` | Boolean | <optional> | true |
  `onOpen` | Callback | <optional> | $popin => {} |
  `onClose` | Callback | <optional> | $popin => {} |
  `onLoad` | Callback | <optional> | $popin => Promise.resolve() |
  `setLinkResponseType` | function | <optional> | ( url, $link ) => 'text' | Must return one of these values: arrayBuffer | blob | json | text | formData
  `setFormResponseType` | function | <optional> | $form => 'text' | Must return one of these values: arrayBuffer | blob | json | text | formData
  `checkValidity` | function | <optional> | $form => true | Must return true, false or a promise
  `normalize` | function | <optional> | (body, response, isHttpError) => { return { success: true, data: body } } |
  `autoHandleAjaxError` | function | <optional> | true | If false, ajax http error (404, 500, ...) should be handled in the normalize function
  `templates` | Object | <optional> |  | ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `popinLoader` | String | <optional> | <div class=\"popin-loader\"></div> |
  `popin` | String | <optional> | <div class=\"popin\"><div class=\"popin-content\"></div></div> |
  `bgLayer` | String | <optional> | <div class=\"bg-popin\"></div> |
  `errorMessage` | String | <optional> | <div class=\"error\"><%= message %></div> |
  `selectors` | Object | <optional> |  | ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `popin` | String | <optional> | .popin |
  `popinContent` | String | <optional> | .popin-content |
  `links` | String | <optional> | a[data-popin] |
  `forms` | String | <optional> | form[data-popin] |
  `btClosePopin` | String | <optional> | button[data-close-popin] |
  `openOnLoadAttribute` | String | <optional> | data-onload-popin" |
  `animations` | Object | <optional> |  | All functions return a promise ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `openBg` | function | <optional> | $bg => { $bg.style.display = 'block'; return Promise.resolve(); } |
  `closeBg` | function | <optional> | $bg => { $bg.style.display = 'none'; return Promise.resolve(); } |
  `initOpenPopin` | function | <optional> | $popin => { $popin.style.display = 'block'; $popin.style.opacity = 0; return Promise.resolve(); } |
  `openPopin` | function | <optional> | $popin => { $popin.style.opacity = 1; return Promise.resolve(); } |
  `closePopin` | function | <optional> | $popin => { $popin.style.display = 'none'; return Promise.resolve(); } |
  `openLoader` | function | <optional> | $loader => { $loader.style.display = 'block'; return Promise.resolve(); } |
  `closeLoader` | function | <optional> | $loader => { $loader.style.display = 'none'; return Promise.resolve(); } |

  See:
    - extra/modules/popin.md for details.

  ##### Example

      let popin = new Popin( popinOptions );
      popin.load( 'my-url.html', {method: 'post'} );

### Methods

#### clear()

  Remove the content of the popin

  ##### Returns:

  Type
    Promise

#### close()

  Close the popin

  ##### Returns:

  Type
    Promise

#### closeLoading()

  Close the popin loading

  ##### Returns:

  Type
    Promise

#### destroy()

  Remove all events, css class or inline styles

#### load(url, data [, type])

  Load a file and display it in the popin

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `url` | String |  |  |
  `data` | Object |  |  | All parameters available for window.fetch
  `type` | String | <optional> | text |

  ##### Returns:

  Type
    Promise

#### loadForm($form)

  Send a form and display the result it in the popin

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$form` | HTMLElement |

  ##### Returns:

  Type
    Promise

#### loadLink($link)

  Load a page from a link and display the result it in the popin

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$link` | HTMLElement |

  ##### Returns:

  Type
    Promise

#### open()

  Open the popin

  ##### Returns:

  Type
    Promise

#### openLoading()

  Open the popin loading

  ##### Returns:

  Type
    Promise

#### set(html, openFirst)

  Insert some html in the popin and open it

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `html` | String |
  `openFirst` | Boolean | Open the popin THEN insert the html

  ##### Returns:

  Type
    Promise

#### Search results