princejwesley / minimap Goto Github PK

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

Home Page: http://www.toolitup.com/minimap.html

License: MIT License

JavaScript 90.66% CSS 9.34%

minimap's Introduction

minimap - A jQuery Plugin

A preview of full webpage or its DOM element with flexible positioning and navigation support #####Demo Page ![Gitter](https://badges.gitter.im/Join Chat.svg)

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 plugin on a page.

<link rel="stylesheet" href="minimap.min.css" />
<script src="jquery.js"></script>
<script src="minimap.min.js"></script>

Basic Usage

//Desired dom element
var previewBody = $('body').minimap();

Properties

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)

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 = $('body').minimap(
    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.

minimap's People

Contributors

Stargazers

Watchers

minimap's Issues

Hi. I love your minimap :)

Im using it currently for a dark souls world map website.
http://e3.netne.net/darksoulsmap/

But for some reason, well, I know the reason but I'm unware how to fix them.
Im using multiple images and get small white lines in the mini-map like this, https://snag.gy/1GDsaU.jpg

If you know how to fix it then it be nice =)

I'd like to use this on a project but pulling in jQuery is unfortunately out of the question, I was wondering if you would be okay with me converting this to a pure JavaScript version, removing jQuery as a dependency.

Minimap does not scroll all the way to the top

On the demo, once the minimap has been engaged it will not scroll all the way to the top (in webkit / Opera). The issue seems to be that the top of the viewport is always where the mouse pointer is, but at the start the viewport is above the minimap.

The mouseover event of the minimap obviously doesn't extend past itself, so the viewport can never get back up to the top unless the page scrollbar is used.

I've put a border around the minimap to illustrate.

Starting position:

Scrolled to the "top" after activation

Real time update

How can update the mini-map when the html change?

Idea: Chrome extension

I would be great it is available as a Browser extension.

Bug with fixed elements

White and light-gray elements are fixed elements with full width/height. They obviously don't look that nice on the minimap.

Compatibility with Ace Editor

Great job on this btw! Now, I'm trying to add this to ace editor but it seems to be not working. https://github.com/ajaxorg/ace

Any ideas or perhaps a workaround?

Thanks.