मोबाइल कोणीय यूआई - टच इवेंट

टच और इसकी घटनाओं के साथ काम करने के लिए आपको निम्नलिखित मॉड्यूल जोड़ने की आवश्यकता है -

mobile-angular-ui.gestures

यदि आप केवल टच मॉड्यूल में रुचि रखते हैं, तो आप केवल मोबाइल-कोणीय-ui.gestures.touch जोड़ सकते हैं ।

$ टच, टच मॉड्यूल के साथ उपलब्ध एक सेवा है। यह किसी भी इनपुट डिवाइस पर काम करेगा, जिसके साथ आप काम करना चाहते हैं। यह आंदोलन, अवधि, वेग, दिशा आदि जैसे विवरण देता है।

$ टच में तरीके

$ स्पर्श में उपलब्ध तरीके निम्नलिखित हैं -

बाँध

आइए हम बाँध विधि पर एक नज़र डालें ।

Syntax

$touch.bind(element, eventHandlers, [options])

Parameters

element - html एलिमेंट जिसे आप टच डिटेल्स के साथ डील करना चाहते हैं।

eventHandlers- विशिष्ट स्पर्श घटनाओं के लिए हैंडलर के साथ एक वस्तु। इवेंटहैंडलर उपलब्ध हैं -

start - यह टचस्टार्ट इवेंट के लिए कॉलबैक है।
end - यह टचेंड के लिए एक कॉलबैक घटना है।
move - यह टचमॉव इवेंट के लिए कॉलबैक है।
cancel - यह टचस्केल इवेंट के लिए कॉलबैक है।

options - यह एक वस्तु है जिसमें विवरण निम्नानुसार हो सकते हैं -

movementThreshold- पूर्णांक मान। टचमोव हैंडलर्स को शुरू करने से पहले आंदोलन के पिक्सल की संख्या।
valid - इसका एक फ़ंक्शन जो एक बूलियन मान लौटाता है जो तय करता है कि क्या एक स्पर्श को संभाला या अनदेखा किया जाना चाहिए।
sensitiveArea- यह एक फंक्शन या एलिमेंट या बाउंडिंगक्लायंटRect हो सकता है। संवेदनशील क्षेत्र स्पर्श को जारी करने के लिए सीमाओं को परिभाषित करता है जब आंदोलन बाहर होता है।
pointerTypes - यह पॉइंटर का एक सरणी है जिसमें चाबियाँ होती हैं जो डिफ़ॉल्ट पॉइंटर घटनाओं के नक्शे का सबसेट होती हैं।

$ टच में उपलब्ध प्रकार

$ स्पर्श में उपलब्ध निम्न प्रकार हैं -

संपत्ति	प्रकार	विवरण
प्रकार	तार	यह आपको घटना का प्रकार बताएगा। उदाहरण के लिए - टचमोव, टचस्टार्ट, टचेंड, टचस्केल
TIMESTAMP	दिनांक	जब टच हुआ तो टाइमस्टैम्प
अवधि	पूर्णांक	वर्तमान स्पर्श घटना और स्पर्श प्रारंभ के बीच अंतर
startx	नाव	टचस्टार्ट का एक्स समन्वय
startY	नाव	वाई टचस्टार्ट का समन्वय
PrevX	नाव	पहले हुए टचस्टार्ट या टचमोव का एक्स समन्वय
prevY	नाव	पहले हुए टचस्टार्ट या टचमोव का वाई समन्वय
एक्स	नाव	एक्स स्पर्श कार्यक्रम का समन्वय
y	नाव	वाई स्पर्श कार्यक्रम का समन्वय
कदम	नाव	PrevX, prevY और x, y बिंदुओं के बीच की दूरी
stepX	नाव	PrevX और x अंक के बीच की दूरी
stepY	नाव	PrevY और y बिंदुओं के बीच की दूरी
वेग	नाव	प्रति सेकंड एक स्पर्श घटना के पिक्सल में वेग
औसत गति	नाव	प्रति सेकंड टचस्टार्ट घटना का औसत वेग
दूरी	नाव	StartX, startY और x, y बिंदुओं के बीच की दूरी
distanceX	नाव	StartX और x पॉइंट के बीच की दूरी
distanceY	नाव	StartY और y के बीच की दूरी
संपूर्ण	नाव	कुल आंदोलन यानी क्षैतिज और ऊर्ध्वाधर आंदोलन पूरे डिवाइस में किया जाता है
totalX	नाव	कुल आंदोलन यानी क्षैतिज दिशा। इसमें टर्नआर्ड्स और दिशा के परिवर्तन भी शामिल हैं
totaly	नाव	कुल आंदोलन यानी ऊर्ध्वाधर दिशा। इसमें टर्नआर्ड्स और दिशा के परिवर्तन भी शामिल हैं
दिशा	नाव	स्पर्श के बाएं, ऊपर, नीचे, दाएं दिशा स्थान
कोण	नाव	X और y अक्ष से डिग्री में कोण

यहाँ एक कार्य उदाहरण है जो स्पर्श प्रकार दिखा रहा है।

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Mobile Angular UI Demo</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
      <style>
         a.active {
            color: blue;
         }
      </style>
   </head>

   <body ng-app="myFirstApp" ng-controller="MainController" class="listening">
      
      <!-- Sidebars -->
      <div class="sidebar sidebar-left ">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-turn-off='uiSidebarLeft'>
                  <a class="list-group-item" href="/">Home Page </a>
                  <a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </div>
            </div>
         </div>
      </div>
      <div class="sidebar sidebar-right">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-toggle="uiSidebarRight">
                  <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </div>
            </div>
         </div>
      </div>
      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </div>
            <div class="btn-group pull-left">
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </div>
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </div>
            </div>
         </div>
         <div class="navbar navbar-app navbar-absolute-bottom">
            <div class="btn-group justified">
               <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
               <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
            </div>
         </div>

         <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
      
      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></div>
   </body>
</html>

वहाँ है touchtest निर्देशक app.js में जोड़ा गया है जो $ touch.bind विधि का उपयोग करता है।

directive('touchtest', ['$touch', function($touch) {
   return {
      restrict: 'C',
      link: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingClientRect();
               $scope.touch=touch;
               $scope.$apply();
            },
            cancel: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            move: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            end: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            }
         });
      }
   };
}]);

App.js के अंदर पूरा कोड इस प्रकार है -

/* eslint no-alert: 0 */

'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
   'mobile-angular-ui',
   'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
   return {
      restrict: 'C',
      link: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingClientRect();
               $scope.touch=touch;
               $scope.$apply();
            },
            cancel: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            move: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            end: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            }
         });
      }
   };
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to TutorialsPoint!";
});

src/home/home.html

नीचे दिए गए निर्देशों के अनुसार डायरेक्टिव टचस्ट का उपयोग html के अंदर किया जाता है -

<div class="section touchtest">
   <h4>Touch Around on the screen to see the values changing</h4>
   <div>
      <p>type: {{touch.type}}</p>
      <p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
      <p>point: [{{touch.x}}, {{touch.y}}]</p>
      <p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
      <p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
      <p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
      <p>velocity: {{touch.velocity}} px/sec</p>
      <p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
      <p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
   </div>
</div>

अब हम ब्राउज़र में डिस्प्ले का परीक्षण करते हैं। परिणामी स्क्रीन इस प्रकार है -