API Reference 0.6.0bootjackPopover

Popover class

A pop up component bound to the given Element.

class Popover extends Tooltip {
 
 static const String _NAME = 'popover';
 static const String _DEFAULT_TEMPLATE = 
     '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
 
 /** Construct a Popover component and wire it to [element].. See [Tooltip] 
  * for definitions of most parameters. The differences compared to tooltip
  * are:
  * 
  * + The default [placement] is 'right'.
  * + The default [trigger] is 'click'.
  * + In addition to [title], which is rendered in popover header, you can also 
  * specify [content], to be rendered in popover body. The [html] flag applies
  * to both of them.
  */
 Popover(Element element, {bool animation, String placement(Element elem), 
 String selector, String template, String trigger, String title(Element elem), 
 String content(Element elem), int delay, int showDelay, 
 int hideDelay, bool html, container}) : 
 this.template = _data(template, element, 'template', _DEFAULT_TEMPLATE),
 this.trigger  = _data(trigger,  element, 'trigger',  'click'),
 this._content = p.fallback(content, () => (Element elem) => elem.attributes['data-content']),
 super(element, animation: animation, placement: placement, selector: selector, 
 title: title, delay: delay, showDelay: showDelay, hideDelay: hideDelay, 
 html: html, container: container);
 
 /** Retrieve the wired Popover object from an element. If there is no wired
  * Popover object, a new one will be created.
  * 
  * + [create] - If provided, it will be used for Popover creation. Otherwise 
  * the default constructor with no optional parameter value is used.
  */
 static Popover wire(Element element, [Popover create()]) =>
     p.wire(element, _NAME, p.fallback(create, () => () => new Popover(element)));
 
 @override
 String get _type => _NAME;
 
 @override
 String get _placementDefault => 'right';
 
 @override
 Element get _arrow =>
     p.fallback(_arr, () => _arr = tip.query('.arrow'));
 Element _arr;
 
 /// The html template for popover.
 final String template;
 
 /// The trigger condition. Default: 'click'.
 final String trigger;
 
 /// The content message of the popover.
 String get content => p.fallback(_content(element), 
     () => element.attributes['data-content'], () => _contentDefault);
 
 String get _contentDefault => '';
 final _ToString _content;
 
 @override
 bool get hasContent => title != null || content != null;
 
 @override
 void _setContent() {
   _cnt(tip.query('.popover-title'), title);
   _cnt(tip.query('.popover-content'), content);
   tip.classes.removeAll(['fade', 'top', 'bottom', 'left', 'right', 'in']);
 }
 
}

Extends

Base > Tooltip > Popover

Static Methods

Popover wire(Element element, [Popover create()]) #

Retrieve the wired Popover object from an element. If there is no wired Popover object, a new one will be created.

  • create - If provided, it will be used for Popover creation. Otherwise the default constructor with no optional parameter value is used.

static Popover wire(Element element, [Popover create()]) =>
   p.wire(element, _NAME, p.fallback(create, () => () => new Popover(element)));

Constructors

new Popover(Element element, {bool animation, String placement(Element elem), String selector, String template, String trigger, String title(Element elem), String content(Element elem), int delay, int showDelay, int hideDelay, bool html, container}) #

Construct a Popover component and wire it to element.. See Tooltip for definitions of most parameters. The differences compared to tooltip are:

  • The default placement is 'right'.
  • The default trigger is 'click'.
  • In addition to title, which is rendered in popover header, you can also specify content, to be rendered in popover body. The html flag applies to both of them.

Popover(Element element, {bool animation, String placement(Element elem), 
String selector, String template, String trigger, String title(Element elem), 
String content(Element elem), int delay, int showDelay, 
int hideDelay, bool html, container}) : 
this.template = _data(template, element, 'template', _DEFAULT_TEMPLATE),
this.trigger  = _data(trigger,  element, 'trigger',  'click'),
this._content = p.fallback(content, () => (Element elem) => elem.attributes['data-content']),
super(element, animation: animation, placement: placement, selector: selector, 
title: title, delay: delay, showDelay: showDelay, hideDelay: hideDelay, 
html: html, container: container);

Properties

final ElementQuery $element #

inherited from Base

The dquery object of element. Equivalent to $(element).

final ElementQuery $element

final bool animation #

inherited from Tooltip

Whether to have animation. Default: true.

final bool animation

final container #

inherited from Tooltip

The container of tooltip Element. Accepted variable forms are selector String, Element, or ElementQuery object.

final container

final String content #

The content message of the popover.

String get content => p.fallback(_content(element), 
   () => element.attributes['data-content'], () => _contentDefault);

final Element element #

inherited from Base

The element which component wires to.

final Element element

final bool enabled #

inherited from Tooltip

Whether the tooptip mechanism is in effect.

bool get enabled => _enabled;

final bool hasContent #

Whether the tooltip message is non-empty.

docs inherited from Tooltip
@override
bool get hasContent => title != null || content != null;

final int hideDelay #

inherited from Tooltip

The delay time in milliseconds to show the tooptip. Default: 0.

final int hideDelay

final bool html #

inherited from Tooltip

Whether the tooplip content is HTML. If false, the content will be html-escaped. Default: false.

final bool html

final String selector #

inherited from Tooltip

The selector to locate descendant Elements which would trigger the tooltip. If absent, the tooltip will be triggered by the base Element of this component.

final String selector

final int showDelay #

inherited from Tooltip

The delay time in milliseconds to show the tooptip. Default: 0.

final int showDelay

final String template #

The html template for popover.

final String template

final Element tip #

inherited from Tooltip

The tooltip Element.

Element get tip =>
   p.fallback(_tip, () => _tip = new Element.html(template));

final String title #

inherited from Tooltip

The message to show in tooltip.

String get title =>
   p.fallback(element.attributes['data-original-title'], 
       () => _title(element), () => _titleDefault);

final String trigger #

The trigger condition. Default: 'click'.

final String trigger

Methods

void destroy() #

inherited from Tooltip

Destroy the component.

void destroy() {
 hide();
 $element.off(".${_type}");
 $element.data.remove(_type);
}

void disable() #

inherited from Tooltip

Disable tooptip.

void disable() {
 _enabled = false;
}

void enable() #

inherited from Tooltip

Enable tooptip.

void enable() {
 _enabled = true;
}

void hide() #

inherited from Tooltip

Hide the tooltip.

void hide() {
 final DQueryEvent e = new DQueryEvent('hide');
 $element.triggerEvent(e);
 if (e.isDefaultPrevented)
   return;
 
 tip.classes.remove('in');
 
 if (Transition.isUsed && tip.classes.contains('fade')) {
   ElementQuery $tip = $(tip);
   
   new Future.delayed(const Duration(milliseconds: 500), () {
     $tip.off(Transition.end);
     if (tip.parent != null)
       tip.remove();
   });
   $tip.one(Transition.end, (DQueryEvent e) {
     if (tip.parent != null)
       tip.remove();
   });
   
 } else {
   tip.remove();
   
 }
 
 $element.trigger('hidden'); // TODO: check timing
}

void show() #

inherited from Tooltip

Show the tooltip.

void show() {
 if (!hasContent || !_enabled) 
   return;
 
 final DQueryEvent e = new DQueryEvent('show');
 $element.triggerEvent(e);
 if (e.isDefaultPrevented) 
   return;
 
 _setContent();
 if (animation)
   tip.classes.add('fade');
 
 final String placement = p.fallback(_placement(element), () => _placementDefault);
 
 tip.remove();
 tip.style.top = tip.style.left = '0';
 tip.style.display = 'block';
 
 if (container != null)
   $(tip).appendTo(container);
 else
   $element.after(tip);
 
 final Rect pos = _position;
 final int actualWidth = tip.offsetWidth;
 final int actualHeight = tip.offsetHeight;
 int top, left;
 
 switch (placement) {
   case 'bottom':
     top = (pos.top + pos.height).round();
     left = (pos.left + (pos.width - actualWidth) / 2).round();
     break;
   case 'top':
     top = pos.top.round() - actualHeight;
     left = (pos.left + (pos.width - actualWidth) / 2).round();
     break;
   case 'left':
     top = (pos.top + (pos.height - actualHeight) / 2).round();
     left = pos.left.round() - actualWidth;
     break;
   case 'right':
     top = (pos.top + (pos.height - actualHeight) / 2).round();
     left = (pos.left + pos.width).round();
     break;
 }
 _applyPlacement(top, left, placement);
 $element.trigger('shown');
 
}

void toggle() #

inherited from Tooltip

Toggle visibility of tooltip.

void toggle() => tip.classes.contains('in') ? hide() : show();

void toggleEnabled() #

inherited from Tooltip

Toggle enable/disable state.

void toggleEnabled() {
 _enabled = !_enabled;
}