Customizing swipe behavior by intercepting internal method bind() events

Let me start by outlining my objective. I have a hybrid app, but the swipe action on it doesn't quite give off the same feel as a native app. In native apps, when you swipe between tabs, you can see a smooth transition where the current tab slides out and the new tab slides in. It's not a sudden change; instead, if you don't lift your finger, you can be in a state where you see half of one tab and half of another (similar to WhatsApp tabs).

Currently, I'm using ngTouch's ngSwipeLeft and ngSwipeRight, but adding any animation after the swipe feels very abrupt and impacts the user experience negatively.

If we look at the documentation for $swipe, there are four events associated with a swipe action: start, move, end, and cancel. My question is, how can these events be overridden so that custom CSS can be applied during the transition?

How do we intercept swipe events to enhance functionality at that specific moment?

https://i.sstatic.net/tejmQ.png

javascriptcssangularjs

Answer №1

While my solution may differ, I wanted to share how you can customize the $swipe and bind methods.

For instance, if you create a directive called customizableswipe, you can override the four methods like this:

angular.module('xpresso')
.directive('customizableswipe',['$swipe','$window',
  function($swipe,$window){

return {
  restrict: 'EA',
  link: function(scope,ele,attrs,ctrl){
    var startX,startY;

    $swipe.bind(ele,{
      'start' : function(coords){
        console.log("Coord start is :: ",coords.x);
      },
      'move' : function(coords){
        console.log("Coord move is :: ",coords.x);
      },
      'end' : function(coords){
        console.log("Coord end is :: ",coords.x);
      },
      'cancel' : function(coords){
        console.log("Coord cancel is :: ",coords.x);
      }
    });
  }
}
}]);

I hope this information proves useful to someone :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I position a div to always display directly above another div?

I am currently working on centering a div and would like to utilize this jQuery function... jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", (($(window).height() - this.outerHeight()) / 2) + ...

javascriptjqueryhtmlcss

Material Design Lite - Adding a Search Bar to the Navigation Header

While loading this page from here, you may notice that the right side does not match the left. I am seeking guidance on how to fix this issue. I would like the padding on the right to mirror that of the left side. <div class="mdl-layout__hea ...

cssmaterial-design-lite

Encountering a 401~UNAUTHORIZED error while attempting to log the message received from a socket.io connection

I'm working on a website that displays the real-time value of Bitcoin in USD. I am using the Cryptocompare API with the help of socket.io Web Socket technology. Here's a snippet of my code: var ioClient = require('socket.io-client'); ...

javascriptnode.jsexpresswebsocketsocket.io

Can Protractor effectively test AngularJS applications in an end-to-end manner?

Exploring the realms of testing and diving into AngularJS, I find myself faced with a challenging assignment to test an intricate AngularJS project alongside the backend of the application. My current approach involves running e2e tests using protractor ...

angularjstestingprotractortest-coverage

Is there a way to determine if a string is empty, even if it contains hard returns?

I am currently working on a function that checks if a string is empty or not, but it seems to be missing the detection of new lines. export const isStrEmpty = function(text: string): boolean { return !text || text.match(/^ *$/) !== null; }; I attempted ...

javascripttypescript

In IE8, dynamically loaded CSS does not take effect on dynamically loaded JavaScript views

Concerns have been raised about possibly duplicating this question, especially since it has taken more than an hour to find a solution. The current scenario involves: A widget that requires dynamic loading of CSS Usage of Sammy.js and .ejs for views, wh ...

cssajaxinternet-explorerinternet-explorer-8ie-developer-tools

JSON request with jquery/ajax contains an unexpected token

I'm currently utilizing JQuery to retrieve a JSON file, but I keep encountering errors in the browser (specifically "Unexpected token :") Here is the snippet of my JavaScript code: fetchScenes: function() { $j.ajax({ crossDomain: ...

javascriptjqueryajaxjsonjsonp

Reactivity in Vue.js powered by ES6 classes

I am attempting to create a computed property in Vue.js that is associated with an ES6 class. Here is an example of my Vue instance setup: ... props: ['customClass'], computed: { localClass: { get() { return this.custom ...

javascriptvue.jsecmascript-6es6-classvue-reactivity

Tips for positioning multiple cubes next to each other with the correct perspective using CSS transforms

Currently, I have a project setup in Code Sandbox: https://codesandbox.io/s/zno5rk648p?module=%2Fsrc%2Fcomponents%2FCube.vue A snapshot is provided below (please note that the appearance of cubes may vary if you change the viewport size): https://i.ssta ...

cssvue.jscss-transforms

Adjust the size of a div using absolute positioning

Can a div with absolute position be resized? I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input. Moreover, is using absolute ...

csscss-grid

Creating a Custom Error Object in Feathersjs: A Step-by-Step Guide

If I were to throw a GeneralError when calling a service, how can I create an error object with the following structure: { "status": "Failed", "code": "500_1", "detail": "Something is wrong with your API" } I have attempted to add this in the error hook: ...

javascriptnode.jsfeathersjsfeathers-hookfeathers-service

Exploring the Advancement of Themes in Liferay

Struggling to create a Liferay 6.2 theme and feeling a bit confused. I started a new project, selected theme, clicked on next, chose velocity and _styled responsively. However, I actually want a standard theme that can be deployed without any changes comp ...

cssthemesliferayliferay-6liferay-theme

Sorting Values in an Array with Various Categories

In my project, I'm faced with the challenge of filtering an array that contains JSON objects retrieved using the SHOPIFY API. These objects represent blog posts and have metafields for location and age range. While I can successfully apply filters sep ...

javascriptjqueryarraysjsonfilter

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

javascripttypescriptnativescript

Issue detected: Code coverage functionality in Jest is not functioning as expected

When attempting to use jest --coverage --watch, the goal is to only see coverage related to the specific component being tested and to track increased coverage as more tests are added. However, despite successfully running modified tests, the resulting cov ...

javascriptreactjstestingjestjs

Creating personalized Bootstrap components

I am attempting to achieve a custom content layout in bootstrap that resembles the design of https://i.sstatic.net/nSK23.jpg However, I am facing an issue where the div with the black background overflows the parent div. Below is the code snippet: <d ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Synchronization issue between Material UI SelectField component and state is observed in React/Redux setup

My issue involves the LayoutSelector component which contains a drop-down form that updates the state.plate.layout. The state is passed as a prop to the component. On my local machine, the selected menu item accurately reflects the state changes - when a n ...

javascriptformsreactjsreduxmaterial-ui

Ways to leverage ember.js in a serverless environment

After checking out the example of ember.js on this website (http://todomvc.com/), I decided to clone the project onto my computer. Upon double-clicking the index.html file, the project ran smoothly, just as I had anticipated. However, following the instru ...

javascriptember.js

Including files in node package without specifying the name of the dist directory

In my library directory structure for seamless import by node js projects, it looks like this: my-lib/ ├─ dist/ │ ├─ index.js │ ├─ foo.js ├─ src/ │ ├─ index.ts │ ├─ foo.ts ├─ package.json Take a look at my package.j ...

javascriptnode.jstypescriptnpm