minimap-js v1.0.0
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 jQuery and 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
orright
(based onposition
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:
'right'
(default)'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:
- View port is resized.
- 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
- 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
7 years ago