Repository: princejwesley/minimap Branch: master Commit: d0038d9dbb53 Files: 9 Total size: 25.4 KB Directory structure: gitextract_1p0wntoj/ ├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── minimap.jquery.json ├── package.json └── src/ ├── minimap.css └── minimap.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # Logs logs *.log # Runtime data pids *.pid *.seed # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release # Dependency directory # Commenting this out is preferred by some people, see # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- node_modules # Users Environment Variables .lock-wscript bower_components ================================================ FILE: Gruntfile.js ================================================ module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { mangle: true, sourceMap: false, preserveComments: 'some', }, dynamic_mappings: { files: [{ src: 'src/minimap.js', dest: 'dist/minimap.min.js', }, ], }, }, autoprefixer: { options: { diff: false, map: false, browsers: ['> 1%', 'last 5 versions', 'Firefox ESR', 'Opera 12.1'] }, prefixed_css: { src: 'src/minimap.css', dest: 'dist/minimap.min.css', }, }, jshint: { all: ['Gruntfile.js', 'src/*.js'], options: { multistr: true } }, cssmin: { my_target: { options: { keepSpecialComments: "*" }, files: [{ src: 'dist/minimap.min.css', dest: 'dist/minimap.min.css', ext: '.min.css' }] } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // Default task(s). grunt.registerTask('default', ['jshint', 'uglify', 'autoprefixer', 'cssmin']); }; ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2014 Prince John Wesley Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ [minimap](http://www.toolitup.com/minimap.html) - A jQuery Plugin =============== A preview of full webpage or its DOM element with flexible positioning and navigation support #####[Demo Page](http://www.toolitup.com/minimap.html) [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/princejwesley/minimap) ## Getting Started ### Download the latest code [Fork](https://github.com/princejwesley/minimap) this repository or download js/css files from `dist` directory. ### Including it on your page Include jQuery and this plugin on a page. ```html ``` ### Basic Usage ```javascript //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: 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 ```javascript 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 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](https://github.com/princejwesley/minimap/blob/master/LICENSE). Copyright (c) 2014 [Prince John Wesley](http://www.toolitup.com) ================================================ FILE: bower.json ================================================ { "name": "minimap", "version": "1.1.0", "homepage": "https://github.com/princejwesley/minimap", "authors": [ "princejwesley " ], "main" : "dist/minimap.min.js", "license": "MIT", "ignore": [ "!(dist)" ], "description" : "Minimap - A preview of full web page or its DOM element| a jquery plugin", "dependencies": { "jquery": ">=1.10.2" }, "keywords": [ "navigation", "preview", "minimap", "mini-map" ] } ================================================ FILE: minimap.jquery.json ================================================ { "name" : "minimap", "version": "1.0.0", "title": "A preview of full web page", "description" : "A preview of full web page", "author": { "name" : "Prince John Wesley", "email" : "princejohnwesley@gmail.com", "url" : "http://www.toolitup.com" }, "licenses": [ { "type" : "MIT", "url" : "https://github.com/princejwesley/minimap/blob/master/LICENSE" } ], "dependencies" : { "jquery": ">=1.8" }, "homepage" : "https://github.com/princejwesley/minimap", "docs" : "https://github.com/princejwesley/minimap", "demo" : "http://www.toolitup.com/minimap.html", "keywords" : ["minimap", "preview", "page-preview"], "bugs" : "https://github.com/princejwesley/minimap/issues" } ================================================ FILE: package.json ================================================ { "name": "minimap.js", "version": "1.0.0", "description": "A preview of full web page - a jQuery plugin", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0", "grunt-postcss": "~0.1.0", "grunt-contrib-cssmin" : "*", "grunt-autoprefixer" : "*" }, "keywords": [ "navigation", "preview", "minimap", "mini-map" ] } ================================================ FILE: src/minimap.css ================================================ /*! The MIT License (MIT) Copyright (c) 2014 Prince John Wesley Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. **/ .minimap { z-index : 10000; position : fixed; cursor: pointer; font-size: 1em; } .miniregion { z-index : 10001; position : fixed; background : transparent; border: 2px solid silver; border-radius: 10%; cursor: pointer; cursor: -webkit-grab; cursor: -moz-grab; } .miniregion.dragging { cursor: -webkit-grabbing; cursor: -moz-grabbing; } .miniregion:hover { box-shadow: 0 0 0.4em darkgrey; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ================================================ FILE: src/minimap.js ================================================ /*! The MIT License (MIT) Copyright (c) 2014 Prince John Wesley Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. **/ (function($, undefined) { "use strict"; $.fn.minimap = function(options) { var minimap = this; var $window = $(window); var fn = function() {}; var shown = true; var defaults = { heightRatio : 0.6, widthRatio : 0.05, offsetHeightRatio : 0.035, offsetWidthRatio : 0.035, position : "right", touch: true, smoothScroll: true, smoothScrollDelay: 200, onPreviewChange: fn, disableFind : false }; var settings = $.extend({}, defaults, options); var position = ["right", "left"]; //when invoked, this function prevents browsers from finding //duplicate text located in the minimap jQuery.fn.disableFind = function(){ return this.each(function (){ var newHTML = ""; // create a new blank string var stop = false; // boolean to toggle whether we're in a tag or not var currentElement = $(this); // variable to hold the current element var html = currentElement.html(); // get html from current element for (var i = 0; i < html.length; i++) // iterate through each character of the html { newHTML += html[i]; // insert current character into newHTML if (html[i] === '<') { stop = true }; // stop when entering a tag if (html[i] === '>') { stop = false }; // continue when exiting a tag if (stop === false) { // inject dot into newHTML newHTML += ''+ '.' +''; } if (html[i] === ' ') { newHTML += ' '; } // insert a space if the current character is a space } currentElement.html(newHTML); // replace current element with newHTML }); }; var validateProps = function(prop, value) { switch(prop) { case 'disableFind': if(value != true && value != false) throw "Invalid disableFind: " + value; break; case 'heightRatio': var heightRatio = value; if(!$.isNumeric(heightRatio) || heightRatio <= 0.0 || heightRatio > 1.0) throw "Invalid heightRatio: " + heightRatio; break; case 'widthRatio': var widthRatio = value; if(!$.isNumeric(widthRatio) || widthRatio <= 0.0 || widthRatio > 0.5) throw "Invalid widthRatio: " + widthRatio; break; case 'offsetHeightRatio': var offsetHeightRatio = value; if(!$.isNumeric(offsetHeightRatio) || offsetHeightRatio < 0.0 || offsetHeightRatio > 0.9) throw "Invalid offsetHeightRatio: " + offsetHeightRatio; break; case 'offsetWidthRatio': var offsetWidthRatio = value; if(!$.isNumeric(offsetWidthRatio) || offsetWidthRatio < 0.0 || offsetWidthRatio > 0.9) throw "Invalid offsetWidthRatio: " + offsetWidthRatio; break; case 'position': var p = value.toLowerCase(); var pos = position.indexOf(p); if(pos === -1) throw "Invalid position: " + settings.position; settings.position = p; break; case 'smoothScrollDelay': var smoothScrollDelay = value; if(((smoothScrollDelay | 0 ) !== smoothScrollDelay) || smoothScrollDelay < 4) throw "Invalid smoothScrollDelay(in ms): " + smoothScrollDelay; break; case 'touch': case 'smoothScroll': break; case 'onPreviewChange': var fn = value; if(!fn || !$.isFunction(fn)) throw "Invalid onPreviewChange: " + value; break; default: throw "Invalid validation property: " + prop; } }; //validate inputs for(var prop in settings) validateProps(prop, settings[prop]); var miniElement = minimap.clone(); miniElement.find('.minimap.noselect').remove(); miniElement.find('.miniregion').remove(); miniElement.addClass('minimap noselect'); //add the class that will be targeted by disableFind : true if(settings.disableFind === true){ miniElement.children().each(function() {$(this).addClass('unsearchable');}); } // remove events & customized cursors miniElement.children().each(function() {$(this).css({'pointer-events': 'none'});}); var region = $('
'); $($('body')[0]).append(region); $($('body')[0]).append(miniElement); //invoke the function that prevents browser from finding duplicate text in minimap $('.unsearchable').disableFind(); var scale = function() { return { x: ($window.width() / minimap.width()) * settings.widthRatio, y: ($window.height() / minimap.height()) * settings.heightRatio }; }; var onResizeHandler = function(e) { if(!shown) return; var s = scale(); var sc = 'scale(' + s.x + ','+ s.y + ')'; var offsetTop = $window.height() * settings.offsetHeightRatio; var offsetLeftRight = $window.width() * settings.offsetWidthRatio; var top = minimap.height() * (s.y - 1) / 2 + offsetTop; var leftRight = minimap.width() * (s.x - 1) / 2 + offsetLeftRight; var width = $window.width() * (1/s.x) * settings.widthRatio; var height = $window.height() * (1/s.y) * settings.heightRatio; var css = { '-webkit-transform': sc, '-moz-transform': sc, '-ms-transform': sc, '-o-transform': sc, 'transform': sc, 'top' : top, 'width' : width, 'height' : height, 'margin' : '0px', 'padding' : '0px' }; css[settings.position] = leftRight; miniElement.css(css); var regionTop = minimap.offset().top * s.y; var cssRegion = { width : miniElement.width() * s.x, height : $window.height() * s.y, margin : '0px', top : $window.scrollTop() * s.y + offsetTop - regionTop + 'px' }; cssRegion[settings.position] = offsetLeftRight + 'px'; region.css(cssRegion); settings.onPreviewChange(miniElement, s); }; var onScrollHandler = function(e) { if(!shown) return; var s = scale(); var offsetTop = $window.height() * settings.offsetHeightRatio; var top = minimap.offset().top * s.y; var pos = ($window.scrollTop()) * s.y; var regionHeight = region.outerHeight(true); var bottom = minimap.outerHeight(true) * s.y + top;// - regionHeight; if(pos + regionHeight + offsetTop < top || pos > bottom) { region.css({ display: 'none', }); } else { region.css({ top : pos + offsetTop - top + 'px', display : 'block' }); } }; var scrollTop = function(e) { if(!shown) return; var s = scale(); var offsetTop = $window.height() * settings.offsetHeightRatio; var top = minimap.offset().top * s.y; var regionHeight = region.outerHeight(true); var target = (e.clientY - regionHeight/2 - offsetTop + top) / s.y; if(e.type === 'click' && settings.smoothScroll) { var current = $window.scrollTop(); var maxTarget = minimap.outerHeight(true); target = Math.max(target, Math.min(target, maxTarget)); var direction = target > current; var delay = settings.smoothScrollDelay; var distance = Math.abs(current - target); var r = delay / distance; var unitScroll = 1; var unitDelay = 4; if(r >= 4) { unitDelay = parseInt(unitScroll); } else if(r >= 1) { unitScroll = parseInt(r) * 4; } else { unitScroll = (4 / r); } var next = current; var count = parseInt(distance / unitScroll); onSmoothScroll = true; // linear translate var smoothScroll = function() { next = next + (direction ? unitScroll : -unitScroll); if(--count <= 0) { clearInterval(timer); onSmoothScroll = false; next = target; } $window.scrollTop(next); }; var timer = window.setInterval(smoothScroll, unitDelay); } else { $window.scrollTop(target); } e.stopPropagation(); }; var mousedown = false; var onSmoothScroll = false; var onMouseupHandler = function(e) { mousedown = false; minimap.removeClass('noselect'); region.removeClass('dragging'); }; var onMousemoveHandler = function(e) { if(!mousedown || onSmoothScroll) return; scrollTop(e); }; var onClickHandler = function(e) { scrollTop(e); mousedown= false; }; var onMousedownHandler = function(e) { mousedown = true; minimap.addClass('noselect'); region.addClass('dragging'); }; onResizeHandler(); $window.on('resize', onResizeHandler); $window.on('scroll', onScrollHandler); $(document).on('mouseup', onMouseupHandler); $(document).on('mousemove', onMousemoveHandler); $(region).on('mousedown', onMousedownHandler); $(region).on('mouseup', onMouseupHandler); $(region).on('mousemove', onMousemoveHandler); $(region).on('click', onClickHandler); $(miniElement).on('mousedown', onMousedownHandler); $(miniElement).on('mouseup', onMouseupHandler); $(miniElement).on('mousemove', onMousemoveHandler); $(miniElement).on('click', onClickHandler); var lastTouchType = ''; var touchHandler = function(e) { var touches = e.changedTouches; // Ignore multi-touch if (touches.length > 1) return; var touch = touches[0]; var events = ["touchstart", "touchmove", "touchend"]; var mouseEvents = ["mousedown", "mousemove", "mouseup"]; var ev = events.indexOf(e.type); if (ev === -1) return; var type = mouseEvents[ev]; if (e.type === events[2] && lastTouchType === events[0]) { type = "click"; } var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(simulatedEvent); e.preventDefault(); lastTouchType = e.type; }; if (settings.touch) { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); } var setPosition = function(pos) { var oldValue = settings.position; validateProps('position', pos); if(oldValue !== settings.position) { var css = {}; css[oldValue] = ''; onResizeHandler(); region.css(css); miniElement.css(css); } }; var setProperty = function(propName, redraw) { return function(value) { validateProps(propName, value); settings[propName] = value; if(redraw) onResizeHandler(); }; }; var show = function() { if(shown) return; miniElement.show(); region.show(); shown = true; onResizeHandler(); }; var hide = function() { if(!shown) return; miniElement.hide(); region.hide(); shown = false; }; var toggle = function() { miniElement.toggle(); region.toggle(); shown = !shown; if(shown) onResizeHandler(); }; return $.extend({}, this, { "setPosition": setPosition, "setHeightRatio": setProperty('heightRatio', true), "setWidthRatio": setProperty('widthRatio', true), "setOffsetHeightRatio": setProperty('offsetHeightRatio', true), "setOffsetWidthRatio": setProperty('offsetWidthRatio', true), "setSmoothScroll" : setProperty('smoothScroll'), "setSmoothScrollDelay" : setProperty('smoothScrollDelay'), "show" : show, "hide" : hide, "toggle" : toggle }); }; }(jQuery));