Skip to content

A slim library to pan scrollable containers on grab with the mouse.

License

Notifications You must be signed in to change notification settings

eglinetwork/grab-to-pan.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Grab-to-pan.js

A slim library with one purpose: An easy way to pan elements, i.e. change the scrolling offset of a container by moving the mouse while the mouse button is pressed. To see an example, check out this demo:

// Define the container that has to pan on grab
var g2p = new GrabToPan({
    element: scrollableContainer,         // required
    onActiveChanged: function(isActive) { // optional
        console.log('Grab-to-pan is ' + (isActive ? 'activated' : 'deactivated'));
    }
});
// Activate the grab-to-pan behaviour
g2p.activate();
// Deactivate the grab-to-pan behaviour
g2p.deactivate();
// Toggle the grab-to-pan behaviour: Activate if not activated, deactivate otherwise.
g2p.toggle();
// Is grab-to-pan active?
if (g2p.active) {
  console.log("Grab to pan is active!");
}

By default, when a link or input element is clicked, panning does not occur. You can change this behaviour by overriding the ignoreTarget method. For instance:

g2p.ignoreTarget = function(targetElement) {
    return false; // Always capture click, even if a link/input element is grabbed.
};

Two class names are introduced with this library, which can be used to give a visual indication that an element can be grabbed & dragged. See grab-to-drag.css for an example.

Code conventions

This library follows the code conventions of PDF.js, because it was written for use in PDF.js.

The library declares only one object, GrabToPan. CommonJS/AMD modularity is not included, but can easily be added if you wish:

// CommonJS
// <grab-to-pan.js code here>
module.exports = GrabToPan;

// AMD
define(function() {
    // <grab-to-pan.js code here>
    return GrabToPan; 
});

Supported browsers

The following browsers are supported:

  • Chrome 7
  • Firefox 4
  • Internet Explorer 10
  • Opera 11.60
  • Safari 5.1

Support for Internet Explorer 9 can be added by including a polyfill for classList. Support for Internet Explorer 8 can be added by including polyfills for classList, the DOM2 Event API, and matchesSelector.

Support for earlier versions of Chrome, Firefox, Opera and Safari can be added if you include a polyfill for Function.prototype.bind and classList.

Compatibility notes

  • In Safari for Windows and Chrome 21- for Windows, the cursor is not changed to "grab" / "grabbing".
  • In Opera 12-, the "move" cursor is shown instead of a grab/grabbing cursor, because custom cursors are not supported in Presto.

License

Copyright 2013 Rob Wu gwnRob@gmail.com

Licensed under the Apache 2.0 License.

About

A slim library to pan scrollable containers on grab with the mouse.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published