Skip to content

Simple vertical and horizontal swipe gesture directive for angular js (forked for Tag site redesign)

License

Notifications You must be signed in to change notification settings

jbkly/angular-swipe-tagsite

 
 

Repository files navigation

angular-swipe-tagsite (forked for Tag site redesign)

Simple vertical/horizontal swipe gesture directives and a swipe service for angular js >= 1.4. Small extension of the existing angular $swipe service.

Install

  • Add this line to your bower.json dependencies and run bower install afterwards.
"angular-swipe-tagsite": "~0.1.1"
  • Include the required source file (this path or similar)
<script src="bower_components/dist/angular-swipe-tagsite.js"></script>
  • Inject the swipe module into your app.
angular.module('app', ['swipe']);

Usage

Module Name (Dependency)

  • swipe

Directives

  • ng-swipe-up
  • ng-swipe-down
  • ng-swipe-left
  • ng-swipe-right

Directive Attributes

ng-swipe-disable-mouse "This attribute is useful for text that should still be selectable by the mouse and not trigger the swipe action."

Service

  • swipe

Example

<div class="page" ng-controller="AppCtrl">
    <div class="container" ng-swipe-up="swipe($event)">
      <h1>Swipe me up!</h1>
    </div>
</div>
var app = angular.module('app', [ 'swipe' ]);
app.controller('AppCtrl', function AppCtrl($scope) {
  $scope.swipe = function($event) {
    console.log($event);
  };
})

Known issues and workarounds

  • ng-swipe-up and ng-swipe-down uses preventDefault when you start swiping. This prevents clicks from giving focus to input fields. Adding a noPreventDefault class to these elements will not preventDefault when the swipe start on them and thus allow clicks to work.

About

Simple vertical and horizontal swipe gesture directive for angular js (forked for Tag site redesign)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 81.1%
  • HTML 18.9%