minimap

NOTE: This module is a port of a jQuery plugin using just Javascript. Minified and including the CSS file this module is 11kb.

The original author is Prince John Wesley.

The original plugin's repository can be found here.

Description: A preview of full webpage or its DOM element with flexible positioning and navigation support.

Getting Started

Download the latest code

Fork this repository or download js/css files from dist directory.

Including it on your page

Include this module on a page.

<!-- Alternatively can include non-minified files -->
<link rel="stylesheet" href="minimap.min.css" />
<script src="minimap.min.js"></script>

OR

With a module bundler such as Lasso.js.

var MiniMap = require('minimap-js');

Basic Usage

// 'element' is desired dom element
var minimap = new MiniMap(element, options);
minimap.show();

Options

heightRatio

height ratio of the view port. ratio can be in the range [0.0, 1.0). (default: 0.6)

widthRatio

width ratio of the view port. ratio can be in the range [0.0, 0.5). (default: 0.05)

offsetHeightRatio

Margin top ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: 0.035)

offsetWidthRatio

Margin left or right(based on position property) ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: 0.035)

allowClick

whether or not to allow clicking to scroll through the page on the minimap & region element. (default: true)

fadeHover

Whether or not to fade the element to hoverOpacity and a transition speed of hoverFadeSpeed seconds when mouse over. (default: false)

hoverOpacity

Opacity value [0.0, 1.0] to set the opacity of the element to if fadeHover is true. (default: 0.4)

hoverFadeSpeed

Transition speed [0.0, infinity) for the opacity if fadeHover is true. (default: 0.5)

position

position of the minimap. Supported positions are:

1. 'right' (default)
2. 'left'

touch

touch support. (default: true)

smoothScroll

linear animation support for scrolling. (dafault: true)

smoothScrollDelay

Smooth scroll delay in milliseconds. (default: 200ms)

disableFind

disableFind if true, prevents browser CTRL+F from finding duplicated text in minimap. (default: false)

Setters

function setPosition(position)

Set position property. position can be either 'left' or 'right'

function setHeightRatio(ratio)

Set heightRatio property.

function setWidthRatio(ratio)

Set widthRatio property.

function setOffsetHeightRatio(ratio)

Set offsetHeightRatio property.

function setOffsetWidthRatio(ratio)

Set offsetWidthRatio property.

function setSmoothScroll(smooth)

Set smoothScroll property

function setSmoothScrollDelay(duration)

Set setSmoothScrollDelay property.

Callback

function onPreviewChange(minimap, scale)

onPreviewChange callback will be triggered for the below cases:

1. View port is resized.
2. Calling setter functions.

Use this function to customize DOMs inside minimap.

Parameters:

minimap - $minimap DOM
scale - Scale object with `x` and `y` properties.(width/height ratio of minimap with respect to viewport)

Other functions

function show()

Show preview

function hide()

Hide preview

function toggle()

Toggle Preview

Default Settings

Mini-map with default values

var previewBody = new MiniMap(
    allowClick: true,
    fadeHover: false,
    hoverOpacity: 0.4,
    hoverFadeSpeed: 0.5,
    heightRatio: 0.6,
    widthRatio: 0.05,
    offsetHeightRatio: 0.035,
    offsetWidthRatio: 0.035,
    position: 'right',
    touch: true,
    smoothScroll: true,
    smoothScrollDelay: 200,
    onPreviewChange: function (minimap, scale) {},
    disableFind: false
});

CSS classes

Use the below css classes for customization

.minimap - Mini-map area

.miniregion - Mini-map view area

Caveats

1. Async updates to the dom elements after minimap was created may not reflect in the preview.

License

This plugin is licensed under the MIT license.

Copyright (c) 2014 Prince John Wesley