DomVerticalMiniMap
Description
Component for creating vertical mini-map on html-page for document.body element.
Component inject in DOM of page and has position: fixed.
Installation
NMP
npm install dom-vertical-mini-mapManual
Download files from repository and use on page:
Glossary
MapElement - root HTMLElement of DomVerticalMiniMap.
ScrollMapElement - HTMLElement represented Window on MapElement.
MapPointElement - HTMLElement represented founded HTMLElement on MapElement.
Configuration
styles
Styles of MapElement.
Type: Object
Required: false
styles.backgroundColor
Value of CSS property background-color of MapElement.
Type: String
Default: rgba(248, 249, 250, 1)
styles.borderColor
Value of CSS property background-color of MapElement.
Type: String
Default: rgba(108, 117, 125, 1)
styles.position
Position of MapElement on page.
Type: String
Values: left, right
Default: right
styles.width
Value of CSS property background-color of MapElement.
Type: String
Default: 1rem
styles.zIndex
Value of CSS property background-color of MapElement.
Type: Number
Default: 1000
scroll
Styles of MapElement.
Type: Object
Required: false
styles.backgroundColor
Value of CSS property background-color of MapElement.
Type: String
Default: rgba(248, 249, 250, 1)
styles.borderColor
Value of CSS property background-color of MapElement.
Type: String
Default: rgba(108, 117, 125, 1)
styles.position
Position of MapElement on page.
Type: String
Values: left, right
Default: right
styles.width
Value of CSS property background-color of MapElement.
Type: String
Default: 1rem
styles.zIndex
Value of CSS property background-color of MapElement.
Type: Number
Default: 1000
scroll
Options of ScrollMapElement.
Type: Object
Required: false
scroll.enabled
Enables ScrollMapElement.
Type: Boolean
Default: true
scroll.styles
Styles of ScrollMapElement.
Type: Object Required: false
scroll.styles.backgroundColor
Value of CSS property background-color of ScrollMapElement. Use 'alpha' for opacity.
Type: String
Default: rgba(108, 117, 125, 0.3)
points
Array of objects. Every object configure one MapPointElement.
Type: Array Required: true
Object of points array
draw
Configure drawing of MapPointElement.
Type: Object
Required: True
draw.selector
CSS selector for searching HTMLElements on page by document.querySelectorAll().
Type: String
Required: true
draw.selectorContains
CSS selector for searching by querySelector() HTMLElement in element.
Filter elements founded by draw.selector if specified.
Type: String
Required: false
draw.styles
Styles of MapPointElement.
Type: Object
Required: false
draw.styles.backgroundColor
Value of CSS property background-color of MapPointElement.
Type: String
Default: rgba(220, 53, 69, 1)
draw.styles.outlineColor
Value of CSS property background-color on hover of MapPointElement.
Type: String
Default: value of styles.borderColor of MapElement
focus
Configure focus for MapPointElement.
Type: Object
Required: false
focus.enabled
Enables focus element on MapPointElement click.
Type: Boolean
Default: false
focus.selector
CSS selector for searching by querySelector() HTMLElement (for focus) in element founded by draw.selector.
Type: String
Default: element founded by draw.selector
scroll
Configure scroll for MapPointElement.
Type: Object
Required: false
scroll.enabled
Enables scroll on MapPointElement click.
Type: Boolean
Default: true
scroll.selector
CSS selector for searching by querySelector() HTMLElement (for scroll) in element founded by draw.selector.
Type: String
Default: element founded by draw.selector
scroll.type
Scrolls the Window to element (top/bottom/middle of Window) in the Document.
Type: String
Values: top, bottom, middle
Default: top
titleConstructor
Array of objects. Every object concat text for title attribute of MapPointElement. Text separates by \n.
Priorities for concat of one object: text, textContent, attribute.
Type: Array
Required: false
Object of titleConstructor array
text
Custom text.
Type: String
Required: false
selector
CSS selector for searching by querySelector() HTMLElement for analyze.
Type: String
Required: false
attribute
Take value from attribute of element founded by selector.
Type: String
Required: false
textContent
Take string from textContent of element founded by selector.
Type: String
Required: false
Getters
root
Return MapElement.
version
Return version of DomVerticalMiniMap.
Methods
create
Create and inject DomVerticalMiniMap component in DOM.
destroy
Reset DomVerticalMiniMap component and remove it from DOM.
refresh
Reinitialize MapPointElements and refresh styles of #scrollElement and MapPointElements.
Usage
See examples.
Live examples: