LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
      

        Ionic Template

        
          
        
        

          
            

{{myTitle}}

Swipe : {{data.swipe}}

Swipe Right : {{data.swiperight}}

Swipe Left : {{data.swipeleft}}

DoubleTap : {{data.doubletap}}

Tap : {{data.tap}}

Scroll : {{data.scroll}}

Swipe Left Or Right Direction Inside Me!

Swipe Right Inside Me!

Swipe Left Inside Me!

Double Tap Me

Tap Me

Scroll Me

CSS
body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}

.swipe-box {
  height: 250px;
  background-color: green;
  text-align: center;
  line-height: 250px;
  margin: 10px;
}
JS
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout) {
  $scope.myTitle = 'Template';

  $scope.data = {
    swipe : 0,
    swiperight: 0,
    swipeleft: 0,
    tap : 0,
    doubletap : 0,
    scroll : 0
  };

  $scope.reportEvent = function(event)  {
    console.log('Reporting : ' + event.type);
    
    $timeout(function() {
      $scope.data[event.type]++;
    })
  }


})

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      var gestureType = attrs.gestureType;

      switch(gestureType) {
        case 'swipe':
          $ionicGesture.on('swipe', scope.reportEvent, elem);
          break;
        case 'swiperight':
          $ionicGesture.on('swiperight', scope.reportEvent, elem);
          break;
        case 'swipeleft':
          $ionicGesture.on('swipeleft', scope.reportEvent, elem);
          break;
        case 'doubletap':
          $ionicGesture.on('doubletap', scope.reportEvent, elem);
          break;
        case 'tap':
          $ionicGesture.on('tap', scope.reportEvent, elem);
          break;
        case 'scroll':
          $ionicGesture.on('scroll', scope.reportEvent, elem);
          break;
      }

    }
  }
})
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID