popgun
v1.0.6
Published
A pure Javascript popover component for high performance and feature-rich web applications
Downloads
28
Readme
[![npm][npm-badge]][npm-badge-url] [npm-badge]: https://img.shields.io/npm/v/popgun.svg [npm-badge-url]: https://www.npmjs.com/package/popgun
Popgun
What is Popgun?
Popgun is a pure Javascript popover component for high performance and feature-rich web applications!
How to Use
Simple implementation
Define a target element and set some inline attributes.
html
<!-- On hover, a text popover will appear. -->
<div popgun popgun-trigger="hover" popgun-text="Hello World"></div>
Register Groups and Schemas
If there are a lot of popgun elements, rather than define inline attributes, register groups and schemas.
html
<!-- On hover, an html element popover will appear -->
<div popgun popgun-group="sampleGroup1"></div>
<!-- On click or hover, a text popover will appear. -->
<div popgun popgun-group="sampleGroup2"></div>
<!-- On click or hover, a text popover will appear with the overriden inline attribute. -->
<div popgun
popgun-group="sampleGroup2"
popgun-text="Inline attribute override group attributes, which override schema options.">
</div>
js
// A base schema
var schema = {
hoverDelay: 200,
trigger: 'hover'
}
popgun.registerSchema('sampleSchema', schema);
// A group based on schema
var group = {
schemaId: 'sampleSchema',
options: {
html: '<div>html element</div>'
}
}
// Another group based on schema that overrides one of the schema attribute
var anotherGroup = {
schemaId: 'sampleSchema',
options: {
text: 'This is sample text.',
trigger: 'click hover'
}
}
popgun.registerGroup('sampleGroup1', group);
popgun.registerGroup('sampleGroup2', anotherGroup);
Popgun Attributes
Some Popgun attributes that you can define are:
- containerCushion: (int - default 10) the amount of padding between the popover border and the window.
- darkStyle: (boolean - default false) Sets a dark theme to the popover.
- disable: (boolean - default false) Clicking elsewhere on the page of a pinned popover will not hide the popm if this is set to true.
- disableClickOff: (boolean - default false) When triggering a popgun target, the popover will not display if this attribute is set to true.
- fadeDuration: (int - default 100) time for pop to fade in and out.
- html: an html element for the content of the popover (will take precedence over the text attribute).
- optimzePlacement: (boolean - default true) popgun will decide how to best position the popover.
- placement: (string - default 'top') you can set placement of popover around target - 'top', 'bottom', 'left', 'right'.
- reusePopover: (boolean - default true) boolean which sets whether popgun will reuse the same popover when moving between two Popgun targets of the same group.
- showDelay: (int - default 0) the time it takes between the user triggering the target and the popover appearing.
- text: text content for the popover.
- timeToHoverOnPop: (int - default 300) the time a user has to hover back over the popover when they hover off the target.
- tipClass: (string - default '') Adds css classes to the popover container (class names should be space separated).
- trigger: (string - default 'hover') triggers for the target to show pop - 'hover', 'click', 'focus'.
DOM Events
Throughout the life cycle of the popover, Popgun will fire the following events onto the target:
Show States
- PopgunContentSetup
- PopgunPrePosition
- PopgunPreShow
- PopgunShowing
Hide States
- PopgunPreHide
- PopgunHidden
js
el.addEventListener('PopgunPreShow', function(e) {
console.log('PopgunPreShow');
}, false);
Run Demo Popgun Application
Run bin/iqb install
to install the npm and typings dependencies.
Run bin/iqb start
to run a demo application with Popgun.