ng-ovh-responsive-popover

AngularJS module used to display a popover and adapt it to the screen dimension.

Install

$ yarn add @ovh-ux/ng-ovh-responsive-popover

Usage

import angular from 'angular';
import ngOvhResponsivePopover from '@ovh-ux/ng-ovh-responsive-popover';

angular.module('myApp', [ngOvhResponsivePopover]);

The two major directives are:

• the responsivePopover directive that will display a uibPopover to the DOM element you instanciate it;
• the responsivePopoverClass directive that is added to the popover popup.

Note: when ui-bootstrap will be updated to version >= 2.0, it should be possible to remove responsivePopover directive and use uibPopover directive with custom class responsive-popover-class. So responsivePopoverClass directive will be the only directive of this component.

Then inject responsivePopover module in your module declaration:

Documentation

responsivePopover - directive

This is the main directive of the responsivePopover module. In fact it's an extended uibPopover with an additional class applied to it's content template.

For available options, see the doc of uibPopover.

Example

The following example will open a popover with the content of path/of/popover/content.html file inside. This popover will be closed when focus is lost inside of it.

<button type="button"
        data-responsive-popover="'path/of/popover/content.html'"
        data-popover-placement="bottom-left"
        data-popover-trigger="focus">
</button>

responsivePopoverClass - directive

This directive manage the way the popover is displayed. This uses the configuration setted into the responsivePopoverProvider to detect if the popover needs to be displayed on full screen or to be displayed normally. It is automatically setted by responsivePopover directive.

Note: when ui-bootstrap version >= 2.0 will be used, the only thing to do should be to add a custom class with the 'popover-class' option of the uibPopover directive. To be tested.

responsivePopoverProvider - provider

• relates to the service : responsivePopover

responsivePopoverProvider allows developer to configure which mediaQuery will be considered as a mobile.

Methods

setMobileMediaQuery

Allows you to determine what app will consider as a mobile for responsive popover display.

Parameters

| Param | Type | Details | | ---- | ---- | ---- | | query | String | The matchMedia query that will be used to detect mobile. |

Returns

| Type | Description | | ---- | ---- | | String | The new query provided. |

Example

import angular from 'angular';

angular.module('myApp').config(
  /* @ngInject */ (responsivePopoverProvider) => {
    // tell to the module that we consider a mobile device with at least 800px width
    responsivePopoverProvider.setMobileMediaQuery('(max-width: 800px)');
  },
);

responsivePopover - service

• relates to the provider : responsivePopoverProvider

This service enable you to get configured values.

Methods

getMobileMediaQuery

Get the current configured media query. It is used to detect the popover display (simple popover or full screen popover for mobile).

Returns

| Type | Description | | ---- | ---- | | String | The configured mediaQuery. |

Test

$ yarn test

Related

• matchmedia-ng
• ui.bootstrap

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS