DomVerticalMiniMap

Table of contents

• Description
• Installation
  • NMP
  • Manual
• Glossary
• Configuration
  • styles
  • scroll
    • styles
  • points
    • draw
      • styles
    • focus
    • scroll
    • titleConstructor
• Getters
• Methods
• Usage
• License

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-map

Manual

Download files from repository and use on page:

<link rel="stylesheet" href="dom-vertical-mini-map.css" />
<script src="dom-vertical-mini-map.js"></script>

Glossary

Name	Description
MapElement	root HTMLElement of DomVerticalMiniMap
ScrollMapElement	HTMLElement represented Window on MapElement.
MapPointElement	HTMLElement represented founded HTMLElement on MapElement.

Configuration

Name	Type	Required	Description
styles	Object	false	Styles of MapElement.
scroll	Object	false	Options of ScrollMapElement.
points	Array	true	Array of objects. Every object configure one MapPointElement.

styles

Name	Type	Required	Values	Default	Description
backgroundColor	String	false		rgba(248, 249, 250, 1)	Value of CSS property background-color of MapElement.
borderColor	String	false		rgba(108, 117, 125, 1)	Value of CSS property border-color of MapElement.
position	String	false	left, right	right	Position of MapElement on page.
width	String	false		1rem	Value of CSS property width of MapElement.
zIndex	Number	false		1000	Value of CSS property z-index of MapElement.

scroll

Name	Type	Required	Default	Description
enabled	Boolean	false	true	Enables ScrollMapElement.
styles	Object	false		Styles of ScrollMapElement.

scroll.styles

Name	Type	Required	Default	Description
backgroundColor	String	false	rgba(108, 117, 125, 0.3)	Value of CSS property background-color of ScrollMapElement. Use alpha for opacity.

points

Name	Type	Required	Description
draw	Object	true	Configure drawing of MapPointElement.
focus	Object	false	Configure focus for MapPointElement.
scroll	Object	false	Configure scroll for MapPointElement.
titleConstructor	Array	false	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.

points.draw

Name	Type	Required	Description
selector	String	true	CSS selector for searching HTMLElements on page by document.querySelectorAll().
selectorContains	String	false	CSS selector for searching by querySelector() HTMLElement in element. Filter elements founded by draw.selector if specified.
styles	Object	false	Styles of MapPointElement.

points.draw.styles

Name	Type	Required	Default	Description
backgroundColor	String	false	rgba(220, 53, 69, 1)	Value of CSS property background-color of MapPointElement.
outlineColor	String	false	value of styles.borderColor	Value of CSS property outline-color on hover of MapPointElement.

points.focus

Name	Type	Required	Default	Description
enabled	Boolean	false	false	Enables focus element on MapPointElement click.
selector	String	false	element founded by draw.selector	CSS selector for searching by querySelector() HTMLElement (for focus) in element founded by draw.selector.

points.scroll

Name	Type	Required	Values	Default	Description
enabled	Boolean	false		true	Enables scroll on MapPointElement click.
selector	String	false		element founded by draw.selector	CSS selector for searching by querySelector() HTMLElement (for scroll) in element founded by draw.selector.
type	String	false	top, bottom, middle	top	Scrolls the Window to element (top/bottom/middle of Window) in the Document.

points.titleConstructor

Name	Type	Required	Description
text	String	false	Custom text.
selector	String	false	CSS selector for searching by querySelector() HTMLElement for analyze.
attribute	String	false	Take value from attribute of element founded by selector.
textContent	String	false	Take string from textContent of element founded by selector.

Getters

Name	Description
root	Return MapElement.
version	Return version of DomVerticalMiniMap.

Methods

Name	Description
create	Create and inject DomVerticalMiniMap component in DOM.
destroy	Reset DomVerticalMiniMap component and remove it from DOM.
refresh	Reinitialize MapPointElements and refresh styles of ScrollMapElement and MapPointElements.

Usage

See examples.

License

MIT