Adds ability to prevent panning using attribute

Gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
       '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
       '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
       '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
-      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+      ' Licensed MIT %> */\n',
     // Task configuration.
     concat: {
       options: {

README.md

@@ -11,6 +11,15 @@ Pan Directive for Angular.js - Drag to scroll behavior
 
 Add ```panhandler``` as an attribute to the element on which you would like to enable panning.  Thats it!  If you would like to make sure your inner content fits to a certain size, you can specify a ```content-{width|height}``` attribute.
 
+
+### Advanced Usage
+
+If you need to disable panning (temporarily) for some of the content elements,
+you can set the `preventPan` attribute on the panhandler element to true.
+
+This is useful in the case that you would like to enable drag-n-drop
+for some elements within the pannable area.
+
 ### Example
 
 Javascript
@@ -34,6 +43,22 @@ HTML
 </div>
 ```
 
+### Prevent Example
+
+HTML
+
+```html
+<div ng-app="pannableExamples">
+  <div ng-controller="Example1">
+    <input name="preventPan" type="checkbox" ng-model="preventPanCheck" />
+    <label for="preventPan">Prevent Panning</label>
+    <div panhandler content-width="100em" prevent-pan="{{ preventPanCheck }}">
+      Stuff to pan around!
+    </div>
+  </div>
+</div>
+```
+
 ### Development
 
 For development, you will need node.js installed.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-panhandler",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "authors": [
     "Nathan Bleigh <[email protected]>"
   ],

dist/angular-panhandler.js

@@ -1,11 +1,11 @@
-/*! angular-panhandler - v0.0.1 - 2013-12-05
-* Copyright (c) 2013 ; Licensed  */
+/*! angular-panhandler - v1.0.0 - 2014-10-17
+* Copyright (c) 2014 ; Licensed MIT %> */
 (function(){
   'use strict';
   angular.module('panhandler', [])
     .directive('panhandler', function PanhandlerFactory($document) {
       PanhandlerFactory.$inject = ['$document'];
-      function Panhandler ($el, attr) {
+      function Panhandler ($el, attr, $scope) {
         this.$el = $el;
         this.contentWidth = attr.contentWidth;
         this.contentHeight = attr.contentHeight;
@@ -14,19 +14,23 @@
         this.origin = [];
         this.startPos = [];
         this.pos = [0,0];
-        
+
         this.touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
         this.has3d = has3d();
+        this.overEvent = 'mouseover';
         this.downEvent = this.touch ? 'touchstart':'mousedown';
         this.upEvent = this.touch ? 'touchend':'mouseup';
         this.moveEvent = this.touch ? 'touchmove':'mousemove';
         this.noTouch = vendorize('user-select', 'none');
-
+
+        this.$scope = $scope;
+
         this.startBind = angular.bind(this,this.startDrag);
         this.endBind = angular.bind(this,this.endDrag);
         this.updateBind = angular.bind(this,this.updateDrag);
         this.mouseOutBind = angular.bind(this,this.mouseOut);
-
+        this.mouseOverBind = angular.bind(this,this.mouseOver);
+
         this.init();
       }
       Panhandler.prototype = {
@@ -76,7 +80,13 @@
           this.minX = Math.min(this.viewDimensions[0] - this.contentDimensions[0],0);
           this.minY = Math.min(this.viewDimensions[1] - this.contentDimensions[1],0);
         },
+        isPrevented: function () {
+          return this.$scope.preventPan === true || this.$scope.preventPan === 'true';
+        },
         startDrag: function(e){
+          if (this.isPrevented()) {
+            return false;
+          }
           this.origin = this.positionFromEvent(e);
           this.startPos = [this.pos[0],this.pos[1]];
           this.cacheBounds();
@@ -107,8 +117,14 @@
         },
         makeInteractive: function(){
           this.draggable.on(this.downEvent,this.startBind);
+          if (!this.touch) {
+            this.draggable.on(this.overEvent,this.mouseOverBind);
+          }
           this.$el.on('$destroy',this.destroy);
         },
+        mouseOver: function (e) {
+          this.grabCursor();
+        },
         mouseOut: function(e){
           var el = e.target;
           var isParent = el.querySelector && el.querySelector('.panhandler-wrap');
@@ -125,13 +141,15 @@
         grabCursor: function(){
           var isWk = navigator.userAgent.match(/WebKit/);
           var isFF = navigator.userAgent.match(/Gecko/);
-          if(isWk){
-            this.draggable.css('cursor','-webkit-grab');
+          var cursor = 'move';
+          if (this.isPrevented()) {
+            cursor = '';
+          } else if (isWk) {
+            cursor = '-webkit-grab';
           }else if(isFF){
-            this.draggable.css('cursor','-moz-grab');
-          }else{
-            this.draggable.css('cursor','move');
+            cursor = '-moz-grab';
           }
+          this.draggable.css('cursor',cursor);
         },
         grabbingCursor: function(){
           var isWk = navigator.userAgent.match(/WebKit/);
@@ -146,9 +164,12 @@
         }
       };
       return {
+        scope: {
+          preventPan: '@preventPan'
+        },
         link: function link(scope,element,attr){
           setTimeout(function(){
-            new Panhandler(element,attr);
+            new Panhandler(element, attr, scope);
           });
         }
       };
@@ -244,4 +265,4 @@
       document.body.removeChild(el);
       return (doeshave !== undefined && doeshave.length > 0 && doeshave !== "none");
     }
-}());
+}());

example/examples.js

@@ -5,12 +5,11 @@
     .controller('Example1', function Example1($scope) {
       $scope.gridItems = generateGrid(30);
     });
-
   function generateGrid(count){
     var items = [];
     for(var i=0;i<count;i++){
       items.push({ label: count });
     }
     return items;
   }
-}());
+}());

example/index.html

@@ -14,7 +14,9 @@ <h1>Panhandler</h1>
         <h3>Tile Grid</h3>
         <div ng-app="pannableExamples">
           <div ng-controller="Example1">
-            <div class="grid" panhandler content-width="100em">
+            <input name="preventPan" type="checkbox" ng-model="preventPan" />
+            <label for="preventPan">Prevent Panning</label>
+            <div class="grid" panhandler content-width="100em" prevent-pan="{{preventPan}}">
               <div class="grid-block" ng-repeat="item in gridItems">
                 <span class="grid-number">{{$index + 1}}</span>
               </div>
@@ -27,4 +29,4 @@ <h3>Tile Grid</h3>
     <script src="/js/angular-panhandler.js"></script>
     <script src="/examples.js"></script>
   </body>
-</html>
+</html>